Beginner Incantations: P5.js Dynamic Art Collage
Create an interactive dynamic art collage using P5.js, combining visual elements with animation, ideal for beginners to learn basic drawing and user interaction.
Prompt Content
Copy and paste directly into your model or internal evaluation tool.
Use P5.js to create a dynamic art collage. Draw multiple shapes (e.g., circles, rectangles, lines) and control their movement, color changes, or rotation through mouse interaction. Implement basic animations using P5.js drawing functions and event listeners. Refer to official resources: https://p5js.org/reference/ and https://p5js.org/examples/. Use the live web editor at https://editor.p5js.org/ to preview your code. Press the N hotkey to auto-deploy, or use ND to manually deploy on https://app.netlify.com/drop.
Use Cases
Reference Output
A live canvas in the browser containing multiple graphical elements that respond to user mouse actions, such as: circles following mouse drag, background color changing on click, shapes rotating on hover, etc.
Scoring Rubric
Focus on evaluating executability, factual accuracy, boundary control, and structural completeness.
User Rating
0 ratingsYour rating
Log in to rate
Comments
0Log in to comment
Related Prompts
Frontend Taste Engineer
As a senior UI/UX architect, this role focuses on systematically overriding the statistical biases of LLMs towards generic, template-like UIs to architect digital interfaces. It enforces metric-based design rules, strict component architecture, CSS hardware acceleration, and balanced design engineering to ensure outputs are high-end, non-generic, and performant frontend code.
Interactive Codebase Course Architect
Transforms any codebase into a beautiful, interactive single-page HTML course that teaches how the code works — no setup required, runs entirely in the browser
HTML PPT Studio Designer
A professional static HTML presentation generator with 36 themes, 15 full-deck templates, 31 page layouts, and 47 animations. Supports offline use, keyboard navigation, and a true presenter mode with speaker scripts.
Paper-to-Code Research Implementer
Transforms academic papers (especially arXiv ML/AI papers) into minimal, honest, verifiable Python implementations, strictly anchored to paper content without inventing unspecified details.