Você está na página 1de 12

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............................................................................................................................3

5.1.

Index.html....................................................................................................................3

5.2.

Style.css.......................................................................................................................4

5.3.

Plano_cartesiano.js......................................................................................................5

5.4.

Algoritmo.js.................................................................................................................7

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
Browser com 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
3

5.1.

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rasterizao Directa</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">
<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-->
<script src="plano_cartesiano.js"></script>
<!--Algortimo de rasterizao da recta-->
<script src="recta.js"></script>
</body>
</html>

5.2.

Style.css
4

*{
margin: 0px auto;
text-align:center;
}
body{
background:#CEDCEA;
width:;
}
canvas{
border: 1px dotted #000;
}

5.3.

Plano_cartesiano.js

//Plano
function plano(){
var canvas_teste = document.getElementById('teste');
var w = canvas_teste.width;
var h = canvas_teste.height;
var teste_context = canvas_teste.getContext('2d');
teste_context.fillStyle="#fff";
teste_context.fillRect(0,0,w,h);
}
//Malha
function draw_matrix(){
var canvas_teste = document.getElementById('teste');
var w = canvas_teste.width;
var h = canvas_teste.height;
var teste_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();
teste_context.strokeStyle = '#eee';
teste_context.stroke();
6

}
//Coordenadas
function coordenadas(){
var teste_canvas = document.getElementById('teste');
var teste_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.4.

Algoritmo.js

function getCoord(){
var xi = parseInt(document.getElementById('xi').value);
var yi = parseInt(document.getElementById('yi').value);
var xf = parseInt(document.getElementById('xf').value);
var yf = parseInt(document.getElementById('yf').value);
alert('Coordenadas inseridas: '+xi+','+yi+','+xf+','+yf);
calcula(xi,yi,xf,yf);
}
//para calcular o modulo
function absolute(number){
if(number<0){
return (number*(-1));
}else{
return number;
}
}
//Para imprimir o ponto e a recta
function setPixel(x,y,scale,adjust){
var teste_canvas = document.getElementById('teste');
var teste_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);
//Imprimindo os valores na consola do browser
8

console.log('('+x+','+y+')');
}

function calcula(xi,yi,xf,yf){
//Chamando o canvas
var teste_canvas = document.getElementById('teste');
var teste_context = teste_canvas.getContext('2d');
teste_context.setTransform(1, 0, 0, -1, 0, 500);
//Ajustando as coordenadas para a escala da grade do canvas
var scale=20;
var adjust=20;
//Calculo da recta
var dy = yf-yi;
var dx = 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);
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)
}
}
}else if(absolute(m)>1){
10

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();
}

11