SHARE
TWEET

Untitled

a guest May 19th, 2017 43 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //JSON
  2. var params = {
  3.  
  4.   mouseMode: false, //it's ","
  5.   maxSpeed: 1, //it's ","
  6.   maxSteerForce: 0.01,
  7.   sinAdj: 1,
  8.   red: 255,
  9.   green: 100,
  10.   blue: 0
  11.  
  12. };
  13.  
  14. var gui = new dat.gui.GUI();
  15. gui.add(params, "mouseMode");
  16.  
  17. gui.add(params, "maxSpeed").min(0.5).max(5.0).step(0.1);
  18.  
  19. gui.add(params, "maxSteerForce").min(0.01).max(0.1).step(0.01);
  20.  
  21. gui.add(params, "sinAdj").min(0.1).max(2).step(0.1);
  22.  
  23. gui.add(params, "red").min(0).max(255).step(1);
  24.  
  25. gui.add(params, "green").min(0).max(255).step(1);
  26.  
  27. gui.add(params, "blue").min(0).max(255).step(1);
  28.  
  29. //Thread
  30. var threads = [];
  31.  
  32.  
  33.  
  34. function setup() {
  35.  
  36.   createCanvas(1000, 600);
  37.   background(0);
  38.   for (var i = 0; i < 10; i++) {
  39.     var h = [0, random(height), height];
  40.     var w = [0, width];
  41.  
  42.     threads.push(new Thread(random(w), random(h), params.maxSpeed, params.maxSteerForce, params.fillColor, params.sinAdj));
  43.   }
  44. }
  45.  
  46. function draw() {
  47.   //background(0, 10);
  48.   // if (keyIsPressed) {
  49.   //   var h = [0, height];
  50.   //   threads.push(new Triangle(random(width), random(h)));
  51.   //   print("here");
  52.   // }
  53.  
  54.  
  55.   for (var i = 0; i < threads.length; i++) {
  56.     var b = threads[i];
  57.     b.flock(threads);
  58.     b.update();
  59.     b.checkEdges();
  60.     b.fillColor = color(params.red + 20 * i, params.green + 10 * i, params.blue + 10 * i);
  61.     b.display();
  62.   }
  63.  
  64. }
  65.  
  66. function mousePressed() {
  67.   params.mouseMode = !params.mouseMode;
  68. }
  69.  
  70. function keyPressed() {
  71.   if (key == " ") {
  72.     clear();
  73.     background(0);
  74.   }
  75. }
  76. "use strict"
  77. "use strict";
  78.  
  79. class Thread {
  80.   constructor(x, y, maxSpeed, maxSteerForce, fillColor, sinAdj) {
  81.     this.pos = createVector(x, y);
  82.     this.vel = createVector(random(-1, 1), random(-1, 1));
  83.     this.acc = createVector();
  84.  
  85.     this.maxSpeed = 2; // max speed;
  86.     this.maxSteerForce = 0.05; // max steering force
  87.  
  88.     this.size = 2;
  89.  
  90.     this.separateDistance = random(100);
  91.     this.neighborDistance = random(100);
  92.     this.scale = random(0.13, 0.98);
  93.     this.fillColor = color(255, random(200), random(50));
  94.     this.sinAdj = random(0.1, 1.1);
  95.   }
  96.   update() {
  97.     this.vel.add(this.acc);
  98.     this.vel.limit(this.maxSpeed); //***
  99.     this.pos.add(this.vel);
  100.     this.acc.mult(0);
  101.     this.angle = this.vel.heading();
  102.   }
  103.   applyForce(force) {
  104.     this.acc.add(force);
  105.   }
  106.   flock(others) {
  107.     var target;
  108.     if (params.mouseMode) {
  109.       target = createVector(mouseX, mouseY);
  110.     } else {
  111.       target = createVector(width / 2, height / 2);
  112.     }
  113.     var seekForce = this.seek(target);
  114.     var sepaForce = this.separate(others);
  115.     var coheForce = this.cohesion(others);
  116.     var alignForce = this.align(others);
  117.  
  118.     //adjustment
  119.     //error!!
  120.     // seekForce.mult(1.3);
  121.     sepaForce.div(0.5);
  122.  
  123.     this.applyForce(seekForce);
  124.     this.applyForce(sepaForce);
  125.     this.applyForce(coheForce);
  126.     this.applyForce(alignForce);
  127.  
  128.   }
  129.   seek(target) {
  130.     var desired = p5.Vector.sub(target, this.pos);
  131.     desired.setMag(this.maxSpeed);
  132.     var steer = p5.Vector.sub(desired, this.vel);
  133.     steer.limit(this.maxSteerForce);
  134.     //this.applyForce(steer);
  135.     return steer;
  136.   }
  137.  
  138.   separate(others) {
  139.     //var
  140.     var vector = createVector();
  141.     var count = 0;
  142.  
  143.     //sum
  144.     for (var i = 0; i < others.length; i++) {
  145.       var other = others[i];
  146.       var distance = this.pos.dist(other.pos);
  147.  
  148.       if (distance > 0 && distance < this.separateDistance) {
  149.         var diff = p5.Vector.sub(this.pos, other.pos);
  150.         diff.normalize();
  151.         diff.div(distance);
  152.         vector.add(diff); //sum
  153.         count++;
  154.       }
  155.     }
  156.  
  157.     //avg
  158.     if (count > 0) {
  159.       vector.div(count); //avg
  160.     }
  161.     if (vector.mag() > 0) {
  162.       vector.setMag(this.maxSpeed);
  163.       vector.sub(this.vel); //desired velocity
  164.       vector.limit(this.maxSteerForce);
  165.       //this.applyForce(vector);
  166.       return vector;
  167.     }
  168.     return vector;
  169.   }
  170.  
  171.   cohesion(others) {
  172.     var position = createVector();
  173.     var count = 0;
  174.     for (var i = 0; i < others.length; i++) {
  175.       var other = others[i];
  176.       var distance = this.pos.dist(other.pos);
  177.       if (distance > 0 && distance < this.neighborDistance) {
  178.         position.add(other.pos);
  179.         count++;
  180.       }
  181.     }
  182.     if (count > 0) {
  183.       position.div(count); //avg
  184.       return this.seek(position);
  185.     }
  186.     return position;
  187.   }
  188.  
  189.   align(others) {
  190.     var velocity = createVector();
  191.     var count = 0;
  192.     for (var i = 0; i < others.length; i++) {
  193.       var other = others[i];
  194.       var distance = this.pos.dist(other.pos);
  195.       if (distance > 0 && distance < this.neighborDistance) {
  196.         velocity.add(other.vel); //sum
  197.         count++;
  198.       }
  199.     }
  200.     if (count > 0) {
  201.       velocity.div(count); //avg
  202.       velocity.setMag(this.maxSpeed);
  203.       var steer = p5.Vector.sub(velocity, this.vel);
  204.       steer.limit(this.maxSteerForce);
  205.       return steer;
  206.     }
  207.     return velocity;
  208.   }
  209.  
  210.   checkEdges() {
  211.     // x
  212.     if (this.pos.x < 0) {
  213.       this.pos.x = width;
  214.     } else if (this.pos.x > width) {
  215.       this.pos.x = 0;
  216.     }
  217.     // y
  218.     if (this.pos.y < 0) {
  219.       this.pos.y = height;
  220.     } else if (this.pos.y > height) {
  221.       this.pos.y = 0;
  222.     }
  223.   }
  224.  
  225.  
  226.  
  227.   display() {
  228.     push();
  229.  
  230.     translate(this.pos.x, this.pos.y);
  231.     rotate(this.angle);
  232.     noStroke();
  233.  
  234.     fill(this.fillColor);
  235.  
  236.  
  237.     var freq = frameCount * 0.1 * this.sinAdj;
  238.     var amp = 1 * this.sinAdj;
  239.     var Adj = noise(freq) * amp;
  240.  
  241.     ellipse(6, 2, this.size + Adj, this.size + Adj);
  242.  
  243.     pop();
  244.   }
  245. }"use strict"
  246.  
  247. class Triangle extends Thread {
  248.   constructor(_x, _y) {
  249.     super(_x, _y);
  250.  
  251.     this.sizeAdj = random(0.1, 0.5);
  252.  
  253.     this.angleSpeed = random(0.01, 0.03);
  254.  
  255.   }
  256.   display() {
  257.     push();
  258.     translate(this.pos.x, this.pos.y);
  259.     rotate(frameCount * this.angleSpeed);
  260.     noStroke();
  261.     fill(255);
  262.     triangle(0, 0, 10, this.size * this.sizeAdj, -10, this.size * this.sizeAdj);
  263.     pop();
  264.   }
  265. }<!DOCTYPE html>
  266. <html>
  267.  
  268. <head>
  269.   <meta charset="UTF-8">
  270.   <title>flocking</title>
  271.   <script src="libraries/p5.js" type="text/javascript"></script>
  272.   <script src="libraries/p5.dom.js" type="text/javascript"></script>
  273.   <script src="libraries/p5.sound.js" type="text/javascript"></script>
  274.  
  275.   <script defer src="libraries/dat.gui.min.js" type="text/javascript"></script>
  276.   <script defer src="sketch.js" type="text/javascript"></script>
  277.  
  278.   <script src="Thread.js" type="text/javascript"></script>
  279.   <script src="Rect.js" type="text/javascript"></script>
  280.   <script src="Triangle.js" type="text/javascript"></script>
  281.  
  282.   <style>
  283.     body {
  284.       padding: 0;
  285.       margin: 0;
  286.     }
  287.    
  288.     canvas {
  289.       vertical-align: top;
  290.     }
  291.   </style>
  292. </head>
  293.  
  294. <body>
  295. </body>
  296.  
  297. </html>
  298. class Circle extends Thread {
  299.   constructor(_x, _y) {
  300.     super(_x, _y);
  301.     this.color = color(255);
  302.     this.sizeAdj = random(1, 5);
  303.  
  304.   }
  305.   display() {
  306.     push();
  307.     translate(this.pos.x, this.pos.y);
  308.  
  309.     stroke(this.color);
  310.     noFill();
  311.     rect(0, 0, this.size * this.sizeAdj, this.size * this.sizeAdj);
  312.     pop();
  313.   }
  314. }
RAW Paste Data
Challenge yourself this year...
Learn something new in 2017
Top