AI Kaleidoscope Generator - Symmetrical Pattern Art Draw mesmerizing symmetrical patterns with real

function setup() {
  // Create a canvas in WEBGL mode for better gradient and glow effects
  createCanvas(windowWidth, windowHeight, WEBGL);

  // Use HSB color mode for easier color harmony generation and cycling
  colorMode(HSB, 360, 100, 100, 100);

  // Set angle mode to RADIANS for rotate() function
  angleMode(RADIANS);

  // No fill for strokes
  noFill();

  // Initial stroke weight
  strokeWeight(2);

  // Generate an initial color palette
  generatePalette();

  // Initialize dat.GUI
  gui = new dat.GUI();
  gui.add(settings, 'symmetryCount', [6, 8, 12]).name('Symmetry Axes');
  gui.add(settings, 'rotationSpeed', 0, 0.02).name('Rotation Speed');
  gui.add(settings, 'colorCyclingSpeed', 0, 0.1).name('Color Cycle Speed');
  gui.add(settings, 'showSymmetryLines').name('Show Symmetry Lines');
  gui.add(settings, 'isCrystallized').name('Crystallize Pattern');
  gui.add(settings, 'clearCanvas').name('Clear Canvas');
  gui.add(settings, 'suggestPalette').name('AI Suggest Palette'); // Manual trigger for AI suggestion

  // Request device access for motion sensors (for mobile devices)
  if (typeof DeviceOrientationEvent !== 'undefined' && typeof DeviceOrientationEvent.requestPermission === 'function') {
    DeviceOrientationEvent.requestPermission()
      .then(permissionState => {
        if (permissionState === 'granted') {
          console.log('Device orientation permission granted.');
        } else {
          console.log('Device orientation permission denied.');
        }
      })
      .catch(console.error);
  }
}

function draw() {
  // Always clear the background in WEBGL mode
  background(0);

  // Translate to the center of the canvas in 3D space and move slightly back
  // This allows for better perspective and viewing of 2D shapes in WEBGL
  translate(0, 0, -min(width, height) / 4);

  // Draw the radial gradient background
  drawRadialGradient();

  // Apply global rotation based on settings and device sensors
  // Use deviceRotationX and deviceRotationY for subtle device-based rotation
  rotateZ(frameCount * settings.rotationSpeed + deviceRotationY * 0.005);
  rotateX(deviceRotationX * 0.005);

  // Calculate the angle for each symmetry slice
  let angle = TWO_PI / settings.symmetryCount;

  // Draw all symmetrical reflections
  for (let i = 0; i < settings.symmetryCount; i++) {
    push(); // Save the current transformation state

    // Rotate for each symmetry slice
    rotateZ(i * angle);

    // Draw the strokes
    drawStroke(drawingPoints, settings.isCrystallized);

    // Apply horizontal reflection (scale Y by -1)
    scale(1, -1);

    // Draw the reflected strokes
    drawStroke(drawingPoints, settings.isCrystallized);

    pop(); // Restore the previous transformation state
  }

  // Draw symmetry lines if enabled
  if (settings.showSymmetryLines) {
    drawSymmetryLines();
  }
}

function drawStroke(points, crystallized) {
  if (points.length === 0) return;

  // Use beginShape() and endShape() for drawing connected lines or curves
  // WEBGL mode requires specifying a shape type (e.g., LINES, POINTS, TRIANGLES, etc.)
  // For strokes, we'll use a series of short lines or curves.
  // Using POINTS or LINES within a single beginShape is more efficient in WEBGL.

  // Drawing points as individual points is simpler in WEBGL
  if (crystallized || points.length < 2) {
    beginShape(POINTS);
    for (let point of points) {
      let col = palette[floor(frameCount * settings.colorCyclingSpeed + points.indexOf(point)) % palette.length];
      stroke(col);
      // Apply subtle glow effect
      drawingContext.shadowColor = color(hue(col), saturation(col), brightness(col), 50).toString();
      drawingContext.shadowBlur = 10;
      vertex(point.x, point.y);
    }
    endShape();
  } else {
    // For smooth curves, we can draw a series of short lines between points
    // or use curveVertex() but that often looks chunky in WEBGL without custom shaders.
    // Let's try drawing simple lines between points for a smoother appearance.
    beginShape(LINES);
    for (let i = 0; i < points.length - 1; i++) {
      let p1 = points[i];
      let p2 = points[i+1];
      let col = palette[floor(frameCount * settings.colorCyclingSpeed + i) % palette.length];
      stroke(col);
      drawingContext.shadowColor = color(hue(col), saturation(col), brightness(col), 50).toString();
      drawingContext.shadowBlur = 10;
      vertex(p1.x, p1.y);
      vertex(p2.x, p2.y);
    }
    endShape();
  }
  drawingContext.shadowBlur = 0; // Reset shadow blur
}

function drawSymmetryLines() {
  let angle = TWO_PI / settings.symmetryCount;
  let radius = min(width, height) / 2; // Radius to draw lines to

  for (let i = 0; i < settings.symmetryCount; i++) {
    push();
    rotateZ(i * angle);
    stroke(255, 50); // Semi-transparent white lines
    line(0, 0, radius, 0); // Draw line from center to edge
    pop();
  }
}

function generatePalette() {
  palette = [];
  // Pick a random base hue (0-360)
  let baseHue = random(360);

  // Generate a harmonious palette (e.g., analogous or complementary)
  // For this example, let's create a triad palette with variations.
  palette.push(color(baseHue, 80, 90)); // Bright jewel tone
  palette.push(color(baseHue, 60, 70)); // Slightly darker
  palette.push(color(baseHue, 40, 50)); // Even darker

  // Add a complementary hue for contrast
  let complementaryHue = (baseHue + 180) % 360;
  palette.push(color(complementaryHue, 80, 90));

  // Add analogous hues
  palette.push(color((baseHue + 30) % 360, 70, 80));
  palette.push(color((baseHue - 30 + 360) % 360, 70, 80));

  // Shuffle the palette for more varied color cycling
  palette = shuffle(palette);

  console.log('New color palette generated:', palette.map(c => c.toString()));
}

function drawRadialGradient() {
  // In WEBGL mode, we can use drawingContext to create gradients on the 2D canvas context
  let gradient = drawingContext.createRadialGradient(0, 0, 0, 0, 0, min(width, height) / 2);

  // Jewel-toned gradient from center to edge
  gradient.addColorStop(0, color(0, 0, 0, 100).toString()); // Center: Dark, fully opaque
  gradient.addColorStop(0.3, color(250, 50, 15, 80).toString()); // Inner: Subtle jewel tone
  gradient.addColorStop(0.7, color(200, 50, 10, 50).toString()); // Middle: Slightly cooler jewel tone
  gradient.addColorStop(1, color(0, 0, 0, 100).toString()); // Edge: Dark, fully opaque

  drawingContext.fillStyle = gradient;
  drawingContext.fillRect(-width / 2, -height / 2, width, height); // Fill the entire canvas area
}

function mousePressed() {
  // Clear drawingPoints to start a new stroke
  drawingPoints = [];
  // Add the initial point
  drawingPoints.push(createVector(mouseX - width / 2, mouseY - height / 2));
}

function mouseDragged() {
  // Add current mouse position to drawingPoints array
  drawingPoints.push(createVector(mouseX - width / 2, mouseY - height / 2));

  // Simple "AI" complexity analysis: Suggest new palette every 500 points
  if (drawingPoints.length % 500 === 0) {
    generatePalette();
    console.log('AI suggested a new palette based on pattern complexity!');
  }
}

function touchStarted() {
  // Prevent default browser behavior (e.g., scrolling)
  return false;
}

function touchMoved() {
  // Record touch positions similar to mouseDragged
  drawingPoints.push(createVector(touchX - width / 2, touchY - height / 2));

  // Simple "AI" complexity analysis: Suggest new palette every 500 points
  if (drawingPoints.length % 500 === 0) {
    generatePalette();
    console.log('AI suggested a new palette based on pattern complexity!');
  }

  // Prevent default browser behavior (e.g., scrolling)
  return false;
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function deviceMoved() {
  // Update device rotation variables
  // rotationX: tilt front/back (-180 to 180)
  // rotationY: tilt left/right (-90 to 90)
  deviceRotationX = rotationX;
  deviceRotationY = rotationY;
}