let sunsetColors = [];

​

function setup() {

  createCanvas(800, 600);

​

  // Create sliders for top and bottom colors

  topColorSlider = createSlider(0, 255, 255);

  topColorSlider.position(20, height + 10);

​

  bottomColorSlider = createSlider(0, 255, 102);

  bottomColorSlider.position(20, height + 40);

​

  // Initialize sunset colors

  updateSunsetColors();

}

​

function draw() {

  pixelateBackground();

}

​

function updateSunsetColors() {

  // Update sunset colors based on slider values

  sunsetColors[0] = color(255, 255, topColorSlider.value());   // Yellow

  sunsetColors[1] = color(255, 153, topColorSlider.value());   // Orange

  sunsetColors[2] = color(255, 102, bottomColorSlider.value()); // Red

  sunsetColors[3] = color(153, 51, bottomColorSlider.value());  // Purple

}

​

function pixelateBackground() {

  let blockSize = 20; // Adjust the block size as needed

​

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

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

      // Interpolate color based on the vertical position for the sunset gradient

      let gradientColor = lerpColor(sunsetColors[0], sunsetColors[3], y / height);

​

      // Set the block color

      fill(gradientColor);

      noStroke();

​

      // Draw a block of pixels

      rect(x, y, blockSize, blockSize);

    }

  }

}

​

function mousePressed() {

  // Update sunset colors when mouse is pressed

  updateSunsetColors();

}

​