Tapering Circles Brush 2

class Dot {

​

  constructor(x, y, color) {

    this.x = x;

    this.y = y;

    this.color = color;

    this.size = random(5, 20);

    this.xoff = random(0, 100);

    this.yoff = random(0, 100);

  }

​

  draw() {

    if (this.size > random(2,5)) {

      fill(this.color);

      gradientCircle(this.x, this.y, this.size, PI/4, color("#25D9B8"), color("#118C76"));

      this.x += (noise(this.xoff) - .5)*5;

      this.y -= (noise(this.yoff) - .5)*5;

      this.size -= 0.1;

      this.yoff += 0.01;

    } else {

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

    }

  }

}

​

function gradientCircle(x, y, r, a, c1, c2) {

  push();

  translate(x, y);

  rotate(a);

  for (let x = -r; x < r; x++) {

    stroke(lerpColor(c1, c2, (x+r)/r));

    let y = r*sin(acos(x/r));

    line(x, -y, x, y);

  }

  pop();

}

​

let dots = [];

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

let bg = "#011F26";

​

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(0);

}

​

function draw() {

  background("#00000010");

  let x = random(-50, 50);;

  let y = random(-50, 50);;

  if (mouseIsPressed && isOver) {

    x += mouseX;

    y += mouseY;

  } else {

    x += width/2;

    y += height/2;

  }

  dots.push(new Dot(x, y, colors[int(random(colors.length))]));

​

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

    for (let dd of dots) {

      dd.draw();

    }

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  background(bg);

}