Tread_System.js

"use strict"

class Thread {
  constructor(_pos, h, s, b) {
    this.pos = _pos.copy();
    this.vel = createVector(random(-5, 5), random(-5, 5));
    this.acc = createVector();

    this.angle = 0;
    this.maxDesiredVelocity = random(0.1, 5);
    this.maxSteerForce = random(1, 10);
    this.brightnessM = b;
    this.strokeColor = color(h, s, this.brightnessM);
    this.fillColor = color(h, s, 255 - this.brightnessM);
    this.strokeWeight = random(0.1, 0.5);

    this.size = random(10, 100);
    this.lifespan = 1.0;
    this.lifeDecrease = random(0.005, 0.01);
    this.isDone = false;
  }

  flow(angle) {
    var desired = p5.Vector.fromAngle(angle);
    desired.setMag(this.maxDesiredVelocity);

    var stear = p5.Vector.sub(desired, this.vel);
    stear.limit(this.maxStearForce);

    this.applyForce(stear);
  }

  applyForce(force) {
    this.acc.add(force);
  }
  checkEdges() {
    if (this.pos.x < 0) {
      this.pos.x = width;
    } else if (this.pos.x > width) {
      this.pos.x = 0;
    }
    if (this.pos.y < 0) {
      this.pos.y = height;
    } else if (this.pos.y > height) {
      this.pos.y = 0;
    }
  }

  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);

    this.lifespan -= this.lifeDecrease;

    if (this.lifespan < 0) {
      this.lifespan = 0;
      this.isDone = true;
    }
  }

  display() {
    push();
    translate(this.pos.x, this.pos.y);
    //stroke(255 * this.lifespan,200 * this.lifespan,255 * this.lifespan);

    stroke(this.strokeColor);
    noFill();
    //fill(this.fillColor);
    ellipse(0, 0, this.size, this.size);
    pop();
  }

}
"use strict"

class Triangle extends Thread {
  constructor(_pos) {
    super(_pos);

    this.sizeAdj = random(0.1, 0.7);

    this.angleSpeed = random(0.01, 0.05);

  }
  display() {
    push();
    translate(this.pos.x, this.pos.y);
    rotate(frameCount * this.angleSpeed);
    fill(255, 50);
    triangle(0, 0, 10, this.size * this.sizeAdj, -10, this.size * this.sizeAdj);
    pop();
  }
}
var RESOLUTION = 10;
var angles = [];
var rows, cols;

var threads = [];

function setup() {
  createCanvas(1000, 600);
  background(0);
  rows = floor(width / RESOLUTION);
  cols = floor(height / RESOLUTION);
  colorMode(HSB);

}

function draw() {
  //background(0);

  var position = createVector(random(width), height);
  var chance = floor(random(3));
  if (threads.length < 100 && mouseIsPressed) {
    threads.push(new Thread(position, random(200, 255), random(50, 100), random(255)));
  }
  if (threads.length < 100 && keyIsPressed) {
    threads.push(new Triangle(position, random(200, 255), random(50, 100), random(255)));
  }
  // switch (chance) {
  //   case 0:
  //     threads.push(new Thread(position, random(100, 150), random(50, 100), random(255)));
  //     break;

  //   case 1:
  //     var clr = color(random(255), random(255), 255);
  //     threads.push(new Circle(position, clr));
  //     break;

  //   case 2:
  //     var clr = color(255, random(255), random(255));
  //     threads.push(new Rectangle(position, clr));

  //     break;
  // }





  for (var i = 0; i < threads.length; i++) {

    for (var c = 0; c <= cols; c++) {
      for (var r = 0; r <= rows; r++) {
        var index = r + c * rows; // *** x + y * width
        var x = r * RESOLUTION;
        var y = c * RESOLUTION;

        var xfreq = (x + frameCount * 0.5) * 0.01;
        var yfreq = (y + frameCount * 0.1) * 0.005;
        var amp = TWO_PI; // range of angle
        var val = noise(xfreq, yfreq, (xfreq + yfreq) / 2) * amp + frameCount * 0.005;
        angles[index] = val;

      }
    }
    // vehicles

    var v = threads[i];

    var r = floor(threads[i].pos.x / RESOLUTION);
    var c = floor(threads[i].pos.y / RESOLUTION);

    index = r + c * rows;
    var a = angles[index];
    threads[i].flow(a);
    threads[i].update();
    threads[i].checkEdges();
    threads[i].display();


    //remove
    if (threads[i].isDone) {
      threads.splice(i, 1);
    }

  }
}