let dots = [];

​

function setup() {

  createCanvas(700, 400);

  background(42);

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

      let colourLine = color(random(0, 255), random(255), random(255));

    let colourFill = color(random(0, 255), random(255), random(255));

    dots.push(new Dot(random(700), random(400), random(10, 30), colourLine, colourFill));

  }

}

​

class Dot {

  constructor(_x, _y, _d, _s, _f, speed = 5) {

    this.x = _x;

    this.y = _y;

    this.d = _d;

    this.s = _s;

    this.f = _f;

    this.speed = speed;

  }

  appear() {

    stroke(this.s);

    fill(this.f);

    circle(this.x, this.y, this.d);

  }

  travel() {

    if (this.x > width || this.x < 0) {

      this.speed *= -1;

    }

    this.x += this.speed;

  }

  roam() {

    xoff = xoff + 0.01;

    let n = noise(xoff) * 2;

    this.x += random(-n, n);

    this.y += random(-n, n);

  }

  accelerate() {

    this.speed += 10;

  }

  slowDown() {

    this.speed -= 10;

  }

  changeColor() {

    this.f = color(random(0, 255), random(255), random(255));

  }

}

​

// const dorothy = new Dot(400, 200, 10, "lavander", "plum");

​

function draw() {

  background(60);

  dots.forEach((dot, indexDot) => {

    dot.appear();

    dot.roam();

    // dots.forEach((d, indexD) => d.destroy(dot, indexDot, indexD));

  });

}

​

function mousePressed() {

  // dorothy.changeColor();

  // let colourLine = color(random(0, 255), random(100), random(100));

  // let colourFill = color(random(0, 255), random(100), random(100));

  // dots.push(new Dot(mouseX, mouseY, random(10, 30), colourLine, colourFill));

}

​

function keyPressed() {

  // key === "c" ? dorothy.accelerate() : dorothy.slowDown();

}

​