/*
File: myAppSketch.js
Date: 2026-04-20
Author: klp
Purpose: User-only design area for p5.js drawing logic.

How to use:
1. Put your creative drawing code inside drawMyDesign(ctx).
2. Leave p5jsTemplate1Sketch.js mostly unchanged so app controls keep working.
3. Use the ctx object for template data (grid, themeColor, running, etc.).
*/

console.log("[myAppSketch.js] User design area loaded");


//customize:
const appImgPrefix = "myApp";  // customize: prefix for saved canvas image filenames

// ── Grid bounds ───────────────────────────────────────────────────────────────
// customize: set the grid bounds and step sizes here (in grid units, not pixels)
let ULx = -10, ULy = 10, LRx = 10, LRy = -10, stepX = 1, stepY = 1;

// ── Frame rate ────────────────────────────────────────────────────────────────
// customize: set the desired frame rate here
let fr = 30;

// ── Theme Color ───────────────────────────────────────────────────────────────
// customize: set your theme color here (called from setup() after colorMode is ready)
// null is ok for no theme.
let themeColor;
function initThemeColor() {
    themeColor = new SWColor(280, 100, 100, 100, "themeColor");
    //themeColor = null;
}//end initThemeColor

function drawMyDesign(ctx) {
    // Example starter: draw a themed dot at the canvas center.
    // Delete/replace this block with your own design.
    push();
    noStroke();
    fill(ctx.themeColor ? ctx.themeColor.col : color(0, 0, 0, 100));
    circle(width / 2, height / 2, 10);
    pop();
}//end drawMyDesign
