quarta-feira, 24 de julho de 2013

Recursividade

           Recursividade é, basicamente, quando um método chama a ele mesmo.
           A recursividade está ao nosso redor. Quando fazemos contas, nas árvores, nos cristais, quando jogamos damas ou xadrez e mesmo quando um ribossomo e DNA montam uma proteína.

           Por exemplo: 
 
<html>
<head>
<script>
    metodo = function(lugarImpressao, poda)
    {
        lugarImpressao.appendChild( document.createTextNode(" - ") )
        if(poda>1) 
        {
            // metodo chama a  mesmo
            metodo(lugarImpressao, poda-1);
        }
    } 
    load = function()
    {
        metodo( document.body, 4 );
    }
</script> 
</head>
<body onload="load();"> </body>
</html>
           Note que é importante a existência de uma variável poda. É isso mesmo! Podar a árvore. Sem essa variável para limitar o número de chamadas a sí mesmo, ela iria continuar sem parar.


           Um exemplo visual: 

           Bonito não é?  Seu código:

<html>
<head>
<script>
    manterLimites = function(angulo)
    {
        while(angulo>=360)
        {
            angulo=angulo-360;
        }
        while(angulo<0)
        {
            angulo=angulo+360;
        }
        return angulo;
    }
    getSenCos = function(angulo)
    {   
        angulo = manterLimites(angulo);
        seno =  Math.sin(angulo * Math.PI / 180);
        cose =  Math.cos(angulo * Math.PI / 180);
        return [cose, seno];
    }
    galho = function(ctx, x1, y1, tamanho, angulo, poda)
    {
        var senCos= getSenCos(angulo)   
        var tx = x1+tamanho*senCos[0]
        var ty = y1+tamanho*senCos[1]
        ctx.lineWidth = poda*poda; 
        ctx.beginPath(); 
        ctx.strokeStyle="#FF0000"; 
        ctx.moveTo(x1,y1);
        ctx.lineTo(tx,ty);
        ctx.stroke();
        if( poda>1 )
        {
            galho(ctx, tx, ty, tamanho*0.5, angulo+90,poda-1 )
            galho(ctx, tx, ty, tamanho*0.5, angulo, poda-1 )
            galho(ctx, tx, ty, tamanho*0.5, angulo-90,poda-1 )
        }
    }
    load = function()
    {
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        galho(ctx, 250, 250, 45,   0+45, 4);
        galho(ctx, 250, 250, 45,  90+45, 4);
        galho(ctx, 250, 250, 45, 180+45, 4);
        galho(ctx, 250, 250, 45, 270+45, 4);
    }
</script> 
</head>
<body onload="load();">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
</canvas> 
</body>
</html>

Nenhum comentário: