Last active
August 26, 2018 06:51
-
-
Save yuvrajkhosa/f6c5ced178fa2fbb2abd81ac8cf40afa to your computer and use it in GitHub Desktop.
Traffic wave Simulator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class Car{ | |
| constructor(_r,_a, _id){ | |
| this.r = _r + random(-10,10) | |
| this.a = _a * 0.0174533 | |
| this.len = 20 | |
| this.amount = 0.01 | |
| this.id = _id | |
| this.x; | |
| this.y; | |
| this.stop = false | |
| this.constMover = false | |
| this.col = [random(130,255),random(130,255),random(130,255)] | |
| } | |
| show(){ | |
| this.x = this.r * Math.cos(this.a) | |
| this.y = this.r * Math.sin(this.a) | |
| stroke(0) | |
| fill(255) | |
| stroke(255) | |
| push() | |
| noStroke() | |
| translate(this.x,this.y) | |
| rotate(this.a / 0.0174533) | |
| fill(this.col) | |
| noStroke() | |
| rect(0,0,this.len,this.len * 2, 10) | |
| pop() | |
| textSize(25) | |
| } | |
| move(other){ | |
| this.d = dist(this.x,this.y,other.x,other.y ) | |
| if(this.constMover == true && this.d > 150){ | |
| this.amount = 0.011 | |
| }else{ | |
| this.amount = map(this.d, 100, 50, 0.01, 0) | |
| } | |
| if (!this.stop){ | |
| this.a += this.amount | |
| } | |
| } | |
| stopMoving(){ | |
| this.stop = true | |
| } | |
| constMove(){ | |
| this.constMover = true | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| </head> | |
| <style> | |
| p span{ | |
| display: block; | |
| } | |
| </style> | |
| <h1 id="space" style="position: relative; top:500px;left:550px;color: white">Press Spacebar to cause traffic wave </h1> | |
| <p style="color:white;position: relative;top:100px; left: 10px">Look at how long it takes the last car in <span>the traffic jam to start moving</span> after the traffic comes to a complete stop. That is what causes a traffic jam </p> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script> | |
| <script src="car.js"></script> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var cars = [] | |
| var amountOfCars = 40 | |
| function setup(){ | |
| angleMode(DEGREES) | |
| rectMode(CENTER) | |
| createCanvas(1600,900) | |
| for (let i = 0; i < amountOfCars; i++){ | |
| cars[i] = new Car(435,i * (360 / amountOfCars), i) | |
| } | |
| } | |
| function draw(){ | |
| translate(width / 2, height / 2) | |
| background(0) | |
| for (let i = 0; i < cars.length; i++){ | |
| cars[i].show() | |
| } | |
| for (let j = 0; j <= cars.length - 2; j++){ | |
| if (j !== cars.length - 1){ | |
| cars[j].move(cars[j + 1]) | |
| } | |
| } | |
| cars[cars.length-1].move(cars[0]) | |
| if (keyIsPressed){ | |
| cars[cars.length-1].stop = true | |
| } | |
| else{ | |
| cars[cars.length-1].stop = false | |
| cars[cars.length-1].constMover = true | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment