🎮ArcadeLab
🎨~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).

Ready to publish? Paste your HTML file and get a URL.

🚀Publish your thing

Other prompts