Traçado em dispositivos gráficos matriciais Parte 1

03/05/2023Prof.ª M

.ª Elaine Cecília Gatto1

TRAÇADO EM DISPOSITIVOS

GRÁFICOS MATRICIAISPRIMITIVAS GRÁFICAS:

PONTOS, RETAS, CIRCULOS, ELIPSES, POLÍGONOS

Prof.ª Elaine Cecília Gatto

Resolução Gráfica• Virtualmente todos os dispositivos de

I/O gráficos usam uma malha retangular de posições endereçáveis – a qual é denominada “retângulo de visualização”.

• A “resolução gráfica” de um dispositivo é o número de posições (ou pontos, ou pixels) horizontais e verticais que ele pode distinguir.

03/05/2023

Prof.ª M.ª Elaine Cecília Gatto

2

Resolução Gráfica• Existem 4 parâmetros que definem a resolução:

1. ndh: o número de posições endereçáveis horizontalmente

2. ndv: o número de posições endereçáveis verticalmente

3. width: a largura do retângulo de visualização em mm

4. height - a altura do retângulo de visualização em mm.

03/05/2023


3

Resolução Gráfica• A partir desses 4 parâmetros, vários números

interessantes podem ser calculados:

1. resolução horizontal: horiz_res = ndh/width

2. resolução vertical: vert_res = ndv/height

3. total pontos endereçáveis: total_nr_dots = ndh.ndv

4. resolução de área: area_res = total_nr_dots / (width.height)

03/05/2023


4

Sistemas de Coordenadas

• Na CG é necessário definir sistemas de coordenadas para quantificar os dados que estão

• sendo manipulados.

• Já vimos que os dispositivos de visualização gráfica matriciais consistem de uma matriz de pixels endereçáveis, e um gráfico é formado “acendendo” ou “apagando” um pixel.

• Os pixels são endereçados por dois números inteiros que dão suas coordenadas horizontal e vertical, dcx e dcy

03/05/2023


5


• Número da coluna da matriz de pixels: dcx + 1

• Número da linha da matriz de pixels: dcy + 1

• O pixel endereçado como (0, 0) está geralmente no canto inferior esquerdo do retângulo de visualização

• As coordenadas (dcx, dcy) são chamadas de coordenadas do dispositivo, e podem assumir apenas valores inteiros.

03/05/2023


6


• Coordenadas do dispositivo podem variar bastante para diferentes equipamentos, o que levou à utilização de coordenadas normalizadas do dispositivo (NDC - normalized device coordinates), para efeito de padronização (ndcx, ndcy).

• NDCs são variáveis reais, geralmente definidas no intervalo de 0 a 1

03/05/2023


7


• A coordenada NDC(0,0) corresponde à origem (0, 0) nas coordenadas do dispositivo

• A coordenada NDC(1,1) refere-se ao pixel no canto superior direito

• A vantagem da utilização de NDCs é que padrões gráficos podem ser discutidos usando um sistema de coordenadas independente de dispositivos gráficos específicos.

• Obviamente, os dados gráficos precisam ser transformados do sistema de coordenadas independente para o sistema de coordenadas do dispositivo no momento de visualização.

03/05/2023


8


• Sistema de cordenadas físico (pcx, pcy)

• pcx: distância física ao longo do eixo x a partir do extremo esquerdo do retângulo de visualização

• pcy: a distância física ao longo do eixo y a partir do extremo inferior.

• As unidades de medida utilizadas são polegadas ou milímetros

03/05/2023


9


• Sistema de coordenadas do mundo

• Ou sistema de coordenadas do usuário

• Consiste de coordenadas cartesianas (x, y), num intervalo qualquer definido pelo usuário

• Os parâmetros que definem o intervalo de valores de x e y, xmin, ymin, xmax e ymax, definem uma área retangular no espaço bidimensional, denominada de janela

03/05/2023


10


• Para visualizar dados num dispositivo gráfico qualquer, é necessário transformá-los das coordenadas do usuário para NDCs, e de NDCs para coordenadas do dispositivo.

• Da mesma forma, dados de entrada gráficos precisam ser transformados de coordenadas do dispositivo para NDCs, e depois para coordenadas do usuário

03/05/2023


11


03/05/2023


12

Figura 1: Sistemas de Coordenadas

Traçado• O traçado de primitivas gráficas

elementares, como segmentos de reta ou arcos de circunferência, requer a construção de algoritmos capazes de determinar na matriz de pixels da superfície de exibição, quais pixels devem ser alterados de forma a simular-se a aparência do elemento gráfico desejado.

• Estes algoritmos recebem o nome de Algoritmos de Conversão Matricial, por converterem em representação matricial elementos gráficos expressos em uma representação vetorial.

03/05/2023


13

Traçado• Um elemento geométrico básico a ser

traçado num terminal gráfico é o segmento de reta.

• Atualmente, é comum que rotinas de traçado de linhas estejam disponíveis em hardware (em chips controladores).

• O chip recebe as coordenadas dos pixels extremos, e calcula quais pixels intermediários da superfície de exibição devem ser traçados para gerar uma reta (aproximada) na tela.

03/05/2023


14

Traçado• Gráficos complexos requerem o traçado

de uma grande quantidade de segmentos de reta, e a velocidade é importante

• Daí a opção de traçado por meio de hardware especializado, que libera o processador hospedeiro para outras atividades enquanto o chip controlador calcula os pixels a serem traçados.

03/05/2023


15

Traçado• Se a função de traçado precisa ser

implementada em software, a rotina deve ser escrita em código de máquina otimizado para atingir o máximo de velocidade.

• Entretanto, é instrutivo estudar alguns algoritmos para traçado de linhas usando uma linguagem de alto nível.

03/05/2023


16

Simetria e Reflexão03/05/2023


17

Figura 2: Representação de segmentos de reta horizontais, verticais e diagonais

Simetria e Reflexão• Simetria e Reflexão

são propriedades importantes do espaço onde os diversos elementos gráficos serão traçados.

• Pode-se dizer que estas direçõe formam na realidade eixos de simetria no espaço matricial.

03/05/2023


18

Simetria e Reflexão• Logo, qualquer imagem

representada no espaço matricial pode ser refletida em relação a qualquer reta horizontal, vertical ou diagonal sem apresentar qualquer deformação

• A Simetria é explorada na conversão matricial de primitivas gráficas que apresentem simetria e relação a qualquer um destes eixos.

03/05/2023


19



20Figura 3: Reflexão de uma imagem com relação a um eixo diagonal



21

Figura 4a: Rotação de 90 graus obtida através de 2 reflexões, uma horizontal (a) e outra na diagonal (b).



22

Figura 4b: Rotação de 90 graus obtida através de 2 reflexões, uma horizontal (a) e outra na diagonal (b).

Ponto• Um PONTO em CG como é um pixel, cujas propriedades

são: – Posição no plano– Cor

• O tamanho do pixel vai depender da resolução gráfica e tamanho físico do dispositivo de exibição da imagem.

• As operações de manipulação de pixels representam uma das essências da CG, pois a partir dessa manipulação, imagens são construídas ou alteradas.

• Os elementos gráficos mais complexos exigem uma sequência de ações para que possam ser construídos

03/05/2023


23

Conversão Matricial de Segmentos de Reta

03/05/2023


24

Figura 5: Alguns critérios de conversão matricial podem ser vistos através desta figura


• 1.º Critério:

• Selecionamos os dois pixels imediatamente acima e abaixo do ponto de intersecção ao do segmento com cada vertical, a menos quando o segmento passa por um pixel.

• Restrição: linhas densas são obtidas, como se o segmento fosse espesso

03/05/2023


25

Figura 5a: 1.º Critério de conversão matricial de segmentos de reta


• 2.º Critério:

• Selecionamos todos os pixels cujas coordenadas são obtidas arredondando-se os valores das coordenadas de algum ponto do segmento.

• Restrição: com segmentos a 45 graus, este critério produz resultados semelhantes ao anterior

03/05/2023


26

Figura 5b: 2.º Critério de conversão matricial de segmentos de reta


• 3.º Critério:

• Selecionamos, em cada vertical, o pixel mais próximo do ponto de intersecção do segmento com a reta vertical.

• Vantagens: aparência leve e continuidade.

03/05/2023


27

Figura 5c: 3.º Critério de conversão matricial de segmentos de reta


• 4.º Critério:

• Selecionamos, em cada horizontal, o pixel mais próximo do ponto de intersecção do segmento com a reta horizontal.

• Restrição: descontinuidade

03/05/2023


28

Figura 5d: 4.º Critério de conversão matricial de segmentos de reta

Características Desejáveis para os Algoritmos de conversão Matricial

de Segmentos de Retas• Linearidade:

• Os pixels traçados devem dar a aparência de que estão sobre uma reta.

• Isto é trivial no caso de segmentos paralelos aos eixos x ou y, ou com inclinação de 45 graus, mas não nos outros casos.

03/05/2023


29

Figura 6: Linearidade


de Segmentos de Retas• Precisão:

• Os segmentos devem iniciar e terminar nos pontos especificados.

• Caso isso não ocorra, pequenos gaps podem surgir entre o final de um segmento e o início de outro.

03/05/2023


30Figura 7: Precisão


de Segmentos de Retas• Espessura (Densidade) uniforme:

• A densidade da linha é dada pelo número de pixels traçados dividido pelo comprimento da linha.

• Para manter a densidade constante, os pixels devem ser igualmente espaçados.

• A imagem do segmento não varia de intensidade ou espessura ao longo de sua extensão.

03/05/2023


31Figura 8: Espessura


de Segmentos de Retas• Continuidade:

• A imagem não apresenta interrupções indesejáveis.

03/05/2023


32Figura 9: Continuidade e Descontinuidade


de Segmentos de Retas• Intensidade independente da

inclinação: para segmentos de diferentes inclinações

• Rapidez no Traçado dos segmentos.

03/05/2023


33


• Os algoritmos que vamos estudar usam o método incremental, que consiste em executar os cálculos iterativamente, mantendo um registro (ou memória) do progresso da computação a cada passo da iteração.

• Nesse método, começando por um dos extremos da linha, o próximo ponto é calculado e traçado até que o outro extremo seja atingido e traçado.

03/05/2023


34


• O problema da conversão matricial consiste essencialmente em ajustar uma curva, no caso, um segmento de reta, a qual é precisamente definida por coordenadas reais, a uma malha de coordenadas inteiras.

• Isto pode ser feito calculando as coordenadas reais, (xr, yr), do próximo ponto na linha, e escolhendo na malha os pixels cujas coordenadas (x, y) mais se aproximam das coordenadas reais, obtidos por arredondamento ou truncamento.

03/05/2023


35

Equação da Reta• Matematicamente, uma reta pode

ser descrita como:

• Coeficiente Angular (m): relacionado ao ângulo que a reta faz com o eixo x.– Para m <=1, a reta faz um ângulo entre 0º e 45º com o eixo x.– Para m >1, a reta faz um ângulo entre 45º e 90º com o eixo x.

03/05/2023


36

EQUAÇÃO 1: Equação da Reta

m =

EQUAÇÃO 2: Equação do Coeficiente Angular da Reta (m)

Equação da Reta• Coeficiente linear (b): dá o valor no eixo y que é

cruzado pela reta.

• Dados os pontos no plano P1 e P2, pode-se obter m e b, ou seja, a equação da reta que passa pelos pontos.

• A partir das equações apresentadas para a reta, pode-se definir algoritmos para desenhar um segmento de reta a partir de dois pontos dados

03/05/2023


37

EQUAÇÃO 3: Equação do Coeficiente Linear da Reta (b)

Equação da Reta• A ideia mais simples

para rasterização de linhas é determinar a qual valor inteiro no eixo y, uma reta se aproxima.

• De modo geral, para cada valor x, calcula-se o arredondamento de y.

• Obs.: RASTERIZAÇÃO é a forma de tratar vetorialmente imagens na tela do computador

03/05/2023


38

Figura 10: Ilustração de uma reta desenhada entre dois

pontos

Equação da Reta: algoritmo

• Um trecho de código em linguagem C que ilustra a implementação da ideia mais simples de traçado de reta:

int x, x1, x2, y1, y2, cor;float y, m;//coeficiente angularm = (y2 – y1)/(x2 – x1);//iteraçãofor (x = x1; x <= x2; x++) {

//coeficiente lineary = y1 + m * (x – x2);//arredonda y e imprime na telawrite_pixel(x, round(y), cor);

}

03/05/2023


39

Variando-se x unitariamente, de pixel em pixel, encontramos o valor de y

Equação da Reta: fluxograma

Um fluxograma que pode ser utilizado para implementar uma FUNÇÃO da ideia simples de traçado de segmento de reta

03/05/2023


40

Figura 11: Fluxograma da Equação da Reta

Equação da Reta: problema

• Para retas verticais o algoritmo apresenta uma falha: Não há um cálculo dos pontos aproximados no eixo x, então, o segmento de reta é traçado erroneamente na tela.

• Essa falha é o principal motivo pelo qual não é implementada atualmente essa ideia.

03/05/2023


41

Figura 12: Reta vertical traçada com buracos


• O algoritmo apresentado só funciona para segmentos em que 0 < m < 1.

• Se 0 < m < 1 a variação em x é superior à variação em y.

• Se esse não for o caso, vai traçar um segmento com buracos!!

• Se m > 1, basta inverter os papéis de x e y

x = x1 + ((y-y1)/m)

03/05/2023


42

Figura 12: Reta vertical traçada sem buracos


03/05/2023


43

Linha(x1, x2, y1, y2, cor)

m = (y2 – y1)/(x2 – x1);

Se ( m > 1 )

x1 até x2

y = y1 + m * (x – x2);

write_pixel(x, round(y), cor);

continue

return

x1 até x2

x = x1 + ((y-y1)/m)

write_pixel(x, round(y), cor);

Algoritmo de Bresenham (1965)

03/05/2023


44

• ALGORITMO DO PONTO MÉDIO (MidPointLineAlgorithm)

• O algoritmo de Bresenham trabalha somente com inteiros

• É mais eficiente pois evita o uso da função de arredondamento (Round), o que fornece economia de processamento

• O algoritmo anterior trabalha com numeros de ponto flutuante (float)

• Baseia-se no argumento de que um segmento de reta, ao ser plotado, deve ser contínuo, ou melhor, os pixels que compõem um segmento de reta devem ser vizinhos.

Algoritmo de Bresenham03/05/2023


45

• Será analisado o caso de m <1, pois para m>=1, basta inverter as coordenadas x e y.

• Se m<1, e dado um ponto na reta, o próximo ponto é (x+1+y) ou (x+1, y+1)?

• O algoritmo de Bresenham responde a essa questão calculando um valor (p) para cada pixel, e passando para o pixel seguinte, até alcançar o último pixel do segmento da reta.

Algoritmo de Bresenham03/05/2023


46

• Isso fará com que os pontos das retas sejam próximos não havendo separação entre os pixels pintados, evitando o erro produzido pelo algoritmo demonstrado anteriormente

• Bresenham permite que o cálculo de (xi + 1, yi + 1) seja feito incrementalmente, usando os cálculos já feitos para (xi, yi).

Algoritmo de Bresenham• O algoritmo assume

que a inclinação da linha está entre 0 e 1

• Outras inclinações podem ser tratadas por simetria)

• O ponto (x1, y1) é o inferior esquerdo, e (x2, y2) é o superior direito.

03/05/2023


47

Algoritmo de BresenhamP(xp, yp): ponto inicialE(xp+1, yp) : pixel abaixo e à direitaNE(xp+1, yp+1): pixel acima e à direitaM: localização do ponto médiod: valor do ponto médioQ: ponto de intersecção entre a reta e a coluna

03/05/2023


48

03/05/2023Prof.ª M


Algoritmo de Bresenham

Algoritmo de Bresenham• Assuma que o pixel

que acabou de ser selecionado é P, em (xp, yp)

• O próximo deve ser escolhido entre o pixel à direita (pixel E) e o pixel acima à direita (NE).

03/05/2023


50

Algoritmo de Bresenham• A partir do pixel

inicial, é calculado o ponto médio entre os próximos dois pixels a serem selecionados

• O escolhido depende da posição do ponto médio em relação à reta

03/05/2023


51

Algoritmo de Bresenham• O que se faz é

observar de que lado da reta está o ponto M.

• Se M está acima da reta, o pixel E está mais próximo da reta

• Se M está abaixo, NE está mais próximo.

03/05/2023


52

Algoritmo de Bresenham• Dessa forma, o teste

do ponto-médio permite a escolha do pixel mais próximo da reta.

• O erro é sempre <= ½

• Erro: distância vertical entre o pixel escolhido e a linha

03/05/2023


53

03/05/2023Prof.ª M


Algoritmo de Bresenham• Método para calcular de que lado da

reta está o ponto M

• Considere a função implícita da reta:

EQUAÇÃO 4: Função Implícita da Reta

03/05/2023Prof.ª M


Algoritmo de Bresenham• Se dy = y2 − y1• e dx = x2 − x1

• Então, a equação da reta em termos de sua inclinação pode ser escrita como:

EQUAÇÃO 5: Inclinação da Reta

03/05/2023Prof.ª M


Algoritmo de Bresenham• Dessa forma tem-se:

• Em que:a = dyb = −dxc = b.dx

= 0

EQUAÇÃO 6: Reescrita da inclinação da Reta

03/05/2023Prof.ª M


Algoritmo de Bresenham• F(x, y) = 0: f(x,y) é igual a zero quando está

sobre a linha• F(x,y) > 0: é positiva para pontos abaixo da linha• F(x,y) < 0: é negativa para pontos acima da

linha

• Para o teste do ponto-médio, calcular

• e verificar o seu sinal

EQUAÇÃO 7: Função para calcular o ponto médio

03/05/2023Prof.ª M



03/05/2023Prof.ª M


Algoritmo de Bresenham• Como a decisão será tomada com base no

valor da função no ponto

• definimos uma variável de decisão

EQUAÇÃO 8: Variável de Decisão

03/05/2023Prof.ª M


Algoritmo de Bresenham• d > 0: NE é o pixel escolhido• d < 0: E é o pixel escolhido• d = 0: pode-se escolher qualquer um deles

• O que acontece com a localização de M e o valor de d no próximo ponto da reta?

• Ambos dependem, obviamente, da escolha de E ou NE.

03/05/2023Prof.ª M



03/05/2023Prof.ª M


Algoritmo de Bresenham• Se E for escolhido, M é incrementado de 1 na

direção x, então

• Entretanto

= EQUAÇÃO 9: Cálculo do novo ponto da variável de decisão

03/05/2023Prof.ª M


Algoritmo de Bresenham• Subtraindo de , para obter a diferença

incremental, tem-se:

• ∆E: é o incremento a ser adicionado depois da escolha de E

• Em outras palavras, pode-se derivar o valor da variável de decisão no próximo passo incrementalmente, a partir do seu valor atual, sem necessidade de calcular F(M) diretamente.

03/05/2023Prof.ª M


Algoritmo de Bresenham• Se NE é escolhido, M é incrementado de 1 em

ambas as direções, x e y• Portanto, Subtraindo de , tem-se:

• ∆NE: é o incremento a ser adicionado depois da escolha de NE

03/05/2023Prof.ª M


Algoritmo de Bresenham• Para eliminar a fração em d, F é multiplicada por

2. • Isto multiplica cada constante e a variável de

decisão por 2, mas não afeta o sinal da variável de decisão, que é o que interessa para o teste do ponto-médio.

• A aritmética necessária para calcular o valor da variável de decisão d a cada passo é adição simples, nenhuma multiplicação é necessária (veja o fluxograma).

03/05/2023Prof.ª M


Algoritmo de Bresenham• A figura ao lado

apresenta a reta que vai do ponto (5,8) ao ponto (9,11), traçada por este algoritmo.

03/05/2023Prof.ª M


Algoritmo de Bresenham: RESUMO

• A cada passo, o algoritmo escolhe entre 2 pixels, com base no sinal da variável de decisão calculada na iteração anterior

• A seguir, a variável de decisão é atualizada adicionando-se ∆E ou ∆NE ao valor anterior, dependendo do pixel escolhido

• Como o primeiro pixel corresponde ao ponto (x1, y1), pode-se calcular diretamente o valor inicial de d para escolher entre E e NE.

• O primeiro ponto-médio está em (x1 + 1, (y1 + ½) )

03/05/2023Prof.ª M


Algoritmo de Bresenham: Implementação 1

void bresenham (int x1,int x2, int y1,int y2)int dx,dy, incSup, incInf, p, x, y;int valor;{

dx = x2-x1; dy = y2-y1;p = 2*dy-dx; /* fator de decisão: valor inicial */incInf = 2*dy; /* Incremento Superior */incSup = 2*(dy-dx); /* Incremento inferior */x = x1; y = y1;write_Pixel(x,y,valor); /* Pinta pixel inicial */while (x < x2){

if (p <= 0){ /* Escolhe Inferior */p = p + incInf;

}else { /* Escolhe Superior */

p = p + incSup;y++;

} /* maior que 45o */x++;write_pixel (x, y, valor);

} /* m do while */ } /* m do algoritmo */

03/05/2023Prof.ª M


Algoritmo de Bresenham: Implementação 2

procedure midpointLine (x0, y0, x1, y1, value : Integer);var

dx, dy, incrE, incrNE, d, x, y : Integer;begin

dx := x1 - x0;dy := y1 - y0;d := 2*dy - dx;incrE := 2*dy;incrNE:= 2*(dy - dx);x := x0;y := y0;writePixel(x, y, value);while x < x1 DO

IF d <= 0 THENd:= d + incrE;x:= x + 1; 17

elsed:= d + incrNE;x:= x + 1;y:= y + 1;

end;writePixel(x, y, value);

end;end midpointLine;

Referências • Ammeral, L. Computação Gráfica para

programadores Java. Rio de Janeiro: LTC, 2008

• Traina, A. J. M.; Oliveira, M. C. F. Apostila de Computação Gráfica. São Carlos: USP/ICMC, 2006. Disponível em: http://www.inf.ufes.br/~thomas/graphics/www/apostilas/GBdI2006.pdf . Acessado em 22 de Janeiro de 2016.

• Paulovich, F. V. Conversão Matricial. São Paulo: USP/ICMC, 2011. Disponível em: http://wiki.icmc.usp.br/images/4/4a/SCC0250-slides-12-Conversao_matricial.pdf. Acessado em 22 de Janeiro de 2016

03/05/2023


70

http://www.inf.ufes.br/~thomas/graphics/www/apostilas/GBdI2006.pdf

http://www.inf.ufes.br/~thomas/graphics/www/apostilas/GBdI2006.pdf

http://wiki.icmc.usp.br/images/4/4a/SCC0250-slides-12-Conversao_matricial.pdf



Referências • Cavalcanti, J. Computação Gráfica. UNIVAST, 2014.

Disponível em: http://www.univasf.edu.br/~jorge.cavalcanti/comput_graf04_prim_graficas2.pdf. Acessado em 20 de janeiro de 2016.

• Bueno, M. Primitivas Gráficas. Disponível em: http://marciobueno.com/arquivos/ensino/cg/CG_03_Primitivas_Graficas.pdf. Acessado em 20 de janeiro de 2016.

• Mousquer, J. C.; Kliemann, K. A.; Matrakas, M. D. ALGORITMOS PARA DESENHAR RETAS E CÍRCULOS. Paraná, Foz do Iguaçu: FAC. Disponível em: http://www.udc.edu.br/v5/resources/producoes/SeminarioCientifico2014/files/CC/01.pdf. Acessado em 20 de Janeiro de 2016.

03/05/2023


71

http://www.univasf.edu.br/~jorge.cavalcanti/comput_graf04_prim_graficas2.pdf

http://www.univasf.edu.br/~jorge.cavalcanti/comput_graf04_prim_graficas2.pdf

http://marciobueno.com/arquivos/ensino/cg/CG_03_Primitivas_Graficas.pdf



http://www.udc.edu.br/v5/resources/producoes/SeminarioCientifico2014/files/CC/01.pdf



Education

Traçado em dispositivos gráficos matriciais Parte 1