//fill=h

//swirl growth=z

let tms = [];

let numMakers = 1;

let angle = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(0, 0, 0);

  frameRate(60);

}

​

function draw() {

  translate(width / 2, height / 2);

  fill(255);

  for (let i = 0; i < tms.length; i = i + 1) {

    tms[i].update();

  }

  mouseDragged();

  theFade();

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

function theFade() {

  if (frameCount % 1 == 0) {

    angle += 1

    background(140, 1);

  }

}

​

function mouseDragged() {

  angle += 1.5;

  let w = random(1, 7);

  let h = random(1, 7);

  let tm = new trailMaker(

    mouseX, // x

    mouseY, // y

    w, // width

    h // height

  );

  tms.push(tm);

  let val = cos(radians(angle)) * 1;

  for (let a = 0; a < 1; a++) {

    let xoff = cos(radians(a)) * mouseX;

    let yoff = sin * cos(radians(a)) * mouseY;

    polygon(xoff, 1);

    rotate(val);

  }

}

​

function polygon(transX, transY) {

  push();

  translate(transX, transY);

  beginShape();

  vertex(30, 75);

  vertex(40, 20);

  vertex(50, 75);

  vertex(60, 20);

  vertex(70, 75);

  vertex(80, 20);

  endShape(CLOSE);

  pop();

}

​

​

class trailMaker {

  constructor(val, w, h, xSpeed, ySpeed) {

    this.x = val;

    this.y = val;

    this.w = w;

    this.h = h;

  }

​

  update() {

    ellipse(this.x, this.y, this.w, this.h);

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

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

​

  }

​

}

​

//https://p5js.org/examples/form-regular-polygon.html

//https://editor.p5js.org/dansakamoto/sketches/H1ICcXXtm

//https://editor.p5js.org/jenagosta/sketches/Sy5wzBblg