quinta-feira, 12 de janeiro de 2017

Castelos - javaScript




<html>
<head>
<script>

    // escreva tudo isso em vermelho no bloco de notas e salve com o nome de script.html
    // Atenção! Não é pra salvar com o nome de script.html.txt
    // se vc ver o símbolo do navegador no arquivo é pq deu certo.
    // Se vc ver o símbolo do bloco de notas é pq vc não sabe mudar a
    // extensão do arquivo.
    // se não souber como faz pra mudar a extensão do arquivo: procura no google
    // lembre-se dos espaços e das quebras de linha.

    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];
    }

    parede = new Image()
    parede.src = "parede.png"

    janela = new Image()
    janela.src = "janela2.png"

    janela3 = new Image()
    janela3.src = "janela3.png"

    janelaA = new Image()
    janelaA.src = "janelaA.png"

    janelaB = new Image()
    janelaB.src = "janelaB.png"

    porta = new Image()
    porta.src = "porta2.png"

    telhado = new Image()
    telhado.src = "telhado.png"


    porcentagem_x=0.35
    porcentagem_y=0.35

    new_x = 260*porcentagem_x;
    new_y = 285*porcentagem_y;

    medida_teto = 0.4

    margem1 = 30;


    posicao_janelas = function( ctx )
    {
        var linha0 = [ "",  "",janelaA, janelaB, "","",janelaA, janelaB,"","",janelaA, janelaB];
        var linha1 = [ janela,  janela,janela, porta ,janela,janela,janela,janela,janela,janela,janela,janela];
        var linha2 = [ janela,  janela,janela, porta ,janela,janela,janela,janela,porta,janela,janela,janela];

        var arrayMap = [linha0, linha1, linha2];

        for(var i=0; i<arrayMap.length; i+=1)
        {
            for(var j=0; j<arrayMap[i].length; j+=1)
            {
                if(arrayMap[i][j]!="")
                ctx.drawImage( arrayMap[i][j] , margem1 + new_x*j,  margem1 + new_y*i, new_x, new_y );           
            }
        }
    }

    fundo_casa = function(ctx)
    {
          //define the polygon
          ctx.beginPath();

          ctx.lineTo( margem1 +       0, margem1 + new_y*1);

          ctx.lineTo( margem1 + new_x*2, margem1 + new_y*1);
          ctx.lineTo( margem1 + new_x*3, margem1 + new_y*medida_teto);
          ctx.lineTo( margem1 + new_x*4, margem1 + new_y*1);

          ctx.lineTo( margem1 + new_x*6, margem1 + new_y*1);
          ctx.lineTo( margem1 + new_x*7, margem1 + new_y*0.4);
          ctx.lineTo( margem1 + new_x*8, margem1 + new_y*1);

          ctx.lineTo( margem1 + new_x*10, margem1 + new_y*1);
          ctx.lineTo( margem1 + new_x*11, margem1 + new_y*medida_teto);
          ctx.lineTo( margem1 + new_x*12, margem1 + new_y*1);

          ctx.lineTo( margem1 + new_x*12, margem1 + new_y*3);

          ctx.lineTo( margem1 + 0, margem1 + new_y*3);

          ctx.closePath();
   
        var pattern = ctx.createPattern(parede, "repeat");
        ctx.fillStyle = pattern;
        ctx.fill();
    }

    margem2=new_y*4;




    fundo_telhado = function(ctx, rotation, px, py)
    {

        ctx.rotate(rotation);

          //define the polygon
          ctx.beginPath();


          ctx.lineTo( px +        0, py + new_y*0 );

          ctx.lineTo( px + new_x*4, py + new_y*0 ); 


          ctx.lineTo( px + new_x*3, py + Math.pow( Math.pow(new_y*(1-medida_teto),2) + Math.pow(new_x,2), 0.5 ) );

          ctx.lineTo( px + 0, py + Math.pow( Math.pow(new_y*(1-medida_teto),2) + Math.pow(new_x,2), 0.5 ) );

          ctx.closePath();

        var pattern = ctx.createPattern(telhado, "repeat");
        ctx.fillStyle = pattern;
        ctx.fill();



        py+=1
          //define the polygon
          ctx.beginPath();

          ctx.lineTo( px +        0, py + new_y*0+Math.pow( Math.pow(new_y*(1-medida_teto),2) + Math.pow(new_x,2), 0.5 ));

          ctx.lineTo( px + new_x*3, py + new_y*0+Math.pow( Math.pow(new_y*(1-medida_teto),2) + Math.pow(new_x,2), 0.5 ) ); 
          ctx.lineTo( px + new_x*2, py + 2*Math.pow( Math.pow(new_y*(1-medida_teto),2) + Math.pow(new_x,2), 0.5 ) );

          ctx.lineTo( px + 0, py + 2*Math.pow( Math.pow(new_y*(1-medida_teto),2) + Math.pow(new_x,2), 0.5 ) );

          ctx.closePath();

        var pattern = ctx.createPattern(telhado, "repeat");
        ctx.fillStyle = pattern;
        ctx.fill();
    }

    load = function()
    {
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");

        fundo_casa(ctx);
        posicao_janelas (ctx);
        margem=600
        fundo_telhado(ctx, 0, margem1, margem2);
    }


</script>
</head>
<body onload="load();">
<canvas id="myCanvas" width="5660" height="5660" style="border:1px solid #000000;">
</canvas>
</body>
</html>


Nenhum comentário:

Postar um comentário