🎨~5 min from prompt to published URL
How do I prompt Claude or ChatGPT to make a p5.js sketch?
p5.js is a creative-coding library that produces generative art, interactive sketches, and creative-data visualizations. ArcadeLab auto-injects the p5 CDN. The prompt below ensures the AI uses p5's global mode (setup/draw) and doesn't try to import the CDN script itself.
Build a complete single-file HTML p5.js sketch. Don't include the p5 CDN script — ArcadeLab loads it automatically when listed in the header. Requirements: - All JavaScript and CSS inline; no external files - File under 500KB - Use createCanvas(windowWidth, windowHeight) so it works at any viewport - No network calls — generate visuals procedurally - Use p5's global mode (setup, draw functions at top level) - Listen for windowResized() to update the canvas size Add this ARCADELAB header at the very top of the file: <!--ARCADELAB title: [Your Sketch Title] description: [One short sentence] libraries: p5 emoji: [single emoji] color: [red, orange, green, blue, purple, pink, teal, or gold] --> The sketch should: [DESCRIBE YOUR SKETCH — what you see, how it moves, any interactions] Output the complete HTML file. After, tell me: "Copy the code, then go to arcadelab.ai/publish and paste it."
Notes: Best for: generative art, particle systems, interactive backgrounds, audio-reactive visuals, sound toys, drawing apps, simulations. Describe the visual outcome you want and the kind of interaction (mouse, keyboard, touch).
Related guide
🎨How do I share a p5.js sketch as a playable URL?Library page
🛠️ p5.js (creative coding) on ArcadeLab →Ready to publish? Paste your HTML file and get a URL.
🚀Publish your thing