Thread_bling.js

"use strict";

class Vehicle {
  constructor(x, y, h, s, b) {
    this.pos = createVector(x, y);
    this.vel = createVector(random(-10, 10), random(-10, 10));
    this.acc = createVector();
    this.angle = 0;
    this.maxDesiredVelocity = random(0.1, 1);
    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.rad = random(1, 5);
  }
  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
    this.angle = this.vel.heading();
  }
  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;
    }
  }
  updateColor() {
    colorMode(HSB);
    var freq = frameCount * 0.01;
    var amp = this.brightnessM;
    brightness = noise(freq) * amp;
    print("here");


  }
  display() {
    colorMode(HSB, 100);
    push();
    stroke(this.strokeColor);
    strokeWeight(this.strokeWeight);
    fill(this.fillColor);
    ellipse(this.pos.x, this.pos.y, this.rad, this.rad);
    pop();
  }
}
var RESOLUTION = 10;
var angles = [];
var rows, cols;

var vehicles = [];

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

  // for (var i = 0; i < 60; i++) {
  //   vehicles.push(new Vehicle(width / 2, height / 2, 150 - 1 * i, 50 + 1 * i, random(255)));
  // }
}

function draw() {
  if (vehicles.length < 50) {
    vehicles.push(new Vehicle(width / 2 , height / 2 , 200 - 1 * i, 50 + 1 * i, random(255)));
  }
  //background(0, 0.1);
  // flow field
  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.001;
      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;


      ////why we need this traslation?
      // push();
      // translate(x, y);
      // pop();
    }
  }

  // vehicles
  for (var i = 0; i < vehicles.length; i++) {
    var v = vehicles[i];


    var r = floor(v.pos.x / RESOLUTION);
    var c = floor(v.pos.y / RESOLUTION);

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




  }
}