Tapering Circles Brush

class Dot {

​

  constructor(x, y, color) {

    this.x = x;

    this.y = y;

    this.color = color;

    this.size = random(10, 50);

    this.xoff = random(0, 100);

    this.yoff = random(0, 100);

  }

​

  draw() {

    if (this.size > 0) {

      fill(this.color);

      ellipse(this.x, this.y, this.size);

      this.x += (noise(this.xoff) * 2 - 1) * 3;

      this.y -= (noise(this.yoff) * 2 - 1) * 3;

      this.size -= 0.1;

      this.yoff += 0.01;

    } else {

      dots.splice(dots.indexOf(this), 1);

    }

  }

}

​

let dots = [];

let colors = ["#393E47", "#00ADB6", "#FFF4E1", "#F8B501", "#FC3C3D"];

let bg = "#393E47";

​

let autox = 0;

let autodir = 1;

const autospeed = 5;

​

let isOver = false;

​

​

function setup() {

  let c = createCanvas(windowWidth, windowHeight - 40);

  c.mouseOver(() => isOver = true);

  c.mouseOut(() => isOver = false);

  noStroke();

  background(bg);

}

​

function draw() {

  if (mouseIsPressed && isOver) {

    dots.push(new Dot(mouseX, mouseY, colors[int(random(colors.length))]));

  }

  dots.push(new Dot(autox, height, colors[int(random(colors.length))]));

​

  if (autodir == 1) {

    if (autox < width) autox += autospeed;

    else autodir = -1;

  } else {

    if (autox > 0) autox -= autospeed;

    else autodir = 1;

  }

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

    for (let dd of dots) {

      dd.draw();

    }

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight - 40);

  background(bg)

}