Created
January 21, 2017 19:58
-
-
Save merlijnvanlent/aaf1a5b09b20286597dbbc15098fd5ae to your computer and use it in GitHub Desktop.
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
| // change these vars until your satisfied MAKE SURE THAT THE CANVAS HAS AN ID OF: "Bounce" AND HAS THE SAME HEIGHT AND WIDTH AS YOU SPECIFY HERE | |
| var WIDTH =1000 //height of canvas | |
| var HEIGHT = 1000; // width of canvas | |
| var balls = 501; // amount of balls | |
| var size = 15; // radius of the balls | |
| var canvas; | |
| var ctx; | |
| var x = [1]; | |
| var y = [1]; | |
| var mx = [3]; | |
| var my = [1]; | |
| var color = ["rgb(237, 83, 0)"] | |
| var temp = 0; | |
| var count = 0; | |
| while (count < balls) { | |
| x.push(Math.round(Math.random()*WIDTH)); | |
| y.push(Math.round(Math.random()*HEIGHT)); | |
| mx.push(Math.round(Math.random()*10-5)); | |
| my.push(Math.round(Math.random()*10-5)); | |
| var temp = Math.round(Math.random()*100); | |
| if (temp < 10) { | |
| color.push("rgb(255, 255, 0)"); // if you want you can replace the rgb colors with another color. | |
| } else if (temp < 20 ) { | |
| color.push("rgb(255, 0, 0)"); | |
| } else if (temp < 30) { | |
| color.push("rgb(0, 255, 0)"); | |
| } else if (temp < 40) { | |
| color.push("rgb(0, 0, 255)"); | |
| } else if (temp < 50) { | |
| color.push("rgb(255, 0, 255)"); | |
| } else { | |
| color.push("rgb(237, 83, 0)"); | |
| } | |
| count++; | |
| } | |
| function circle(x,y,r,c) { | |
| ctx.beginPath(); | |
| ctx.arc(x, y, r, 0, Math.PI*2, true); | |
| ctx.fillStyle = c; | |
| ctx.fill(); | |
| } | |
| function clear() { | |
| ctx.clearRect(0, 0, WIDTH, HEIGHT); | |
| } | |
| function init() { | |
| canvas = document.getElementById("Bounce"); | |
| ctx = canvas.getContext("2d"); | |
| return setInterval(draw, 20); | |
| } | |
| function draw() { | |
| count = 0; | |
| clear(); | |
| ctx.strokeRect(0,0,WIDTH,HEIGHT); | |
| while (count < balls) { | |
| circle(x[count], y[count], size, color[count]); | |
| if (x[count] + mx[count] > WIDTH || x[count] + mx[count] < 0) | |
| mx[count] = -mx[count]; | |
| if (y[count] + my[count] > HEIGHT || y[count] + my[count] < 0) | |
| my[count] = -my[count]; | |
| x[count] += mx[count]; | |
| y[count] += my[count]; | |
| count++; | |
| } | |
| } | |
| init(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment