Sketch 2026-02-16 07:50

function setup() {
  // Create a canvas that fills the window, using WEBGL for potential 3D features
  createCanvas(windowWidth, windowHeight, WEBGL);
  
  // Switch to orthographic (2D) projection within the WEBGL context
  // This makes drawing 2D shapes like circle() behave more predictably
  ortho(); 
  
  noStroke(); // No outlines for the shapes

  // Initialize a sine wave oscillator
  osc = new p5.Oscillator('sine');
  osc.amp(0); // Start with 0 amplitude (silent)
  osc.start(); // Start the oscillator, but it won't be heard until amplitude increases

  // Initialize an amplitude object to measure the oscillator's sound level
  amp = new p5.Amplitude();
}

function draw() {
  background(0); // Black background

  // --- Interaction ---
  // Determine current X and Y positions from touch or mouse
  // Use touches.length > 0 as a robust check for touch interaction
  let currentX = touches.length > 0 ? touchX : mouseX;
  let currentY = touches.length > 0 ? touchY : mouseY;

  // Map X position to oscillator frequency
  // As you move left to right, the pitch changes from low to high
  frequency = map(currentX, 0, width, 100, 1000);
  osc.freq(frequency); // Set oscillator frequency

  // Map Y position to oscillator amplitude (volume)
  // Moving up increases amplitude, moving down decreases it (silent at bottom)
  let amplitudeLevel = map(currentY, 0, height, 0.5, 0);
  osc.amp(amplitudeLevel, 0.1); // Fade amplitude over 0.1 seconds for smooth change

  // Map Y position to visual density
  // Moving up increases the number of shapes in the grid
  density = map(currentY, 0, height, 10, 50);

  // --- Sensor Input (Device Orientation) ---
  // rotationX and rotationY are p5.js global variables that
  // provide device orientation data (pitch and roll).
  // These will only work on devices with accelerometers/gyroscopes
  // and if the browser grants access.
  rotateX(radians(rotationX)); // Rotate the whole scene based on device's X-axis tilt
  rotateY(radians(rotationY)); // Rotate the whole scene based on device's Y-axis tilt

  // --- Generative Visual Pattern ---
  // Set color mode to HSB (Hue, Saturation, Brightness) for vibrant colors
  colorMode(HSB); 

  // Calculate spacing for the grid based on current density
  let spacing = width / density;

  // Loop through a grid to draw circles
  // In WEBGL mode with ortho(), (0,0) is at the center of the canvas
  // So we iterate from -width/2 to width/2 and -height/2 to height/2
  for (let x = -width / 2; x <= width / 2; x += spacing) {
    for (let y = -height / 2; y <= height / 2; y += spacing) {
      // Calculate a Perlin noise value for each position
      // Perlin noise creates natural-looking, flowing patterns
      let n = noise(x * 0.01, y * 0.01, frameCount * 0.005);

      // Modulate circle size based on noise value and density
      let circleSize = map(n, 0, 1, 5, spacing * 0.8);

      // Modulate hue (color) based on noise value
      let hue = map(n, 0, 1, 0, 360);

      // Modulate brightness based on the current audio amplitude
      // As the sound gets louder, the shapes get brighter
      let brightness = map(amp.getLevel(), 0, 0.5, 50, 100); 

      // Set fill color and draw the circle
      fill(hue, 80, brightness);
      circle(x, y, circleSize); // [p5.js Reference: circle()](https://p5js.org/reference/p5/circle/)
    }
  }

  // --- Display Info (Optional) ---
  // Switch back to RGB color mode for text
  colorMode(RGB); 
  fill(255); // White text
  textSize(16);
  textAlign(LEFT, TOP);
  // Uncomment these lines to see the live values for debugging:
  // text(`Frequency: ${frequency.toFixed(2)} Hz`, -width/2 + 10, -height/2 + 10);
  // text(`Amplitude: ${amp.getLevel().toFixed(2)}`, -width/2 + 10, -height/2 + 30);
  // text(`RotationX: ${rotationX.toFixed(2)}`, -width/2 + 10, -height/2 + 50);
  // text(`RotationY: ${rotationY.toFixed(2)}`, -width/2 + 10, -height/2 + 70);
}

// Function called when the preview panel is resized
function windowResized() {
  resizeCanvas(windowWidth, windowHeight, WEBGL); // Resize canvas responsively
  ortho(); // Re-apply 2D projection after resize
}

// Function to start the audio context on user interaction
// This is required by modern browsers for audio playback
function mousePressed() {
  userStartAudio(); // [p5.js Reference: userStartAudio()](https://p5js.org/reference/p5/userStartAudio/)
}

// Function to handle touch interaction (equivalent to mousePressed for touch devices)
function touchStarted() {
  userStartAudio(); // Start audio context on touch
  return false; // Prevent default touch actions (like scrolling)
}