Math, Physics, and Animation - HTML5 Canvas

HTML and CSS Reference

In-Depth Information

}

var numBalls = 500 ;

var maxSize = 8;

var minSize = 5;

var maxSpeed = maxSize+5;

var balls = new Array();

var tempBall;

var tempX;

var tempY;

var tempSpeed;

var tempAngle;

var tempRadius;

var tempRadians;

var tempXunits;

var tempYunits;

theCanvas = document.getElementById("canvasOne");

context = theCanvas.getContext("2d");

for (var i = 0; i < numBalls; i++) {

tempRadius = Math.floor(Math.random()*maxSize)+minSize;

tempX = tempRadius*2 + (Math.floor(Math.random()*theCanvas.width)-tempRadius*2);

tempY = tempRadius*2 + (Math.floor(Math.random()*theCanvas.height)-tempRadius*2);

tempSpeed = maxSpeed-tempRadius;

tempAngle = Math.floor(Math.random()*360);

tempRadians = tempAngle * Math.PI/ 180;

tempXunits = Math.cos(tempRadians) * tempSpeed;

tempYunits = Math.sin(tempRadians) * tempSpeed;

tempBall = {x:tempX,y:tempY,radius:tempRadius, speed:tempSpeed, angle:tempAngle,

xunits:tempXunits, yunits:tempYunits}

balls.push(tempBall);

}

setInterval(drawScreen, 33);

function canvasWidthChanged(e) {

var target = e.target;

theCanvas.width = target.value;

drawScreen();

}

function canvasHeightChanged(e) {

var target = e.target;

theCanvas.height = target.value;

drawScreen();

}

</script>

</head>

<body>

HTML5 Canvas

Search WWH ::

Custom Search

Home