Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //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();
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement