let bust;

let gradientIndex = 0;

let gradientDirection = 1;

let raindrops;

const NUM_RAINDROPS = 50;

​

const RAINDROP_SPEED = 2;

let windSpeed = 0;

​

function preload() {

    bust = loadImage('marbledude.png'); 

}

​

function setup() { 

  createCanvas(700, 700);

  noStroke();

  imageMode(CENTER);

  raindrops = intializeRaindrops(NUM_RAINDROPS);

} 

​

function draw() {

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

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

      const xColorRed = map(x, 0, width, 0, 255);

      const xColorGreen = map(y, 0, height, 0, 255);

      const mouseXBlue = map(mouseX, 0, width, 0, 255);

      fill(xColorRed, xColorGreen, gradientIndex);

      ellipse(x, y, 100, 100);

    }

  }

  gradientIndex += gradientDirection;

  if (gradientIndex > 255 || gradientIndex < 0) {

    gradientDirection = -1*gradientDirection;

  }

  image(bust, mouseX, mouseY, bust.width/4, bust.height/4);

​

  windSpeed = map(mouseX, 0, width, 1, -1);

  raindrops.forEach((raindrop) => {

    drawRaindrop(raindrop.x, raindrop.y);

    raindrop.y+= RAINDROP_SPEED;

    if (raindrop.y > height) raindrop.y = 0;

    raindrop.x += windSpeed;

    if (raindrop.x > width) raindrop.x = 0;

    if (raindrop.x < 0) raindrop.x = width;

  });

​

}

​

function mousePressed() {

  ellipseColor = !ellipseColor;

}

​

function drawRaindrop(x, y) {

    fill(   0,191,255);

  ellipse(x, y, 60, 50);

  triangle(x - 28, y-10, x, y - 50, x + 28, y-10);

}

​

function intializeRaindrops(numRaindrops) {

    const raindrops = [];

  for (let i = 0; i < numRaindrops; i+= 1) {

    raindrops.push({

      x: random(width),

      y: random(height)

    });

  }

  return raindrops;

}

​

​