Thread_Art.js

//JSON
var params = {
  mode: 0,
  mouseMode: false, //it's ","
  angleAdj: 63,
  maxSpeed: 1, //it's ","
  maxSteerForce: 0.01,
  sizeAdj: 0.3,
  red: 255,
  green: 100,
  blue: 0
};
/** MODES
 * 0: READY
 * 1: casualMode
 * 2: patternMode
 * 3: casual+pattern
 * 4: pinMode
 */

// enum

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

gui.add(params, "mode").min(0).max(4).step(1);
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(1).step(0.01);
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);

//canvas
var c;

//text
var instruction;

//Mode
//mode1
var threads = [];
var recMode;

//mode2
var flowers = [];

//mode3=mode1+mode2

//mode4
var points = [];
var RESOLUTION = 100;
var rows, cols;
var linePoints = [];
var positionChange;
var threadMode = false;
var cut = false;




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

  positionChange = false;

  instruction = new Text(width / 2, height / 2);

}



function draw() {
  //background(0, 10);
  // MODE CHANGE
  switch (params.mode) {
    case 0:
      // do nothing!
      break;
    case 1:
      background(0);
      init_casualMode();
      flowers = [];
      points = [];
      linePoints = [];
      params.mode = 0;
      break;
    case 2:
      background(0);
      init_patternMode();
      threads = [];
      points = [];
      linePoints = [];
      params.mode = 0;
      break;
    case 3:
      background(0);
      init_casualMode();
      init_patternMode();
      points = [];
      linePoints = [];
      params.mode = 0;
      break;
    case 4:
      background(0);
      init_pinMode();
      threads = [];
      flowers = [];
      params.mode = 0;
      break;
    default:
      //
      break;
  }


  // DISPLAY



  //Mode One
  for (var i = 0; i < threads.length; i++) {
    var b = threads[i];
    if (flowers.length > 0) {
      b.target = flowers[(i % flowers.length)].pos;
    }
    if (params.mouseMode) {
      b.target = createVector(mouseX, mouseY);
    } else if (recMode) {
      b.changeRect();
    }
    b.flock(threads);
    b.update();
    b.checkEdges();
    b.fillColor = color(params.red + 30 * i, params.green + 30 * i, params.blue + 30 * i);

    b.display();
  }



  //Mode Two

  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 + 30 * i, params.green + 20 * i, params.blue + 20 * i);
      flowers[i].display(a);
    }
  }
  //print(flowers.length);

  //Mode Three

  //draw line
  if (points.length > 0) {
    background(0);
    noFill();
    stroke(params.red, params.green, params.blue);

    beginShape();
    for (var i = 0; i < linePoints.length; i++) {
      if (!cut) {
        curveVertex(linePoints[i].pos.x, linePoints[i].pos.y);
      }
    }
    endShape(CLOSE);



    ////drawpin

    for (var i = 0; i < points.length; i++) {
      if (mouseIsPressed) {
        var target = createVector(mouseX, mouseY);
      } else {
        var target = createVector(width / 2, height / 2);
      }
      var attraction = p5.Vector.sub(target, points[i].pos);

      attraction.normalize();
      points[i].applyForce(attraction);
      if (positionChange) {
        for (var j = 0; j < points.length; j++) {
          if (i != j) {
            points[i].separate(points[j]);
          }
        }
        points[i].adjustment()
        points[i].update();

      }
      points[i].size = 5 + i * 0.1;

      var v = points[i].select(mouseX, mouseY);
      if (v != 0) {
        linePoints.push(new LinePoint(v));
      }

      if (!threadMode) {
        points[i].display();
      }

    }
  }
}

//print(points.length);




function keyPressed() {

  if (keyCode == ENTER) {
    //issue
    if (threads.length > 0) {
      init_casualMode();
    }
    if (flowers.length > 0) {
      init_patternMode();
    }
    if (threads.length > 0 && flowers.length > 0) {
      init_casualMode();
      init_patternMode();
    }
    if (points.length > 0) {
      positionChange = !positionChange;
    }
  }
  //rectMode
  if (key == "0") {
    recMode = !recMode;
  }

  //threadMode
  if (key == "1") {
    threadMode = !threadMode;
  }

  //mouseMode
  if (key == "2") {
    params.mouseMode = !params.mouseMode;
  }

  if (key == "3") {
    cut = !cut;
  }
  //clear
  if (keyCode == SHIFT) {
    background(0);
    threads = [];
    flowers = [];
    points = [];
    linePoints = [];

  }
  ////save canvas
  if (key == " ") {
    saveCanvas(c, 'myThread', 'jpg');
    print("saved");
  }
}




function init_casualMode() {
  threads = [];
  for (var i = 0; i < 5; i++) {
    var h = [0, height];
    var w = [0, width];
    var chance = floor(random(2));
    var v;
    switch (chance) {
      case 0:
        v = createVector(random(width), random(h));
        break;
      case 1:
        v = createVector(random(w), random(height));
        break;
    }

    threads.push(new Thread(v.x, v.y, params.maxSpeed, params.maxSteerForce, params.sizeAdj));
  }
}

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

function init_pinMode() {
  background(0);
  points = [];

  rows = floor(width / RESOLUTION);
  cols = floor(height / RESOLUTION);

  for (var c = 0; c <= cols; c++) {
    for (var r = 0; r <= rows; r++) {
      var x = r * RESOLUTION;
      var y = c * RESOLUTION;
      points.push(new Point(x, y));
    }
  }
}






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

    this.target = createVector(width / 2, height / 2);

    this.rectVector = createVector();
  }
  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 seekForce = this.seek();
    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);

  }
  changeRect() {
    var chance = floor(random(2));
    switch (chance) {
      case 0:
        this.target = createVector(width, this.pos.y);
        break;
      case 1:
        this.target = createVector(this.pos.x, height);
        break;
    }
  }
  seek() {

    var desired = p5.Vector.sub(this.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.mult(2);
        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 / 7) * 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 && mouseIsPressed) {
      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 bSin = sin(frameCount * 0.02) * 50;

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

    rotate(radians(a));
    fill(r, g, b);
    noStroke();
    ellipse(this.penPos.x, this.penPos.y, this.rad, this.rad);
    stroke(r, g, b, 10);
    strokeWeight(1);
    line(0, 0, this.penPos.x, this.penPos.y);
    pop();
  }
}



//
"use strict"
//var p;
class Point {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector();
    this.acc = createVector();
    this.size = 5;
    this.color = color(255);
    this.selected = false;
    this.scale = 1.0;
  }
  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;
  }

  applyForce(force) {
    var mass = this.size;
    force.div(mass);
    this.acc.add(force);
  }
  checkEdges() {
    if (pos.x < 0 && pos.x > width) {
      vel.x.mult(-1);
    }
    if (pos.y < 0 && pos.y > height) {
      vel.y.mult(-1);
    }
  }
  adjustment() {
    var freq = frameCount * 0.005;
    var amp = 1.0;
    var sinValue = abs(sin(freq) * amp) + 0.001;
    
    this.acc.mult(sinValue);
  }

  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
    this.vel.limit(7.9);
  }
  select(x, y) {
    if (this.selected) {
      if (this.scale > -2) {
        this.scale -= 0.01;
      }
    }

    var distance = dist(this.pos.x, this.pos.y, x, y);
    if (distance < this.size + 10) {
      this.size = 10;
      this.color = color(params.red, params.green, params.blue, 200);
      if (mouseIsPressed && this.selected == false) {
        this.selected = true;
        return this.pos;
      }
    } else {
      this.size = 5;
      this.color = color(255);
    }
    return 0;
  }
  display() {
    push();
    translate(this.pos.x, this.pos.y);
    stroke(this.color);
    fill(100, 100);
    strokeWeight(1);
    ellipse(0, 0, this.size * this.scale, this.size * this.scale);
    pop();
  }

}
"use strict";

class LinePoint {
  constructor(vector) {
    this.pos = vector;
  }
}
<!DOCTYPE html>
<THREADShtml>

  <head>
    <meta charset="UTF-8">
    <title>THREADS</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="Text.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>

    <script src="Flower.js" type="text/javascript"></script>

    <script src="ModeThree.js" type="text/javascript"></script>
    <script src="Point.js" type="text/javascript"></script>
    <script src="LinePoint.js" type="text/javascript"></script>

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

  <body>
  </body>

  </html>