Rainbow polka dots

Rainbow polka dots

let bright0;
let bright1;
let bright2;
let bright3;
let bright4;
let bright5;
let bright6;
let bright7;
let bright8;
let bright9;
let bright10;

let alpha0;
let alpha1;
let alpha2;
let alpha3;
let alpha4;
let alpha5;
let alpha6;
let alpha7;
let alpha8;
let alpha9;
let alpha10;

function setup() {
  createCanvas(500, 360);
  d = 25;
  alpha0 = 0;
  alpha1 = 0;
  alpha2 = 0;
  alpha3 = 0;
  alpha4 = 0;
  alpha5 = 0;
  alpha6 = 0;
  alpha7 = 0;
  alpha8 = 0;
  alpha9 = 0;
  alpha10 = 0;
}

function draw() {

  bright0 = color(247, 105, 128, alpha0);
  bright1 = color(255, 0, 0, alpha1);
  bright2 = color(247, 105, 64, alpha2);
  bright3 = color(247, 164, 41, alpha3);
  bright4 = color(247, 215, 80, alpha4);
  bright5 = color(159, 219, 41, alpha5);
  bright6 = color(53, 172, 55, alpha6);
  bright7 = color(53, 172, 157, alpha7);
  bright8 = color(67, 156, 206, alpha8);
  bright9 = color(51, 110, 212, alpha9);
  bright10 = color(105, 89, 212, alpha10);

  background(255);

  //change the color of each row depending on the mouse position on x axis
  if (mouseY <= height / 10) {
    alpha0 = 200;
  } else if (mouseY > height / 10 && mouseY <= 2 * height / 10) {
    alpha1 = 200;
  } else if (mouseY > 2 * height / 10 && mouseY <= 3 * height / 10) {
    alpha2 = 200;
  } else if (mouseY > 3 * height / 10 && mouseY <= 4 * height / 10) {
    alpha3 = 200;
  } else if (mouseY > 4 * height / 10 && mouseY <= 5 * height / 10) {
    alpha4 = 200;
  } else if (mouseY > 5 * height / 10 && mouseY <= 6 * height / 10) {
    alpha5 = 200;
  } else if (mouseY > 6 * height / 10 && mouseY <= 7 * height / 10) {
    alpha6 = 200;
  } else if (mouseY > 7 * height / 10 && mouseY <= 8 * height / 10) {
    alpha7 = 200;
  } else if (mouseY > 8 * height / 10 && mouseY <= 9 * height / 10) {
    alpha8 = 200;
  } else if (mouseY > 9 * height / 10 && mouseY <= 10 * height / 10) {
    alpha9 = 200;
  } else if (mouseY > 10 * height / 10 && mouseY <= 11 * height / 10) {
    alpha10 = 200;
  }

  // //change the color of each column depending on the mouse position on x axis
  // if (mouseX <= height / 10) {
  //   bright0 = 200;
  // } else if (mouseX > height / 10 && mouseX <= 2 * height / 10) {
  //   bright1 = 200;
  // } else if (mouseX > 2 * height / 10 && mouseX <= 3 * height / 10) {
  //   bright2 = 200;
  // } else if (mouseX > 3 * height / 10 && mouseX <= 4 * height / 10) {
  //   bright3 = 200;
  // } else if (mouseX > 5 * height / 10 && mouseX <= 6 * height / 10) {
  //   bright4 = 200;
  // } else if (mouseX > 6 * height / 10 && mouseX <= 7 * height / 10) {
  //   bright5 = 200;
  // } else if (mouseX > 7 * height / 10 && mouseX <= 8 * height / 10) {
  //   bright6 = 200;
  // } else if (mouseX > 9 * height / 10 && mouseX <= 10 * height / 10) {
  //   bright7 = 200;
  // } else if (mouseX > 10 * height / 10 && mouseX <= 11 * height / 10) {
  //   bright8 = 200;
  // } else if (mouseX > 11 * height / 10 && mouseX <= 12 * height / 10) {
  //   bright9 = 200;
  // } else if (mouseX > 13 * height / 10 && mouseX <= 14 * height / 10) {
  //   bright10 = 200;
  // }

  // change polka dots color as the mouse moves across
  // bright0 = bright0 + 2;
  // bright1 = bright1 + 2;
  // bright2 = bright2 + 2;
  // bright3 = bright3 + 2;
  // bright4 = bright4 + 2;
  // bright5 = bright5 + 2;
  // bright6 = bright6 + 2;
  // bright7 = bright7 + 2;
  // bright8 = bright8 + 2;
  // bright9 = bright9 + 2;
  // bright10 = bright10 + 2;

  alpha0 = alpha0 - 2;
  alpha1 = alpha1 - 2;
  alpha2 = alpha2 - 2;
  alpha3 = alpha3 - 2;
  alpha4 = alpha4 - 2;
  alpha5 = alpha5 - 2;
  alpha6 = alpha6 - 2;
  alpha7 = alpha7 - 2;
  alpha8 = alpha8 - 2;
  alpha9 = alpha9 - 2;
  alpha10 = alpha10 - 2;

  //draw polka dots 
  for (let i = 0; i <= 14; i++) {
    noStroke();
    fill(bright0);
    ellipse(i * 40, 0, d);
    fill(bright1);
    ellipse(i * 40, 36, d);
    fill(bright2);
    ellipse(i * 40, 72, d);
    fill(bright3);
    ellipse(i * 40, 108, d, d);
    fill(bright4);
    ellipse(i * 40, 144, d, d);
    fill(bright5);
    ellipse(i * 40, 180, d, d);
    fill(bright6);
    ellipse(i * 40, 216, d, d);
    fill(bright7);
    ellipse(i * 40, 252, d, d);
    fill(bright8);
    ellipse(i * 40, 288, d, d);
    fill(bright9);
    ellipse(i * 40, 324, d, d);
    fill(bright10);
    ellipse(i * 40, 360, d, d);
  }
  
  // //draw polka dots 
  // for (let i = 0; i <= 10; i++) {
  //   noStroke();
  //   fill(bright0);
  //   ellipse(0, i * 40, d);
  //   fill(bright1);
  //   ellipse(50, i * 40, d);
  //   fill(bright2);
  //   ellipse(100, i * 40, d);
  //   fill(bright3);
  //   ellipse(150, i * 40, d);
  //   fill(bright4);
  //   ellipse(200, i * 40, d);
  //   fill(bright5);
  //   ellipse(250, i * 40, d);
  //   fill(bright6);
  //   ellipse(300, i * 40, d);
  //   fill(bright7);
  //   ellipse(350, i * 40, d);
  //   fill(bright8);
  //   ellipse(400, i * 40, d);
  //   fill(bright9);
  //   ellipse(450, i * 40, d);
  //   fill(bright10);
  //   ellipse(500, i * 40, d);
  // }

}