# SketchWave Template 1

A template to jump start SketchWave projects

...loading...

Canvas: Grid:

🌐 Environment
Show grid `G`
Background color BG opacity: 100

## 💡 About This App

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

1. Click Download Template below to save the `.zip` file.
2. Unzip the folder and open it in your code editor (e.g., VS Code).
3. Open `sketches/myAppSketch.js` and add your drawing code inside the `drawMyDesign(ctx)` function.
4. 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.
5. Open `SWTemplate1.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.