let speed = 8;
let d = 50;
let ellipses = [];
let numEllipses = 5;

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 5);

  for (let j = 0; j < numEllipses; j++) {
    ellipses.push({ x: random(width), y: random(height), hue: random(360) });
  }
}

function draw() {

  for (let e of ellipses) {
    e.hue = (e.hue + 0.1) % 360;
    e.x = constrain(e.x + random(-speed, speed), 0, width);
    e.y = constrain(e.y + random(-speed, speed), 0, height);

    noStroke();
    fill(e.hue, 100, 100, 0.5);
    ellipse(e.x, e.y, d, d);
  }
}

• speed, which determines the movement speed of the ellipses.
• d, which represents the diameter of the ellipses.
• ellipses, an array where we store the attributes of all the ellipses.
• numEllipses, which defines the number of ellipses we want to draw.

Setup

1. createCanvas(400, 400);
   • This line creates a canvas of 400 pixels by 400 pixels. This is where all our ellipses will be drawn.
2. colorMode(HSB, 360, 100, 100, 5);
   • This line sets the color mode to HSB. HSB stands for Hue, Saturation, and Brightness. By setting the range to 360, 100, 100, 5, we're telling the program that we'll use hues ranging from 0 to 360, saturation and brightness values from 0% to 100%, and an alpha transparency from 0 to 5.

draw

1. for (let j = 0; j < numEllipses; j++) { ... }

   • This is a for loop, used to initialize our ellipses array. The loop will run repeatedly based on the value of numEllipses.
   • ellipses.push({ x: random(width), y: random(height), hue: random(360) });
     • This line adds a new ellipse object to the ellipses array. Each ellipse object has three properties:
       • x: A random x-coordinate for the ellipse, ranging from 0 to the canvas width.
       • y: A random y-coordinate for the ellipse, ranging from 0 to the canvas height.
       • hue: A random hue chosen for the ellipse, ranging from 0 to 360.
       1. for (let e of ellipses) { ... }

          • This is a for...of loop, iterating over each ellipse stored in the ellipses array.

          • e.hue = (e.hue + 0.1) % 360;

            • This line incrementally changes the hue of the ellipse, making it dynamic. The modulus operation ensures the hue remains between 0 and 359.9.

          • e.x = constrain(e.x + random(-speed, speed), 0, width);

            • This line first randomly adjusts the x-coordinate of the ellipse and then uses the constrain function to ensure the x-coordinate remains within the bounds of the canvas width.

          • e.y = constrain(e.y + random(-speed, speed), 0, height);

            • Similarly, we adjust the y-coordinate of the ellipse randomly and use the constrain function to make sure the y-coordinate remains within the canvas height.

          • noStroke();

            • This line instructs the program that we don't want an outline or border around the ellipse.

          • fill(e.hue, 100, 100, 0.5);

            • This line sets the fill color of the ellipse. We use the ellipse's hue, 100% saturation, 100% brightness, and an alpha transparency of 0.5.

          • ellipse(e.x, e.y, d, d);

            • Finally, we draw the ellipse using its x-coordinate, y-coordinate, and the diameter d.

   icm midterm.mov