let noiseDensity = 2;  // Adjust the noise density

let noiseSpeed = 1;    // Adjust the noise speed

​

function setup() {

  createCanvas(800, 800);

  noLoop();

  noStroke();

  background(255);

}

​

function draw() {

  let squareSize = 15; background(255);

  blendMode(BLEND); 

 blendMode(DARKEST); 

​

  for (let x = 0; x < width; x += squareSize) {

    for (let y = 0; y < height; y += squareSize) {

      // Calculate a noise value based on the current position

      let noiseX = x * noiseScale;

      let noiseY = y * noiseScale;

      let noiseValue = noise(noiseX, noiseY, frameCount * noiseSpeed);

​

      // Map the noise value to a grayscale color

      let lightness = map(noiseValue, 0, 1, 0, 100); 

​

      // Determine color based on lightness

      let fillColor;

      if (lightness < 30) {

        // Red for the lightest squares

        fillColor = color(255, 0, 0);

      } else if (lightness < 60) {

        // Yellow

        fillColor = color(255, 255, 0);

      } else if (lightness < 90) {

        // White

        fillColor = color(255);

      } else {

        // Blue for the darkest squares

        fillColor = color(0, 0, 255);

      }

​

      // Fill the square with the calculated color

      fill(fillColor);

      // Draw the square

      rect(x, y, squareSize, squareSize);

    }

  }

}

​

function keyPressed() {

  if (key == 's' || key == 'S') {

    // Save a screenshot when 's' key is pressed

    saveCanvas('perlin_noise_squares', 'png');

  }

}

​

function mousePressed() {

  // Change noise density and redraw when the mouse is clicked

  noiseDensity = random(1, 100);

  redraw();

}

​

​