Canvas How to - Create a 3D rolling ball

Question

We would like to know how to create a 3D rolling ball.

Answer


<!--   www .  ja  va  2 s  .c o m-->
<!--
code revised from
http://fiddle.jshell.net/GloverDonovan/S3jcq/
-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
var d = document,
    canvas = d.body.appendChild( d.createElement( 'canvas' ) ),
    context = canvas.getContext( '2d' ),
    time = 0,
    w = canvas.width = innerWidth,
    h = canvas.height = innerHeight,
    m = Math,
    cos = m.cos,
    sin = m.sin,
    PI = m.PI
// The main animation loop
setInterval( function() {
    // Clear
    canvas.width = canvas.width;
    time += .1;
    // The number of particles to generate
    i = 10000
    while( i-- ) {
        // The magic
        r =  (w+h)/2 * ( cos( ( time + i ) * ( .05 + ( sin(time/100000) / PI  * .2 ) ) ) / PI )
        context.fillRect( sin(i) * r + w/2,
                          cos(i) * r + h/2,
                          1.5,
                          1.5 )
    }
}, 16 );
}//]]>  
</script>
</head>
<body>
</body>
</html>

The code above is rendered as follows: