Gráficos asistidos por ordenador

1. Gráficos asistidos por ordenador Miguel Ángel Pino Vázquez

2. Gráficos asistidos por ordenador • 3.1 MODELOS DE IMÁGENES • 3.2 COORDENADAS DEL SISTEMA • 3.3 PROPIEDADES VISUALES HUMANAS • 3.4 HARDWARE GRÁFICO • 3.5 CLASE ABSTRACTA “CANVAS” • 3.6 PINTADO • 3.7 TEXTO • 3.8 MONTAJE • 3.9 COLOR

3. 3.1 MODELOS DE IMÁGENES -3.1.1 Modelado de trazos -3.1.2 Modelo pixelado -3.1.3 Modelo de regiones

4. 3.1 MODELOS DE IMÁGENES-3.1.1 Modelado de trazos -En que consiste ? Modelo en que se declaran unas figuras básicas mediante funciones a las que se le dará valores de entrada a unas funciones... Ejemplo: Línea ((4,5)(9,7) grosor 1) Línea ((4,10)(4,17) grosor 2) Circulo((19,8) radio 3 grosor 3) Inconvenientes: Número limitado de figuras...

5. 3.1 MODELOS DE IMÁGENES-3.1.2 Modelo pixelado -Imágenes divididas en conjunto de pixeles -Tres aspectos importantes para la resolución Número de líneas de píxeles El número de píxeles por línea Número de bits necesarios para representar cada uno de los píxeles Ejemplo:

6. 3.1 MODELOS DE IMÁGENES-3.1.2 Modelo pixelado Desventajas: -Aliasing Ejemplo de aliasing y solución: Representación de una línea en píxeles

7. 3.1 MODELOS DE IMÁGENES-3.1.3 Modelo de regiones Las imágenes se dividen en dos partes: -Perfil -Relleno Ejemplo: Ventajas Ahorro de memoria necesaria. El texto se representa como regiones. Desventajas Regiones se convierten en bitmaps al ser tratados por la impresora.

8. 3.2 COORDENADAS DE LOS SISTEMAS -3.2.1 Coordenadas por defecto -3.2.2 Coordenadas físicas -3.2.3 Modelos de coordenadas -3.2.4 Coordenadas interactivas

9. 3.2 COORDENADAS DE LOS SISTEMAS-3.2.1 Coordenadas por defecto -Son las que se le otorgan a los dispositivos por defecto. -Ponen el centro u origen abajo a la izquierda. Ejemplo: Y la que se usa habitualmente: y Origen parte superior izquierda x Origen x y

10. 3.2 COORDENADAS DE LOS SISTEMAS-3.2.2 Coordenadas físicas -Aparecen problemas en cuanto a la visualización dependiendo de las distintas resoluciones de los dispositivos. -La solución es el paso de pixeles a unidades físicas. -Por ejemplo de pixeles a centímetros o puntos.

11. 3.2 COORDENADAS DE LOS SISTEMAS-3.2.3 Modelos de coordenadas -Los procesadores de texto y de dibujo usan coordenadas, declaradas con unidades físicas estándar. -Si embargo en uno de arquitectura las coordenadas se medirán en metros, pies etc... Por lo tanto hay que escalarlo, estableciendo unos valores para cada unidad. Ejemplo: 22 pies * 10 pixeles = 220 pixeles 1 pie

12. 3.2 COORDENADAS DE LOS SISTEMAS-3.2.4 Coordenadas interactivas -Diferente forma de tratar los puntos entrada o salida. -Por eso usaremos una fórmula para tratar los puntos de entrada, pasándolos a una ventana dentro de una posición particular en la ventana. Modelodepuntos * Escala de pintado *Paso a unidades físicas + origen de la ventana = Puntos de salida

13. 3.3 PROPIEDADES VISUALES HUMANAS -3.3.1 Ratios de diferentes soportes

14. 3.3 PROPIEDADES VISUALES HUMANAS -3.3.1 Ratios de diferentes soportes -Haciendo cuentas: 1 pixel provoca 3,25 instrucciones. Con un monitor con 640X480 de resolución provocara 307200 pixeles y 300 MIPS. Y esto limita a 32,5 instrucciones por pixel. -No son suficientes para tratar video. -Al principio las películas eran toscas. -El movimiento no existía realmente. -Para producirlo hay que presentar las imágenes entre 20-30 frames por segundo (fps). -Esto implica entorno a los 30 MIPS. Y de ellos 1 millón son para el dispositivo de visualización. SOLUCIÓN No siempre tengo que cambiar todos los pixeles del frame, con respecto al anterior. Solo trato los que cambio.

15. 3.4 HARDWARE GRÁFICO -3.4.1 Arquitectura de memoria de frames -3.4.2 Tuvo de rayos catódicos -3.4.3 Monitor de cristal liquido -3.4.4 Dispositivos de copia

16. 3.4 HARDWARE GRÁFICO-3.4.1 Arquitectura de memoria de frames • La CPU genera los puntos que son guardados en la memoria de frames. • Esta actúa como almacén de imágenes que se son usadas en pantalla.

17. 3.4 HARDWARE GRÁFICO-3.4.2 Tubo de rayos catódicos • Conocido por CRT. Examina los puntos de arriba abajo y de izquierda a derecha de la memoria de frames. • Esto lo representa en pantalla mediante 3 brillos diferentes. Rojo, verde y azul. • Hay que refrescar la imagen para evitar para evitar su deterioro. Entorno a 60-75 Hz (60-75 veces por segundo).

18. 3.4 HARDWARE GRÁFICO-3.4.3 Monitor de cristal líquido -Conocidos por LCD. -Usado en portátiles. -Tiene unos cristales que son traspasados por la luz, cambiando su polarización. -Estos cristales pueden ser transparentes u opacos, y esto es lo que provoca las imágenes.

19. 3.4 HARDWARE GRÁFICO-3.4.4 Dispositivos de copia -El primer dispositivo importante fue el ploter, trabajaba con imágenes modelas a trazos. -Las impresoras láser actuales usan el paso de imágenes modeladas mediante regiones y sobre todo imágenes pixeladas. -Se manejan tan solo a través de la interface de usuario. -Un buen software designa el mismo código para la salida por monitor al de un dispositivo cualquiera de copia. -La diferencia es que la CPU no tiene acceso directo a la memoria en el buffer de frames en el dispositivo de copia.

20. 3.5 CLASES ABSTRACTAS “CANVAS” -3.5.1 Métodos y propiedades

21. 3.5 CLASES ABSTRACTAS “CANVAS” -“Canvas” es una clase que define los métodos que nosotros usaremos para pintar. En estas clases se define un modelo uniforme para el pintado en 2D y podrá ser usada en cualquiera aplicación. -Una función “Canvas” esta definida de una forma estándar y las diferentes consideraciones, las hacemos en subclases, no es lo mismo imprimir que ver un objeto por pantalla. Cada subclase esta implementada de forma diferente pero la clase de que dependen será idéntica. Tres aspectos a saber de la canvas son: Limitaciones de resolución de los diferentes dispositivos Si es en color o solo escala de grises ese dispositivo Posibilidad de cambio dinámico de la canvas en función de la ventana. La clase VIEW tiene una subclase TSTdPrintHander que pintara sobre la impresora usando la abstracción de VIEW

22. 3.5 CLASES ABSTRACTAS “CANVAS” -3.5.1 Métodos y propiedades • Los métodos pueden ser agrupados dentro del tipo de pintado como de líneas y figuras, dibujando texto, recortado de nuestras figuras y la textura. Las propiedades que son propias de las clases son a las que pueden acceder directamente mediante los métodos definidos en ella, la razón de esta forma de acceso es debido a que cada impresora tendrá unas transformaciones particulares y unos datos necesarios para la impresión.

23. 3.6 PINTADO -3.6.1 Paths -3.6.2 Figuras cerradas

24. 3.6 PINTADO Todas las figuras graficas tienen en común unas pocas propiedades. Línea, anchura de borde, rellenado y textura. Ejemplo: (X1,Y1) (X2,Y2) Usando la clase canvas seria: Rectángulo (X1,Y1,X2,Y2,ancho línea, color línea, color fondo).

25. 3.6 PINTADO Trabajar con los métodos puede ser muy lioso, por eso se limita el numero de métodos a los siguientes en la clase canvas: Void Canvas::rectángulo (X1,Y1,X2,Y2) Void Canvas::anchodelinea(LW) long Canvas::Get Line Width () Void Canvas::Color de línea(LC) Color Canvas::Get Line Color () Void Canvas::Colorear fondo(FC) Color Canvas::Get Fill Color () Cuando un rectángulo o alguna otra figura, es pintada, los datos de las propiedades comunes son usadas para no tener que repetir información.

26. 3.6 PINTADO Ejemplo: Si usamos las sentencias siguientes, el resultado sera: Canvas Cnv: Cnv.SetLineWidth (1); Cnv.SetLineColor (Black); Cnv.SetFillColor (White); Cnv.Rectangle (50,50,150,100); Cnv.Rectangle (200,120,250,140); Cnv.SetFillColor (Gray); Cnv.Rectangle (180,20,220,40);

27. 3.6 PINTADO-3.6.1 Paths (X1,Y1) LINEAS Son las mas simples de todas las figuras. Basta con 2 puntos de control para definir esa línea. • Son objetos 1D que se ven el espacio 2D • Las definidas son: • *Líneas • *Círculos • *Arcos • *Elipses • *Curvas • *Unión de diversos objetos de los anteriores (X2,Y2) CIRCULOS El modelo mas simple es el que esta definido por un centro y un radio. También se puede definir por el centro y algún punto dela circunferencia. (Xr,Yr) (Xc,Yc)

28. 3.6 PINTADO-3.6.1 Paths ARCOS Son fragmentos de círculos. Usan las mismas ecuaciones pero se le añaden algunas restricciones, en los valores que se le dan a sus ecuaciones paramétricas. ELIPSES Dos opciones según sean sus ejes paralelos o no a los ejes de coordenadas. En el caso de que sean paralelos se trataran con las ecuaciones de los círculos. Este es el tipo que se ve como ejemplo. A B

29. 3.6 PINTADO-3.6.1 Paths • Unión de diversos objetos de los anteriores • -Las figuras hasta ahora no cubren todas las necesidades de pintado. • Uniendo varias de las anteriores tenemos objetos mas complejos. • El inconveniente es que generamos figuras puntiagudas y mas difíciles de tratar. Ejemplo:

30. 3.6 PINTADO-3.6.2 Figuras cerradas Definidas por un borde. El relleno esta definido por los puntos interiores de la figura. Ejemplo:

31. 3.7 TEXTO -3.7.1 Elección de fuente -3.7.2 Información de una fuente -3.7.3 Pintado de texto -3.7.4 Líneas frente a mapa de bits de texto -3.7.5 Caracteres seleccionados -3.7.6 Cadenas complejas

32. 3.7 TEXTO-3.7.1 Elección de fuente • Los tipos de fuentes, en general se encuadran en tres argumentos generales: • * La familia de la fuente, define la forma general de la fuente. • * El estilo del tipo de letra, Courier o monoespacio. • * El tercer control primario de una fuente es el tamaño.

33. 3.7 TEXTO-3.7.1 Elección de fuente • Ejemplo de familias de fuentes: • Courier (fixer-space font) • Avant Garde (Sans serif) • Helvetica (Sans serif) • Times Roman (serif) Unas llevan serif en las letras que es mas fácil de leer. Otras son monoespacio, etc..

34. 3.7 TEXTO-3.7.1 Elección de fuente • Dentro de la familia además tenemos diversos estilos, tal y como se ve a continuación: Times Helvetica Times Bold Helvetica Bold Times italic Helvetica italic Times bold italicHelvetica bold italic

35. 3.7 TEXTO-3.7.1 Elección de fuente • El tercer aspecto es el tamaño, y suele estar expresado en puntos. Un punto es 1/72 de una pulgada. Por ejemplo: 9 puntos 10 puntos 12 puntos 14 puntos 18 puntos 24 puntos 36 puntos

36. 3.7 TEXTO-3.7.2 Información de una fuente • Hay una información variada que nosotros necesitamos conocer acerca de las fuentes, en el sentido en que el dispositivo de texto aproxima las posiciones sobre la pantalla. • Ejemplo: • El interlineado que es el espacio que quedará entre las múltiples líneas de un texto.

37. 3.7 TEXTO-3.7.3 Pintado de texto • Pasos a seguir: • Hay que partir de un punto de comienzo de pintado. • Decidir si ese punto es la parte de más a la izquierda de la línea base, u otra posición. • Si las palabras de una línea son de tipos diferentes y por lo tanto tamaño las trataremos por tramos separadas por tipos.

38. 3.7 TEXTO-3.7.4 Líneas frente a mapa de bits de fuentes. • -El texto se puede tratar como un conjunto de bits. • -Inconveniente • *Con letras de gran tamaño. • *Los espacios también se guardan como bits en blanco. • *Mucho espacio de memoria necesario. A A Ejemplo:

39. 3.7 TEXTO-3.7.5 Caracteres seleccionados • La selección de texto ira en función del numero de líneas. • Como se selecciona una línea ya es conocido, y cada carácter es guardado en una posición de una matriz. • Para varias líneas, se selecciona la primera, luego se desciende hasta la última y luego se hace una selección para esa última línea como si estuviese sola. This is some text to be edited that covers multlipe lines. This is some text Ejemplo de una línea: Ejemplo de varias líneas:

40. 3.7 TEXTO-3.7.6 Cadenas complejas • Problemas con la internacionalización de los caracteres, para poder representarlos. • Cada idioma tiene símbolos diferentes • Ruso -- Alfabeto cirílico • Chino – Ideografía. • Orientación al escribir adreiuqzI --- ahcereD Izquierda --- Derecha

41. 3.8 MONTADO -3.8.1 Regiones

42. 3.8 MONTADO-3.8.1 Regiones • La región mas simple de unión son los rectángulos. La mas común de las definidas en los sistemas de ventanas es la rectilínea. Operaciones sobre regiones El conjunto de operaciones que nosotros estamos interesados unión intersección y diferencia. Clausura o cierre La clausura significa que dado un conjunto,el resultado de alguna combinación de operaciones sobre ese conjunto será miembro de ese mismo conjunto

43. 3.8 MONTADO-3.8.1 Regiones • Ejemplo,las regiones rectangulares AyB .Se nota que la unión AUB no es un rectángulo y que la diferencia A-B no es tan poco un rectángulo mientras que la intersección si es un rectángulo. Este ejemplo ilustra que las regiones rectangulares son cerradas con respecto a la intersección pero no lo son respecto a la unión y diferencia.

44. 3.9 COLOR -3.9.1 Modelos de representación del color -3.9.2 Sensibilidad humana al color

45. 3.9 COLOR-3.9.1 Modelos de representación del color El modelo de color RGB La mezcla de diferentes longitudes de onda de luz produce una sensación visual de algunos colores intermedios para todos los dispositivos de color. El modelo de color HSV Quizás el modelo HSV representa que dispositivo de salida debemos de usar para producir sensaciones en el ojo humano y por esto no es un buen modelo El modelo de color CMY Se define en términos de mezcla de luz, más bien mezcla de pigmentos. En un conjunto de pigmentos,su color de luz es lo que resulta absorbido. Por ejemplo,una pieza verde de plástico aparece verde no por que este generando luz verde sino por que tiene absorbido la luz roja y azul y tan solo refleja la verde.

46. 3.9 COLOR-3.9.2 Sensibilidad humana al color La retina humana tiene aproximadamente 7000000 conos y entre 75000000 y 150000000 bastoncillos.Estos números significan que los humanos son diez veces mas sensibles a las variaciones en la intensidad que a las variaciones de color de la luz.Esto quiere decir que nuestra habilidad para diferenciar detalles entre dos áreas que tienen tintados diferentes pero con una intensidad similar es mucho peor que la habilidad de distinguir detalles que varían la intensidad en vez del tintado.

47. Gráficos asistidos por ordenador Miguel Ángel Pino Vázquez