Cor

Programação Baseada em Acontecimentos

Matemática (e geometria) para CG

1

Questão 1, (exame)

[1.0v] Explique, no contexto da computação gráfica interactiva, o que é uma frame e como esta se relaciona com o desempenho de um sistema gráfico.

Frame:

imagem estática gerada no final do pipeline

contêm vista a ser representada no dispositivo de visualização

Animação:

criada através da apresentação em sequência rápida deste frames.

tão mais fluida quanto mais frames se conseguirem apresentar por unidade de tempo.

O desempenho depende do nº de triângulos que se consegue desenhar por frame, (Para se medir o desempenho de um sistema gráfico usa-se o número de frames por segundo (fps)).

?

2

Conceitos BásicosCor

3

Espectro Electromagnético

4

Retina

Retina Bastonetes Cones

Célula BastoneteCélulas Cone

5

Teoria dos três estimulos

Cones são sensores de cor

Picos de sensibilidade

vermelho, verde, azul

Todas as outras cores

Representadas como combinações destas

Ciano = Azul + Verde

Amarelo = Verde + Vermelho

Etc…

gama

ro

beta

6

Modelação da CorCor

7

Caracterização da Cor

Cor (hue)

distinção entre cores

vermelho, verde, amarelo, lilás,…

Saturação (saturation)

distância da cor ao cinzento de igual intensidade

muito saturado - vermelho, azul

pouco saturado - rosa, azul do céu, cores pastel

8

Caracterização da Cor (cont.)

Luminosidade (lightness)

intensidade da luz reflectida por uma superfície

(parede, quadro)

Brilho (brightness)

intensidade da luz emitida por uma superfície

(lâmpada, Sol)

9

Características

Cor (hue)Distinção entre cores

Comprimento de onda dominante

Saturação (saturation)

Pureza da cor

Luminosidade (lightness)

Brilho (brightness)

10

CorModelos de Cor

11

Propriedades desejáveis dos

Modelos de cor

Uniformidade perceptual

Facilidade de navegação

Proximidade face à psicologia do sistema visual

Rigor

Facilidade de realização

Em computação gráfica:

12

Modelo de Munsell

Eixo vertical: value

Circunferência:hue

Raio: chroma

ilustração por Samuel J. Klein

13

Extracto do

“Munsell Book of Color ”

14

Guia de cores Pantone®

15

(Alguns) Modelos de Cor

RGB Red, Green, Blue

CMY Cyan, Magenta, Yellow (cores complementares)

HSV Hue, Saturation, Value

16

Modelo RGB

17

Espaço RGB

18

Espaço CMY

Vermelho (0,1,1)

Verde (1,0,1)

Branco = (0,0,0) Magenta = (0,1,0)

Amarelo = (0,0,1)

Ciano (1,0,0)

Preto = (1,1,1)

Azul (1,1,0)

Cinzentos 19

RGB

Modelo aditivo

CMYK

Modelo subtractivo

Conversão trivial:

RGB e CMY

B

G

R

Y

M

C

1

1

1

Y

M

C

B

G

R

1

1

1

20

Espaço HSV

1,0 cião

magenta

branco

0,0

preto

amarelo verde

120º

vermelho

0º

azul

240º

S H

V

21

Programação Baseada em Acontecimentos

22

Contexto Histórico

Antes das aplicações interactivas de manipulação directa

Arquitecturas de interacção eram muito simples:

Programas sequenciais

Interpretadores linha de comandos (DOS, UNIX)

Programa controla e pede entradas

Utilizadores introduzem informação

Utilizadores esperam pelo programa

23

Programas sequenciais

Abordagem típicaLoop (forever)

Programa lê comando do utilizador

Programa analisa entrada

Programa avalia o resultado

Possivelmente gera saídas

End (loop)

Problema:

Como tratar múltiplas acções?

Como tratar acontecimentos assíncronos?

24

Modelo de Acontecimentos

Modelo desenvolvido para suportar criação de Interfaces de Manipulação Directa

Permite comunicação entre

objectos interactivos e o sistema de entradas/saídas

os próprios objectos entre si

Programa não espera pelo utilizador

Continua a processar acontecimentos, se estes acontecerem,

• mesmo sem input dos utilizadores

26

Modelo de Acontecimentos

Comunicação realizada via Acontecimentos (Event)

Acontecimento = algo interessante

Tecla premida

Janela redimensionada

Acabou o tempo de vida do meu personagem

…

27

Modelo de Acontecimentos

Acontecimentos armazenados em lista de

acontecimentos

Gestão da lista de acontecimentos assegura

que acontecimentos são tratados pela ordem

em que acontecem

Mouse Move

Key Press

Event Queue

28

Registo e Funções de Callback

Existem inúmeros acontecimentos no sistema

Nem todos interessam

Aplicação indica quais os acontecimentos “interessantes”

Registo e Funções de Callback

Regista-se função de Processamento de acontecimentos

“interessantes” (callback ou event handler ou event listener)

Esta função deve processar esse acontecimento

29

Registo e Funções de Callback

Exemplo

Registo de função de Callback…

window.addEventListener("keydown", onKeyDown);

…

Função de Callback

function onKeyDown(e) {

switch (e.keyCode) {

case ’S’: //S == 83ball.userData.jump = !ball.userData.jump;

break;

}

}

30

Ciclo Update/Display

31

exemplo.js

Update

Display

32

Matemática (e geometria) para CG

Edward Angel, Cap. 3

33

Notas

As definições matemáticas aqui apresentadas são

descritas na perspectiva de CG

Vamos evitar definições genéricas demasiado formais

Trabalhamos no espaço tridimensional (3D)

Mas a maioria do que aqui apresentamos é válido para

espaços n-dmensionais

34

Escalares, Pontos e VectoresMatemática para CG

35

Objectos Geométricos

Linhas Polígonos Poliedros

36

Objectos Geométricos

Objectos complexos podem ser definidos a partir de

um conjunto limitado de objectos mais simples

37

Objectos geométricos

Objectos e suas relações podem ser descritos usando

Escalares

Pontos

Vectores

𝛼 ∈ 𝑅

Tzyx pppp

Tzyx dddT

38

Escalares Consideramos escalares os números reais

Operações sobre escalares: Adição

Multiplicação

Propriedades destas operações Comutatividade

Associatividade

Distributividade

Identidade Escalar Da adição (0)

Da multiplicação (1)

Inversos Escalar Da adição (-α)

Da multiplicação (α-1)

𝛼, 𝛽 ∈ 𝑅

𝛼 + 𝛽 = 𝛽 + 𝛼

𝛼 ∙ 𝛽 = 𝛽 ∙ 𝛼

𝛼 + 𝛽 + 𝛾 = (𝛼 + 𝛽) + 𝛾

𝛼 ∙ 𝛽 + 𝛾 = 𝛼 ∙ 𝛽 + 𝛼 ∙ 𝛾

𝛼 ∙ 𝛽 ∙ 𝛾 = (𝛼 ∙ 𝛽) ∙ 𝛾

𝛼 + 0 = 𝛼

𝛼 ∙ 1 = 𝛼

𝛼 + (−𝛼) = 0

𝛼 ∙ 𝛼−1 = 1

39

Vectores no Espaço Euclideano

Espaço Euclideano contém escalares e vectores

Vectores têm as seguintes operações (neste espaço)

Soma de vectores

Multiplicação de escalar por vector

Produto interno

Produto externo

Não se pode somar um escalar a um vector!

Não se multiplicam vectores (só matrizes)

40

VectoresConhecimentos Básicos

Vector descreve um comprimento e uma direcção

Não esquecer:

Vector unitário é um vector de comprimento 1

Ta 232

3

a

41

VectoresConhecimentos Básicos

1

1aa

Pergunta:

Vector é unitário?

42

VectoresConhecimentos Básicos

a

a

y

xa

a

22

aa yxa

Comprimento do vector?

43

VectoresConhecimentos Básicos

ab

ba a

b

ab

abba

zz

yy

xx

z

y

x

z

y

x

ba

ba

ba

b

b

b

a

a

a

44

VectoresConhecimentos Básicos

a

z

y

x

z

y

x

ka

ka

ka

a

a

a

k

ak k escalar

45

VectoresConhecimentos Básicos

a

z

y

x

z

y

x

ka

ka

ka

a

a

a

k

ak 0kk escalar

46

Produto Interno (dot product)

a

b

cosbaba

baba yyxxba Ou melhor:

47

Produto Externo

48

Produto Externo

xyyx

zxxz

yzzy

baba

baba

baba

ba

sinbaba

49

Produto Externo

zyx

zyx

bbb

aaa

zyx

ba det

sinbaba

50

Produto Externo

Regra da mão direita

51

Produto Externo

Regra da mão esquerda

52

Atenção!

𝑎𝑏𝑐∙𝑑𝑒𝑓

É produto interno de dois vectores!

Não é multiplicação de vectores!

𝑎𝑏𝑐×

𝑑𝑒𝑓

É produto externo de dois vectores!

Não é multiplicação de vectores!

𝑎𝑏𝑐+ 𝑑 Se d for escalar, isto não existe!

53

Espaço CartesianoMatemática para CG

54

Base Ortonormada

Manipulação de sistemas de coordenadas é uma das

tarefas base de computação gráfica

Sistemas de coordenadas são bases ortonormadas

Base ortonormada em 3D

Formada por três vectores unitários ortogonais entre si

1 wvu

0 wuwvvu

vuw

55

Espaço Cartesiano

56

Base Ortonormada Cartesiana

57

Base Ortonormada Cartesiana

Existe uma origem implícita

A localização O e os vectores x, y e z não são explicitamente

representados

58

Plano

Superfície bidimensional planar

Definido por

Três pontos

Dois vectores

• Dois vectores no plano

• Um vector no plano e outro normal ao plano

Um ponto e um vector normal

59

Polígono

Figura geométrica definida através de

lista de vértices ligados entre si por

segmentos de linha

60

Polígonos Regulares

Polígonos convexos com lados iguais

61

Sólido

Definição formal

Figura tridimensional que representa uma porção do

espaço limitada pelas suas superfícies

Kern and Bland, 1948

62

Sólidos Regulares

Figuras geométricas:

faces são definidas por polígonos regulares idênticos

mesmo número de faces a convergir em cada vértice

Tetratedro Cubo Octaedro Dodecaedro

63

TrigonometriaEnquadramento e Conceitos Fundamentais

64

TrigonometriaConhecimentos básicos

grausradianos

radianosgraus

180

180

2

65

TrigonometriaConhecimentos básicos

66

TrigonometriaConhecimentos básicos

h

a

o

)cos(cos

)sin(sin

tan

cos

sin

ao

ha

ho

?cos

?sin

?tan

?cos

?sin

67

MatrizesEnquadramento e Conceitos Fundamentais

68

Matrizes

Operações matrizes intensamente usadas em CG

Revejam com atenção esta matéria (Álgebra Linear)

Pratiquem a multiplicação de matrizes

69

Multiplicação de Matrizes

𝐴𝐵 =

𝑎11 … 𝑎1𝑚⋮ ⋱ ⋮

𝑎𝑛1 … 𝑎𝑛𝑚

𝑏11 … 𝑏1𝑖⋮ ⋱ ⋮

𝑎𝑚1 … 𝑎𝑚𝑖

𝐴𝐵 =𝑎11 𝑎12 𝑎13𝑎21 𝑎22 𝑎23

𝑏11 𝑏12 𝑏13𝑏21 𝑏22 𝑏23

𝐴𝐵 =𝑎11 𝑎12 𝑎13𝑎21 𝑎22 𝑎23

𝑏11 𝑏12 𝑏13𝑏21 𝑏22 𝑏23𝑏31 𝑏32 𝑏33

70

Multiplicação de Matrizes

Não é comutativa

É associativa

𝐴𝐵 =

𝑎11 … 𝑎1𝑚⋮ ⋱ ⋮

𝑎𝑛1 … 𝑎𝑛𝑚

𝑏11 … 𝑏1𝑖⋮ ⋱ ⋮

𝑎𝑚1 … 𝑎𝑚𝑖

𝐴𝐵 ≠ 𝐵𝐴

𝐴𝐵𝐶 = 𝐴𝐵 𝐶 = 𝐴(𝐵𝐶)

71

Multiplicação de Matrizes

2,21,2

2,11,1

2,21,2

2,11,1

2,21,2

2,11,1

cc

cc

bb

bb

aa

aa

AB

n

r

jrriji bac1

,,,

72

Multiplicação de Matrizes

?

01

12

13

131

201

73

Multiplicação de Matrizes

?

01

12

13

131

201

74