Thread_Flower.js

//JSON
var params = {
  casualMode: false,
  patternMode: false,
  mouseMode: false, //it's ","
  angleAdj: 63,
  maxSpeed: 1, //it's ","
  maxSteerForce: 0.01,
  sizeAdj: 1,
  red: 255,
  green: 100,
  blue: 0
};
var currMode = 0;
var prevMode = 0;
// casualMode: 1;
// patternMode: 2;

var gui = new dat.gui.GUI();

gui.add(params, "casualMode");
gui.add(params, "patternMode");
gui.add(params, "mouseMode");
gui.add(params, "angleAdj").min(13).max(79).step(2);
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, "sizeAdj").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 = [];
var flowers = [];
var recMode;
var c;


function setup() {
  c = createCanvas(1000, 600);
  background(0);
  recMode = false;
}



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

  // MODE CHANGE
  if (params.casualMode && params.patternMode) {
    currMode = 0;
    if (prevMode != currMode) {
      init_casualMode();
      init_patternMode();
    }
  } else if (params.casualMode) {
    currMode = 1;
    params.patternMode = false;
    flowers = [];
    if (prevMode != currMode) {
      background(0);
      init_casualMode();
    }
  } else if (params.patternMode) {
    currMode = 2;
    params.casualMode = false;
    threads = [];
    if (prevMode != currMode) {
      background(0);
      init_patternMode();
    }
  } else {
    currMode = 3;
    threads = [];
    flowers = [];
    background(0);
  }

  // DISPLAY
  for (var i = 0; i < flowers.length; i++) {
    for (var a = 0; a < 360; a += params.angleAdj) {
      flowers[i].updateAngle();
      flowers[i].updatePosition();
      flowers[i].color = color(params.red + 20 * i, params.green + 10 * i, params.blue + 10 * i);
      flowers[i].display(a);
    }
  }

  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();
  }

  print(currMode);
  // MODE
  prevMode = currMode;
}



function keyPressed() {
  if (keyCode == " ") {
    background(0);
  }

  if (keyCode == ENTER) {
    if (currMode = 0) {
      init_casualMode();
      init_patternMode();
    } else if (currMode = 1) {
      init_casualMode();
    } else if (currMode = 2) {
      init_patternMode();
    } else if (currMode = 3) {
      background(0);
    }
  }
  //error
  //how to use key???
  if (key == "0") {
    recMode = true;
  }

  if (key == "1") {
    saveCanvas(c, 'myThread', 'jpg');
    print("here");
  }
}




function init_casualMode() {
  threads = [];
  for (var i = 0; i < 3; i++) {
    var h = [0, random(height), height];
    var w = [0, width];
    //threads.push(new Thread(random(w), random(h), params.maxSpeed, params.maxSteerForce, params.sizeAdj));
    if (recMode == false) {
      threads.push(new Thread(random(w), random(h), params.maxSpeed, params.maxSteerForce, params.sizeAdj));
    } else {
      threads.push(new Rectangle(0, random(h), params.maxSpeed, params.maxSteerForce, params.sizeAdj));
      print("R");
    }
  }
}

function init_patternMode() {
  flowers = [];
  for (var i = 0; i < 1; i++) {
    flowers.push(new Flower(width * random(0.1, 0.9), height * random(0.1, 0.9), params.sizeAdj));
  }

}




//"use strict";

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

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

    this.size = random(0.5, 1.5) + sizeAdj;

    this.separateDistance = random(100);
    this.neighborDistance = random(100);

    this.fillColor = color(255);

    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 

    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);

    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);

      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";
//var p;

class Flower {
  constructor(x, y, sizeAdj) {
    this.pos = createVector(x, y);
    this.color = color(255);
    this.freq;

    this.amp = 0;
    this.ampMax = (width / 2) * sizeAdj;
    this.rad = 3 * sizeAdj;

    this.angle;
    this.value;
    this.penPos = 0;


  }
  updateAngle() {
    this.amp = lerp(this.amp, this.ampMax, 0.002);
    this.freq = frameCount * 0.01;
    this.angle = radians(frameCount);
    this.value = noise(this.freq) * this.amp;
  }
  updatePosition() {
    if (params.mouseMode) {
      this.pos.x = mouseX;
      this.pos.y = mouseY;
    }
    this.penPos = p5.Vector.fromAngle(this.angle);
    this.penPos.mult(this.value);
  }


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

    var rSin = sin(frameCount * 0.1) * 50;
    var gSin = sin(frameCount * 0.03) * 50;

    var r = red(this.color) + rSin;
    var g = green(this.color) + gSin;
    var b = blue(this.color);

    rotate(radians(a));
    fill(r, g, b);
    noStroke();
    ellipse(this.penPos.x, this.penPos.y, this.rad, this.rad);
    pop();
  }
}



//"use strict"

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

  }
  flock(others) {
    var target;
    if (params.mouseMode) {
      target = createVector(mouseX, mouseY);
    } else {
      target = createVector(width, this.pos.y);
    }
    var seekForce = this.seek(target);
    var sepaForce = this.separate(others);
    var coheForce = this.cohesion(others);
    var alignForce = this.align(others);

    //adjustment 

    sepaForce.div(0.5);

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

  }
}<!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="Flower.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>