Created
August 18, 2017 23:11
-
-
Save NickBaynham/8fa2a7a14a0bd89eaa46e406283ceb6f to your computer and use it in GitHub Desktop.
annimation
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> | |
| <!-- Load the Paper.js library --> | |
| <script type="text/javascript" src="js/paper-full.min.js"></script> | |
| <!-- Define inlined PaperScript associate it with myCanvas --> | |
| <script type="text/paperscript" canvas="myCanvas"> | |
| var balls = []; | |
| var ball1 = { | |
| "id": 1, | |
| "xPos": 10, | |
| "yPos": 90, | |
| "size": 8, | |
| "color": "green", | |
| "xInc": 1, | |
| "yInc": 1, | |
| "speed": 1 | |
| }; | |
| var ball2 = { | |
| "id": 2, | |
| "xPos": 20, | |
| "yPos": 30, | |
| "size": 8, | |
| "color": "blue", | |
| "xInc": 1, | |
| "yInc": 1, | |
| "speed": 1 | |
| }; | |
| var ball3 = { | |
| "id": 3, | |
| "xPos": 50, | |
| "yPos": 80, | |
| "size": 8, | |
| "color": "yellow", | |
| "xInc": 1, | |
| "yInc": -1, | |
| "speed": 1 | |
| }; | |
| var ball4 = { | |
| "id": 4, | |
| "xPos": 30, | |
| "yPos": 20, | |
| "size": 8, | |
| "color": "red", | |
| "xInc": 1, | |
| "yInc": -1, | |
| "speed": 1 | |
| }; | |
| balls.push(ball1); | |
| balls.push(ball2); | |
| balls.push(ball3); | |
| balls.push(ball4); | |
| balls.forEach(function(b){ | |
| aBall = new Path.Circle(new Point(b.xPos, b.yPos), b.size); | |
| aBall.fillColor = b.color; | |
| aBall.position.x = b.xPos; | |
| aBall.position.y = b.yPos; | |
| b.obj = aBall; | |
| }); | |
| function onFrame(event) { | |
| balls.forEach(function(bb){ | |
| if (bb.obj.position.x == 200) bb.xInc = -bb.speed; | |
| if (bb.obj.position.x == 10) bb.xInc = bb.speed; | |
| bb.obj.position.x = bb.obj.position.x + bb.xInc; | |
| if (bb.obj.position.y == 140) bb.yInc = -bb.speed; | |
| if (bb.obj.position.y == 10) bb.yInc = bb.speed; | |
| bb.obj.position.y = bb.obj.position.y + bb.yInc; | |
| }); | |
| // collisions | |
| balls.forEach(function(bbb) { | |
| balls.forEach(function(nextBall){ | |
| if (bbb.id !== nextBall.id) { | |
| if ((Math.abs(bbb.obj.position.x - nextBall.obj.position.x) <=10) && (Math.abs(bbb.obj.position.y - nextBall.obj.position.y)) <= 10) { | |
| bbb.xInc = -bbb.xInc; | |
| bbb.yInc = -bbb.yInc; | |
| }; | |
| } | |
| }); | |
| }); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <canvas id="myCanvas" resize></canvas> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment