Quickstart – p5.js

Ready to turn ideas into interactive visuals? This p5.js guide gets your sketch running fast and teaches you how to bundle it for a static export.

Setup

1. Copy the PLACEHOLDER p5.js starter folder to your team directory.
2. Open index.html in your browser and confirm you see the starter sketch.
3. Explore sketch.js to find setup() and draw()—your playground lives there.

Core Loop

• Use setup() for initial settings like canvas size, colours, and assets.
• Use draw() for animation, input handling, and game state updates.
• Create helper functions (e.g., drawUI(), updatePlayer()) to keep things tidy.

Teaching AI Concepts

• Visualise probabilities with bars, gradients, or particle effects.
• Simulate model “attention” by highlighting important game elements.
• Show cause-and-effect: reward loops, data bias, or hallucinations.

Assets & Packaging

1. Store audio, images, and fonts in /assets and load them with relative paths.
2. Preload assets in preload() so the experience feels snappy.
3. Keep file sizes friendly—compress images and trim audio loops.

AI Assist Prompts

“You are a senior p5.js developer. Refactor this code to add keyboard controls for WASD and arrow keys while keeping it export-ready: PLACEHOLDER code snippet.”

Final Checks

• Zip the project, unzip it somewhere else, and rerun to confirm all assets load.
• Use the QA checklist to test controls, clarity, and restart flow.
• Record a quick PLACEHOLDER GIF for your demo deck.

Need support? The mentor table marked “Creative JS” has your back all day.