casualThread.js

//JSON
var params = {

  mouseMode: false, //it's ","
  maxSpeed: 1, //it's ","
  maxSteerForce: 0.01,
  sinAdj: 1,
  red: 255,
  green: 100,
  blue: 0

};

var gui = new dat.gui.GUI();
gui.add(params, "mouseMode");

gui.add(params, "maxSpeed").min(0.5).max(5.0).step(0.1);

gui.add(params, "maxSteerForce").min(0.01).max(0.1).step(0.01);

gui.add(params, "sinAdj").min(0.1).max(2).step(0.1);

gui.add(params, "red").min(0).max(255).step(1);

gui.add(params, "green").min(0).max(255).step(1);

gui.add(params, "blue").min(0).max(255).step(1);

//Thread
var threads = [];



function setup() {

  createCanvas(1000, 600);
  background(0);
  for (var i = 0; i < 10; i++) {
    var h = [0, random(height), height];
    var w = [0, width];

    threads.push(new Thread(random(w), random(h), params.maxSpeed, params.maxSteerForce, params.fillColor, params.sinAdj));
  }
}

function draw() {
  //background(0, 10);
  // if (keyIsPressed) {
  //   var h = [0, height];
  //   threads.push(new Triangle(random(width), random(h)));
  //   print("here");
  // }


  for (var i = 0; i < threads.length; i++) {
    var b = threads[i];
    b.flock(threads);
    b.update();
    b.checkEdges();
    b.fillColor = color(params.red + 20 * i, params.green + 10 * i, params.blue + 10 * i);
    b.display();
  }

}

function mousePressed() {
  params.mouseMode = !params.mouseMode;
}

function keyPressed() {
  if (key == " ") {
    clear();
    background(0);
  }
}
"use strict"
"use strict";

class Thread {
  constructor(x, y, maxSpeed, maxSteerForce, fillColor, sinAdj) {
    this.pos = createVector(x, y);
    this.vel = createVector(random(-1, 1), random(-1, 1));
    this.acc = createVector();

    this.maxSpeed = 2; // max speed;
    this.maxSteerForce = 0.05; // max steering force

    this.size = 2;

    this.separateDistance = random(100);
    this.neighborDistance = random(100);
    this.scale = random(0.13, 0.98);
    this.fillColor = color(255, random(200), random(50));
    this.sinAdj = random(0.1, 1.1);
  }
  update() {
    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed); //***
    this.pos.add(this.vel);
    this.acc.mult(0);
    this.angle = this.vel.heading();
  }
  applyForce(force) {
    this.acc.add(force);
  }
  flock(others) {
    var target;
    if (params.mouseMode) {
      target = createVector(mouseX, mouseY);
    } else {
      target = createVector(width / 2, height / 2);
    }
    var seekForce = this.seek(target);
    var sepaForce = this.separate(others);
    var coheForce = this.cohesion(others);
    var alignForce = this.align(others);

    //adjustment 
    //error!!
    // seekForce.mult(1.3);
    sepaForce.div(0.5);

    this.applyForce(seekForce);
    this.applyForce(sepaForce);
    this.applyForce(coheForce);
    this.applyForce(alignForce);

  }
  seek(target) {
    var desired = p5.Vector.sub(target, this.pos);
    desired.setMag(this.maxSpeed);
    var steer = p5.Vector.sub(desired, this.vel);
    steer.limit(this.maxSteerForce);
    //this.applyForce(steer);
    return steer;
  }

  separate(others) {
    //var
    var vector = createVector();
    var count = 0;

    //sum
    for (var i = 0; i < others.length; i++) {
      var other = others[i];
      var distance = this.pos.dist(other.pos);

      if (distance > 0 && distance < this.separateDistance) {
        var diff = p5.Vector.sub(this.pos, other.pos);
        diff.normalize();
        diff.div(distance);
        vector.add(diff); //sum
        count++;
      }
    }

    //avg
    if (count > 0) {
      vector.div(count); //avg
    }
    if (vector.mag() > 0) {
      vector.setMag(this.maxSpeed);
      vector.sub(this.vel); //desired velocity
      vector.limit(this.maxSteerForce);
      //this.applyForce(vector);
      return vector;
    }
    return vector;
  }

  cohesion(others) {
    var position = createVector();
    var count = 0;
    for (var i = 0; i < others.length; i++) {
      var other = others[i];
      var distance = this.pos.dist(other.pos);
      if (distance > 0 && distance < this.neighborDistance) {
        position.add(other.pos);
        count++;
      }
    }
    if (count > 0) {
      position.div(count); //avg
      return this.seek(position);
    }
    return position;
  }

  align(others) {
    var velocity = createVector();
    var count = 0;
    for (var i = 0; i < others.length; i++) {
      var other = others[i];
      var distance = this.pos.dist(other.pos);
      if (distance > 0 && distance < this.neighborDistance) {
        velocity.add(other.vel); //sum
        count++;
      }
    }
    if (count > 0) {
      velocity.div(count); //avg
      velocity.setMag(this.maxSpeed);
      var steer = p5.Vector.sub(velocity, this.vel);
      steer.limit(this.maxSteerForce);
      return steer;
    }
    return velocity;
  }

  checkEdges() {
    // x
    if (this.pos.x < 0) {
      this.pos.x = width;
    } else if (this.pos.x > width) {
      this.pos.x = 0;
    }
    // y
    if (this.pos.y < 0) {
      this.pos.y = height;
    } else if (this.pos.y > height) {
      this.pos.y = 0;
    }
  }



  display() {
    push();

    translate(this.pos.x, this.pos.y);
    rotate(this.angle);
    noStroke();

    fill(this.fillColor);


    var freq = frameCount * 0.1 * this.sinAdj;
    var amp = 1 * this.sinAdj;
    var Adj = noise(freq) * amp;

    ellipse(6, 2, this.size + Adj, this.size + Adj);

    pop();
  }
}"use strict"

class Triangle extends Thread {
  constructor(_x, _y) {
    super(_x, _y);

    this.sizeAdj = random(0.1, 0.5);

    this.angleSpeed = random(0.01, 0.03);

  }
  display() {
    push();
    translate(this.pos.x, this.pos.y);
    rotate(frameCount * this.angleSpeed);
    noStroke();
    fill(255);
    triangle(0, 0, 10, this.size * this.sizeAdj, -10, this.size * this.sizeAdj);
    pop();
  }
}<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>flocking</title>
  <script src="libraries/p5.js" type="text/javascript"></script>
  <script src="libraries/p5.dom.js" type="text/javascript"></script>
  <script src="libraries/p5.sound.js" type="text/javascript"></script>

  <script defer src="libraries/dat.gui.min.js" type="text/javascript"></script>
  <script defer src="sketch.js" type="text/javascript"></script>

  <script src="Thread.js" type="text/javascript"></script>
  <script src="Rect.js" type="text/javascript"></script>
  <script src="Triangle.js" type="text/javascript"></script>

  <style>
    body {
      padding: 0;
      margin: 0;
    }
    
    canvas {
      vertical-align: top;
    }
  </style>
</head>

<body>
</body>

</html>
class Circle extends Thread {
  constructor(_x, _y) {
    super(_x, _y);
    this.color = color(255);
    this.sizeAdj = random(1, 5);

  }
  display() {
    push();
    translate(this.pos.x, this.pos.y);

    stroke(this.color);
    noFill();
    rect(0, 0, this.size * this.sizeAdj, this.size * this.sizeAdj);
    pop();
  }
}