Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!Doctype HTML>
<head>
<script>
var cirX = [];
var cirY = [];
var chX = [];
var chY = [];
var canvas;
var width;
var height;
​
function initCircle(nBalls) {
  alert(nBalls)
  for(var i = 0; i<nBalls;i++) {
    alert("loop  " + i)
    chX[i] = (Math.floor(Math.random()*200)/10);
    chY[i] = (Math.floor(Math.random()*200)/10);
    cirX[i] = Math.floor(Math.random()*width);
    cirY[i] = Math.floor(Math.random()*height);
    alert("Co-ordinates " + (cirX[i]) + " x " + (cirY[i]));
​
    circle(cirX[i],cirY[i],3);
    (function(x){
      setInterval(moveBall,10, x);
    })(i);
  }
}
​
function moveBall(ballNum) {
    if(cirX[ballNum] > width||cirX[ballNum] < 0) {
      chX[ballNum] = 0-chX[ballNum];
    }
    if(cirY[ballNum] > height|| cirY[ballNum] < 0) {
      chY[ballNum] = 0-chY[ballNum];
    }
    cirX[ballNum] = cirX[ballNum] + chX[ballNum];
    cirY[ballNum] = cirY[ballNum] + chY[ballNum];
    circle(cirX[ballNum],cirY[ballNum],3);
​
}
​
function circle(x,y,r) {
  var ctx=canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle="#FF0000";
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI*2, true);
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">
</canvas>
<script>
canvas=document.getElementById("canvas");
width = canvas.width;
height = canvas.height;
initCircle(3); //this sets the number of circles
</script>
</body>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
_diode_pro
0viewers