A SketchWave-enabled template for building a p5js app
...loading...
Canvas:
Grid:
🌐 Environment
💡 About This App
This is a standalone p5js template (v2) — a self-contained
demonstration built with p5.js functions and objects to showcase a
specific concept, technique, or visual effect.
It uses some classes from the SketchWaveJS library for convenience, but it is not a
SketchWaveJS saga stage and does not rely on any saga-specific features.
💡 How This Template Works
The canvas, grid, and control panel are managed by p5jsTemplate2BaseSketch.js.
You should not need to edit that file. Your design lives entirely in
myAppSketch2.js, and page-level content (title, hero text, modal notes)
lives in this HTML file.
myAppSketch2.js
Your creative drawing code (drawMyDesign), theme color,
grid bounds, frame rate, background color defaults, and the optional
one-time initMyDesign() startup hook.
p5jsTemplate2BaseSketch.js
Canvas setup, control-panel wiring, grid, resize handling, and
save-image. Reads its defaults from your sketch — no changes needed.
This HTML file
Title, hero heading, nav links, footer, and this modal.
The background color well is not hardcoded here — it is
initialized from DEFAULT_BG_HEX in your sketch.
💡 How to Use
Press ▶ Start to begin the animation; click again to pause.
Press ↺ Reset to restore defaults and restart.
Press G to toggle the coordinate grid.
Press 💾 Save Image to capture a PNG snapshot.
To customize this template, search for the word customize in the HTML and
myAppSketch2.js to find every place designed for student changes.
🧑💻 Developer Notes
Developer
Your Initials Here
Date
Completion Date Here
Commentary
Add notes about design decisions, p5.js functions used,
and anything worth remembering about this template here.