fractal textures 2

by jpeter06

HTML

<button id="b_runA" style="float:left"> ejecutar test </button>
<div id="time" style="float:left"></div>
<canvas id="cv" width="500px" height="300px">
</canvas>

b_runA height=

CSS

#cv{
 box-shadow:0px 0px 7px #884444;
 margin:5px;
 border: 4px solid white;
}

JavaScript

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





//Canvas Dimension
var canvas=document.getElementById("cv");
var w;
var h;
var r;
var contador;
var initTime;
var fig;
var oldFig;
var oldPts=null;
var figUp=50;
var its=7;
var angs;

//main context.
var ctx=canvas.getContext('2d');

//init render;
function runA(){
    clear();
    w=canvas.width;
    h=canvas.height;
    r=h*0.3;
    contador=0;
    oldPts=null;
    initTime=new Date();
    initFigures();
    render();
}

//bind runA to b_run Button.
$('#b_runA').bind('click', runA);
runA();


//Drawing functions
function render(){
    for(var i=0;i<10;i++){
 updateCanvas();
        contador+=0.5; 
    }

 if(contador<w+r+r){
  
   window.requestAnimFrame(render);
 }else{ //mostramos tiempo total
     var time=document.getElementById("time");
     var aux=new Date();
     time.innerHTML=(aux.getTime() - initTime.getTime())/1000+" seg";
 };
 
}


function clear(){
 ctx.clearRect(0,0,w,h);
}


function updateFigs(){
  if(contador%figUp==0){
    oldFig=fig;
    fig=createFigure();
  }
}



function updateCanvas(){
  //clear();
  var dx=contador-r; 
  var py=h*0.5+Math.cos(contador* Math.PI/180)*h*0.1; 
  ctx.save();
  ctx.translate(dx,py);
  setLineStyle();
  ctx.beginPath();
  var ev2=Math.abs(contador%figUp)/figUp;
  ev2=(1+Math.cos(ev2*Math.PI))/2;
 var ev=1-ev2;
  updateFigs();
  var ii=fig.length-1;
    var aux=fig[ii]*ev*r + oldFig[ii]*ev2*r; 
    ctx.moveTo(aux*angs[ii][0]*0.8,
           aux*angs[ii][1]);

    for(var i=0;i<fig.length;i++){
      aux=fig[i]*ev*r + oldFig[i]*ev2*r;
      ctx.lineTo(aux*angs[i][0]*0.8,
      ...