Circles Rising - OpenProcessing

mySketch
xxxxxxxxxx
 
let circles = [];
​
function setup() {
  createCanvas(windowWidth, windowHeight);
}
​
function draw() {
  background(0, 50); // Adds a 50% opacity black background to create a fading effect
  for (let i = circles.length - 1; i >= 0; i--) {
    circles[i].move();
    circles[i].display();
    if (circles[i].offscreen()) {
      circles.splice(i, 1); // Deletes the circle when it moves off the screen
    }
  }
}
​
function mousePressed() {
  let circle = new Circle(mouseX, mouseY, random(10, 50), randomColor()); // Creates a new Circle object with random size and color at the mouse position
  circles.push(circle);
}
​
function randomColor() {
  return color(random(255), random(255), random(255), 127); // Returns a random color with 50% opacity
}
​
class Circle {
  constructor(x, y, diameter, color) {
    this.x = x;
    this.y = y;
    this.diameter = diameter;
    this.color = color;
    this.speed = random(1, 5);
    this.direction = random([-1, 1]); // Randomly chooses a left or right direction
  }
​
  move() {
    this.y -= this.speed;
    this.x += this.speed * this.direction;
  }
​
  offscreen() {
    return (this.y + this.diameter < 0 || this.x + this.diameter < 0 || this.x > width);
  }
​
  display() {
    noStroke();
    fill(this.color);
    ellipse(this.x, this.y, this.diameter, this.diameter);
  }
}
​