Bauhaus - OpenProcessing

mySketch
xxxxxxxxxx
 
let leadingCircles = [];
let circles = [];
const numCircles = 20;
const fadeFactor = 5;
​
function setup() {
  createCanvas(600, 400);
​
  for (let i = 0; i < numCircles; i++) {
    let colorChoice =floor(random(3)); // 0: blue, 1: red, 2: yellow
    let circleColor;
​
    if (colorChoice === 0) {
      circleColor = color(0, 0, random(100, 255)); // Blue
    } else if (colorChoice === 1) {
      circleColor = color(random(100, 255), 0, 0); // Red
    } else {
      circleColor = color(random(100, 255), random(100, 255), 0); // Yellow
    }
​
    leadingCircles.push({
      x: 0,
      y: i * height / numCircles,
      diameter: 20,
      speed: random(2, 5),
      color: circleColor
    });
  }
}
​
function draw() {
  background(227, 212, 183, 20);
​
  for (let i = 0; i < leadingCircles.length; i++) {
    leadingCircles[i].x += leadingCircles[i].speed;
    if (leadingCircles[i].x <= 0 || leadingCircles[i].x >= width) {
      leadingCircles[i].speed *= -1;
    }
​
    if (leadingCircles[i].y <= 0 || leadingCircles[i].y >= height) {
      leadingCircles[i].speed *= -1;
    }
​
    fill(leadingCircles[i].color);
    ellipse(leadingCircles[i].x, leadingCircles[i].y, leadingCircles[i].diameter);
  }
​
  for (let i = 0; i < numCircles; i++) {
    let hue = map(i, 0, numCircles - 1, 0, 255);
    let transparency = map(i, 0, numCircles - 1, 255, 0);
​
    fill(hue, fadeFactor * i, transparency);
    circles[i] = createCircle(leadingCircles[numCircles - 1].x, leadingCircles[numCircles - 1].y);
​
    // Check if the circle is outside the canvas before displaying it
    if (circles[i].isOutsideCanvas()) {
      circles[i].display();
    }
  }
}
​
function createCircle(x, y) {
  return {
    x: x,
    y: y,
    diameter: 20,
    display: function () {
      ellipse(this.x, this.y, this.diameter);
    },
    isOutsideCanvas: function () {
      return (
        this.x > 0 &&
        this.x < width &&
        this.y > 0 &&
        this.y < height
      );
    }
  };
}
​