const border = 20;

​

function setup() {

  createCanvas(400, 400);

  generateDots(3, 200); // Initial dots

}

​

function draw() {

  background(32);

  for (const dot of dots) {

    dot.draw();

  }

}

​

// Function to generate dots

function generateDots(layers, numDots) {

  for (let layer = 1; layer <= layers; layer++) {

    for (let i = 0; i < numDots; i++) {

      dots.push(new Dot(layer));

    }

  }

}

​

class Dot {

  constructor(layer) {

    this.layer = layer;

    this.x = random(-border, width + border);

    this.y = random(-border, height + border);

    this.r = random(255);

    this.g = random(255);

    this.b = random(255); // Adding blue for full color range

  }

​

  changeColor() {

    // Change the color when called

    this.r = random(255);

    this.g = random(255);

    this.b = random(255);

  }

​

  draw() {

    let deltaX = 0;

    let deltaY = 0;

​

    if (mouseX != 0 && mouseY != 0) {

      deltaX = -this.layer * map(mouseX - width / 2, 0, width, 0, 5);

      deltaY = -this.layer * map(mouseY - height / 2, 0, height, 0, 5);

    }

​

    this.x += deltaX;

    this.y += deltaY;

​

    if (this.x < -border) {

      this.x = width + random(border);

      this.y = random(0, height);

    } else if (this.x > width + border) {

      this.x = 0 - random(border);

      this.y = random(0, height);

    }

​

    if (this.y < -border) {

      this.y = height + random(border);

      this.x = random(0, width);

    } else if (this.y > height + border) {

      this.y = 0 - random(border);

      this.x = random(0, width);

    }

​

    fill(this.r, this.g, this.b);

    circle(this.x, this.y, 10 / (4 - this.layer));

  }

}

​

// Keyboard interaction to add more dots and change their color on mouse press

function mousePressed() {

  generateDots(1, 50); // Add 50 dots when the mouse is pressed

  // Change color of existing dots

  for (const dot of dots) {

    dot.changeColor();

  }

}

​

// Reset all dots and remove them on spacebar press

function keyPressed() {

  if (key === ' ') {

    dots.splice(0, dots.length); // Remove all dots (reset canvas)

    generateDots(3, 200); // Generate initial 200 dots again

  }

}

​