Last active
February 3, 2020 17:25
-
-
Save phuctvt/5c5b7b057c7ed496d6f64da4a3b0f1a8 to your computer and use it in GitHub Desktop.
Initializing a force to move a particle to another point (at a top which this particle can fly up on before it going down) and has a gravity force impact on it. I believe it won't always 100% touch to the target point, it will has a distance but close to the target in some cases.
This file contains hidden or 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
| const c = document.querySelector('#canvas'); | |
| c.width = window.innerWidth; | |
| c.height = window.innerHeight; | |
| const w = c.width; | |
| const h = c.height; | |
| const ctx = c.getContext('2d'); | |
| function clear(color) { | |
| ctx.save(); | |
| ctx.fillStyle = color || 'white'; | |
| ctx.fillRect(0, 0, w, h); | |
| ctx.restore(); | |
| } | |
| function circle(x, y, r, color) { | |
| ctx.save(); | |
| ctx.beginPath(); | |
| ctx.arc(x, y, r, 0, Math.PI * 2); | |
| ctx.fillStyle = color || 'black'; | |
| ctx.fill(); | |
| ctx.restore(); | |
| } |
This file contains hidden or 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
| function random(min, max) { | |
| min = Math.ceil(min); | |
| max = Math.floor(max); | |
| return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive | |
| } |
This file contains hidden or 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> | |
| <head> | |
| <title></title> | |
| </head> | |
| <body style="margin: 0px;"> | |
| <canvas id="canvas" style="display: block;"></canvas> | |
| <script type="text/javascript" src="helper.js"></script> | |
| <script type="text/javascript" src="graph.js"></script> | |
| <script type="text/javascript" src="vector.js"></script> | |
| <script type="text/javascript" src="particle.js"></script> | |
| <script type="text/javascript" src="script.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or 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 Particle { | |
| constructor(x, y, color) { | |
| this.r = 10; | |
| this.loc = new Vector(x, y); | |
| this.vel = new Vector(0, 0); | |
| this.acc = new Vector(0, 0); | |
| this.color = color; | |
| } | |
| update() { | |
| this.vel.add(this.acc); | |
| this.loc.add(this.vel); | |
| this.acc.mult(0); | |
| } | |
| draw() { | |
| circle(this.loc.x, this.loc.y, this.r, this.color || 'white'); | |
| } | |
| applyForce(force) { | |
| this.acc.add(force); | |
| } | |
| } |
This file contains hidden or 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
| let p = new Particle(random(0, w), h - 50); | |
| let tar = new Particle(random(0, w), random(100, 3 * h / 4), 'green'); | |
| let gra = new Vector(0, .5); | |
| function setup() { | |
| let initForce = p.loc.getForceTo(tar.loc, gra); | |
| p.applyForce(initForce); | |
| } | |
| function draw() { | |
| clear('black'); | |
| if (p.vel.y > 10) { | |
| p = new Particle(random(0, w), h - 50); | |
| tar = new Particle(random(0, w), random(100, 3 * h / 4), 'green'); | |
| let initForce = p.loc.getForceTo(tar.loc, gra); | |
| p.applyForce(initForce); | |
| } | |
| p.applyForce(gra); | |
| p.update(); | |
| p.draw(); | |
| tar.draw(); | |
| window.requestAnimationFrame(draw); | |
| } | |
| setup(); | |
| window.requestAnimationFrame(draw); |
This file contains hidden or 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 Vector { | |
| constructor(x, y) { | |
| this.x = x; | |
| this.y = y; | |
| } | |
| add(vec) { | |
| this.x += vec.x; | |
| this.y += vec.y; | |
| } | |
| mult(val) { | |
| this.x *= val; | |
| this.y *= val; | |
| } | |
| getForceTo(tar, gra) { | |
| let y = tar.y; | |
| let i = 1; | |
| while (y < this.y) { | |
| y += gra.y * i; | |
| i++; | |
| } | |
| i--; | |
| let resX = (tar.x - this.x) / i; | |
| let resY = - gra.y * (i + 1); | |
| return new Vector(resX, resY); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment