let period;

let angle = 0;

let NoOfObjects = 20;  //total number of ellipses instantiated 

let randomcolors = []; //list to create random colors

​

function setup() {

  createCanvas(400, 400);

  background(0); 

  noStroke();

​

  for (let i = 0; i < NoOfObjects; i++) {//for loop to create "NoOfObjects" number of ellipses

   randomcolors.push(color(random(255), random(255), random(255), 200)); //giving it a random color and neon effect

  }

​

  blendMode(ADD);// the blend method blends pixels and is the default blending mode.

}

​

function draw() {

​

  amplitude = map(mouseY, 0, height, 40,  160);// determining the amplitude of the ellipse based on where the mouse is vertically on the screen and the map function  takes the y values of the mouse's location and draw the circle on a y value between 40 and 160 

  period = map(mouseX, 0, width, 60, 240);

// determining the period of the ellipse based on where the mouse is horizontally on the screen and the map function  takes the x values of the mouse's location and draw the circle on a y value between 60 and 240 

  for (let i = 0; i < NoOfObjects; i++) { //initially centering the objects, which theyr positions change depending on the user's use of the mouse 

    let x = width / 2; 

    let y = height / 2; 

    let circleAngle = angle + TWO_PI * i / NoOfObjects; // dividing a full circle into equal parts based on the number of objects in the list

​

    x += amplitude * sin(circleAngle);// here we are positioning the x value ellipse around that center circle based on how the amplitude changes, based on the user's mouse location

    y += amplitude * cos(circleAngle);// here we are positioning the y value ellipse around that center circle based on how the amplitude changes, based on the user's mouse location

​

    fill(randomcolors[i]); //filling with random colors from our list

    ellipse(x, y, 4,4); //ellipse at initial position x,y and width and height od 4

  }

​

  angle += TWO_PI / period; 

}

​

​