Canvas animation

Canvas animation.markdown

Canvas animation

A Pen by Gabi on CodePen.

License.

index.html

<canvas id="c"></canvas>

script.js

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
 
// MIT license
 
(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
 
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());
// ends requestAnimationFrame polyfill

  
  
  
var canvas = document.getElementById("c");
var cw = canvas.width = window.innerWidth;
var ch = canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");
//ctx.globalAlpha=0.5;
ctx.strokeStyle = "white";

var R = 300;
var r = 92;
var a = 0; 

//ctx.arc(cw/2,ch/2,R,0,2*Math.PI);

var circRy = [];
var cL = 20;


for( var i = 0; i<cL; i++){
a += 18;

	for( var k = 0; k<20; k++){
	var p = k*cL + i;
	var span = 10 *k;
	circRy[p] = {}
	circRy[p].a = (Math.PI / 180) * a;
	circRy[p].x = cw/2 + (R-span) * Math.cos(circRy[p].a);
	circRy[p].y = ch/2 + (R-span) * Math.sin(circRy[p].a);	
	}

}
var c = circRy.length;



function draw(){
	
	c--; 
	if(c>=0){
	ctx.beginPath();
	ctx.moveTo(circRy[c].x + r,circRy[c].y);
	ctx.arc(circRy[c].x,circRy[c].y,r,0,2*Math.PI);
	ctx.stroke();
	
	
	requestId = window.requestAnimationFrame(draw);
	}
}

function start() {
     requestId = window.requestAnimationFrame(draw);
     stopped = false;
}
function stopAnim() {
     if (requestId) {
     window.cancelAnimationFrame(requestId);
     }
     stopped = true;
     }


function cleanSlate(){
	ctx.clearRect(0,0,cw,ch);
	stopped = true;
	start();
	//window.setTimeout(function(){stopAnim();},6200);
}
window.onload = start();
canvas.addEventListener("click", function(){(stopped == true) ? start() : stop();} ,false)

style.css

  body{
  margin:0;
  overflow:hidden;
}
canvas{
 width:100%; 
 height:100vh; 
 background-color:#222;
}