bubblebands.js

// Where is the circle
let x, y;
let num_circles = 150;
let circles = [];

class Circle {
  constructor() {
    this.x = random(0, width)
    this.y = random(0, height)
    this.diameter = random(10, 30);
    this.speed = random(1, 2);
    this.c1 = random(255)
    this.c2 = random(155)
    this.c3 = random(255)
  }

  move() {
    //this.x += random(-this.speed, this.speed);
    //this.y += random(-this.speed, this.speed);

    // Jiggling randomly on the horizontal axis
    //this.x = this.x + random(-1, 1);
    // Moving up at a constant speed

    this.y = this.y - this.speed;


    // Reset to the bottom
    if (this.y < 0 -this.diameter) {
      this.x = random(0, width)
      this.c1 = random(255)
      this.c3 = random(255)
      this.y = height;
    }
  }

  display() {
    let c = color(this.c1, this.c2, this.c3)
    fill(c);
    noStroke();
    ellipse(this.x, this.y, this.diameter, this.diameter);
  }
}

function setup() {
  createCanvas(512, 512);
  background(255, 255, 255)
  // Starts in the middle
  x = width / 2;
  y = height;

}

function draw() {
  //background(255)

  for (i = 0; i < num_circles; i++) {
    circles.push(new Circle())
  }

  for (i = 0; i < num_circles; i++) {
    circles[i].move()
  }

  for (i = 0; i < num_circles; i++) {
    circles[i].display()
  }
}