Spiral Clock - OpenProcessing

mySketch
xxxxxxxxxx
 
var flowfield;
var vehicles = [];
var resolution = 10;
let startTime;
let elapsedTime;
let itemCount = 600;
​
function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
  }
​
function setup() {
  canvas = createCanvas(windowWidth, windowHeight);
  canvas.position(0, 0);
​
  startTime = millis();
  flowfield = new FlowField(resolution);
​
  for (var i = 0; i < itemCount; i++) {
    vehicles.push(
      new Vehicle(windowWidth / itemCount * i, windowHeight/2, 3, 0.5)
    );
  }
​
  describe('A dark-blue canvas, where six-hundred colorful (light blue and pink) pill-shaped objects appear, ten of them each second. These objects spawn from left to right on the vertical center of the canvas, taking a total of sixty seconds. After spawning, they move clockwise around the center of the canvas, resulting in a spiraling animation. After sixty seconds, the animation restarts.');
}
​
function draw() {
  background("rgba(0,8,49,1.0)");
​
  flowfield.display();
​
  elapsedTime = millis() - startTime;
  if (elapsedTime >= 60000) {
    flowfield.init();
    startTime = millis();
  }
​
  var vehiclePerSec = (vehicles.length / 60) * (elapsedTime / 1000);
​
  if (vehiclePerSec <= vehicles.length) {
    for (var i = 0; i < vehiclePerSec; i++) {
      vehicles[i].follow(flowfield);
      vehicles[i].run();
    }
  }
  else {
    for (var i = 0; i < vehicles.length; i++) {
      vehicles[i].follow(flowfield);
      vehicles[i].run();
    }
  }
}
​
function Vehicle(x,y,ms,mf) {
  this.position = createVector(x,y);
  this.acceleration = createVector(0,0);
  this.velocity = createVector(0,0);
  this.r = 4;
  this.maxspeed = ms || 4;
  this.maxforce = mf || 0.1;
​
  this.run = function() {
    this.update();
    this.borders();
    this.display();
  }
​
  this.follow = function(flow) {
    var desired = flow.lookup(this.position);
    desired.mult(this.maxspeed);
    var steer = p5.Vector.sub(desired, this.velocity);
    steer.limit(this.maxforce);
    this.applyForce(steer);
  }
​
  this.applyForce = function(force) {
    this.acceleration.add(force);
  }
​
  this.update = function() {
    this.velocity.add(this.acceleration);
    this.velocity.limit(this.maxspeed);
    this.position.add(this.velocity);
    this.acceleration.mult(0);
  }
​
  this.borders = function() {
    if (this.position.x < -this.r) this.position.x = width+this.r;
    if (this.position.y < -this.r) this.position.y = height+this.r;
    if (this.position.x > width+this.r) this.position.x = -this.r;
    if (this.position.y > height+this.r) this.position.y = -this.r;
  }
​
  var teamColor = random(0, 1);
  if (teamColor < 0.5) {
    this.objectColor = color("rgba(150,191,230, 1.00)");
  } else {
    this.objectColor = color("rgba(255,97,107, 1.0)");
  }
​
  this.display = function () {
    var theta = this.velocity.heading();
    stroke(this.objectColor);
    strokeWeight(4);
    push();
    translate(this.position.x, this.position.y);
    rotate(theta);
    line(0, 0, 2, 0);
    pop();
  };
}
​
​
function FlowField(r) {
    this.resolution = r;
    this.cols = width / this.resolution;
    this.rows = height / this.resolution;
    this.make2Darray = function (n) {
      var array = [];
      for (var i = 0; i < n; i++) {
        array[i] = [];
      }
      return array;
    };
    this.field = this.make2Darray(this.cols);
  
    this.init = function () {
      for (var i = 0; i < this.cols; i++) {
        for (var j = 0; j < this.rows; j++) {
          this.field[i][j] = createVector(this.rows / 2 - j, -1 * (this.cols / 2 - i));
        }
      }
    };
    this.init();
​
    this.display = function () {
        for (var i = 0; i < this.cols; i++) {
            for (var j = 0; j < this.rows; j++) {
                drawVector(this.field[i][j].normalize(), i * this.resolution, j * this.resolution);
            }
        }
    };
​
    this.lookup = function (lookup) {
        var column = Math.floor(constrain(lookup.x / this.resolution, 0, this.cols - 1));
        var row = Math.floor(constrain(lookup.y / this.resolution, 0, this.rows - 1));
        return this.field[column][row].copy();
    };
​
    var drawVector = function (v, x, y) {
        push();
        strokeWeight(1);
        stroke("rgba(0,8,74,1.0)");
        translate(x, y);
        rotate(v.heading());
        line(0, 0, v.mag() * 7, 0);
        pop();
    };
}
​