AI Symmetry Canvas - Kaleidoscope Drawing with 6-Fold Mirroring - xelsed.ai

function setup() {
  // Create a canvas that fills the entire browser window
  createCanvas(windowWidth, windowHeight);

  // Set the color mode to HSB (Hue, Saturation, Brightness)
  // Hue: 0-360 degrees (color wheel)
  // Saturation, Brightness: 0-100%
  colorMode(HSB, 360, 100, 100);

  // Ensure line endings are rounded for a softer appearance
  strokeCap(ROUND);

  // Tell p5.js not to fill shapes, only draw their outlines
  noFill();

  // Set the initial background to a very dark grey
  background(0, 0, 10);

  // Calculate the angle for each symmetrical rotation step
  // TWO_PI is a full circle in radians (360 degrees)
  angleStep = TWO_PI / numSymmetry;
}

function draw() {
  // --- Fade Effect ---
  // Draw a semi-transparent dark rectangle over the canvas each frame
  // This creates a subtle trailing/fade effect for the drawn lines.
  fill(0, 0, 10, fadeAlpha); // HSB: dark grey with low alpha (transparency)
  rect(0, 0, width, height); // Cover the entire canvas
  noFill();                  // Switch back to no fill for lines


  // --- Interactive Drawing Logic ---
  // Only draw if the mouse is currently pressed and dragged
  if (mouseIsPressed) {
    // 1. Calculate Mouse Speed for Stroke Weight
    // The distance between the current mouse position and the previous mouse position
    let speed = dist(mouseX, mouseY, pmouseX, pmouseY);

    // Map the mouse speed to a stroke weight range.
    // Slower movements (speed close to 0) result in thicker lines (up to 8 pixels).
    // Faster movements (speed up to 30 pixels/frame) result in thinner lines (down to 1 pixel).
    // The 'true' argument clamps the values to ensure they stay within the specified range.
    strokeWeight(map(speed, 0, 30, 8, 1, true));

    // 2. Calculate Hue Based on Angle from Center
    // Determine the angle of the current mouse position relative to the center of the canvas
    // atan2() correctly handles angles in all four quadrants.
    let angle = atan2(mouseY - height / 2, mouseX - width / 2);

    // Map this angle (which ranges from -PI to PI radians, or -180 to 180 degrees)
    // to a hue value from 0 to 360 degrees for a rainbow effect.
    let hue = map(angle, -PI, PI, 0, 360);

    // Set the stroke color using the dynamically calculated hue,
    // a fixed saturation (80%), and full brightness (100%).
    stroke(hue, 80, 100);

    // --- Rotational Symmetry Drawing ---
    // 'push()' saves the current drawing state (translation, rotation, color, etc.)
    // This allows us to apply transformations for symmetry without affecting other parts of the sketch.
    push();

    // Move the origin (0,0) of the canvas to its center
    // All subsequent drawing commands will be relative to this new center.
    translate(width / 2, height / 2);

    // Loop 'numSymmetry' times to draw each symmetrical line
    for (let i = 0; i < numSymmetry; i++) {
      // Rotate the entire drawing canvas by 'angleStep' for each iteration
      // The rotation happens around the current origin (which is the center of the canvas).
      rotate(angleStep);

      // Draw the line segment.
      // The coordinates passed to line() must be relative to the *current* origin (the center).
      // So, we subtract width/2 and height/2 from the absolute mouse coordinates.
      line(pmouseX - width / 2, pmouseY - height / 2, mouseX - width / 2, mouseY - height / 2);
    }

    // 'pop()' restores the drawing state that was saved by 'push()',
    // returning the canvas origin and rotation to their default state.
    pop();
  }
}

function keyPressed() {
  // If the pressed key is 'R' (case-insensitive)
  if (key === 'R' || key === 'r') {
    // Clear the canvas by redrawing the dark background
    background(0, 0, 10);
  }
}

function windowResized() {
  // Resize the canvas to match the new dimensions of the browser window
  resizeCanvas(windowWidth, windowHeight);
  // Clear the canvas after resizing to prevent distortion of previous drawings
  background(0, 0, 10);
}