More fun with Trig and Canvas

From Devipedia

Jump to: navigation, search

http://www.devinvenable.com/static/canvas2/spin.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="./js/excanvas.js" type="text/javascript"></script> 
    <script src="./js/jquery-1.3.2.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
        $(function(){
            var canvas  = $('#drawonme')[0];
            canvas.width = $(window).width();
            canvas.height = $(window).height();
 
            var ctx     = canvas.getContext('2d');
           
            // origin offsets 
            var ox = $(window).width()/3;
            var oy = $(window).height()/2;
            
            // angular offset 
            var ao = 55;
 
            // radii
            var rx = 200.0;
            var ry = 200.0;
 
            var steps = 64;
            var trioffset = steps/4;
            var angleStep = Math.PI * 2 / steps;
            var a= 0;
            var movestep = 0; 
   
            setInterval( renderCircle, 1);
 
            function renderCircle() {
                var canvas  = $('#drawonme')[0];
                ctx.clearRect(0,0,canvas.width,canvas.height);         
                rx++; ry++;
                movestep += 1;
                if (movestep > steps)
                    movestep = 0;
 
                for(a=0; a < steps; a++) { 
                    var x = Math.sin(a * angleStep + ao) * rx + ox 
                    var y = Math.cos(a * angleStep + ao) * ry + oy
                    var trix = Math.sin(a * angleStep + trioffset + ao) * rx + ox 
                    var triy = Math.cos(a * angleStep + trioffset + ao) * ry + oy
    
                    if (a == movestep) {
                        ctx.fillStyle = 'rgb( 255,0,0 )'; 
                        ctx.beginPath();
                        ctx.lineTo(y,x);
                        ctx.lineTo(triy, trix);
                        ctx.lineTo(ox, oy);
                        ctx.closePath()
                        ctx.fill(); 
                        ctx.stroke();
                    }
                    ctx.fillStyle = 'rgb( 0,201,0 )'; 
                    ctx.beginPath();
                    ctx.moveTo(ox, oy);
                    ctx.lineTo(x,y);
                    ctx.lineTo(trix, triy);
                    if (a == movestep) {
                        ctx.lineTo(ox, oy);
                        ctx.closePath()
                        ctx.fill(); 
                        ctx.stroke();
                    }
                    else 
                        ctx.stroke();
 
                
                }
            } 
        });
    </script> 
</head> 
<body> 
    <canvas id="drawonme" style="position: absolute; top: 0; left: 0;">If your browser supported the canvas element you'd see graphics instead of this boring message.</canvas>  
</body> 
</html> 
Personal tools