fractal textures

by jpeter06

HTML

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

CSS

#cv{
 box-shadow:0px 0px 7px #444444;
 margin:5px;
 border: 0px 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 contador;
var old; 
var initTime;


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

//init render;
function runA(){
    canvas.width = canvas.width;
    w=canvas.width;
    h=canvas.height;
    contador=0;
    old=[];
    initTime=new Date();
    render();
}

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

//Drawing functions
function render(){
 updateCanvas();

 if(contador<0){
   contador++;
   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 clean(){
 if(old.length>10){
   setLineStyleC();
   ctx.beginPath();
   var il=old.shift();
   for(var i=0;i<il.length;i++)
     ctx.lineTo(il[i][0],il[i][1]);
  ctx.stroke();
 }
}

function updateCanvasOLD(){
  //ctx.clearRect(0,0,w,h);
  setLineStyle();
  ctx.beginPath();
  ctx.moveTo(0,h*0.5);
  var il=[];
  var nl=[];
  var iniY=Math.random()*h;
  il[0]=[0,iniY];
  il[1]=[w,h-iniY];
  var it=2;
  while(it<9){
    var ill=il.length-1;
    for(var i=0;i<ill;i++){
      nl[nl.length]=il[i];
      nl[nl.length]=[(il[i][0]+il[i+1][0])*0.5+(il[i+1][0] - il[i][0])*0.10*(Math.random()>0.5?-1.0:1.0),
          (il[i][1]+il[i+1][1])*0.5 +  
            Math.random()*h*0.5/(it-1)*(Math.random()>0.5?-1:1)];
    } 
    nl[nl.length]=il[ill];
    it=it+1;
    il=nl;
    nl=[];
  };
  
  old[old.length]=il;
  for(var i=0;i<il.length;i++)
  ...