let x = 100; 

let y = 100;

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220);

  noStroke();

  let bgColor1 = map(mouseY, 0, height, 0, 50); 

  let bgColor2 = map(mouseY, 0, height, 100, 200); 

  let bgColor3 = map(mouseY, 0, height, 200, 255);

  fill(bgColor1, bgColor2, bgColor3);

  rect(0, 0, width, height);

 let r = map(mouseX, 0, width, 150, 255); 

  let g = map(mouseY, 0, height, 100, 255); 

  let b = 0; 

  let starColor = color(r, g, b);

  drawStar(100, 100, starColor);  // 1st

  drawStar(200, 200, starColor);  // 2nd

  drawStar(320, 180, starColor);  // 3rd

  //draw start

    drawStar(x, y, starColor);

}

​

​

function drawStar(x, y, c) {

 let s = 30;  //s = starSize

  let d = dist(mouseX, mouseY, x, y);  

​

  // If the mouse is touch to the star

  if (d <30 ) {

    s = 90;  

   }

  fill(c);

  beginShape();

  vertex(x, y - s);   // Top vertex

  vertex(x + 10, y - s / 3);  // Right upper side

  vertex(x + 30, y - s / 3);  // Right upper side

  vertex(x + 15, y + s / 5);   // Right lower side

  vertex(x + 20, y + s);  // Bottom right

  vertex(x, y + s / 2);   // Bottom center

  vertex(x - 20, y + s);  // Bottom left

  vertex(x - 15, y + s / 5);   // Left lower side

  vertex(x - 30, y - s / 3);  // Left upper side

  vertex(x - 10, y - s / 3);  // Left upper side

  endShape(CLOSE);

​

}

​

​