Javascript/rolling ball.html at master · enam786/Javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!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>