canvas animation2

full lizard

by jpeter06

HTML

<span>CANVAS ANIMATION &nbsp;&nbsp;&nbsp;&nbsp;</span>
<div id="fps">0</div>&nbsp;fps<br>
<canvas id="cv" width="300" height="300"></canvas>

CSS

body {background:#fe6;}
span { color:blue;  font-family:Arial;float:left;}
div {float:left;}
canvas { border: 1px solid black; }

JavaScript

//Canvas dimensions.
var dimX=300;
var dimY=300;
var pos=null;
var fullCircle=2*Math.PI;

//Body dimensions
var bodyColor="#000088";
var totalSize=200;
var relBodyHead=0.7;
var relTailTotal=0.5;
var speed=0.2;

//Tail
var points=new Array();
var sticks=new Array();
var contSticks=new Array();
var numPoints=4;
var distPoints=totalSize*relTailTotal*0.3333;
var maxRot=15;//180/12; // 1=360 .. 2=180 0=0;
var distc=totalSize*(1-relTailTotal)*relBodyHead*0.5-8;
var tailF=1;
var maintainFactor=1;

var longBody=totalSize*(1-relTailTotal)*relBodyHead;
var longBody2=longBody*0.5;
var widthBody=longBody*0.4;
var widthBody2=widthBody*0.5;
var widthBody4=widthBody*0.25;

var longHead=totalSize*(1-relTailTotal)*(1-relBodyHead);
var longHead2=longHead*0.5;
var widthHead=longHead*0.65;
var longTail=totalSize*relTailTotal;
var longTail2=longTail*0.5;
var longTail4=longTail*0.25;

//Frames per second
var fps = 0, now, lastUpdate = (new Date)*1 - 1;
var fpsFilter = 50;
var fpsOut = document.getElementById('fps');
setInterval(function(){
  fpsOut.innerHTML = fps.toFixed(1);}, 1000);
//continuos rotation
var contRot=0;

// requestAnim shim layer by Paul Irish
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function( callback, element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();



//main context.
var ctx=document.getElementById("cv").getContext('2d');

//init & render;
initVerlet();
render();

//our render function
function render() {
    requestAnimFrame(render);
    animCanvas();
    var thisFrameFPS = 1000 / ((now=new Date) - lastUpdate);
    fps += (thisFrameFPS - fps) / fpsFilter;
    lastUpdate = now * 1 - 1;
}

//anim canvas
function animCanvas(){
    var...