Extra 02 - Algoritmos para desenho de linhas, círculos e polígonos

Algoritmos de desenho

de linhas e círculos

Computação Gráfica – DCC065

Sumário

 Dispositivos de saída  O que é o pixel?

 O problema de representação de uma linha  Equações de linha

 Algoritmos de conversão de linha

 Solução simples  Algoritmo de DDA  Bresenham

 Algoritmos para desenho de círculos  Conclusões

Dispositivos Gráficos

 Inicialmente vamos entender como imagens

são representadas nos dispositivos de saída

 Como objetos são desenhados na tela?

Im ag es tak en fr om H ea rn & B ak er, “ C omput er G rap hi cs w ith O pe nGL” ( 20 04 )

Dispositivos de Saída

 Há vários dispositivos de saída disponíveis:

 Impressoras / Plotters

 Tubos de Raios Catódicos  Dispositivos de Plasma

 Dispositivos de Cristal Líquido (LCD)  Dispositivos de LED

 Dispositivos de Realidade Virtual / Aumentada

 Os dispositivos digitais são baseados em

grades de pixels

Pixel

 Pixel (aglutinação de Picture e Element).

É o menor elemento num dispositivo de

exibição digital e é o menor ponto que forma uma imagem digital

 Imagens digitais são formadas por uma

Pixel

 Num monitor colorido cada Pixel é composto

por um conjunto de 3 pontos: verde, vermelho e azul.

 Nos dispositivos atuais, cada canal pode

exibir 256 tonalidades diferentes (8 bits) e combinando tonalidades dos três pontos é então possível exibir pouco mais de 16.7 milhões de cores diferentes.

 Em uma resolução de 640 x 480 temos

307.200 pixels, a 800 x 600 temos 480.000 pixels, a 1024 x 768 temos 786.432 pixels e

O problema de desenho de linha

 Como já vimos, um segmento de linha em

uma cena é definido pelos dois pontos em sua extremidade

x y

(2, 2)

O problema

 Mas o que acontece quando tentamos

desenhar esta linha em uma grade de pixels?

Como escolhemos o pixel que será “ligado”?

Considerações

 Considerações importantes para tratar este

problema:



A linha deve ter boa aparência

 Devemos evitar linhas com aspecto “serrilhado”



Tem que ser MUITO rápido!

 Quantas linhas são desenhadas em uma cena

típica?

Equação da linha

 Vamos fazer uma rápida revisão da equação

usada para desenhar linhas

x y y₀ y_end x_end x₀

b

x

m

y







onde:

0 0

x

x

y

y

m

end end







0 0

m

x

y

b







Linhas e inclinações (slope)

 A inclinação de uma linha (m) é definida

pelas suas coordenadas de início e fim

 O diagrama abaixo mostra alguns exemplos

de linhas e suas respectivas inclinações

m = 0 m = -1_/ 3 m = -1_/ 2 m = -1 m = -2 m = -4 m = ∞ m = 1_/ 3 m = 1_/ 2 m = 1 m = 2 m = 4 m = 0 ₁₂

Uma solução simples

 Poderíamos simplesmente descobrir a

coordenada

y

para cada coordenada

x

 Vamos considerar o seguinte exemplo:

x y (2, 2) (7, 5) 2 7 2 5

Grade de pixels

1 2 3 4 5 0 1 2 3 4 5 6 0 7 14

Uma solução simples

x y (2, 2) (7, 5) 2 3 4 5 6 7 2 5

5

3

2

7

2

5









m

5

4

2

5

3

2









b

 Calculando m e b:

Agora, para cada x descobrir o valor de y :

5 3 2 5 4 3 5 3 ) 3 (     y 5 1 3 5 4 4 5 3 ) 4 (     y 5 4 3 5 4 5 5 3 ) 5 (     y 5 2 4 5 4 6 5 3 ) 6 (     y

Uma solução simples

 Agora vamos arredondar os resultados e

“ligar” os pixels para desenhar a linha

3 5 3 2 ) 3 (   y 3 5 1 3 ) 4 (   y 4 5 4 3 ) 5 (   y 4 5 2 4 ) 6 (   y 0 1 2 3 4 5 6 7 8 0 1 2 3 4 5 6 7 16 Isso funciona?

Uma solução simples

 O problema é que esta solução é muito lenta  Em particular, observe que:

 A equação

y = mx + b

requer a multiplicação de

m

por

x

 O arredondamento também tem um custo

associado

Nota rápida sobre inclinações

 No exemplo anterior optamos por resolver a

equação paramétrica da linha para nos dar os valores de y para cada valor de x

 E se fizéssemos isso de outra forma?  Poderíamos tentar:  onde: e

m

b

y

x





0 0

x

x

y

y

m

end end







b



y

₀



m



x

₀ 18

Nota rápida sobre inclinações

 Deixando os detalhes de lado teríamos:

 Podemos ver facilmente

que esta linha não tem uma boa representação

 Podemos escolher que

forma desenharemos a linha baseado em sua inclinação 0 1 2 3 4 5 6 7 8 0 1 2 3 4 5 6 7 4 3 2 3 ) 3 (   x 5 3 1 5 ) 4 (   x

Nota rápida sobre inclinações

 Se a inclinação da linha estiver entre -1 e 1

calculares y em relação a x

 Caso contrário, calcularemos x em relação a y

m = 0 m = -1_/ 3 m = -1_/ 2 m = -1 m = -2 m = -4 m = ∞ m = 1_/ 3 m = 1_/ 2 m = 1 m = 2 m = 4 m = 0 20

O algoritmo DDA

 O algoritmo DDA (Digital Differential Analyzer)

possui uma abordagem incremental para processar linhas de forma mais rápida

O algoritmo DDA

 Considere a lista de pontos que definiram a

linha do exemplo anterior:

(2, 2), (3, 23/₅), (4, 31/₅), (5, 34/₅), (6, 42/₅), (7, 5)

 Perceba que os valores de x crescem 1

unidade e y cresce em relação ao valor da inclinação da linha

 Esta é a chave do algoritmo de DDA

O algoritmo DDA

 Quando a inclinação da linha estiver entre –1 e

1 comece pelo primeiro ponto da linha,

incrementando x de 1 unidade e calculando y através da seguinte equação:

 Caso contrário, incremente a coordenada y em

1 unidade e calcule o x correspondente através de:

m

y

y

_k1



_k



m

x

x

_k1



_k



1

O algoritmo DDA

 Novamente os valores serão arredondados

para que possam ser projetados sobre os pixels. (x_k, y_k) (x_k+1, y_k+m) (x_k, round(y_k)) (x_k+1, round(y_k+m)) (x_k, y_k) (xk+ 1/m, yk+1) (round(x_k), y_k) (round(x_k+ 1_/ m), yk+1) 24

Algoritmo DDA - Resumo

 O algoritmo DDA é bem mais rápido do que o

anterior

 Não há multiplicações em cada ponto a ser

calculado

 Entretanto, há outros problemas:

 O acúmulo de erros nos arredondamentos pode

fazer com que a linha se desvie do local onde deveria ficar

 Novamente as operações de arredondamento

Algoritmo de Bresenham

 O algoritmo de Bresenham é

outro exemplo de algoritmo incremental

 A grande vantagem desse

algoritmo é trabalhar

somente com cálculos de valores inteiros

Jack Bresenham trabalhou na IBM por 27 anos antes de entrar na academia. Bresenham desenvolveu seu famoso algoritmo na IBM nos anos 60.

Ideia geral

 Mova-se no eixo x em intervalos unitários e a

cada passo escolha entre 2 coordenadas y diferentes 2 3 4 5 2 4 3 5

Por exemplo, da

posição (2, 3)

escolheríamos os

pontos (3, 3) e (3, 4)

Buscaremos o ponto

mais próximo da

linha original

(x_k, y_k) (x_k+1, y_k) (x_k+1, y_k+1)

A coordenada

_y

na linha em

_x

_k

₊₁

é:

Derivando o Algoritmo de

Bresenham

 Já na posição

x

_k

+1

as separações verticais da linha matemática são rotuladas

d

_upper e

d

_lower

b

x

m

y



(

_k



1

)



y y_k y_k+1 x_k+1 d_lower d_upper 28

 Então,

d

_upper e

d

_lower são dados por:

 e:

 Podemos usar esse critério para fazer uma

decisão simples sobre qual pixel está mais perto da linha

Derivando o Algoritmo de

Bresenham

k lower

y

y

d





k k

b

y

x

m









(

1

)

y

y

d

_upper



(

_k



1

)



b

x

m

y

_k





_k







1

(

1

)

 Esta decisão está baseada na diferença entre

as posições dos dois pixels

 Vamos substituir

m

por ∆

y

/∆

x

onde ∆

x

e

∆

y

é a diferença entre os pontos extremos:

Derivando o Algoritmo de

Bresenham

1

2

2

)

1

(

2













d

m

x

y

b

d

_{lower upper k k} ) 1 2 2 ) 1 ( 2 ( ) (           x y b x y x d d x _{lower upper k k} ) 1 2 ( 2 2 2           y x_k x y_k y x b c y x x y _k    _k    2 2 30

 Então, o parâmetro de decisão

p

_k para o

k-ésimo

passo na linha é dado por:

 O sinal do parâmetro de decisão

p

_k será o

mesmo da operação

d

_lower –

d

_upper

 Se

p

_k for negativo, escolheremos o pixel

inferior, caso contrário, o superior

Derivando o Algoritmo de

Bresenham

c

y

x

x

y

d

d

x

p

k k upper lower k





















2

2

)

(

 Devemos lembrar que mudanças de

coordenadas ao longo do eixo

x

acontecem em passos unitários, então todos os cálculos são inteiros

 No passo

k

+1 o parâmetro de decisão é

dado por:

 Subtraindo

p

_k da expressão teremos:

Derivando o Algoritmo de

Bresenham

c

y

x

x

y

p

_k1



2





_k1



2





_k1



)

(

2

)

(

2

_{1 1} 1 k k k k k k

p

y

x

x

x

y

y

p

_







_







_



32

 Mas,

x

_k+1 é o mesmo que

x

_k

+1

, então:

 onde

y

_k+1 -

y

_k possui os valores 0 ou 1

dependendo do sinal de

p

_k

 O primeiro parâmetro p₀ é calculado em

(x₀, y₀) e dado pela expressão:

Derivando o Algoritmo de

Bresenham

)

(

2

2

₁ 1 k k k k

p

y

x

y

y

p

_











_



x

y

p

₀



2







Algoritmo de Bresenham

Algoritmo (para |m| < 1.0)

1. Informar os pontos das extremidades da linha,

armazenando o ponto mais a esquerda em (x₀, y₀) 2. Desenhe o ponto (x₀, y₀)

3. Calcular as constantes Δx, Δy, 2Δy e (2Δy - 2Δx) e computar o primeiro parâmetro de decisão como:

x y

p₀  2  

Algoritmo de Bresenham

 ATENÇÃO! O algoritmo e a derivação

descrita assumem valores de inclinação menores que 1. Para outras inclinações precisaremos ajustar o algoritmo

4. A cada x_k ao longo da linha, começando em k = 0, fazer o teste a seguir. Se p_k < 0, o próximo ponto a ser desenhado é (x_k+1, y_k) e:

Senão, o próximo ponto a desenhar é (x_k+1, y_k+1) e:

5. Repetir o passo 4 (Δx – 1) vezes

x y p p_k1  _k  2  2 y p p_k1  _k  2

Bresenham - Exemplo

 Vamos desenhar a linha do ponto (20, 10) ao

ponto (30, 18)

 Inicialmente vamos calcular todas as

constantes:



Δx

: 10 

Δy

_{: 8} 

2Δy

: 16



2Δy - 2Δx

: -4

 Calcularemos o primeiro ponto de decisão

p0 = 2Δy – Δx

= 6

Bresenham - Exemplo

17 16 15 14 13 12 11 10 18 29 27 26 25 24 23 22 21 20 28 30 k p_k (x_k+1,y_k+1) 0 1 2 3 4 5 6 7 8

Bresenham - Exemplo

17 16 15 14 13 12 11 10 18 29 27 26 25 24 23 22 21 20 28 30 k p_k (x_k+1,y_k+1) 0 1 2 3 4 5 6 7 8 6 2 -2 14 10 6 2 -2 14 (21, 11) (22, 12) (23, 12) (24, 13) (25, 14) (26, 15) (27, 16) (28, 16) (29, 17) 38

Bresenham - Exercício

 Considerando a linha compreendida entre os

pontos (21,12) e (29,16), implemente o

algoritmo de Bresenham para descobrir os pontos que comporão esta linha.

Para este exercício não será necessário utilizar nenhuma ferramenta gráfica, apenas os pontos deverão ser calculados

Bresenham - Exercício

17 16 15 14 13 12 11 10 18 29 27 26 25 24 23 22 21 20 28 30 k p_k (x_k+1,y_k+1) 0 1 2 3 4 5 6 40

Bresenham

Solução do Exercício

Resultado do cálculo das constantes:



Δx

: 8 

Δy

_{: 4} 

2Δy

_{: 8}

Bresenham

Solução do Exercício

17 16 15 14 13 12 11 10 18 29 27 26 25 24 23 22 21 20 28 30 k p_k (x_k+1,y_k+1) 0 1 2 3 4 5 6 0 -8 0 -8 0 -8 0 (22, 13) (23, 13) (24, 14) (25, 14) (26, 15) (27, 15) (29, 16) 42

Bresenham - Resumo

 O algoritmo para desenho de linhas de

Bresenham possui as seguintes vantagens:

 É um algoritmo incremental rápido  Utiliza apenas cálculos inteiros

 O algoritmo DDA em relação ao algoritmo de

Bresenham tem os seguintes problemas:

 Acúmulo de erros de arredondamento podem

mover a linha para longe do local pretendido

 Operações de arredondamento e operação com

números em ponto flutuante consomem mais tempo do que operações inteiras

Algoritmo para desenho de

círculos

 A equação do círculo é a seguinte:

onde

r

é o raio do círculo

 A partir desta equação, podemos criar uma

rotina simples de desenho de um círculo

resolvendo a equação para

y

em intervalos unitários de

x

usando: 2 2 2 r y x   2 2 x r y    44

Algoritmo para desenho de

círculos

20 0 202 2 0    y 20 1 202 2 1    y 20 2 202 2 2    y 6 19 202 2 19    y 0 20 202 2 20    y

Algoritmo para desenho de

círculos

 Entretanto, esta não é uma solução

interessante.

 Primeiramente, o círculo resultante possui

lacunas nos locais onde a inclinação é quase vertical

 Segundo, o cálculo não é eficiente

 Há operações de multiplicação

 Há cálculos de raiz quadrada que são muito

custosos

Simetria de octantes

 Uma característica interessante - Coordenadas

de 45o de arco do círculo podem ser replicadas gerando o círculo completo (simetria de

octantes) (x, y) (y, x) (y, -x) (x, -y) (-x, -y) (-y, -x) (-y, x) (-x, y) 2 R

Algoritmo do Ponto Médio

 De forma similar ao caso do desenho de

linhas, há um algoritmo incremental para desenhar círculos chamado Algoritmo do Ponto Médio proposto (novamente) por Bresenham

 Para desenhar um círculo usando a simetria

dos 8 octantes, basta calcular as coordenadas

x e y do primeiro octante. O restante dos

Algoritmo do Ponto Médio

(x_k+1, y_k)

(x_k+1, y_k-1) (x_k, y_k)

 Considere que inicialmente desenharemos

apenas o ponto

(x

_k

, y

_k

)

 O próximo ponto será

escolhido entre

(x

_k

+1, y

_k

)

e

(x

_k

+1, y

_k

-1)

 Gostaríamos de escolher o

ponto mais próximo da linha do círculo

Algoritmo do Ponto Médio

 Podemos escrever a equação do círculo

como:

 A equação nos dá os seguintes valores:

 Ao avaliarmos esta função pelo ponto médio

entre os pontos candidatos nós podemos tomar a decisão 2 2 2 ) , (x y x y r f_circ            , 0 , 0 , 0 ) , (x y f_circ círculo ao interior for ) , ( se x y borda a sobre estiver ) , ( se x y círculo ao externo estiver ) , ( se x y 50

Algoritmo do Ponto Médio

 Considerando que apenas desenhamos (

x

_k

,y

_k)

devemos escolher entre (

x

_k

+1,y

_k) e (

x

_k

+1,y

_k

-1

)

 Nossa variável de decisão pode ser definida

como:

 Se

p

_k < 0, o ponto médio estará dentro do

círculo e o pixel

y

_k está próximo ao círculo

 Caso contrário, o ponto médio estará fora do

círculo e

y

_k

-1

será escolhido

2 2 2 ) 2 1 ( ) 1 ( ) 2 1 , 1 ( r y x y x f p k k k k circ k        

Algoritmo do Ponto Médio

 Para garantir que tudo funcione da forma

mais eficiente possível podemos fazer todos os cálculos de forma incremental

 Inicialmente consideraremos:

 ou:

 onde

y

_k+1 será

y

_k ou

y

_k

-1

dependendo do

sinal de

p

_k









2 2 1 2 1 1 1 2 1 ] 1 ) 1 [( 2 1 , 1 r y x y x f p k k k k circ k              1 ) ( ) ( ) 1 ( 2 2 ₁ 2 ₁ 1            k k k k k k k p x y y y y p 52

Algoritmo do Ponto Médio

 A primeira variável de decisão é dada por:

 Então, se

p

_k < 0 a próxima variável de

decisão será dada por:

 Se

p

_k > 0 então a variável de decisão será: r r r r f p _circ         4 5 ) 2 1 ( 1 ) 2 1 , 1 ( 2 2 0 1 2 ₁ 1      k k k p x p 1 2 1 2 ₁ 1        k k k k p x y p

Algoritmo do Ponto Médio

Algoritmo do Ponto Médio

1. Informe o raio r e o centro do círculo (x_c, y_c)

2. Estabeleça a coordenada do primeiro ponto na

circunferência do círculo centrado na origem

3. Calcule o valor inicial do parâmetro de decisão:

) , 0 ( ) , (x₀ y₀  r r p   4 5 0 54

Algoritmo do Ponto Médio

4. Começando com k = 0 para cada posição x_k, faça o

teste seguinte. Se p_k < 0, o próximo ponto ao longo do

círculo centrado em (0, 0) é (x_k+1, y_k) e:

5. Senão o próximo ponto ao longo do círculo será (x_k+1,

y_k-1) e:

6. Determine os pontos de simetria nos outros 7 octantes 7. Mova cada posição de pixel calculado (x, y) no

caminho do círculo centrado em (x_c, y_c) para desenhar

as coordenadas do círculo:

8. Repita os passos 3 a 5 até que x >= y 1 1 1 2  1 2    k  k   k k p x y p c x x x   y  y  y_c 1 2 ₁ 1      k k k p x p

Algoritmo do Ponto Médio

Exemplo

 Para vermos o algoritmo de ponto médio em

funcionamento, desenhe um círculo de raio 10 com centro na origem (0,0)

Algoritmo do Ponto Médio

Exemplo

9 7 6 5 4 3 2 1 0 8 9 7 6 5 4 3 2 1 0 8 10 10 _{k p} k (xk+1,yk+1) 0 1 2 3 4 5 6

9 7 6 5 4 3 2 1 0 8 9 7 6 5 4 3 2 1 0 8 10 10

Algoritmo do Ponto Médio

Exemplo

k p_k (x_k+1,y_k+1) 0 1 2 3 4 5 6 -5 0 -11 -2 9 6 7 (1, 10) (2, 10) (3, 9) (4, 9) (5, 9) (6, 8) (7, 7) 58

Algoritmo do Ponto Médio

Exercício

 Considerando um círculo de raio 15,

implemente o algoritmo do Ponto Médio

para calcular as coordenadas de uma das octantes de um círculo.

Para este exercício não será necessário utilizar nenhuma ferramenta gráfica, apenas os pontos deverão ser calculados

Algoritmo do Ponto Médio

Exercício

k p_k (x_k+1,y_k+1) 0 1 2 3 4 5 6 7 8 9 10 9 7 6 5 4 3 2 1 0 8 9 7 6 5 4 3 2 1 0 8 10 10 13 12 11 14 15 13 12 14 11 16 15 16 ₆₀

Algoritmo do Ponto Médio

Solução do Exercício

k p_k (x_k+1,y_k+1) 0 1 2 3 4 5 6 7 8 9 10 -11.8 -6.8 0.3 -20.8 -9.8 3.3 -9.8 7.3 0.3 -2.8 20.3 (1, 16) (2, 16) (3, 16) (4, 15) (5, 15) (6, 15) (7, 14) (8, 14) (9, 13) (10, 12) (11, 12) 9 7 6 5 4 3 2 1 0 8 10 15 13 12 14 11 16

Algoritmo do Ponto Médio

Resumo

 Os pontos chave do algoritmo de ponto

médio são:

 A simetria por octantes que reduz drasticamente

o trabalho de desenhar um círculo

 Movendo em passos unitários ao longo do eixo x

a cada ponto da borda do círculo temos que escolher duas possíveis coordenadas de y

Preenchimento de Polígonos

 Agora que já sabemos desenhar linhas e

círculos, como poderemos desenhar polígonos?

 Podemos usar um algoritmo incremental

Algoritmo de Scan-Line

2 4 6 8 10 _{Scan Line} 0 2 4 6 8 10 12 14 16 64

Algoritmo de Scan-Line

 O algoritmo básico possui as seguintes

características:

 Encontre as interseções da scan-line em todas as

arestas do polígono

 Ordene as interseções em relação ao eixo x  Preencha todos os pixels entre os pares de

Algoritmo de Scan-Line

Conclusões

 Nesta aula vimos como desenhos são

mostrados em dispositivos de saída

 Desenhar linhas em dispositivos baseados

em grades de pixels consume recursos então é interessante descobrirmos formas

eficientes de fazermos isso

 Vimos alguns algoritmos para desenho de

linhas e algoritmos para desenho de círculo.

 Finalmente, vimos um algoritmo simples para