This is a standalone SketchWave template (v2) — a self-contained
demonstration built with SketchWave functions and objects to showcase
specific concepts, technique, or visual effect. It is not a SketchWaveJS saga stage, but it can be used as the basis for one if desired.
The HTML file currently uses script tags to link a handful of SketchWave shape classes to the app. To use more shapes, just supply additional script tags (and ensure the necessary SketchWaveJS files are in the shapeClasses directory). The template's main sketch logic is in swTemplate2BaseSketch.js, which serves as a scaffold for the basic app operation. We've tried to structure the code such that few adjustments are needed there to customize your sketch. The primary changes you'll make will be in myAppSketch2.js, where your creative design and any custom controls will live.
💡 How This Template Works
The canvas, grid, and control panel are managed by swTemplate2BaseSketch.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.
swTemplate2BaseSketch.js-
Canvas setup, control-panel wiring, grid, resize handling, and
save-image. Reads its defaults from your sketch — no changes needed (hopefully).
- 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, SketchWaveJS functions used,
and anything worth remembering about this template here.