let scl = 10; // Size of each cell in the grid

let time = 0; // A time variable for patterns

let sound; 

let beatInterval = 500; // Interval for beats in milliseconds

let lastBeatTime = 0; 

function setup() {

  createCanvas(windowWidth, windowHeight);

  cols = ceil(width / scl); 

  rows = ceil(height / scl); 

  noStroke();

  sound = new p5.Oscillator();

  sound.setType('square'); // Use a square wave for a beat-like sound

  sound.start();

  sound.amp(0);

}

​

function draw() {

  background(20); 

​

  let centerX = width / 2;

  let centerY = height / 2;

​

  for (let y = 0; y < rows; y++) {

    for (let x = 0; x < cols; x++) {

      let distFromCenter = dist(x * scl, y * scl, centerX, centerY);

​

      // noise value based on distance, mouse position, and time

      let noiseVal =

        sin((x + y) * 0.3 + time) *

        cos((x - y) * 0.2 + time) *

        sin(mouseX * 0.01 + mouseY * 0.01 + distFromCenter * 0.01);

​

      // color based on mouse position

      let c;

      if (mouseX > centerX && mouseY < centerY) {

        // Right and Up: Warm colors (Orange, Yellow)

        c = getWarmColors(noiseVal);

      } else if (mouseX > centerX && mouseY > centerY) {

        // Right and Down: Green and Turquoise

        c = getCoolColors(noiseVal);

      } else if (mouseX < centerX && mouseY < centerY) {

        // Left and Up: Blue and Red

        c = getContrastColors(noiseVal);

      } else {

        // Left and Down: Red, Green, and White

        c = getNeutralColors(noiseVal);

      }

​

      // transition toward the original color in the center

      let originalColor = color(173, 216, 230); // Light Blue

      let blendFactor = map(distFromCenter, 0, max(centerX, centerY), 1, 0);

      c = lerpColor(c, originalColor, blendFactor);

​

      // Fill the rectangle with the calculated color

      fill(c);

      rect(x * scl, y * scl, scl, scl); // Draw the "pixel"

    }

  }

​

  // Create a beat effect by pulsing the amplitude

  if (millis() - lastBeatTime > beatInterval) {

    // Map mouseX to frequency and mouseY to volume

    let freq = map(mouseX, 0, width, 100, 400); // Frequency range: 100Hz to 400Hz

    let amp = map(mouseY, 0, height, 0.1, 0.5); // Amplitude range: 0.1 to 0.5

    sound.freq(freq); // Update frequency for the beat

    sound.amp(amp, 0.1); // Quickly increase amplitude for the beat

    setTimeout(() => sound.amp(0, 0.1), 100); // Drop amplitude back after 100ms

    lastBeatTime = millis(); // Reset the beat timer

  }

​

  time += 0.05; //illusion of movement

}

​

function getWarmColors(val) {

  let orange = color(255, 165, 0); // Orange

  let yellow = color(255, 255, 0); // Yellow

  return lerpColor(orange, yellow, map(val, -1, 1, 0, 1));

}

function getCoolColors(val) {

  let green = color(0, 255, 128); // Green

  let turquoise = color(64, 224, 208); // Turquoise

  return lerpColor(green, turquoise, map(val, -1, 1, 0, 1));

}

​

function getContrastColors(val) {

  let blue = color(0, 0, 255); // Blue

  let red = color(255, 0, 0); // Red

  return lerpColor(blue, red, map(val, -1, 1, 0, 1));

}

​

function getNeutralColors(val) {

  let red = color(255, 0, 0); // Red

  let green = color(0, 255, 0); // Green

  let white = color(255, 255, 255); // White

  if (val < 0) {

    return lerpColor(red, green, map(val, -1, 0, 0, 1));

  } else {

    return lerpColor(green, white, map(val, 0, 1, 0, 1));

  }

}

​