Scribd Logo
Upload

Welcome to Scribd!

  • Aplicação de Rasterização de Recta Usando o Algoritmo DDA

    Uploaded by

    Guto Condela
    55 views10 pages
    A Rasterização de recta usando o algoritmo Dynamic Dcay Adjustment, foi feita usando HTML5, canvas, css e javascript, de modo a tornar rápida a implementação e o entendimento.

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    A Rasterização de recta usando o algoritmo Dynamic Dcay Adjustment, foi feita usando HTML5, canvas, css e javascript, de modo a tornar rápida a implementação e o entendimento.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    55 views10 pages

    Aplicação de Rasterização de Recta Usando o Algoritmo DDA

    Uploaded by

    Guto Condela
    A Rasterização de recta usando o algoritmo Dynamic Dcay Adjustment, foi feita usando HTML5, canvas, css e javascript, de modo a tornar rápida a implementação e o entendimento.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 10

    Table of Contents

    1. Tecnologia Usada ............................................................................................................... 1

    1.1. Plataforma ................................................................................................................... 1

    1.2. Linguagens de formatao e programao .................................................................. 1

    1.3. Ferramenta de Desenho ............................................................................................... 1

    2. Organizao ........................................................................................................................ 1

    3. Recursos necessrios para Execuo .................................................................................. 1

    4. UI ........................................................................................................................................ 2

    5. Aplicao ............................................................................................................................ 2

    5.1. Index.html ................................................................................................................... 2

    5.2. Style.css ....................................................................................................................... 3

    5.3. Plano_cartesiano.js ...................................................................................................... 4

    5.4. Algoritmo.js................................................................................................................. 6
    Aplicao De Rasterizao De Recta Usando O Algoritmo DDA

    1. Tecnologia Usada

    1.1.Plataforma
    WEB

    1.2.Linguagens de formatao e programao


    HTML 5
    Javascript

    1.3.Ferramenta de Desenho
    Canvas

    2. Organizao
    ndex.html
    Style.css
    Plano_cartesiano.js
    Algoritmo.js

    3. Recursos necessrios para Execuo


    Browsercom suporte do HTML 5 e Javascript, (testado com Firefox);
    Console de depurao de Javascript (opcional para visualizar os valores das
    coordenadas);

    1
    4. UI

    5. Aplicao
    5.1.Index.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>RasterizaoDirecta</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <section id="data">
    <label for="xi">x - inicial</label><input type="number" id="xi">
    <label for="yi">y - inicial</label><input type="number" id="yi">
    <label for="xf">x - final</label><input type="number" id="xf">

    2
    <label for="yf">y - final</label><input type="number" id="yf">
    <button onclick="getCoord()">Calcula</button>
    </section>
    <canvas id="teste" width="500" height="500">

    </canvas>
    <!--Carregando o javascript por baixo para executar depois do DOM carregar-->
    <!--Imprime o plano cartesiano-->
    <scriptsrc="plano_cartesiano.js"></script>
    <!--Algortimo de rasterizao da recta-->
    <script src="recta.js"></script>
    </body>
    </html>

    5.2.Style.css
    *{
    margin: 0px auto;
    text-align:center;
    }

    body{
    background:#CEDCEA;
    width:;
    }

    canvas{
    border: 1px dotted #000;
    }

    3
    5.3.Plano_cartesiano.js

    //Plano
    function plano(){
    varcanvas_teste = document.getElementById('teste');
    var w = canvas_teste.width;
    var h = canvas_teste.height;

    varteste_context = canvas_teste.getContext('2d');
    teste_context.fillStyle="#fff";
    teste_context.fillRect(0,0,w,h);
    }

    //Malha
    functiondraw_matrix(){
    varcanvas_teste = document.getElementById('teste');
    var w = canvas_teste.width;
    var h = canvas_teste.height;

    varteste_context =canvas_teste.getContext('2d');

    teste_context.beginPath();
    for (var x = 0.5; x <w;x+=20) {
    teste_context.moveTo(x, 0);
    teste_context.lineTo(x, h);
    }

    for (var y = 0.5; y < h; y+=20) {


    teste_context.moveTo(0, y);
    teste_context.lineTo(w, y);
    }
    teste_context.closePath();

    4
    teste_context.strokeStyle = '#eee';
    teste_context.stroke();
    }

    //Coordenadas
    function coordenadas(){
    varteste_canvas = document.getElementById('teste');
    varteste_context = teste_canvas.getContext('2d');

    teste_context.fillStyle="#000";
    teste_context.font = "bold 10px sans-serif";

    //X
    var j = 24;
    for(i=20;i<500;i+=20){
    //fillText(texto,x,y)
    teste_context.fillText(j--,0,i-10);
    }

    //Y
    var j = 0;
    for(i=10;i<500;i+=20){
    //fillText(texto,x,y)
    teste_context.fillText(j++,i+5,500);
    }

    //Definindo a base branca


    plano();
    //Desenhando a grelha
    draw_matrix();
    //desenhando os eixos
    coordenadas();
    5
    5.4.Algoritmo.js
    functiongetCoord(){
    var xi = parseInt(document.getElementById('xi').value);
    varyi = parseInt(document.getElementById('yi').value);
    varxf = parseInt(document.getElementById('xf').value);
    varyf = parseInt(document.getElementById('yf').value);

    alert('Coordenadas inseridas: '+xi+','+yi+','+xf+','+yf);

    calcula(xi,yi,xf,yf);
    }

    //para calcular o modulo


    functionabsolute(number){
    if(number<0){
    return (number*(-1));
    }else{
    returnnumber;
    }
    }

    //Para imprimir o ponto e a recta


    functionsetPixel(x,y,scale,adjust){
    varteste_canvas = document.getElementById('teste');
    varteste_context = teste_canvas.getContext('2d');

    //imprimindo a recta
    teste_context.lineTo((x*scale)+adjust,(y*scale)+adjust);

    //Imprimindo o ponto
    teste_context.fillStyle="#ff0000";
    teste_context.font = "bold 50px sans-serif";
    teste_context.fillText('.',(x*scale)+adjust-6,(y*scale)+adjust+4);

    6
    //Imprimindo os valores na consola do browser
    console.log('('+x+','+y+')');
    }

    functioncalcula(xi,yi,xf,yf){
    //Chamando o canvas
    varteste_canvas = document.getElementById('teste');
    varteste_context = teste_canvas.getContext('2d');

    teste_context.setTransform(1, 0, 0, -1, 0, 500);

    //Ajustando as coordenadas para a escala da grade do canvas


    varscale=20;
    varadjust=20;

    //Calculo da recta
    vardy = yf- yi;
    vardx = xf- xi;

    var m = dy/dx;

    var x=xi;
    var y=yi;

    console.log('xi = '+xi);
    console.log('yi = '+yi);
    console.log('xf = '+xf);
    console.log('yf = '+yf);
    console.log('x = '+x);
    console.log('y = '+y);
    console.log('m = '+m);
    console.log('dx = '+dx);
    7
    console.log('dy = '+dy);

    //Para controlar a coordenada inicial


    var inicio = true;

    //inicializando o caminho da recta


    teste_context.beginPath();

    if(absolute(m)<=1){

    while(x<xf){

    if(dx>0){
    x=x+1;
    y=y+m;
    }else if(dx<=0){
    x=x-1;
    y=y- m;
    }

    //verficando o ponto inicial


    if(inicio){
    //informando o ponto inicial
    teste_context.moveTo((x*scale)+adjust,(y*scale)+adjust);

    //imprimindo a recta
    setPixel(x,y,scale,adjust)

    //informando que o ponto inicial ja foi declarado


    inicio = false;
    }else{
    setPixel(x,y,scale,adjust)
    }

    8
    }
    }else if(absolute(m)>1){

    while(y<yf){

    if(dy>0){
    y=y+1;
    x=x+(1/m);
    }else if(dy<=0){
    y=y-1;
    x=x-(1/m);

    if(inicio){
    teste_context.moveTo((x*scale)+adjust,(y*scale)+adjust);

    setPixel(x,y,scale,adjust)

    inicio = false;
    }else{
    setPixel(x,y,scale,adjust)
    }
    }

    //Cor da recta
    teste_context.strokeStyle='#000';

    //Pintando a recta
    teste_context.stroke();
    }

    You might also like