verlet

verlet example

by jpeter06

HTML

<canvas id="cv" width="200" 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=200;
var dimY=300;
var pos=null;
var fullCircle=2*Math.PI;

//VERLET, array con los elementos ordenados.
var points=new Array();
var sticks=new Array();
var contSticks=new Array();

var speed=0.2;
var numPoints=4;
var distPoints=32;
var maxRot=8;//180/12; // 1=360 .. 2=180 0=0;
var distc=40;
var tailF=0.97;
var maintainFactor=0.94;



// 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;
initVerlet();

render();

//our render function
function render() {
    requestAnimFrame(render);
    animCanvas();
}

//anim canvas
function animCanvas(){
    var inc=getInc();
    updateVerlet(inc);
    ctx.clearRect(0,0,dimX,dimY);
    ctx.save();
    setLineStyle();
     //move to the center
     ctx.translate(dimX*0.5,dimY*0.2);
     //ctx.rotate(-12*inc*Math.PI/180);
     ctx.fillStyle = "#FF0000";
    drawVerlet(ctx,inc);
    ctx.restore();
}

function updateVerlet(inc){

    var angx=Math.sin(inc*Math.PI/maxRot);
    var angy=Math.cos(inc*Math.PI/maxRot)
    points[0].x=angx*distc;
    points[0].y=angy*distc;
    points[1].x=angx*(distc+distPoints);
    points[1].y=angy*(distc+distPoints);
    for(var i=0;i<sticks.length;i++){
        sticks[i].contract();
        if(i>0)
            contSticks[i-1].maintain();
    }
}

function initVerlet(){
    for(var i=0;i<numPoints;i++){
        points[i]=new VP(0,i*distPoints*Math.pow(tailF,i)+distc);
        if(i>0)
            sticks[i-1]=new VS(points[i-1],points[i]);
        if(i>1)
           ...