84
Requisitos
● Álgebra lineal– Multiplicación de matrices
– Operaciones con vectores
● Programación II – Java con netbeans
● OpenGL (se enseña en clase)● Habilidades de visualización
Organización de clase
● Exámenes ● Tareas● Proyecto final
Dinámica
● Se explica el algoritmo en clase● Se resuelven dudas, ¡TODAS!● Se pide al alumno implementar el
algoritmo de tarea
Entrega de reportes
● Las tareas de investigación se escriben a mano
● Para las tareas de implementación, se entrega el código por correo y un video/pantallazos de prueba
Bibliografía
● Gráficos por computadora con OpenGL. Hearn/Baker. Prentice Hall, 2006.
● Computer Graphics: Principles and Practice. Foley et al. Addison-Wesley, 1995.
● 3D Computer Graphics. Alan Watt. Addison-Wesley, 2000.
Introducción
¿Qué es la graficación por computadora?
Entrada Procesamiento Salida
Introducción
¿Qué es la graficación por computadora?
Modelo(puntos, vértices/ejes,triángulos,ecuaciones)
Procesamiento
Impresiones,Pantallas (2D),VR/3D,RA
Introducción
En nuestro caso
vértices/ejes,ecuaciones
Procesamiento Pantallas (2D)
Introducción
y=sqrt(r*r-x*x) Procesamiento
¿Qué campos abarca?
● Juegos!!!
¿Qué campos abarca?
● Juegos!!!
¿Qué campos abarca?
● Juegos!!!
¿Qué campos abarca?
● Juegos!!!
¿Qué campos abarca?
● Juegos!!!
¿Qué campos abarca?
● Medicina
¿Qué campos abarca?
● Medicina
¿Qué campos abarca?
● Películas
¿Qué campos abarca?
● Realidad Virtual
¿Qué campos abarca?
● Realidad Aumentada
¿Qué campos abarca?
● Visualización científica
Paso a pasito
● Los gráficos complejos se construyen a partir de elementos simples
● Los elementos simples se llaman primitivas de graficación
Primitivas
● Puntos● Líneas● Polígonos
– triángulos, rectángulos y otros
● Círculos y elipses● Curvas splines
Primitivas
● Se conocen las ecuaciones que las representan
● Sus coordenadas son fáciles de calcular
● Se han estudiado optimizaciones
El problema inicial
● La mayoría de los modelos (ecuaciones, puntos, etc.) están en un espacio de Reales
● La mayoría de las salidas son discretas, generalmente en un espacio de Naturales
● Tenemos que calcular el natural que le corresponde a cierto real
El problema inicial
0, 0
n,m
El problema inicial
0, 0
n,m
Conversión de líneas
● Aproximación inicial con la fórmula punto pendiente
yi = mx
i + B
m = (yf – y
0)/(x
f – x
0)
● Se usa multiplicación de punto flotante (lento)
Conversión de líneas
● Podemos eliminar la multiplicación si observamos que
yi+1
= mxi+1
+ B= m(xi + Dx) + B
yi+1
= m(xi + 1) + B = (mx
i + B) + m
yi+1
= yi + m
Conversión de líneas
● Algoritmo de punto medio
yi = (Dy/Dx)x
i + B
F(xi , y
i) = (Dy)x
i - (Dx)y
i + (Dx)B
F(xi , y
i) = ax
i + by
i + c
● F(x, y) es igual a 0 en los puntos de la línea, positivo si el punto está abajo de la línea y negativo si está arriba de la línea
Conversión de líneas
● Algoritmo de punto medio
Xp, Yp E
NE
Q
Conversión de líneas
● Algoritmo de punto medio● Se evalúa
● Si d es igual a 0 o menor a 0, entonces pintamos el pixel E
● Si d es mayor a 0, entonces pintamos el pixel NE
F (xi+1, yi+12)
d=F (xi+1, y i+12)=a (xi+1)+b( y i+
i2)+c
Conversión de líneas
● Para calcular el primer factor de decisión
d 0=a (x0+1)+b( y0+12)+c=(ax+by+c)+a+ 1
2b
d 0=a+12b
Conversión de líneas
● Algoritmo de punto medio
● Actualizamos el valor de d, si escogimos el pixel al Este
d nuevo=F (xi+2, y i+12)=a (xi+2)+b( yi+
12)+c
d nuevo=[a (xi+1)+b( yi+12)+c]+a
d nuevo=d viejo+a
Conversión de líneas
● Algoritmo de punto medio
● Actualizamos el valor de d, si escogimos el pixel al Nor-Este
d nuevo=F (xi+2, y i+32)=a (xi+2)+b( yi+
32)+c
d nuevo=[a (xi+1)+b( yi+12)+c]+a+b
d nuevo=d viejo+a+b
Conversión de líneas
● Algoritmo de punto medio
● En resumen
d i=d i−1+2(a+b)
a=( y f− yo) b=−(x f−xo)d 0=2a+b
d i=d i−1+2aPixel i-1 fue Este
Pixel i-1 fue Nor-Este
Conversión de círculos
● Se parte de la ecuación clásica de la circunferencia
x2+ y2=r2
● Se evalúa una y para cada x
y=√r2−x2
● Aproximación inicial
Conversión de círculos● El problema es que se tienen resultados
incorrectos en algunas secciones del círculo
● Se puede evitar si se aprovecha la simetría del círculo
● El gran problema es el uso de raíz cuadrada
Conversión de círculos
● Se parte de la ecuación clásica de la circunferencia
x2+ y2=r2
● Se transforma a una función de x y y, para obtener un factor de decisión
d=F (x , y )=x2+ y2−r2
● Método del punto medio
Conversión de círculos
● El valor de d puede ser de tres maneras:
– Igual a 0 cuando (x, y) está en la circunferencia
– Menor a 0 cuando (x, y) está dentro del círculo
– Mayor a 0 cuando (x, y) está fuera del círculo
Conversión de círculos
● Se debe tener en cuenta que, el círculo es simétrico respecto a ejes que pasen por su centro
● En este caso se aprovecha que es simétrico respecto a cuatro ejes
Conversión de círculos
● Comenzaremos en el punto (0, r)
● Se calculan los pixeles para el primer octante
● El algoritmo termina cuando x = y
● Se reutilizan los cálculos para todos los octantes
Conversión de círculos
● Por ejemplo, el círculo de radio 8
Conversión de círculos
● Para calcular el factor de decisión del pixel i+1, se calcula d para el punto x
i+1, y
i + 1/2
● Se avanza con un incremento de 1 en el eje x y -1 en el eje y
d i=F (xi+1, y i−12)=(x+1)2+( y− 1
2)
2
−r2
Conversión de círculos
● Una vez calculado un factor de decisión, se podrá elegir un pixel a la derecha (Este) o abajo y a la derecha (Sur-Este)
– Si el siguiente punto medio está dentro del círculo (d < 0), entonces se escoge el punto al Este
– Si el siguiente punto medio está fuera del círculo (d => 0), entonces se escoge el punto al Sur-Este
Conversión de círculos
(x+1, y+1/2)
(x+2, y+3/2)
(x+2, y+1/2)
Conversión de círculos
d 0=F (x0+1, y0−12)=(x0+1)2+( y0−
12)
2
−r2
● Para el primer factor de decisión
d 0=[ x02+ y0
2−r2]+2x0− y0+54
● Como x0 = 0 y y
0 = r
d 0=54−r
Conversión de círculos
d i+1=F (xi+2, yi−12)=(xi+2)2+( y i−
12)
2
−r2
● Al igual que en el caso de las líneas, se busca calcular los siguientes factores de decisión en base a los anteriores
● Si se escogió el pixel del Este
d i+1=d i+2 xi+3
d i+1=[(xi+1)2+( y i−12)
2
−r2]+2 xi+3
Conversión de círculos
d i+1=F (xi+2, yi−32)=(xi+2)2+( y i−
32)
2
−r2
● Si se escogió el pixel del Sur-Este
d i+1=(xi+1)2+2 xi+3+( y i−12)
2
−2 yi+84−r2
d i+1=d i+2(xi+ yi)+5
d i+1=[(xi+1)2( yi−12)
2
−r2]+2 xi−2 yi+5
Conversión de círculos
● En resumen
d i+1=d i+2(xi+ yi)+5
d i+1=d i+2 xi+3
d 0=54−r
● Si d < 0, se escoge el pixel al Este y se recalcula d
● Si d => 0, se escoge el pixel al Sur-Este y se recalcula d
Conversión de círculos
● Ejemplo, círculo de radio 8
d i+1=d i+2(xi+ yi)+5d i+1=d i+2 xi+3
d 0=54−r= 5
4−8=−27
4
● x0 = 0, y0 = 8
Conversión de elipses
● La ecuación de la elipse es
(x−xc)2
Rx2 +
( y− yc)2
R y2 =1
● La aproximación más simple es despejar y y evaluar para diferentes x
y=√R y2− R y2Rx2 (x−xc)2+ yc
Conversión de elipses
● Existe una variante del método de punto medio para elipses
(x−xc)2
Rx2 +
( y− yc)2
R y2 =1
● Se cambia la ecuación a una función de x y y, para obtener un factor de decisión (suponiendo que está centrada en el origen)
F (x , y)=R y2 x2+Rx
2 y2−Rx2 R y
2
Conversión de elipses
● Se inicia en el punto (0, Ry) y se avanza con un paso horizontal de 1
● Se cambia a un paso vertical de 1 a la “mitad” de la elipse
Conversión de elipses
● Para conocer el punto donde cambia el paso de x a y, se obtiene el gradiente de F(x,y)
∇ F (x , y)=∂ F (x , y)
∂ xi+
∂F (x , y)∂ y
j=2R y2 x i+2Rx
2 y j
Conversión de elipses
● Cuando la pendiente del vector gradiente es igual a 1, entonces se está en el punto de inflexión buscado
Rx2 y>R y
2 x
● Ya en la práctica, el cambio de zona se da cuando
Rx2 y=R y
2 x
Conversión de elipses
● El factor de decisión será
– Menor a 0, si el punto está dentro de la elipse, por lo que se escoge el pixel al Este
– Igual a 0, si el punto está sobre la elipse, se escoge el punto al Sur-Este
– Mayor a 0, si el punto está afuera de la elipse, por lo tanto se escoge el pixel Sur-Este
F (x , y)=R y2 x2+Rx
2 y2−Rx2 R y
2
● Para la zona 1 (incrementos fijos en x)
Conversión de elipses
● Para la zona 1 (incrementos fijos en x)
● Se evalúa la función F(x,y) en el punto
(x+1, y-1/2)
F (x+1, y−12)=R y
2 (x+1)2+Rx2( y− 1
2)
2
−Rx2 R y
2
Conversión de elipses
● Para el punto (0,Ry)
F (x0+1, y0−12)=R y
2 (x0+1)2+Rx2( y0−
12)
2
−Rx2 R y
2
F (x0+1, y0−12)=R y
2+Rx2(R y
2−R y+14)−Rx
2 R y2
F (x0+1, y0−12)=R y
2−Rx2 R y+
Rx2
4=R y
2+Rx2(1
4−R y)
Conversión de elipses
● Los factores de decisión sucesivos se calculan en función de los anteriores
● Para el caso en que el pixel anterior fue Este
F (xi+2, y i−12)=R y
2 (xi+2)2+Rx2( yi−
12)
2
−Rx2 R y
2
d nuevo=R y2 (xi+1)2+R y
2 (2 xi+3)+Rx2( yi−
12)
2
−Rx2 R y
2
d nuevo=d viejo+R y2 (2 xi+3)
Conversión de elipses
● Cuando el pixel anterior fue el Sur-Este
F (xi+2, y i−32)=R y
2 (xi+2)2+Rx2( yi−
32)
2
−Rx2 R y
2
d nuevo=R y2 (xi+1)2+R y
2 (2 xi+3)+R x2( y i−
12)
2
+Rx2(−2 y+2)−Rx
2 R y2
d nuevo=d viejo+R y2 (2 xi+3)+2 Rx
2(1− y)
Conversión de elipses
● Para la zona 2 (incrementos fijos en y)
● Se evalúa la función F(x,y) en el punto medio
(x+1/2, y-1)
F (x+ 12,y−1)=R y
2 (x+ 12)
2
+Rx2( y−1)2−Rx
2 R y2
● Esta misma función se utiliza para conocer el factor de decisión inicial de la segunda región
Conversión de elipses
● El factor de decisión será
– Menor a 0, si el punto está dentro de la elipse, por lo que se escoge el pixel al Sur-Este
– Igual a 0, si el punto está sobre la elipse, se escoge el punto al Sur
– Mayor a 0, si el punto está afuera de la elipse, por lo tanto se escoge el pixel Sur
● Para la zona 2 (incrementos fijos en y)
Conversión de elipses
● Si el pixel anterior fue el del Sur
F (x+ 12,y−2)=R y
2 (x+ 12)
2
+Rx2( y−2)2−Rx
2 R y2
d nuevo=R y2 (x+ 1
2)
2
+Rx2 ( y−1)2−Rx
2 R y2+Rx
2 (−2 y+3)
d nuevo=d viejo+Rx2(−2 y+3)
Conversión de elipses
● Si el pixel anterior fue el del Sur-Este
F (x+ 32,y−2)=R y
2 (x+ 32)
2
+Rx2( y−2)2−Rx
2 R y2
d nuevo=R y2 (x+ 1
2)
2
+Rx2( y−1)2−Rx
2 R y2+R y
2 (2 x+2)+R x2(−2 y+3)
d nuevo=d viejo+2 R y2 (x+1)+Rx
2 (3−2 y)
Splines● Su origen son plantillas de dibujo usadas
en el diseño automotriz
● Existen dos tipos:
– Aproximación (no pasan por los puntos de control)
– Interpolación (si pasan por los puntos de control)
Splines● En las splines de aproximación, los
puntos de control definen un polígono que envuelve a la curva
● En las splines de interpolación, el polígono no necesariamente envuelve completamente a la curva
Splines
● Existen diferentes condiciones de continuidad entre las fronteras de los segmentos de las curvas
● Continuidad Paramétrica. Si la derivada al final de un segmento es IGUAL a la del inicio del siguiente segmento
Splines
● Dependiendo del grado de la derivada se conocen como C0, C1, C2
Splines
● Continuidad Geométrica. Si la derivada al final de un segmento es PROPORCIONAL a la del inicio del siguiente segmento
● Dependiendo del grado de la derivada se conocen como G0, G1, G2
Splines de Hermite
● Son del tipo interpolado
● Permiten control local, sólo los puntos de control locales afectan la forma de la gráfica
Splines de Hermite
● Sea P(u) la representación paramétrica de una curva
● Y su derivada
P (u)=au3+bu2+cu+d
P ' (u)=3au2+2bu+c
Splines de Hermite
● Para la Spline de Hermite se tienen las siguientes restricciones:
P (0)= p0
P (1)= p1
P ' (0)=Dp0
P ' (1)=Dp1
Splines de Hermite
● De las restricciones anteriores y la definición de la curva y su derivada
P (0)= p0=a (03)+b(02)+c (0)+d=d
P (1)= p1=a (13)+b(12)+c(1)+d=a+b+c+d
P ' (0)=Dp0=3a (02)+2b(0)+c=c
P ' (1)=Dp1=3a (12)+2b(12)+c=3a+2b+c
Splines de Hermite
● Si se reacomoda en forma matricial
[ p0
p1
Dp0
Dp1]= [ 0 0 0 1
1 1 1 10 0 1 03 2 1 0
] [ abcd
]
Splines de Hermite
● La especificación de la curva viene dada por sus puntos y los vectores tangentes, por lo que habrá que “despejar” la matriz [a, b, c, d]T
[ abcd
]= [ 2 −2 1 1−3 3 −2 −10 0 1 01 0 0 0
] [ p0
p1
Dp0
Dp1]
Splines de Hermite
● Una vez calculados las constantes a, b, c y d, se forma la curva paramétrica multiplicando las constantes por el parámetro u
P (u)=[u3 u2 u 1] [ 2 −2 1 1−3 3 −2 −10 0 1 01 0 0 0
] [ p0
p1
Dp0
Dp1]
Splines de Hermite
● Al multiplicar las matrices tenemos la siguiente función
P (u)= p0(2u3−3u2+1)+ p1(−2u3+3u2)
+Dp0(u3−2u2+u)+Dp1(u
3−u2)
P (u)= p0H 0(u)+ p1H 1(u)+Dp0H 2(u)+Dp1H 3(u)
Splines de Hermite
● Finalmente tendremos que evaluar la ecuación paramétrica en u, con un rango de [0, 1]
● Por ejemplo, para 0.1
P (u)= p0H 0(u)+ p1H 1(u)+Dp0H 2(u)+Dp1H 3(u)
P (0.1)= p0H 0(0.1)+ p1H 1(0.1)+Dp0H 2(0.1)+Dp1H 3(0.1)
P (0.1)= p0(2(0.1)3−3(0.1)2+1)+ p1(−2(0.1)3+3(0.1)2)
+Dp0((0.1)3−2(0.1)2+0.1)+Dp1((0.1)3−(0.1)2)
Splines de Bézier
● Las splines de Hermite se definen en términos de vectores tangentes, son poco intuitivas
● Las splines de Bézier se definen mediante, al menos, dos puntos de control (recta)
● Por su simplicidad son muy populares y aparecen en muchos paquetes de dibujo y de pintura
Splines de Bézier
Splines de Bézier
● Se definen mediante funciones base
● La curva paramétrica será la suma
Bk ,n(u)
P (u)=∑k=0
n
pk Bk , n(u)
Splines de Bézier
● Las funciones base se definen
Bk ,n(u)=(nk )uk (1−u)n−k
● Para cuatro puntos de control
B0,3(u)=(1−u)3 B1,3(u)=3u (1−u)2
B2,3(u)=3u2(1−u) B2,3(u)=u3
Splines de Bézier
● Finalmente, la curva con cuatro puntos de control se calcularía
P (u)= p0(1−u)3+ p1 (3u (1−u)2 )+ p2 (3u2(1−u) )+ p3u3
