// size and placement of white ellipses at the start

let X;

let Y;

let a = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(100);

​

  pixelDensity();

  // default () density is 1, if I try to go higher it slows down the graphics (takes more energy for the detail in the dispaly)

​

  X = windowWidth - int(windowWidth / Size) * Size;

  Y = windowHeight - int(windowHeight / Size) * Size;

  //(int) is converting into an integer representation

}

​

function draw() {

  background(0);

​

  for (let i = X / 2 + Size / 2; i < width - X / 2; i += Size) {

    for (let j = Y / 2 + Size / 2; j < height - Y / 2; j += Size) {

      let s = map(

        //converting range 0-100 to range of window(0 to width)

        dist(i, j, mouseX, mouseY),

        0,

        //calculating distance between points and mouse. This allows the design to change accordingly to the position of the mouse

        sqrt(width * width + height * height),

        //square root to make sure number stays postive

        Size,

        1

      );

​

      ellipse(i, j, s, s);

​

      fill(255);

      //fill color of ellipse(white)

​

      push();

      translate(400, 400);

      // postion of the circle centering

      a += 0.5; 

      rotate(a);

      // Rotate the matrix

​

      let c = color(255, random(204), 0);

      fill(c);

      noStroke();

      ellipse(1, 20, 50, 50);

      //assigned c to the color of ellipse1

​

      let d = color(255, random(100), 100);

      fill(d);

      ellipse(100, 50, 50, 50);

      // assigned d to color of ellipse2

​

      let e = color(random(250), 240, 100);

      fill(e);

      ellipse(200, 50, 50, 50);

​

      // assigned e to color of ellipse3

​

      let f = color(random(100), 20, 100);

      fill(f);

      ellipse(300, 50, 50, 50);

      // assigned f to color of ellipse4

​

      let g = color(240, random(200), 100);

      fill(g);

      ellipse(400, 50, 50, 50);

      // assigned g to color of ellipse5

​

      pop();

      // Pop out of new matrix, need both push and pop for more control or it gets crazy

    }

  }

}

​

function mousePressed() {

  Size = random(10, 200);

  //when the mouse is pressed the size and placement of the white ellipses will change randomly

}

​