BUBBLES

let _nsRate;

let _maxPoint;

let _aryObject = [];

let _objectNum;

​

function setup() {

  let canvasSize;

  if (windowWidth <= windowHeight) {

    canvasSize = windowWidth;

  } else {

    canvasSize = windowHeight;

  }

  createCanvas(canvasSize, canvasSize);

  frameRate(30);

  colorMode(HSB, 255,255,10,10);

  strokeCap(ROUND);

  strokeJoin(ROUND);

  noFill();

​

  _objectNum = 16;

  _nsRate = 0.001;

  _maxPoint = 50;

​

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

    _aryObject.push(new line());

  }

}

​

function draw() {

  clear();

  blendMode(DIFFERENCE);

  background(0);

​

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

    _aryObject[i].update();

    _aryObject[i].draw();

  }

}

​

class line {

  constructor() {

    this.nsX = random(100);

    this.nsY = random(100);

    this.color = color(random(360), 100, 100, 255);

    this.sw = random(width/20, width/3);

    this.aryPoints = [];

  }

  update() {

    this.nsX += _nsRate;

    this.nsY += _nsRate;

    this.aryPoints.unshift([

      width/3 * cos(8*PI*noise(this.nsX)),

      height/3 * sin(8*PI*noise(this.nsY))

    ]);

​

    while (this.aryPoints.length > _maxPoint) {

      this.aryPoints.pop();

    }

  }

  draw() {

    stroke(this.color);

    strokeWeight(this.sw);

    push();

    translate(width/2, height/2);

    beginShape();

    for (let i = 0; i < this.aryPoints.length; i++) {

      curveVertex(this.aryPoints[i][0], this.aryPoints[i][1]);

    }

    endShape();

    pop();

  }

}

​

function mouseReleased() {

  _aryObject = [];

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

    _aryObject.push(new line());

  }

}