This is a standalone SketchWaveJS template — a self-contained
demonstration built with SketchWave functions and objects to showcase
specific concepts, technique, or visual effect.
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 swTemplate1Sketch.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.
Your primary work will be done in myAppSketch.js.
💡 How This Template Works
The canvas, grid, and control panel are provided by the p5.js template.
The sketch logic inside draw() and any supporting classes
are specific to this demonstration.
- The canvas starts with a light-gray background and an optional visible grid.
- Press G to toggle the grid on or off at any time.
- ▶ Start toggles to ⏸ Pause once clicked.
- ↺ Reset is available after Start is pressed at least once.
- 💾 Save Image captures a snapshot of the current canvas.
To customize this template for your application, search for the word 'customize' in the HTML, CSS, and JS files to find comments indicating where you can modify content, styles, and logic to suit your needs.
Remember: Your primary design will be implemented in myAppSketch.js, in the function drawMyDesign(ctx). As you work, it's very helpful to open the developer console in your browser (press Ctrl+Shift+J) to check for any error messages or logs that can guide your debugging process. Of course, you will want to modify this modal to describe your design. Happy coding!
📦 Use This Template for Your Own Design
- Click Download Template below to save the
.zip file.
- Unzip the folder and open it in your code editor (e.g., VS Code).
- Open
sketches/myAppSketch.js and add your drawing code inside the drawMyDesign(ctx) function.
- Search for the word
customize throughout the HTML, CSS, and JS files to find all the places you can personalize the app — title, colors, layout, and more.
- Open
glowPath1.html in a browser (or use the Live Server extension in VS Code) to preview your design.
⬇ Download Template
🧑💻 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 app here.