Computación_Gráfica

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNADEscuela de Ciencias Básicas, Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA ESCUELA DE CIENCIAS BÁSICAS, TECNOLOGÍA E INGENIERÍA MODULO DEL CURSO ACADÉMICO COMPUTACIÓN GRÁFICA 299210 OSCAR JAVIER ABAUNZA GARCÍA Director Nacional Bucaramanga, Julio de 2012 UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas, Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica UNIDAD 1 FUNDAMENTOS DE COMPUTACIÓN GRÁFICA.............................................. 9 CAPÍTULO 1 Evolución de la computación gráfica ......................................................... 11 Lección 1 Anticipando la tecnología ............................................................................ 11 Lección 2 Los primeros aportes .................................................................................. 13 Lección 3 Teorías y planteamientos............................................................................ 15 Lección 4 La revolución .............................................................................................. 18 Lección 5 Cronología en el desarrollo de la computación gráfica ............................... 19 CAPÍTULO 2 Fundamentos de computación gráfica ...................................................... 23 Lección 6 Tipos de graficación computacional ............................................................ 23 Lección 7 Sistema de coordenadas ............................................................................ 27 Lección 8 Introducción a la teoría del color ................................................................. 29 Lección 9 Modelos de color ........................................................................................ 33 Lección 10 Representación del color en computación gráfica ..................................... 37 CAPÍTULO 3 El hardware y el software para computación gráfica ................................. 41 Lección 11 Dispositivos de vectores ........................................................................... 43 Lección 12 Dispositivos de ráster ............................................................................... 44 Lección 13 Hardware gráfico para monitores - La tarjeta de video .............................. 45 Lección 14 Dispositivos de entrada............................................................................. 48 Lección 15 Software de graficación ............................................................................ 51 UNIDAD 2 ALGORITMOS BÁSICOS DE DIBUJO EN 2 DIMENSIONES .......................... 58 CAPÍTULO 4 Requerimientos de software ..................................................................... 60 Lección 16 JDK........................................................................................................... 60 Lección 17 Estructura básica de un programa en JAVA ............................................. 62 Lección 18 Tipos de datos y variables ........................................................................ 63 Lección 19 IDE para JAVA ......................................................................................... 64 Lección 20 Compilación y ejecución ........................................................................... 69 CAPÍTULO 5 Algoritmos básicos.................................................................................... 71 Lección 21 Especificación de una discretización......................................................... 71 Lección 22 Segmentos de recta.................................................................................. 72 Lección 23 Discretización de circunferencias .............................................................. 78 Lección 24 Dibujo de polígonos .................................................................................. 80 UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas, Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Lección 25 Llenado de áreas ...................................................................................... 83 CAPÍTULO 6 Transformaciones ..................................................................................... 84 Lección 26 Breve repaso sobre matrices .................................................................... 85 Lección 27 Cambios de escala ................................................................................... 87 Lección 28 Rotación ................................................................................................... 88 Lección 29 Coordenadas homogéneas y traslación .................................................... 90 Lección 30 Rotación alrededor de un punto ................................................................ 92 UNIDAD 3 TRABAJANDO CON UN API GRÁFICA ........................................................... 96 CAPÍTULO 7 Fundamentos del API 2D de JAVA ......................................................... 100 Lección 31 Características generales del API 2D de Java ........................................ 100 Lección 32 Ubicación espacial, textos e imágenes ................................................... 104 Lección 33 Rellenos, Filetes y Composiciones ......................................................... 108 Lección 34 Los paquetes del API 2D de Java ........................................................... 110 Lección 35 La clase Graphics ................................................................................... 113 CAPÍTULO 8 API 3D de JAVA ..................................................................................... 118 Lección 36 Figuras básicas en Java 2D (Shape) ...................................................... 118 Lección 37 Áreas ...................................................................................................... 130 Lección 38 Texto y Fuentes ...................................................................................... 134 Lección 39 Imágenes ................................................................................................ 141 Lección 40 Técnica de Doble Búfer .......................................................................... 148 CAPÍTULO 9 API 3D de JAVA ..................................................................................... 155 Lección 41 Lo básico de Java 3D ............................................................................. 156 Lección 42 Empezar con Java 3D ............................................................................ 156 Lección 43 Un Ejemplo de la aplicación de la receta ................................................ 170 Lección 44 Rotación de objetos ................................................................................ 176 Lección 45 Añadir Comportamiento de Animación.................................................... 184 Se han realizado las siguientes actualizaciones al contenido didáctico:  Distribución de capítulos y lecciones según el estándar CORE. en su desempeño como tutor y director del curso a nivel nacional. docente de la UNAD. ingeniero de sistemas. . ingeniera de sistemas. en su desempeño como tutora. CEAD Bucaramanga. docente de la UNAD. especialista en educación superior a distancia. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica ASPECTOS DE PROPIEDAD INTELECTUAL Y VERSIONAMIENTO El contenido didáctico del curso académico Computación Gráfica fue diseñado inicialmente en el año 2005 por Adriana rocío Lizcano Dallos.  Adición del capítulo 4 Requerimientos de software Estos cambios fueron realizados por Oscar Javier Abaunza García. CEAD Bucaramanga.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. fue la primera microcomputadora que mostraba información en una pantalla. en paralelo a la evolución de la computación gráfica. como lo era a mediados del siglo XX. el Departamento de Defensa de Estados Unidos creó la Agencia de Proyectos de Investigación Avanzada (ARPA. jóvenes ingenieros trabajaron en varios centros académicos de Estados Unidos para lograr que la computación dejara de ser un campo reservado a expertos. desarrolló el campo de la computación gráfica. y la salida de resultados también en forma impresa. La computación interactiva se desarrolló fundamentalmente en el Instituto de Investigaciones de la Universidad de Stanford. Para ello. a principios de la siguiente década. creó el primer sistema de interfaz gráfica. Efectivamente. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica INTRODUCCIÓN Gracias a la paranoia de la Guerra Fría. En tercer lugar. a través de terminales. también durante los años 60. la computadora DEC-PDP-1. por sus siglas en inglés). Atrás quedaba la penosa comunicación con la computadora por medio de tarjetas y cintas que confundía la interpretación y requería de un especialista en todo momento. la computación se convirtió en una industria y comenzó a perfilarse como una subcultura. el Sketchpad. la computación interactiva y la de tiempo compartido. Poco después. En 1962. El equipo que durante varios años fue auspiciado por el ARPA estuvo dirigido por Douglas C. La intención fue dejar atrás la mecánica de uso asincrónica. Sin embargo. es decir. la computación ya se había abierto un poco a las universidades. y diseñada por ingenieros del MIT.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. se desarrollaron las técnicas que permitieron que las computadoras pudieran usarse como un músico lo hace con su instrumento: al tiempo que lo toca escucha el resultado de su operación. la incorporación de una pantalla a una computadora. a inicios de la década de los sesenta. el de la computación interactiva. En torno a esta organización. El segundo concepto. La trascendencia de la computación de tiempo compartido estriba en que gracias a dicha forma de trabajo . financiada por la DEC (Digital Equipment Corporation). Engelbart. el sistema por medio del cual una misma computadora puede dar servicio a muchas personas. pero seguía siendo asunto de una élite. El concepto de microcomputadora actual surgió de aquel grupo. surge la computación de tiempo compartido. el lapso de espera mientras la máquina procesaba. del Lincoln Laboratory del MIT y parte del grupo de Engelbart. Engelbart insistía en que las nuevas computadoras debían poder ser utilizadas por personas no especialistas. fue necesario el desarrollo e integración de la computación gráfica. es decir. Ivan Sutherland. se refiere al uso de una computadora en tiempo real. al menos en tres tiempos: el acceso de información y/o programas por medio de tarjetas y cintas perforadas. durante los primeros años de la década de los sesenta. La interfaz gráfica de usuario fue mejorada enormemente a partir de 1971 en Xerox y poco después en el MIT. físicos y matemáticos. durante una conferencia de cómputo celebrada en San Francisco.entre los usuarios. especialmente en dos dimensiones. cuando Steve Jobs tuvo la sabiduría para introducir la Macintosh. los desarrollos en la representación de gráficos mediante el computador se han multiplicado a diversidad de campos: los juegos interactivos. en este caso las que proporciona el lenguaje de programación Java para el dibujo. desde entonces no ha sucedido nada importante. el propio Douglas C. Pero detrás de toda la parafernalia de hardware y de la complejidad del software para realizar representaciones en 2D y 3D. Con el fin de proporcionar a los estudiantes de ingeniería de sistemas la posibilidad de conocer estos fundamentos matemáticos y algorítmicos. en comparación con ese avance. mouse. Todo inicia con el punto y la recta. California. tablero. Aun cuando el sistema gráfico de interacción por ventanas ya no es una novedad. en 1968. Finalmente. las simulaciones gráficas de procesos químicos. Este curso. desde allí es posible generar la multiplicidad de aplicaciones que hoy en día impactan y hacen pensar en una realidad paralela por su expresión y realismo. que hacen posible la representación gráfica en el computador. un microcomputador que permitía interactuar fácilmente utilizando ventanas y donde era posible ejecutar una aplicación con un clic del ratón. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica se desarrollaron una serie de técnicas encaminadas a permitir la transmisión de información –comunicación. Este lenguaje fue seleccionado dado su carácter de libre distribución y la amplia gama de posibilidades que proporciona para la graficación tanto en dos como en tres dimensiones. le proporcionará una base conceptual sólida para que posteriormente a través del aprendizaje autónomo usted emprenda la profundización y la práctica en . Copiar la Mac de Apple les llevó más de cinco años a todas las demás empresas. Este curso tiene asignados 3 créditos académicos y corresponde al campo de formación Electivo del Programa de Ingeniería de sistemas. es que la Facultad de Ciencias básicas e Ingeniería de la UNAD presenta el curso de Computación Gráfica. monitor y ventanas desplegables (interfaz gráfica). estos esfuerzos culminaron en un producto real.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. este fue el principal paso hacia adelante en el mercado y. la realidad virtual. el diseño asistido por computador y hasta el arte. Engelbart presentó el resultado de la integración del trabajo de los equipos financiados por ARPA: el primer sistema computacional que incluía teclado. además de realizar un trabajo de uso de las posibilidades que proporcionan las API gráficas. se encuentran un conjunto de principios matemáticos y algoritmos que la sustentan. ejemplo derivado de ello es el correo electrónico. Una década más tarde. Tiene un carácter teórico-metodológico pues la pretensión principal está encaminada a que usted conozca los fundamentos de la graficación. el cine. así como los elementos matemáticos y algorítmicos para dibujar gráficos en dos y tres dimensiones. intencionalidades formativas. como los mencionados en párrafos anteriores. la presentación de la Unidad. llenado de áreas y polígonos. Se ha acudido especialmente a traducciones de los tutoriales y documentación proporcionada por Sun Microsystems y por reconocidos autores del área. círculos. A través del desarrollo de las diferentes unidades temáticas usted conocerá los fundamentos conceptuales de la graficación en computador. legible y actual. por lo menos es la esperanza de la autora que el lector encuentre en esta recopilación un material agradable. el desarrollo temático y las fuentes relacionadas. Cada unidad didáctica está estructurada en tres componentes básicos. En esta unidad se realizarán prácticas en los computadores con el fin de realizar pequeños desarrollos gráficos utilizando principios básicos de dibujo del lenguaje Java. el hardware y software necesario para realizar desarrollos en computación gráfica con altas especificaciones.. Para lograrlo se ha estructurado el curso en tres unidades didácticas: Fundamentos de computación gráfica. En Algoritmos básicos de dibujo en dos dimensiones se plantean los fundamentos para la creación de líneas. Para ello se asume el estudio del API 2D y del API 3D de Java a partir de las presentación y comentario de ejemplos. organizándola de forma coherente y didáctica. Algoritmos básicos de dibujo en dos dimensiones y Trabajando con un API gráfica. Para el desarrollo de las diferentes unidades del Módulo del curso Computación Gráfica se ha intentado recopilar la información más relevante y actualizada. . Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica el aprendizaje de otras herramientas de graficación. En la unidad de Fundamentos de computación gráfica se estudiará su concepto y evolución.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. la terminología comúnmente utilizada y se presentarán algunas consideraciones sobre el manejo del color y su representación computacional. Finalmente. lo mismo que el desarrollo de gráficos que puedan ser útiles en múltiples campos de desempeño. Se ha puesto especial interés en asegurar fuentes de calidad.. se han seleccionado los materiales de fuentes reconocidas que se podrán identificar y consultar en la sección final de cada Unidad didáctica.. en la unidad correspondiente a Trabajando con un API gráfica se presentan las principales clases y algunos ejemplos que muestran las posibilidades que ofrecen este tipo de interfaces para la creación de programas que requieren el tratamiento de gráficos. además de conocer los aspectos sobre el manejo de coordenadas espaciales en el computador. También adquirirá las destrezas necesarias para utilizar las facilidades proporcionadas por una API gráfica. La presentación de la Unidad incluye la introducción. los principales tipos de graficación. pues aunque la principal fuente de consulta es internet. Finalmente. Este módulo no aborda toda la extensión de algoritmos y tópicos de la computación gráfica. enlaces internet (que se proporcionan en cada unidad del módulo).edu. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica mapa conceptual y productos de aprendizaje. Estos componentes también los podrá encontrar en la Guía didáctica del curso. Como es de esperarse. sino también material de discusión para el mejoramiento de los procesos de aprendizaje de la Universidad Nacional Abierta y a Distancia. este módulo es una primera aproximación que se espera enriquecer con los aportes de los tutores y estudiantes que a nivel nacional desarrollen el curso.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. las fuentes relacionadas reconocen todas las fuentes utilizadas para la recopilación y redacción del contenido temático. las cuales deberá archivar en el portafolio personal. fichas de lectura y de conceptos. bases de datos como ProQuest a los que se tiene acceso gratuito desde las salas de informática de la UNAD. . mediante lectura autorregulada y construyendo mapas conceptuales. como material de consulta adicional se recomienda que usted acceda a otros recursos documentales como la biblioteca de la Universidad (www. Además. en algunos casos se proporcionan recomendaciones para la ampliación del tema mediante consultas en Internet y se suministran las direcciones recomendadas de búsqueda y lectura. Se espera que el estudiante asuma el estudio independiente de los diferentes temas. con el fin de recordar y orientar el estudio de la misma. según los intereses del lector. es por tanto no solo fuente de consulta. Posteriormente se encuentra el desarrollo de los diferentes temas.unad.co). pero si compendia los conceptos fundamentales que le faciliten una profundización posterior. Después de esto. Esta primera unidad busca familiarizarlo con la evolución del concepto de computación gráfica. como base para la construcción de un discurso coherente y sustentado. al igual que dispositivos que hicieran posible la interacción humano-máquina de forma intuitiva. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica UNIDAD 1 FUNDAMENTOS DE COMPUTACIÓN GRÁFICA Introducción Al comienzo todo era tinieblas. los diferentes hitos que marcan su historia y algunos conceptos fundamentales necesarios para su efectivo estudio. El procesamiento en el computador se realizaba en lotes. cargando innumerables tarjetas perforadas y ejecutando un único programa a la vez.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. físicos y matemáticos de la representación gráfica en el computador. Identificar el establecimiento de un sistema de coordenadas en la pantalla del computador como base fundamental para la graficación a través del estudio de los fundamentos matemáticos que la estructuran. a través de la profundización en la terminología. su evolución vertiginosa está estrechamente relacionada con dos componentes: el mundo de los videojuegos y del cine animado. La necesidad de hacer posible el uso de este sofisticado elemento (el gran computador) por personas no especialistas fue el aliciente para que los investigadores de múltiples institutos y universidades plantearan la posibilidad de realizar un computador con una pantalla de monitor que permitiera visualizar los datos de diferentes formas. . Intencionalidades Formativas Propósitos Aportar a la fundamentación teórica del estudiante. fundamentos tecnológicos. Objetivos Comprender y emplear los diferentes conceptos relacionados con el la representación de gráficos en el computador y los componentes hardware y software necesarios partiendo de los fundamentos teóricos y tecnológicos de esta disciplina. los grandes ejemplos de los logros en los algoritmos. hardware y software para diseño asistido por computador son en su mayoría de estas áreas de trabajo. De hecho. Aparece entonces la idea de la computación gráfica. cuya salida solamente era visible en el formato impreso. Mapa Conceptual de la Unidad Productos de Aprendizaje Individual   Lectura autorregulada de la Unidad Didáctica realizando fichas textuales y mapas conceptuales para archivar en el portafolio. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Competencias El estudiante describe y caracteriza de manera adecuada los conceptos y elementos tecnológicos relacionados con la presentación de gráficos en el computador. Definir y comparar términos relacionados comúnmente con la computación gráfica. Metas Al finalizar esta unidad didáctica el estudiante estará en capacidad de:   Enumerar los diferentes elementos que se requieren para la realización de gráficos en el computador. . Construir un glosario con los términos desconocidos y su correspondiente significado.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. así como la mayoría de las cosas. pero muchos de sus elementos. Aunque nuestras computadoras digitales están sustentadas en conceptos desarrollados en siglos pasados. Lección 1 Anticipando la tecnología Esta síntesis se plantea desde la perspectiva histórica presentada por Baecker y Buxton en "Human-Computer Interaction" de Jenny Preece y Laurie Keller (ver en enlaces relacionados de la unidad). CAPÍTULO 1 Evolución de la computación gráfica En este capítulo se realiza una inspección histórica de los principales antecedentes e hitos que marcan el desarrollo de la representación computacional. Consolidación de conceptos. La motivación principal era . para inspirarnos o motivarnos a dar nuevos pasos que puedan continuar un camino ya comenzado por otros o quizás por qué no. Las recetas del pasado. La sabiduría popular dice que la historia no se repite y que el pasado no aplica exactamente al presente. poder aportar nuevas luces. de mínimo 3 páginas en inglés que demuestre una aplicación o avance en torno a la computación gráfica. Para ello se ha utilizado especialmente una síntesis presentada por el profesor Víctor Simón Theoktisto Costa de la Universidad de Simón Bolívar de Venezuela. glosario técnico y mapa conceptual de la unidad. si se aplican ahora resultan en general en algo diferente. no es sino hasta los años 1930’s y los 1940’s que son realmente disponibles para los investigadores. tienen sus fundamentos y su significado en el pasado que siguen actuando en el presente. para quizás entender o apreciar a donde hemos llegado. ¿Cómo entonces inferir del pasado? ¿Cómo lograr un modelo de la evolución que pueda ayudar a saber y entender lo que está pasando ahora en el presente y poder tomar las acciones adecuadas y necesarias? En tecnología está siempre la tendencia de mirar el futuro. Grupo de Curso   Socialización de los productos individuales y en pequeño grupo colaborativo. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Pequeño Grupo Colaborativo Documento original-traducido y diapositivas que permitan presentar un artículo consultado en internet o en la biblioteca virtual.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. y especuló sobre las posibilidades de establecer algún día un camino más directo entre la palabra escrita y el cerebro. Para resolver este problema el inventa MEMEX. juegos de guerra. planificación. el cual no se llegó a realizar en su momento. Con la emergencia de los CD/ROM (Lambert and Ropiequet 1986) y la computación multimedia personal de hoy se hace posible construir el MEMEX. un dispositivo con aspecto de escritorio con teclado y conjunto de botones y manillas. y el valor del indexamiento asociativo en esa actividad. LICKLIDER (1960). investigación científica. Quizás la primera persona que concibió la computadora más allá de este uso fue VANNEVAR BUSH en 1945. La tecnología propuesta para este fin fue la técnica de los microfilms.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.R. Vio a la computadora como una herramienta para transformar el pensamiento y la actividad creativa del hombre. sus registros y comunicaciones para consultarlos de manera rápida y flexible. Con una extraordinaria visión listan algunos problemas cuyas soluciones son prerrequisitos para una verdadera simbiosis entre el hombre y la computadora. En la realidad aparecen giros inesperados en el razonamiento para llegar a una solución y no siempre es fácil la formulación del problema. manejar y transmitir los resultados de su investigación. Memex fue la primera versión del computador personal.C. la simbiosis del hombre y la máquina pretendería entonces incorporar a la computadora de manera íntima en todo el proceso de formulación y solución de problemas técnicos. Otras personas también vieron el potencial del computador como un facilitador de aspectos humanos como la creatividad y la resolución de problemas. programación. donde el individuo podía guardar todos sus libros. logrando así integrarse efectivamente en los procesos del pensamiento. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica acelerar los cálculos requeridos para los cómputos de la energía balística y atómica. Entre éstos tenemos a J. revisar. donde Bush no sólo fue un visionario de la aplicación de la computadora para almacenamiento y recuperación de información. quien concibió un acoplamiento sinergético entre las capacidades del hombre y la máquina. En un trabajo posterior con Clark en 1962. describe las dificultades que el hombre tiene para conseguir. La simbiosis se define como una forma de vida cooperativa en una asociación íntima o unión cerrada entre dos organismos disimilares. En su trabajo "As we may think". sino también anticipó la naturaleza multimedia del uso del computador en el futuro. educación. ellos listan aplicaciones en el área militar. Las computadoras están pensadas para resolver problemas ya formulados y para procesar datos de acuerdo a procesos predeterminados. . a lo que llamó "man-computer symbiosis". El predijo el desarrollo de una máquina que escribiera cuando se le dictara. . Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica A corto plazo:     Las aplicaciones de tiempo compartido entre varios usuarios. La programación heurística. sin embargo lo realmente revolucionario de sketchpad era la estructura de datos empleada. Se comienza entonces a explorar el potencial de la comunicación gráfica entre el hombre y la máquina. Este programa permitía dibujar formas simples en la pantalla de un computador mediante un lápiz óptico. wirlwind.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Lección 2 Los primeros aportes Ya en los años 50’s era obvio que el computador podía manipular imágenes son gráficos y dibujos tan bien como el texto o los números (oscillon. Se trataba de un modelo del objeto a representar y no sólo un dibujo del mismo. El reconocimiento y la producción de la voz humana. el juego spacewar y sage ya se habían construido). Fue IVAN SUTHERLAND en su trabajo pionero en el MIT Lincoln Laboratory llamado el sistema 'Sketchpad'. Muchas de las técnicas inventadas para este programa se siguen usando hoy en día. La comprensión del lenguaje natural. salvarlas y volver a cargarlas más tarde. Figura 1 Ivan Sutherland y el Sketchpad Sketchpad supuso una revolución en los programas gráficos. La interfaz electrónica de entrada-salida para el despliegue y la comunicación de la información simbólica y gráfica. Los sistemas interactivos y de tiempo real para el procesamiento y la programación de la información. A largo plazo:     La lectura óptica de caracteres. La posibilidad de concurrencia. La separación de los sistemas de coordenadas para describir el mundo y el espacio de representación en el computador. Evans y Sutherland eran frecuentemente asesores de compañías. la primera computadora comercial con un sistema gráfico. En ese periodo. Sketchpad propició el nacimiento de la ciencia de gráficas controladas por computadora. que había desarrollado algunos años antes. a su vez obtuvo la licencia para distribuir un sistema de videojuegos creado por Ralph Baer. de los de diseño hasta los de realidad virtual. razón que más adelante los llevó a fundar su propia empresa. El Odyssey fue el primer producto orientado al consumidor con gráficas generadas por computador. No pasó mucho tiempo sin que las compañías se empezaran a interesar por las gráficas en computadora. Estos conceptos sirvieron de base para la programación orientada a objetos. y es en Utah donde Sutherland perfecciona una interfaz de HMD (head mounted display). La compañía Magnavox. constantemente se encontraban frustrados por la falta de tecnología. De la investigación realizada en la universidad de Utah. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Algunas de las nuevas y poderosas ideas y conceptos fueron:        Estructura jerárquica interna de los gráficos. por ejemplo lanzó al mercado la IBM 2250. Dave Evans fue contratado por la universidad de Utah para crear el laboratorio de ciencias de la computación. Sutherland colaboraría con el doctor David Evans para iniciar la exploración de mezclas entre arte y ciencia (computacional). El uso de los lápices de luz ("light pen") para la construcción interactiva de los dibujos. Dos años más tarde.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. La aplicación de operaciones recursivas como mover y borrar a toda la jerarquía que defina un objeto o escena gráfica. hoy toman sus bases los paquetes gráficos. Evans tomó como interés principal el desarrollar gráficas por computadora. La noción de restricciones para la especificación de los detalles de la geometría de un dibujo. Evans contrató a Sutherland. IBM. Fue la universidad de Utah la primera que tuvo un laboratorio académico específico para desarrollar gráficas por ordenador. no obstante. La definición de objetos modelos y sus instancias que son versiones transformadas de las primeras. . La utilización de iconos para la representación simbólica de los objetos y restricciones. el producto fue denominado Odyssey. En 1971 surge el microprocesador. De la universidad de Utah surgió un gran avance tecnológico en el campo. ya que esto destruía la sensación de una superficie suave. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Un estudiante de la clase de Sutherland en la universidad de Utah. fundador de Silicon Graphics Inc. La empresa Computer Image Corporation (CIC) desarrolló combinaciones de Hardware y Software para acelerar procesos de animación tradicional. se trataba de su mano abriéndose y cerrándose. SCANIMATE y CAESAR. en 1974 desarrolló un equipo para poder filmar las imágenes realizadas en computadora. Los desarrollos de Triple I fueron un gran avance que permitía que las gráficas sintéticas pudieran ser utilizadas en cine. el algoritmo de HENRI GOURAUD. incluía una tableta gráfica y un buffer en color. CIC ofrecía ANIMAC. (SGI). Cadenas como la CBS empezaron a usar productos desarrollados para animar en la computadora. Evans y Sutherland (E&S) se encontraban ya fabricando hardware propio para evitar algunas de las limitantes tecnológicas que algunos años antes habían experimentado. con sólo una pequeña penalización en el tiempo que toma hacer la representación. En el campo de la animación 3D. Lección 3 Teorías y planteamientos 1970 también marcó una revolución en el mercado televisivo. Uno de los sistemas más impresionantes creó precisamente por E&S era "Picture System". La compañía Atari fue creada y en 1972 crea el primer videojuego de "máquina" (arcade). Pong. El algoritmo crea la interpolación de color entre polígonos y de esta forma logra una mejor representación de superficies curvas. se creó un nuevo tipo de representación digital. aplicar principios de animación tradicional tales como estiramiento y encogimiento. La ventaja sobre el método tradicional (la representación plana) es que la superficie en efecto parece perder dureza en la representación.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. crear trayectorias. EDWIN CATMULL vislumbró a la animación por computadora como una evolución natural de la animación tradicional. los componentes electrónicos fueron miniaturizados. JOHN WARNOCK fue uno de los pioneros digitales y fundó una de las empresas más importantes que cambió el curso de la historia en cuanto a diseño digital se refiere. Jim Clark. Este permite que los contornos de los polígonos no se vean tan lineales. con estos programas se podían escanear los dibujos. Otro egresado de la universidad de Utah no es menos notorio. creó una animación. Triple I. utilizando tecnología de circuitos integrados. . por medios digitales. Otro de sus inventos fue la creación de aceleradores gráficos. fundó Adobe. BENOIT MANDELBROT publicó un ensayo que permitió añadir realismo a las escenas generadas por computadora. El documento "A Theory of Fractal Sets".UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. a Catmull se le ocurrió que si a un objeto en la vida real se le podían aplicar imágenes para representar a otra cosa. Catmull fue contratado por la empresa Applicon. el plano es un espacio bidimensional. Figura 2 Aplicación de texturas a objetos El matemático francés Dr. Mandelbrot se refirió a este espacio como una dimensión fraccionaria. así como la creación de texturas en las cuales existen subdivisiones dentro de un mismo patrón. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Ed Catmull realizó su tesis de doctorado sobre una nueva manera de representar las superficies. explica que una línea es un objeto unidimesional. Además del z-buffer. . La historia cuenta que en una discusión con otro de sus compañeros. Figura 3 Modelo de terreno usando geometría fractal Después de su graduación. Las aplicaciones principales que se le dieron a las teorías de Mandelbrot fueron la de creación de terrenos aleatorios. aunque tampoco es bidimensional. Esta nueva técnica llamada z-buffer ayuda en el proceso de esconder las partes de las superficies que no serán vistas por el usuario en la representación final. donde no duró mucho tiempo. ya que recibió una oferta de trabajo para fundar el laboratorio de animación por computadora del Instituto Tecnológico de Nueva York (NYIT). El Dr. Catmull incluyó un nuevo concepto. si la línea describe una curva de manera que cubra la superficie del plano deja de ser unidimensional. en un mundo virtual no había razón para no hacerlo. el de mapeo de texturas. no obstante. varios empleados salieron del NYIT. Los primeros programas de animación desarrollados dentro del NYIT fueron para apoyar la animación tradicional. El algoritmo fue nombrado "bump map". pero en vez de representar color representaba profundidad. Los métodos anteriores consideraban el brillo de la luz sintética. pruebas preliminares fueron bastante desalentadoras. ROB COOK planteó un nuevo algoritmo que erradicaba algunas de las limitantes de las representaciones anteriores. nunca fue concluida. Usando la variable de energía luminosa que emite la luz virtual logró crear un material que se parece al de un metal pulido. De la universidad de Cornell. que permitía realizar la interpolación entre cuadros. El NYIT creó un departamento dedicado a la investigación de gráficas 3D. La primera aplicación que Catmull desarrollo fue "tween". Otro algoritmo presentado por Blinn es el de reflectividad. Al parecer el director del instituto nunca aceptó que se contrataran directores de cine para crear la película. desarrolló un algoritmo similar al de texturado. También se desarrolló un sistema de escaneo y pintura que posteriormente se convirtió en el sistema de producción de Disney. el CAPS (Computer Animation Production System). Figura 4 Aplicación de texturas y relieves con “bump map” Dotando de texturas y relieves se pueden crear modelos bastante realistas. Cook aprecio que las representaciones de la época eran de apariencia plástica. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Algunos de los trabajadores de la Universidad de Utah también fueron invitados y aceptaron el trabajo en el NYIT.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. y por dos años su principal proyecto fue el de crear una película. . de hecho. En 1978 JAMES BLINN. Las partes blancas de la imagen son representadas como protuberancias. Ante el fracaso del corto "Tubby the tuba". Los colores mapeados provocan que la superficie tenga un relieve o una depresión. "the works". mientras las partes oscuras representan las depresiones. razón por la cual el resultado no era el mejor que se podía haber obtenido. con el cual se simula un reflejo del ambiente en el que se encuentra el objeto. el diseño y la elaboración y análisis de modelos. sensores remotos. etc. Figura 5 Computación gráfica en diferentes ámbitos La popularización de la computación gráfica significó. por ejemplo. El surgimiento de las máquinas PC. millones de datos meteorológicos en un único gráfico que permite comprender a golpe de vista las características esenciales de una determinada situación climática. Durante los ‘80 comenzaron a utilizarse herramientas gráficas para el diseño en Ingeniería en todas sus actividades. desde aviones y barcos hasta circuitos integrados. que con el tiempo fueron el fundamento de la Visualización Científica. aunque con capacidades gráficas limitadas. También comenzaron a diseñarse herramientas gráficas de interfaz hombre máquina. En Arquitectura e Ingeniería Civil se utilizan sistemas para la simulación. junto con la capacidad de representación de los monitores y la integración de los sistemas gráficos a otro tipo de aplicaciones (simulaciones en ingeniería. porque la evolución de los modelos gráficos. El rol que no alcanzaron a cumplir los Comités de estandarización (por ejemplo. los lenguajes de programación visual y el hipertexto.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. como por ejemplo el sistema operativo de la Macintosh II. el OpenGL y X Windows). apelan a la enorme capacidad de comprensión visual humana. Estas ideas. datos de satélites.) permitió desarrollar herramientas para la representación gráfica de conjuntos enormemente complejos de datos. el GSK fue aprobado recién en 1985. permitió la popularización de sistemas y aplicaciones que crearon un mercado exigente y competitivo (por ejemplo con el Autocad). el surgimiento y desarrollo de aplicaciones en las áreas más diversas. De esa manera es posible representar. También esta década marcó el segundo cambio de paradigma. . cuando hacía varios años que ya era obsoleto) fue cubierto por las compañías comerciales que al crear una aplicación novedosa se transformaban en estándares de facto en el mercado (por ejemplo el Poscript. En Medicina podemos mencionar desde el diagnóstico por imágenes hasta la simulación y planeamiento de operaciones quirúrgicas o el desarrollo de implantes. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Lección 4 La revolución Sin duda la década de cambios más vertiginosos fue la de 1980. además. Usando caracteres blanco y negro. generado por una máquina electrónica (análoga). ya habían sido premiados algunos cortos de Pixar con anterioridad. El reto continúa. Lección 5 Cronología en el desarrollo de la computación gráfica A continuación se presenta una cronología de los principales hitos en el desarrollo de la computación gráfica tomada y traducida libremente de www. El pionero en largometrajes animados por computador es Toy History y a partir de allí se han generado gran cantidad de películas.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Figura 6 Largometrajes completamente desarrollados por computador Durante los 90’s. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica En animación y videojuegos se dio un desarrollo espectacular en la calidad e imaginación con los que surgieron universos de fantasía. un osciloscopio. los gráficos creados por computador.org.comphist. se podía reproducir un cuadro. . En los años 50: Salida usando teletipos. Hollywood proporciona una gran publicidad gracias a la producción de largometrajes totalmente computarizados. y tubos de rayos catódicos (CRT).  1950 o Ben Laposky creó las primeras imágenes gráficas. por hacer creíbles para los humanos. impresoras. La imagen fue producida manipulando vigas electrónicas y registrándolas sobre una película alta de la velocidad. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica  1951 o UNIVAC-I: la primera computadora comercial de propósito general. un sistema gráfico de comunicación humano-computadora. o Sutherland formuló las ideas de usar primitivas para el dibujo de líneas. desarrolló los algoritmos de dragging. un computador con una interfaz simple de US$15.Un computador basado en tubos de rayos catódicos. o Ivan Sutherland – Primer display head-mounted . el teclado y el ratón. polígonos.  Menús pop-up  Modelamiento jerárquico  Utilizó un lápiz de luz para la interacción. Uno de los grandes problemas era el costo y la inaccesibilidad de las máquinas. salida son gráficos vectoriales y gráficos interactivos. etc. 1964 o Guillermo Fetter . Sistema interactivo de CG. introdujo las estructuras de datos para almacenar.000.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.Algoritmo para el dibujo de líneas 1968 o Tektronix .       1960 o Guillermo Fetter acuña el término computación gráfica para describir nuevos métodos de diseño 1961 o Steve Russel. que permitía el uso de gráficos. o MIT – WirldWind: la primera computadora que permitía mostrar vídeo en tiempo real. usaba dispositivos en copia dura e impresoras de línea. era capaz de exhibir texto y eráfico en tiempo real en una pantalla grande de osciloscopio.Sketchpad. En los años 60: El comienzo de los gráficos interactivos modernos. rubberbanding y transformación. que permitía el almacenamiento. arcos.primer ratón o Ivan Sutherland . primer juego de video Spacewars 1963 o Douglas Englebart ..Primer modelo por computador de una figura humana 1965 o Jack Bresenham . Es considerado el fundador de los gráficos por computadora.        1972 o Nolan Kay Bushnell .superficies curvas y refinamiento del algoritmo de mapeo de texturas. la capacidad de los gráficos es cada vez mayor. algoritmos de superficies ocultas. o Laboratorios Bell – Primer frambuffer que contiene 3 bits por pixel. construida con curvas de Bezier. el ratón y el trackball se convierten en los dispositivos interactivos estándares."Westworld". Los costos de los computadores personales decrecen dramáticamente.specular highlighting) En los años 80 los dispositivos de salida incorporan los gráficos de ráster imágenes de mapas de bit (bitmap) y el pixel. .método para simular reflexiones especulares sobre objetos 1977 o Steve Wozniak . o James Blinn . Al inicio de los años 70: Comienzo de la salida usando dispositivos ráster.iluminación especular 1975 o Martin Newell .Dominios multi-usuario (MUD Phone Bui-Toung . o Phone Bui-Toung .mapeo de texturas y algoritmo z-buffer para superficies ocultas. computador personal con gráficos a color 1979 o Roy Trubshaw y Richard Bartle .la famosa tetera que identifica la computación gráfica.Apple II.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. y Gary Demos . primera película con gráficos de computador 1974 o Edwin Catmuff . o Benoit Mandelbrot .Pong. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica  1969 o Jhon Warnock . juego de video 1973 o Juan Whitney Jr.Algoritmo de la subdivisión de área.dimensión fractal/fraccional 1976 o James Blinn . CGI fue ampliamente utilizada."Tron". una película de realidad virtual que usa un guante instalado con interruptores y sensores para detectar el movimiento de la mano."DataGlove". precisión y alta calidad a los efectos por computador. la primera película de Disney que hace uso intensivo de los gráficos tridimensionales o Tom Brighman . 1989 o Video Electronics Standards Association (VESA) – SVGA. el sistema Renderman proporciona rapidez. La optimización de las imágenes en 3D comienza su principal avance estimuladas por las aplicaciones para gráficos usadas en el cine. Primer navegador web gráfico.Especificación OpenGL 1993 o Universidad de Illinois .UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. 1984 o Tech de Wavefron .Renderman 1991 o Disney y Pixar . Super VGA En los años 90. Cortometrajes “Luxo Jr.VGA (Video Graphics Array) Se introdujo el arreglo de gráficos de video. .“Jurassic Park” una exitosa película de ciencia ficción a partir de efectos de computación gráfica. el computador personal puede mostrar fácilmente imágenes fotorealistas y películas.Mosaic."Morphing" primera secuencia de película juega con un carácter femenino que deforma y se transforma a sí misma en la forma de un lince o Jhon Walkner y Dan Drake – AutoCAD 1983 o Jaron Lanier . o Steven Spielberg . desde la introducción del VGA y el SVGA.     1990 o Hanrahan and Lawson .Polhemus.“Beauty and the Beast”. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica       1982 o Steven Lisberger .” .1989 y “Tin toy” o NES – Sistema de juegos casero Nintendo 1987 o IBM . primer software paras gráficos en 3D 1985 o Pixar Animation Studios. 1992 o Silicon Graphics . Entre esos formatos están los gráficos de mapas de bits (o de píxeles). denominada píxel (Picture Element. escalado.GeForce 256 (GeForce3 (2001) 2003 o ID Software . Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica   1995 o Buena Vista Pictures . a cada una de las cuales. dibujos y otras imágenes estáticas deben pasarse a un formato que el computador pueda manipular y presentar.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.Motor de gráficos Doom. de tal forma que su agrupación crea la ilusión de una imagen de tono continuo. se le asigna un valor de color y luminancia propios.1 Gráficos ráster Las imágenes de mapa de bits (bitmaps o imágenes ráster) están formadas por una rejilla de celdas. largometraje CAPÍTULO 2 Fundamentos de computación gráfica Los procesos de manipulación de gráficos requieren de una tecnología sofisticada en temas como intercambios de formatos. manejo del color mediante paletas. GIF (Graphic Interchange Format) y JPEG (Joint Picture Expert Group). más difícil es de presentar y manipular en la pantalla de un computador. Elemento de Imagen). Cuanto mayor y más nítida sea una imagen y cuantos más colores tenga.“Toy Stroy” el primer completamente generado en computador o NVIDIA Corporation . etc. Lección 6 Tipos de graficación computacional 6. filtrado. Los formatos mas utilizados son BMP (Bitmap). conocido en el ámbito de la computación gráfica como ráster y los gráficos vectoriales. Las fotografías. Figura 7 Mapa de bits . principalmente porque no es un concepto único. referida al número de píxeles por pulgada existentes en la pantalla del monitor en el que se visualiza la imagen. una imagen de mapa de bits está diseñada para un tamaño determinado. En el trabajo de digitalización de imágenes con escáner se maneja el concepto de resolución de muestreo. que define el número de muestras que se toman por . no los objetos o figuras que contiene. que suele ser de 72 ppp en un sistema Mac y de 96 ppp en un PC. ya que no se corresponde con un tamaño concreto. Un píxel puede ser muy pequeño (0. Sus unidades de medida son los pixeles por pulgada (ppp o ppi. podemos hablar de resolución de un archivo digital. Cuanto mayor sea esta resolución. Cuando se modifica su tamaño. Una configuración del monitor en alta resolución exhibirá más píxeles por pulgada. medido en pulgadas. más calidad tendrá la imagen y más peso en Kb tendrá el archivo. etc. en inglés) o los pixeles por centímetro (más raramente). sino que depende del medio en el que la imagen vaya a ser visualizada o tratada. permitiendo una mejor visualización de la imagen en pantalla. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Un píxel es pues una unidad de información. Una imagen de mapa de bits se crea mediante una rejilla de pixeles única. pero no una unidad de medida. la densidad de éstos en la imagen. por lo que estos suelen deformarse o perder alguno de los pixeles que los definen. dependiendo esta pérdida de la resolución a la que se ha definido la imagen. Una vez definida la resolución de pantalla. En ningún caso podremos visualizar una imagen a mayor resolución que la de pantalla. Se define como el número de píxeles distintos que tiene una imagen por unidad de longitud. resolución de semitono.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. por lo que éstos serán más pequeños. Figura 8 Dos rejillas de 3*3 píxeles La resolución de una imagen es un concepto que suele confundir bastante. pixels per inch. es decir. perdiendo calidad si se modifican sus dimensiones. Así. Por lo tanto. más contenedores de información (pixeles) tiene el archivo digital. En la próxima sección se profundizará sobre este punto. el tamaño de los pixeles dependerá del tamaño físico de la pantalla.1 milímetros) o muy grande (1 metro). Esta resolución está muy ligada al concepto de resolución de pantalla en un monitor. resolución de escaneado. resolución de impresión. se modifican grupos de pixeles. habiéndose adoptado como medida de calidad de una imagen escaneada los píxeles por pulgada (ppp) que tiene la imagen digital resultante del proceso. por lo que al modificar su tamaño pierden calidad visual. Figura 9 Modificación en la resolución A mayor resolución. Cuantas más muestras por pulgada tenga una imagen escaneada. la imagen se pixelará. Una imagen de baja resolución está prevista solamente para su exhibición en pantalla. teniendo generalmente una resolución de 100 ppp o menos. Su unidad de medida son las muestras por pulgada (spi. desapareciendo partes de los mismos.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. más cercana estará la imagen digital a la imagen original. Si se disminuye. mientras que si se aumenta. produciéndose el conocido efecto de dientes de sierra. más píxeles hay en una imagen. Esta forma de medir la resolución se utiliza poco. mayor información contiene y mayor capacidad de distinguir los detalles espaciales finos. los trazos finos perderán definición. teniendo generalmente 300 ppp o más. permitiendo un mayor detalle. samples per inch). Una forma común de clasificar las imágenes según su resolución es aquella que las divide en imágenes de alta resolución (hi-res) e imágenes de baja resolución (lowres). al tener que cubrirse de forma aproximada pixeles que inicialmente no existían. por lo que tendrá más definición. Las imágenes de mapas de bits dependen de la resolución a la que han sido creadas. . más grande es su mapa de bits. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica pulgada. Una imagen de alta resolución está prevista para la impresión. unas transiciones de color más sutiles y una mayor calidad de reproducción. además de tecnologías utilizadas para dotar de realismo a las imágenes generadas por computador. En la compresión con pérdidas se elimina información de la imagen que no es percibida por el ojo. una línea se define en un gráfico de mapa de bits mediante las propiedades de cada uno de los píxeles que la forman. Por ejemplo.2 Gráfico vectorial Un gráfico vectorial está definido por un conjunto de primitivas geométricas de tal modo que. al dibujarlas. La compresión. mientras que en un gráfico vectorial se hace por la posición de sus puntos inicial y final y por una función que . es el elevado tamaño de los archivos que generan. el uso de textura y una profundidad. compresión con pérdidas y compresión sin pérdidas.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. 6. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 10 Efecto de pixelado en mapas de bits El principal inconveniente con los gráficos de mapas de pixeles durante el almacenamiento a su transmisión a través de una línea de comunicación de datos. las imágenes en los gráficos vectoriales no se construyen píxel a píxel. Utilizar las tres dimensiones espaciales en los gráficos complica tremendamente la generación de imágenes. No es únicamente utilizar una tercera coordenada en la descripción de los objetos. se compone la imagen final. además nuevos problemas a tener en cuenta como la iluminación. tanto de archivos de imágenes como de cualquier otro tipo de archivo informático. puede ser de dos tipos. sino que se forman a partir de vectores. Por lo tanto. Una vez se ha comprimido una imagen no se puede volver a restaurar con la calidad de la original. la información irrelevante es eliminada en el proceso de compresión. la ocultación de unos objetos por otros. objetos formados por una serie de puntos y líneas rectas o curvas definidas matemáticamente. Se hace por tanto necesaria la compresión de estos archivos. existen. Las características de contorno (o filete) y relleno se pueden cambiar en cualquier momento. y los arcos de circunferencia. Las imágenes vectoriales se almacenan como una lista que describe cada uno de sus vectores componentes. puramente geométricas. su posición y sus propiedades. Estas transformaciones. las elipses. donde (x. Análogamente. la rotación. Cada vector en un gráfico vectorial tiene una línea de contorno. los gráficos vectoriales son independientes de la resolución. y está relleno de un color a elegir.y)  R2. y). Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica describe el camino entre ellos. el primer paso para conseguir una representación adecuada de las primitivas es caracterizar matemáticamente el medio que nos permite representarlas. Las entidades geométricas que forman parte de un gráfico vectorial son: el segmento de recta. Las trasformaciones típicas sobre las imágenes vectoriales son la traslación. ya que no dependen de una retícula de píxeles dada. . con un color y un grosor determinados. las circunferencias. Figura 11 Transformaciones en gráficos vectoriales Lección 7 Sistema de coordenadas Según Delrieux.y) y por su radio (r). Las primitivas gráficas independientes de dispositivo (en la “imagen” mental del usuario) normalmente se representan en un espacio euclidiano de una determinada dimensión. un círculo se define vectorialmente por la posición de su punto central (coordenadas x. En dichas condiciones un punto es una entidad matemática p = (x. no se presentan inconvenientes con el efecto de pixelado ya que la descripción matemática de un objeto es independiente del tamaño al cual se esté dibujando el objeto. En cuanto a la resolución. tienen la máxima resolución que permite el formato en que se almacena.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. el escalado y la cizalla. se muestran en la siguiente figura. Por lo tanto. Después de aplicarlas el objeto gráfico conserva su precisión. que pueden ser números reales con punto flotante de simple o doble precisión.. Una precisión mayor llevaría a enunciar que se encuentra en el centro del pixel (0. en el caso de C++ se puede realizar a través de un proceso de casting a datos enteros cortos o largos. maxy  N. un punto se representa con un pixel. Como se puede observar en la Figura 12 los rótulos maxx y maxy corresponden al valor máximo del rango que . Es posible encontrar varias correspondencias posibles entre el sistema de coordenadas físico y un sistema de coordenadas arbitrario en el espacio de la escena. Por dicha razón es que la operación de llevar una primitiva del espacio de la escena al espacio de pantalla se denomina discretización. el cual está en correspondencia con el espacio de la escena (euclidiano) (x.maxy].. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica En el soporte aritmético de la computadora. en el soporte gráfico del buffer de pantalla.h.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. dicha representación se efectúa con los tipos de datos provistos. Por ejemplo. Este espacio se denomina espacio de pantalla y se direcciona a partir del sistema de coordenadas físico. En la literatura normalmente se considera que un pixel es un “punto con extensión" en el espacio de la escena. con maxx.0). Por último. cuyo origen es el vértice superior izquierdo. La conversión de los valores reales del espacio euclidiano e enteros para la representación en el espacio de pantalla se puede realizar a partir de las operaciones de redondeo o truncamiento.0). Este espacio se denomina espacio de la escena y es uno de los muchos espacios que se utilizarán para factorizar adecuadamente las diversas tareas de un sistema gráfico.maxx] * [0. o a través de las funciones ceil y floor de la librería math. Figura 12 Sistema de coordenadas en el espacio de la escena De esa manera. y por lo tanto el origen de dicho espacio coincide con el vértice superior izquierdo del pixel (0. Como se muestra en la siguiente figura. y)  R2 . el espacio de pantalla es un espacio discreto y acotado [0. y dicha representación se efectúa accesando una posición de memoria con un contenido dado. el rojo y el azul intenso. tranquilizar. de poner de buen humor o de inspirar pena. azul. En cualquier momento de la vida se están recibiendo constantemente impresiones de color. En primer lugar determinó por investigación que los seis colores del espectro pueden quedar reducidos a tres colores básicos: el verde. dejando pasar un hilillo de luz por la ventana y poniendo un cristal – un prisma de base triangular – frente a ese rayo de luz. naranja y rojo) Unos años más tarde. en esta sección se proporcionan lo principios fundamentales de esta teoría en un lenguaje lo más claro posible. Es el mundo de color. la Web del programador. los haces verde. utilizando para ello la conceptualización presentada por el Instituto de Artes Visuales. . Figura 13 Espectro con los 6 colores apreciados por Newton (violeta. Rafael Cebrián y Claudio Delrieux. Para llegar a este convencimiento. estas impresiones tiene la facultad de exaltar.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. el físico inglés Thomas Young realizó el experimento a la inversa. haciéndolos coincidir en un mismo espacio. rojo y azul se convirtieron en luz blanca. verde. los cuales se hicieron visibles al incidir sobre una pared cercana. Young recompuso la luz. estos valores dependen de la resolución del monitor. y el ser humano es uno de los seres privilegiados de la Naturaleza por poder disfrutar de ellos. Los colores forman parte de la vida misma. La transformación de sistemas de coordenadas que es posible realizar en los procesos de graficación en 2D y 3D se explicarán en las unidades didácticas correspondientes. Lección 8 Introducción a la teoría del color Alrededor del color se han realizado numerosas investigaciones. navegando por internet. Tomó entonces tres linternas y proyectó tres haces de luz a través de filtros de los colores mencionados. el resultado fue que dicho cristal descompuso la luz exterior blanca en los seis colores del espectro. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica pueden tomar los puntos x. en la calle. Newton (1642-1727) primero y Young (1773-1829) después establecieron un principio que hoy nadie discute: la luz es color.y en el espacio de pantalla. En otras palabras. trabajando. amarillo. Isaac Newton se encerró en una habitación a oscuras. que comprende desde longitudes de onda muy pequeñas. reflejan todos o parte de los componentes de la luz que reciben. Esto da lugar al siguiente principio: Todos los cuerpos opacos. formando un espectro continuo de radiaciones. El ser humano tan solo es capaz de visualizar un subconjunto de ellas. La luz del Sol está formada en realidad por un amplio espectro de radiaciones electromagnéticas de diferentes longitudes de onda. y un plátano amarillo absorbe el color azul y refleja los colores rojo y verde. de más de 1 kilómetro. se dirá que. de menos de 1 picómetro (rayos cósmicos). esta estrella inunda constantemente el planeta con su luz. El color es una sensación subjetiva y nadie puede asegurar a ciencia cierta que percibe los colores igual que otro. Aprender a ver el color y obtener una interpretación de sus propiedades inherentes ha de ser el punto de partida si se desea realizar un tratamiento eficaz de éste en las distintas aplicaciones gráficas que se construyen. los cuales. . permiten ver el color amarillo. sumados. En la práctica. De todas formas los hombres vemos más o menos igual y partiendo de esta premisa se deberá estudiar la teoría del color. y para comprender mejor este fenómeno. esto lo apreció Newton en su experimento. por ejemplo.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. hasta longitudes de onda muy grandes. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Así. y cuando incide en algún cuerpo éste absorbe alguno de dichos colores y refleja otros. 8. la luz blanca. un tomate rojo absorbe el verde y el azul y refleja el rojo. las que van desde 380 (violeta) a 780 nanómetros (rojo). esa luz que rodea al ser humano. y gracias a ella es también posible la vida. está formada por luz de seis colores. al ser iluminados.1 Descripción formal del color como fenómeno físico Podemos ver las cosas que nos rodean porque La Tierra recibe la luz del Sol. recogen las diferentes partes del espectro de luz solar y las transforman en impulsos eléctricos. siendo el color negro u oscuridad la ausencia de colores. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 14 Espectro de la luz solar Cada longitud de onda define un color diferente (colores de emisión). Estas células. Figura 15 Fisiología del ojo humano .UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. principalmente los conos y los bastoncillos. que son enviados luego al cerebro a través de los nervios ópticos. siendo éste el encargado de crear la sensación del color. La suma de todos los colores (longitudes de onda) da como resultado la luz blanca. En el fondo del ojo existen millones de células especializadas en detectar las longitudes de onda procedentes del entorno. es posible medir con toda exactitud la longitud de onda de un color determinado. Esta es la explicación de fenómenos como la Daltonismo. Una persona daltónica no aprecia las gamas de colores en su justa medida. siendo diferente el total de ellos dedicados a un color y a otro. Cuando el sistema de conos y bastoncillos de una persona no es el correcto se pueden producir una serie de irregularidades en la apreciación del color. . Los bastones se concentran en zonas alejadas de la fóvea y son los responsables de la visión escotópica (visión a bajos niveles). Su distribución sigue un ángulo de alrededor de 2° contados desde la fóvea. Los conos son los responsables de la visión del color y se cree que hay tres tipos de conos.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. por lo que aportan a la visión del color aspectos como el brillo y el tono. También son poco sensibles a la intensidad de la luz y proporcionan visión fotópica (visión a altos niveles). Los bastones comparten las terminaciones nerviosas que se dirigen al cerebro. confundiendo los rojos con los verdes. existen más células especializadas en trabajar con las longitudes de onda correspondientes al rojo que a ningún otro color. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Los conos se concentran en una región cerca del centro de la retina llamada fóvea. Dos personas diferentes pueden interpretar un color dado de forma diferente. originando una sensación de irritación en las personas. siendo por tanto su aportación a la definición espacial poco importante. y puede haber tantas interpretaciones de un color como personas hay. por lo que cuando el entorno en que nos encontramos nos envía demasiado rojo se produce una saturación de información en el cerebro de este color. Los bastones son mucho más sensibles que los conos a la intensidad luminosa. respectivamente. dependiendo de la persona en sí. al igual que cuando las partes del cerebro encargadas de procesar estos datos están dañadas. Por ejemplo. La cantidad de conos es de 6 millones y algunos de ellos tienen una terminación nerviosa que va al cerebro. son los responsables de la definición espacial. pero el concepto del color producido por ella es totalmente subjetivo. verde y azul. y son los responsables de la visión nocturna. Dada su forma de conexión a las terminaciones nerviosas que se dirigen al cerebro. Existen grupos de conos especializados en detectar y procesar un color determinado. La cantidad de bastones se sitúa alrededor de 100 millones y no son sensibles al color. Debido a que el proceso de identificación de colores depende del cerebro y del sistema ocular de cada persona en concreto. sensibles a los colores rojo. verde y azul utilizadas. No es necesaria la unión de todas las longitudes del espectro visible para obtener el blanco. el modelo de definición de colores usado en trabajos digitales es el modelo RGB (Red. Por ello. ya que el monitor produce los puntos de luz partiendo de tres tubos de rayos catódicos. ya que si se mezcla sólo rojo. para representar un color en el sistema RGB se le asigna un valor entre 0 y 255 (notación decimal) o entre 00 y FF (notación hexadecimal) para cada uno de los componentes rojo. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica En realidad el mecanismo de mezcla y producción de colores generados por la reflexión de la luz sobre un cuerpo es diferente al de la obtención de colores por mezcla directa de rayos de luz. Blue). pero a grandes rasgos y a nivel práctico son suficientes los conceptos estudiados hasta ahora. Además. Figura 16 Colores primarios Los colores aditivos son los usados en trabajo gráfico con monitores de ordenador. uno rojo. Por este motivo. verde y azul que lo . Todos los colores que se visualizan en el monitor están en función de las cantidades de rojo. porque la suma de los tres produce el blanco. verde y azul se obtiene el mismo resultado. otro verde y otro azul. Es por esto por lo que estos colores son denominados colores primarios. Green. todos los colores del espectro pueden ser obtenidos a partir de ellos. como ocurre con el del monitor de un ordenador.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Lección 9 Modelos de color Los colores obtenidos directa y naturalmente por descomposición de la luz solar o artificialmente mediante focos emisores de luz de una longitud de onda determinada se denominan colores aditivos. por ejemplo. Cuando la luz solar choca contra la superficie de un objeto.253) se corresponde con el color hexadecimal #FCA5FD. Por su parte. Este fenómeno es el que se produce en pintura. Los valores más altos de RGB corresponden a una cantidad mayor de luz blanca.B) o mediante la sintaxis hexadecimal #RRGGBB. colores que por ser producidos por filtrado de longitudes de onda se denominan colores sustractivos. mientras que el color rosa claro dado en notación decimal por (252. cuanto más altos son los valores RGB.0. éste absorbe diferentes longitudes de onda de su espectro total. y el resultado de la mezcla de todos ellos da como resultado el blanco. mientras que un objeto es blanco porque refleja todo el espectro de ondas que forman la luz. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica forman. Un coche es de color azul porque absorbe todas las longitudes de onda que forman la luz solar. un objeto es negro porque absorbe todas las longitudes de onda del espectro: el negro es la ausencia de luz y de color. Por consiguiente. más claros son los colores. refleja todos los colores. se especificará como (255. mientras que refleja otras.165. que refleja. excepto la correspondiente al color azul. De esta forma. El color rojo puro. donde el color final de una zona va a depender de las longitudes de onda de la luz incidente reflejadas por los pigmentos de color de la misma.G.0) en notación RGB decimal y #FF0000 en notación RGB hexadecimal. .UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Estas longitudes de onda reflejadas son precisamente las causantes de los colores de los objetos. es decir. Figura 17 Notación RGB de colores Esta forma aditiva de percibir el color no es única. un color cualquiera vendrá representado en el sistema RGB mediante la sintaxis decimal (R. en todas aquellas composiciones en las que los colores se obtienen mediante la reflexión de la luz solar en mezclas de pigmentos (tintas. Magenta. Black).0) es blanco puro (el blanco del papel). sino un color gris sucio. mientras que (100. excepto el blanco y el negro. Por ejemplo. (0. El sistema CMYK.M. de los colores cian (un azul brillante).UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. . neutro. un color cualquiera vendrá expresado en el sistema CMYK mediante la expresión (C. define los colores de forma similar a como funciona una impresora de inyección de tinta o una imprenta comercial de cuatricromía.Y. óleos.100. imprenta y. en general. De esta forma. En cuanto al negro. acuarelas. en la que figuran los tantos por ciento que el color posee de los componentes básicos del sistema. Figura 18 Notación CMYK de un color Los colores sustractivos son usados en pintura. la mezcla de pigmentos cian.). En estas composiciones se obtiene el color blanco mediante el uso de pigmentos de ese color (pintura) o usando un soporte de color blanco y dejando sin pintar las zonas de la composición que deban ser blancas (imprenta). tampoco es posible obtenerlo a partir de los primarios. y su notación se corresponde con el valor en tanto por ciento de cada uno de estos colores. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica En esta concepción sustractiva. magenta y amarillo no produce el color blanco. Efectivamente.K).0. amarillo y negro. Yellow. El color resulta de la superposición o de colocar juntas gotas de tinta semitransparente. etc. el magenta y el amarillo.0. obteniéndose el modelo CMYK (Cyan. siendo necesario incluirlo en el conjunto de colores básicos sustractivos. A partir de estos tres colores es posible obtener casi todos los demás.0. concretamente el cian.0) corresponde al color verde. los colores primarios son otros. magenta (un color rosa intenso). Según su tonalidad se puede decir que un color es rojo. amarillo. ya que los colores primarios de uno son los secundarios del otro (los colores secundarios son los obtenidos por mezcla directa de los primarios).UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. que define los colores en función de los valores de tres importantes atributos de estos. La saturación está relacionada con la pureza cromática o falta de dilución con el blanco. es -simplemente. Otro modelo de definición del color es el modelo HSV o HSB. verde. matiz (Hue). Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Los sistemas RGB y CMYK se encuentran relacionados. Constituye la pureza del color respecto al gris. más puro es y menos mezcla de gris posee. supone su cualidad cromática. y depende de la cantidad de blanco presente. Figura 19 Modelo de color HSV El matiz del color (Hue). Figura 20 Saturación . Cuanto más saturado está un color. saturación (Saturation) y brillo (Value).un sinónimo de color. Está relacionado con la longitud de onda de su radiación. Es la cualidad que define la mezcla de un color con blanco y negro. también conocido como tono es el color en sí mismo. y. En dicho modelo se utiliza la sentencia putpixel(x. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica El brillo (Value) o brillantez tiene que ver con la intensidad o el nivel de energía. dado que el rango efectivo de cada componente es de 0 a 63. en algunos casos. En los modos gráficos VGA y super VGA. pero se truncan los dos bit menos significativos. en C gráfico esta asignación se realiza por medio de la sentencia putpixel(x. A su vez. poco satisfactorias. En Java la instrucción Color micolor = new Color(r. Los modos gráficos VGA y SVGA permiten definir en general 256 colores simultáneos (“paleta” gráfica) de entre 256K colores posibles. y con el índice de color c. Por lo tanto es conveniente utilizar una aritmética dentro de dicho rango para representar los colores. Esto significa que el color de cada pixel se representa por medio de una terna de valores de las componentes en rojo. Por ejemplo. mientras que asignar una entrada en la tabla de colores se realiza por medio de la sentencia setrgbpalette(c.r. 0) de la clase Graphics. Este método dibuja un rectángulo con 0 pixeles de ancho y 0 pixeles de alto en la coordenada precisada por x. pero es posible realizarlo a partir del método drawRect(x. c de tipo entero. con x. b son de tipo unsigned int. respectivamente. los parámetros r. y (que son enteros). se representa por medio del espacio cromático RGB. g. g.b). estamos en modos gráficos más económicos. La luminosidad puede variar añadiendo negro o blanco a un tono. Si cada pixel tiene asignada memoria para sus componentes RGB. no sóolo porque la paleta sea . que puede alterar fundamentalmente la apariencia de un color. si el pixel guarda un índice a una entrada en una tabla de colores donde está definido el color del cual está pintado el pixel. para dibujar un pixel en el dispositivo gráfico actual no se define un método. el resultado final de este método es el dibujo de un pixel en la ventana de gráficos.g. Es una condición variable. se trata del modo true color.g. que tiene dicho color. b. Es la luminosidad de un color (la capacidad de reflejar el blanco.y. y multiplicar por 4 en el momento de la llamada. Alude a la claridad u oscuridad de un tono. En cambio. y. verde y azul.c) para acceder al buffer de pantalla y dibujar un pixel en la posición x. 0.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.y. como vimos.b) define una objeto de la clase Color cuya coloración estará definida por los valores de sus parámetros enteros r. Lección 10 Representación del color en computación gráfica El color en las tarjetas gráficas. el acceso del índice del color de un pixel se efectúa según la aplicación utilizada para diseñar el gráfico.c). Estas posibilidades pueden ser. En dichos modos. el espacio RGB es una forma muy ineficiente de representar colores porque la información está codificada de una manera muy “incoherente” con respecto a la capacidad del ojo. esta sensibilidad no es uniforme en todo el espacio cromático. en un sistema gráfico de propósito general el esquema dinámico de paletas puede ser inadecuado cuando se desea manejar dos o más imágenes desarrolladas independientemente. hay personas con visión cromática muy sensible que siguen encontrando diferencias de matiz entre colores contiguos en la gama del amarillo-anaranjado y del violáceo. Esto puede deberse a varios factores. En otras palabras. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica limitada.1 Paletas Estáticas y Dinámicas En muchas circunstancias la capacidad de manejo de colores en las tarjetas gráfica está restringida a una paleta de 256 colores simultáneos. Por ejemplo. porque cada una de ellas reclamará lo que considera que son los colores más adecuados. Sin embargo. sino porque los colores son definibles con poca precisión en algunos casos. con un esquema cromático que utiliza una paleta con los 256 colores más significativos de la imagen.000 en forma simultánea). miles de ellos son idénticamente percibidos. puede ser necesaria la mayor resolución posible. falta de drivers.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.). sino que es mucho mayor en ciertas áreas (por ejemplo en el eje naranja-violeta) y mucho menor en otras (por ejemplo en el eje magenta-verde). por lo que las paletas se denominan dinámicas. sacrificando algunos de los colores de cada una de las .000 colores diferentes (y es capaz de distinguir aproximadamente 50. De los 256K colores definibles. dado que la conversión al RGB del monitor se puede hacer dentro de la controladora de video. etc. En los modos gráficos true color el problema se soluciona con un costo muy grande (3 bytes por pixel es mucho más de lo necesario). mientras que otros no se representan con una fidelidad adecuada. Probablemente la mejor solución hubiera sido contar con tecnología CSV en las tarjetas gráficas. 10. y sin una cantidad de memoria adecuada para el frame buffer puede no ser suficiente para soportar el modelo true color. Si bien el ojo humano detecta aproximadamente 350. El sistema tiene que llegar a una solución de compromiso. Sin embargo. en general. La limitación en la cantidad de colores simultáneos se sobrelleva. Puede ocurrir también por limitaciones tecnológicas (tarjetas o monitores obsoletos. Estos 256 colores son obtenidos durante la generación de la misma (generalmente con histogramas y técnicas de separación). UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas, Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica imágenes. Esto produce como resultado un deterioro impredecible en la calidad gráfica. Al mismo tiempo, una paleta dinámica resulta inaceptable en aplicaciones interactivas, porque al modificar cualquier propiedad de la escena (el agregado de un nuevo objeto, los atributos de un objeto ya dibujado, las condiciones de iluminación, etc.) se requiere el recalculo de los histogramas de la escena completa, y el redibujado completo de la misma, lo cual insume un tiempo muy grande. En las paletas estáticas, por su parte existe un esquema cromático predefinido. Es decir, se define de antemano un conjunto de colores adecuados para graficar cualquier escena, en cualquier condición de iluminación y bajo cualquier algoritmo. Los resultados gráficos tienden a ser de menor calidad. Sin embargo, la calidad de las imágenes, una vez graficadas, no se deteriora con el posterior agregado de otras imágenes. Al mismo tiempo, la referencia al índice de color que corresponde a cada pixel puede calcularse a partir del color que debería corresponder al mismo. De esa forma, la imagen es graficada al mismo tiempo que es computada, sin un costo adicional debido al manejo de color. Un esquema estático de color ubica el índice de color con el que corresponde colorear un pixel en función del color reclamado por el modelo de iluminación, y los colores más cercanos disponibles en la paleta, probablemente por medio de interpolación. En capítulos posteriores estudiaremos como funcionan los modelos de iluminación. Supongamos ahora que para un punto p de cada cara en la escena se computan ecuaciones que determinan la componente del color para cada primario RGB. Cada pixel de cada cara reclamará un color determinado, es decir, una terna de reales (R(p), G(p), B(p)). Esta terna debe transformarse a una terna (R,G,B) dentro de la aritmética de la tarjeta gráfica. Al mismo tiempo, los valores de (R,G,B) deben estar asociados a uno de los índices de color disponibles. Una forma de diseñar paletas estáticas proviene de las siguientes consideraciones. Normalmente las tarjetas representan la intensidad de cada primario con una precisión de 6 bit en una escala entera de 0 a 63, lo cual permite 256K combinaciones de colores. De dichos 256K colores, es necesario elegir los 256 más representativos para un uso general. Más aún, deben ser elegidos de manera tal que cualquier aplicación gráfica que reclama un color no existente en la paleta, pueda encontrar rápidamente el índice de un color perteneciente a la paleta que sea el más adecuado para remplazarlo. Es necesario, entonces, elegir un subconjunto de las 64 intensidades permitidas para cada primario, de modo tal que el producto de la cantidad de elementos en cada conjunto sea menor o igual que 256. En los modos gráficos de 64K colores (conocidos como hi-color), se utiliza una UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas, Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica partición en 32 * 64 * 32, asignándole mayor resolución cromática al primario verde, dada la gran sensibilidad del ojo al mismo. Pero en nuestro caso, combinaciones como 8 * 8 * 4 quedan eliminadas, porque 4 intensidades posibles para un primario es un valor demasiado pequeño, aún para el primario azul. La combinación que empíricamente resultó ideal fue 6 * 7 * 6, ya que su producto es 252, es decir, desaprovecha solamente 4 índices de color, y representa una buena solución de compromiso. De esa forma, se eligen 6 intensidades permitidas para los primarios rojo y azul, y 7 para el primario verde (que es para el cual el ojo humano es más sensitivo). De esa manera, el espacio RGB de la tarjeta queda “cuantizado” en 150 prismas rectangulares, y todos los colores representables que caen dentro de un mismo prisma se aproximan al valor del vértice más cercano. La determinación de los 6*7*6 valores se debe realizar en forma experimental, teniendo en cuenta la corrección del monitor utilizado. En un determinado monitor (un NEC MultiSync 3D) para una posición adecuada en las perillas de brillo y contraste, los resultados elegidos fueron rojo = (0,20, 32, 45, 55, 63), verde = (0, 15, 22, 30, 40, 50, 63) y azul = (0, 25, 35, 45, 55, 63). Debemos recordar que en este modo gráfico, es posible dar un valor entero de 0 a 63 a la intensidad en cada primario. La estructura de la cuantización del espacio RGB elegida resulta ser muy práctica en el momento de encontrar el color con el cual pintar un pixel. Antes de ejecutar la graficación, es decir, como paso de inicialización de la interfaz, se almacena la paleta en la tabla de colores de la pantalla. La estructura de la cuantización del espacio RGB elegida resulta ser muy práctica en el momento de encontrar el color con el cual pintar un pixel. Antes de ejecutar la grabación, es decir, como paso de inicialización de la interfaz, se almacena la paleta en la tabla de colores de la pantalla. Cuando es necesario graficar un pixel de un color R,G,B arbitrario, se buscan los valores r; g; b tales que rojo[r], verde[g], azul[b] sean los valores más cercanos, y luego se grafica el pixel con el índice de color 42*r+6*g+b. Por ejemplo, si el modelo de iluminación reclama un color (35,42,48), se ubican r=2, g=4, b=3 y se grafica el pixel con el índice de color 111. Con este esquema se produce el efecto de “bandas de Mach” cuando se pintan áreas contiguas con colores parecidos. Este efecto es producido por la capacidad del ojo de amplificar localmente pequeñas variaciones cromáticas, lo cual le permite, entre otras cosas, reconocer los bordes y las formas de los objetos. Sin embargo, el efecto que producen las bandas de Mach al utilizar esta paleta de colores es indeseado ( ver Figura 21 ). Pero a diferencia de lo que sucede con las paletas dinámicas, en nuestro esquema es posible utilizar una técnica de dithering aleatorio, es decir, se puede “perturbar” UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas, Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica aleatoriamente un color dado cambiándolo por alguno de sus vecinos más próximos en la paleta. Figura 21 Paleta estática sin y con dithering aleatorio Esto es así porque en nuestro modelo, dado un determinado color de la paleta, es posible ubicar rápidamente a sus colores vecinos, los cuales, además, son muy similares. Una forma muy económica de producir este efecto consiste en perturbar para cada primario la cuantización elegida. Si para el primario R se reclama un valor R, el cual está comprendido entre rojo[r] y rojo[r+1] se perturbará la elección del valor r o r+1 en la generación del índice de color asociado al pixel (lo propio se efectúa con los otros dos primarios). Para ello se genera un número aleatorio rnd uniformemente R  rojo[r ] distribuido entre 0 y 1. Si rnd  se utiliza r+1, y en caso contrario rojo[r  1]  rojo[r ] se utiliza r. En el ejemplo mencionado más arriba, la elección para la cuantización del rojo está circunscripta a los valores predefinidos 32 o 45. Como 35 es más cercano a 32 que a 45, la probabilidad de que se utilice dicho valor es mayor a la de utilizar 45. De esa manera, se transforma el aliasing cromático producido por la baja frecuencia de muestreo en un ruido uniforme. CAPÍTULO 3 El hardware y el software para computación gráfica Existen multitud de componentes que son necesarios para lograr realizar buenos productos gráficos, sin embargo en este apartado nos centraremos en la clasificación y características de los más comunes, a partir de una característica UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. este número. Las imágenes vectoriales son más adecuadas que las de ráster (mapas de bits-bitmap) para ciertos tipos de aplicaciones (dibujos técnicos. el conjunto de valores numéricos adopta la forma de una matriz a la que denominamos matriz-imagen. debe indicar con precisión tanto el color (tono) como el brillo (cuanta luz de dicho tono) y la saturación (pureza del color) de original correspondiente. Los resultados gráficos de una aplicación pueden mostrarse en una gran variedad de dispositivos de salida. de las cuales producen una reproducción “caligráfica”. Esto implica un cambio en la manera de representar las primitivas gráficas (usualmente dichas primitivas son el punto. Para ello se utiliza un documento presentado por Claudio Delrieux. planos. podemos ver que existen dispositivos de los siguientes tipos:   Dispositivos de vectores. pero en vez de almacenar una matriz finita de puntos se almacenan vértices. etc) porque en realidad guardan reglas matemáticas. pueden ser escaladas a cualquier tamaño sin pérdida de calidad. por lo que contra lo que sucede con las imágenes ráster. referida al modo en que los mismos son manejados por la computadora. A partir de aquí. pero luego del vertiginoso descenso en el costo de la memoria volátil. reglas de trazado de líneas y de coloreado de superficies y líneas. como ya se explicó en la sección anterior. es importante otra clasificación. pixeles. Normalmente estos dispositivos son o bien de pantalla o bien de impresión. desde el punto de vista de la Computación gráfica. Sin embargo. Estos puntos constituyen los nudos de una malla (generalmente las separaciones horizontal y vertical son iguales). los cuales reciben del computador la información geométrica de la localización y tamaño de las primitivas que soportan. En la representación vectorial la imagen está igualmente constituida por puntos. . De esa manera. Los dispositivos de vectores fueron los primeros en desarrollarse. La representación ráster. a partir de la década del 70 se hicieron más baratos los dispositivos de ráster. cartografía. Posteriormente los puntos de color son reducidos a números para su almacenamiento y tratamiento en el ordenador. La forma en que un punto de luz es reducido a un número varía según el método utilizado. el segmento de recta y la circunferencia o el círculo). Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica fundamental: usan representación vectorial o ráster. consiste en sustituir los infinitos puntos de la imagen original por un conjunto finito de puntos. tomados a intervalos regulares. Dispositivos de ráster. el conjunto de pixeles representa los infinitos puntos de la imagen real. o conjunto de números. también es denominada mapa de bits ("bit-map"). La velocidad de refresco depende del número de líneas. La secuencia de dibujo es siempre la misma si no existe movimiento. Al borrar una línea. . Las posibilidades de color son mínimas. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Lección 11 Dispositivos de vectores Actualmente estos dispositivos son más caros. Son ideales para la graficación rápida y precisa de planos. pero difieren en ciertos aspectos tecnológicos. pero tienen ciertas ventajas que los hacen únicos. Figura 22 Plotter En los plotters de tambor. no se produce la estela. el papel está fijo y la pluma realiza todos los movimientos. Por lo tanto.         Las líneas se guardan de forma aleatoria. Es posible utilizar colores por medio de varias plumas. estos dispositivos son pantallas de rayos catódicos. la pluma se desliza en sentido horizontal y el papel en sentido vertical. Esencialmente. En los plotters planos (más económicos). y requieren un ancho de banda de comunicación mucho menor dado que no reciben la discretización completa de las primitivas sino solamente su posición. Plotters: Grafican en una hoja (que en algunos casos puede ser de gran tamaño) sobre la cual se desliza una pluma movida por motores de pasos de gran precisión. Displays de almacenamiento: Al igual que televisores y monitores. Las líneas son exactas en su trazo (no hay efecto escalera). Si hay pocas líneas el sistema espera para evitar refrescar más de lo necesario. la pantalla tiene cierta “memoria” electrostática que mantiene visibles los elementos graficados con muy alta precisión y sin la necesidad de refresco. tienen mucha mejor resolución y precisión que los dispositivos de ráster. Por ejemplo. Presentan problemas al intentar dibujar polígonos rellenos. una imagen muy compleja a la cual se van agregando elementos en orden es idealmente representada por estos dispositivos. Son usuales las resoluciones del orden de los 10000 * 10000. En síntesis los dispositivos vectoriales presentan las siguientes características.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Lección 12 Dispositivos de ráster Los dispositivos de barrido (ráster) surgen como alternativa. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Un elemento se representa “pintándolo” por medio de una serie de recorridas del cañón electrónico. Los elementos del dibujo se almacenan en forma de pixeles. Los dispositivos de barrido presentan las siguientes características:         La imagen completa la forman líneas horizontales formadas por pixeles. el papel se dilata por el calor y absorbe el toner. Sin embargo. Las órdenes de dibujo que recibe el controlador se transforman a pixeles. Para cada pixel se ajusta la intensidad del haz. Dada la naturaleza discreta de los pixeles. Dicha memoria es utilizada para comandar la intensidad de un haz laser que recorre línea por línea el papel. Impresoras Laser: Recibe de la computadora la información gráfica como una secuencia de líneas. El borrado. Los pixeles pueden dar apariencia de escalera (aliasing). Impresoras de matriz: Era hasta hace poco el dispositivo de impresión más común. El refresco tiene una frecuencia fija. La velocidad de refresco no depende de la complejidad de la imagen. entre 25 y 30 imágenes. Se realizan barridos de forma horizontal. El costo es menor.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Recibe de la computadora la información gráfica como una secuencia líneas. para evitar este efecto se han definido algoritmos y técnicas antialiasing. por lo que no se puede alterar la posición de un elemento sin tener que borrar y redibujar todos los demás. mientras es expuesto al contacto del toner. las cuales va reproduciendo con una cabeza impresora (por medio del golpe de martillos o el rocío de tinta). de arriba a abajo. Incorporan fácilmente objetos rellenos (color o patrón). las cuales almacena en una memoria local. . es necesaria la conversión de primitivas a pixeles. sin embargo. su precisión y velocidad sin necesidad de memoria volátil los hace ideales para la representación de imágenes de radares. Cada vez que se refresca la imagen el cañón barre todos los pixeles. Donde el haz incide con gran intensidad. no puede hacerse en forma selectiva. UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. color. En el caso de los monitores. la cual es recorrida por la tarjeta gráfica de la computadora para producir las líneas de barrido. Debe existir un refresco de la imagen en memoria. que usualmente se implementa por medio de memoria RAM de . en sentido horizontal primero (de izquierda a derecha) y vertical después (de arriba abajo).La tarjeta de video Los dispositivos de ráster requieren un refresco permanente de la discretización de la salida gráfica.8M Lección 13 Hardware gráfico para monitores . la imagen se construye línea por línea. Al igual que con las impresoras de matriz. con una cantidad de colores limitada por las prestaciones de la tarjeta gráfica. dicho refresco se realiza en un segmento de la memoria volátil de la computadora denominada frame buffer o buffer de pantalla. Esencialmente se comportan de una manera similar a un receptor de televisión. Esto representa una calidad más que aceptable para la mayor parte de las aplicaciones. precisión). excepto por el hecho de que reciben la señal de video y sincronismo en forma directa de la computadora y no a través de una portadora de radio. Los monitores más populares pueden tener resoluciones de hasta 1200 * 1024 pixeles (aunque este límite avanza día a día)... A continuación se presentan los diferentes estándares y su capacidad de resolución: Estándar CGA (color graphics adapter) EGA (enhanced graphics adapter) MCGA (multicolor graphics array) VGA (video graphics array) 8514/A XGA (extended graphics adapter) SVGA (super VGA) Resolución Número de colores 320x200 640x200 640x200 640x350 640x200 640x480 320x200 320x200 640x480 1024x768 1024x768 1280x1024 640x480 800x600 1024x768 1280x1024 1600x1200 . 4 2 16 16 2 2 4 256 16 256 (entrelazado) 256 (no entrelazado) 256 (entrelazado) 256 32k 64k 16. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Monitores: Se han popularizado enormemente a partir del descenso en el precio de la memoria volátil y el incremento constante en la calidad de las prestaciones (resolución. utilizar memoria de 25ns.33) y con capacidad de acceso directo a memoria. mucho mayor que la velocidad requerida para la RAM de la CPU. con la velocidad del reloj externo del microprocesador (50Mhz. El buffer de pantalla es accedido en forma rítmica por el generador de video. . al producirse una salida gráfica por parte de la CPU de la computadora. lo cual en muchos casos es insuficiente si se tiene en cuenta que el acceso entre la CPU y la tarjeta gráfica por el bus ISA debe cumplir cierto protocolo que hace más lenta la comunicación. en vez de 8. y por lo tanto se requiere el uso de un árbitro que mantenga abierto el acceso al buffer solo en esos casos. Básicamente la idea es evitar el uso del bus de datos ISA para interconectar la tarjeta gráfica con la CPU. la pantalla es refrescada 35 veces por segundo a una tasa de aproximadamente un millón de pixeles por pantalla. En una situación como esta. Tarjeta gráfica CPU Arbitro Frame Buffer Generador de video MONITOR Figura 23 Componentes básicos de una tarjeta gráfica El temporizado es crítico en el manejo del buffer de pantalla. Por ejemplo. Otro esquema posible para manejar la memoria de pantalla es utilizar la tecnología de bus local (difundida alrededor de 1993 con las motherboard 486 y tarjetas Vesa Local Bus). De ese modo se utiliza un segundo bus (llamado bus local). para el buffer de pantalla permite utilizar solamente un pico de 5 millones de accesos por segundo para la CPU. en una norma de video de 1024 pixeles por línea. la misma debe ser discretizada y almacenada en el buffer de pantalla. Al mismo tiempo. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica alta velocidad localizada dentro de la tarjeta gráfica. por lo que se requiere memoria RAM de alta velocidad.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. normalmente de 32 bits en vez de 16. Este acceso debe ser permitido solamente en los momentos en los que el generador de video no está accediendo al buffer. Esto significa que en promedio el buffer de pantalla es accedido 35 millones de veces por segundo por el generador de video. lo cual requiere una velocidad de acceso a memoria de aproximadamente 30ns para cumplir sólo con el refresco de pantalla. que es el encargado de “componer” la señal de video que va hacia el monitor. Dicha norma puede ser una norma de televisión (PAL o NTSC) o de monitor (1024*768. El generador de video debe recorrer la memoria del buffer de pantalla y entregar las líneas de barrido al monitor dentro de una determinada norma de video. la prestación de un mismo hardware aumenta en un orden de magnitud solamente al modificar la configuración de acceso.). la clave del funcionamiento de la tarjeta gráfica no está en los requisitos de memoria. Las señales de barrido son enviadas al monitor. y por lo tanto. 800*600. el barrido es producido por un generador de barrido cuyas frecuencias horizontal y vertical son programables en función de la norma que se utiliza. Es por dicha razón que han surgido tarjetas aceleradoras por hardware (PCI o AGP) que permiten que una aplicación se deslinde del trabajo de efectuar las transformaciones geométricas. etc. el mapeo de texturas.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. sino en la estructura del generador de video. en determinadas aplicaciones. Esto se realiza por medio de una unidad aritmética que encuentra una dirección lineal a partir de los valores de la señal de barrido horizontal y vertical. La dirección lineal habilita la salida del valor almacenado en un lugar de la memoria del buffer de pantalla. etc. excepto en el modo true color (color verdadero) que se explicará más adelante. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Este tipo de configuraciones permite una mejor utilización del ancho de banda marginal de la memoria del frame buffer. Entonces. Dicho valor es transformado en información gráfica por medio de una tabla de color. pero también se utilizan para encontrar la posición de memoria en la cual está almacenada la información gráfica de cada pixel que constituye una línea de barrido. . como por ejemplo animaciones. muchas de las operaciones matemáticas necesarias dentro en la computación gráfica siguen un procesamiento disciplinado que puede en muchos casos implementarse directamente en el hardware de la tarjeta. Tarjeta gráfica Frame Buffer Generador de video MONITOR Bus Local CPU RAM Figura 24 Tarjeta gráfica con tecnología de bus local Por otra parte. Recapitulando. pintado de polígonos. normalmente de las familias 8048 u 8051 de Intel. Por lo demás el teclado latinoamericano está orientado hacia la programación. El teclado latinoamericano sólo da soporte con teclas directas a los caracteres específicos del castellano. El resto de combinaciones de acentos se obtienen usando una tecla de extensión de grafismos (<ALT-GR>). Figura 25 Diferentes tipos de teclado. Estos microcontroladores ejecutan sus propios programas que están grabados en sus respectivas ROMs internas. Estos programas realizan la exploración matricial de las teclas para determinar cuales están pulsadas. incluido el teclado virtual Un teclado está realizado mediante un microcontrolador.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. la letra eñe y los inicios de exclamación e interrogación. Los teclados usados en América latina y España extienden la configuración básica del teclado QWERTY con el fin de incluir la letra eñe y facilidades para letras acentuadas. apuntadores de control indirecto y apuntadores de última tecnología. también hay que tener en cuenta que idiomas como por ejemplo en francés tienen teclados AZERTY en lugar del que se tiene en Estados Unidos QWERTY. sino que se adjudica un valor numérico a cada una de ellas que sólo tiene que ver con su posición física. Si no se hiciera así ese sistema sería muy dependiente de cada idioma. . Estos dispositivos se pueden clasificar en teclados. apuntadores de control directo. Para lograr un sistema flexible los microcontroladores no identifican cada tecla con su carácter serigrafiado en la misma. con fácil acceso al juego de símbolos de la norma ASCII. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Lección 14 Dispositivos de entrada Los dispositivos de entrada permiten la interacción del usuario con el objeto gráfico creado. Como el teclado español debe servir para las diversas lenguas de la península ibérica se facilita sobre todo la escritura de diversos acentos aún los no utilizados en el castellano. que incluyen dos tipos de acento. por ejemplo al tocar la pantalla cuando los pixeles no negros que se encuentran bajo la punta del lápiz son refrescados por el haz de electrones de la pantalla. En cualquier caso ya sea teclado PS/2 ó AT el Scan Code es entregado a la BIOS del PC para identificar la tecla pulsada. el teclado genera un código diferente cuando una tecla se pulsa y cuando dicha tecla se libera. un ejemplo muy común son las pantallas sensibles al tacto y los lápices ópticos (ligth pen). De esta función se encarga el controlador de teclado que es otro microcontrolador (normalmente el 8042).UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. etc. sino que el haz de electrones que ilumina los pixeles los recorre línea por línea. por lo que por razones de compatibilidad es necesario traducirlos. . En los teclados AT los códigos generados son diferentes. realizar diagnósticos. por lo que el computador puede enviarle comandos al teclado para configurarlo. Figura 26 Dispositivos con apuntadores de control directo El lápiz óptico contiene sensores luminosos y envía una señal a la computadora cada vez que registra una luz. todas en un espacio de 1/50 de segundo. Detectando el momento en que el haz de electrones pasa bajo la punta del lápiz óptico. La comunicación del teclado es vía serie. Este controlador recibe el Keyboard Scan Code (Kscan Code) y genera el propiamente dicho Scan Code. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Por cada pulsación o liberación de una tecla el microcontrolador envía un código identificativo que se llama Scan Code. resetearlo. éste ya situado en el PC. Los apuntadores de control directo permiten señalar directamente sobre la pantalla o monitor el objeto deseado. Para permitir que varias teclas sean pulsadas simultáneamente. La pantalla de la computadora no se ilumina en su totalidad al mismo tiempo. El protocolo de comunicación es bidireccional. el ordenador puede determinar la posición del lápiz en la pantalla. tableta gráfica. sin embargo. Estos apuntadores están constituidos por dispositivos externos que permiten manejar un apuntador gráfico en el monitor. joystick. son enormemente populares en aplicaciones como los puestos de información porque ofrecen una forma de señalar que no requiere ningún hardware móvil y porque presionar la pantalla es algo intuitivo. mediante su movimiento y realizar acciones sobre los objetos mediante botones. Además no ofrece gran precisión al tener que señalar ciertos elementos en programas de alta resolución. En cuanto a los apuntadores de control indirecto. el tipo de pantalla táctil más sencillo está compuesto de una red de líneas sensibles. trackpoint. lo que sería demasiado incómodo en largos periodos de tiempo. Las pantallas táctiles. Figura 27 Dispositivos apuntadores indirectos: ratón. Otros tipos de pantallas más precisas utilizan una superficie cargada eléctricamente y sensores alrededor de los bordes externos de la pantalla. etc. touchpad. En cuanto a las pantallas. La popularidad de las pantallas táctiles entre los usuarios se ha visto limitada porque es necesario mantener las manos en el aire para señalar la pantalla. acrónimo de Light-Emitting Diodes) y sensores alrededor de los bordes externos de la pantalla. donde la suciedad podría interferir en el modo de operación de otros tipos de pantallas táctiles. Las pantallas táctiles de infrarrojos se usan a menudo en entornos sucios. . para detectar la cantidad de cambio eléctrico y señalar exactamente donde se ha realizado el contacto. que determinan la situación de una presión mediante la unión de los contactos verticales y horizontales. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica El lápiz óptico no requiere una pantalla ni un recubrimiento especiales como puede ser el caso de una pantalla táctil. Un tercer tipo fija diodos emisores de rayos infrarrojos (LEDs. pero tiene la desventaja de que sostener el lápiz contra la pantalla durante periodos largos de tiempo llega a cansar al usuario.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Estos LEDs y sensores crean una red invisible de infrarrojos en la parte delantera de la pantalla que interrumpe el usuario con sus dedos. con el ratón constituyen los de uso más extendido en conjunto con los teclados. Figura 28 Apuntadores de última tecnología Los apuntadores de última tecnología permiten la captura de movimientos en espacios tridimensionales y por ende la manipulación de objetos tridimensionales. maquetas. El ratón se mueve por una alfombrilla ocasionando el movimiento de la bola que a su vez origina el movimiento de uno o varios de estos rodillos que se transforma en señales eléctricas y producen el efecto de desplazamiento del ratón por la pantalla del ordenador. . matte painting. Otros utilizan diodos emisores de luz (led). Con el software de graficación en 3D se puede imitar la realidad con tal realismo. Esto ha quedado patente en muchas películas. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Los ratones (mouse) suelen estar constituidos por una caja con una forma más o menos anatómica en la que se encuentran dos botones que harán los famosos clics de ratón siendo transmitidos por el cable al puerto PS/II o al puerto de serie. para capturar el movimiento del ratón.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. etc. en este caso se denominan ratones ópticos. Lección 15 Software de graficación Hasta la llegada del software 3D la mayoría de los efectos especiales se realizaban por medio de efectos ópticos. que es difícil detectar si la escena se ha rodado o se ha generado en un ordenador. que ya hemos mencionado. Los ratones mecánicos mantienen dentro de esta caja una bola que sobresale de la caja a la que se pegan 4 rodillos ortogonalmente dispuestos que serán los que definan la dirección de movimiento del ratón. Existen modelos en los que la transmisión se hace por infrarrojos eliminando por tanto la necesidad de cableado. Otros presentan la bola en la parte superior de la caja no estando por tanto en contacto con la alfombrilla y teniendo que ser movida por los dedos del usuario aunque se origina el mismo efecto. especularidad. Existen diversas técnicas de modelado. modelado con NURBS y modelado poligonal son algunos ejemplos. características de reflexión. luminosidad. en dichos casos. un componente de una aplicación (Shaper. Si se utiliza para Animación. El proceso de creación de gráficos 3D por computadora puede ser dividido en estas tres fases básicas:    Modelado Composición de la escena Rénder (creación de la imagen final) Modelado. mapas de relieve (bumpmaps) y otras características. animar y dar apariencia real a un objeto. Lofter en 3D Studio) o por un lenguaje de descripción de escenas (como en POV-Ray.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Constructive Solid Geometry. Esta etapa involucra la distribución de objetos. agregar texturas. En un principio. las empresas de animación programaban su propio software con el cual luego trabajaban. el modelado es sólo una parte del proceso de creación de escenas (por ejemplo. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Los paquetes de animación consisten en uno o varios módulos con los que es posible modelar. Esto ayuda al proceso de animación. cámaras y otras entidades en una escena que será utilizada para producir una imagen estática o una animación. El proceso de modelado puede incluir algunas actividades relacionadas con la preparación del modelo 3D para su posterior animación. Poco a poco fueron surgiendo distintos programas. luces. A los objetos se les puede asignar un esqueleto. Dos técnicas para realizar la animación son Cinemática Directa (Forward Kinematic animation) y animación por Cinemática Inversa (Inverse Kinematic animation). en el cual el movimiento del esqueleto afectará automáticamente las porciones correspondientes del modelo. color. o el índice de refracción). Composición de la escena. una estructura central con la capacidad de afectar la forma y movimientos de ese objeto. no hay una distinción estricta entre estas fases. La etapa de modelado consta de ir dando forma a objetos individuales que luego serán usados en la escena. transparencia u opacidad. El modelado puede ser realizado por programas dedicados (como Lightwave 3D. en . los cuales podían ser adquiridos a través de una licencia de uso. Rhinoceros 3D o Moray). En algunos casos. esta fase. Los procesos de modelado pueden incluir la edición de la superficie del objeto o las propiedades del material (por ejemplo. difusión. con Caligari trueSpace). Las técnicas van desde las más sencillas. Con la ayuda de la técnica de keyframing. la iluminación es un factor importante que contribuye al resultado estético y a la calidad visual del trabajo terminado. El proceso de transformar la representación de objetos. El software de rénder puede simular efectos cinematográficos como el lens flare. Como en la realidad. pero como el ojo humano está acostumbrado a su presencia. un producto de las imperfecciones mecánicas de la fotografía física. como el punto medio de coordenadas de una esfera y un punto en su circunferencia. solo se necesita marcar algunos cuadros clave (keyframes). lo que se conoce como 'Interpolación'. o el motion blur (desenfoque de movimiento). algo que es bien conocido por fotógrafos y técnicos de iluminación teatral. donde los objetos son descompuestos de representaciones abstractas primitivas como esferas. en realidad. hasta las técnicas más modernas como el Scanline Rendering. se conoce como tesselation. Este paso es usado en el rénder basado en polígonos. pasando por el rénder basado en polígonos. Renderizado. que facilita la creación de movimientos complicados en la escena. Por eso. etcétera. Se llama rénder al proceso final de generar la imagen 2D o animación a partir de la escena creada. en una representación poligonal de una esfera. la . La iluminación es un aspecto importante de la composición de la escena. la radiosidad o el Mapeado de fotones. el paso de tesselation no es incluido en la transición de representación abstracta y la escena 'renderizada'. a filmar una escena de la vida real. Esto puede ser comparado a tomar una foto o en el caso de la animación. Los cuadros entre keyframes son generados automáticamente. hace uso de una técnica llamada "Keyframing" (cuadros clave). como el rénder de alambre (wireframe rendering). puede ser un arte difícil de dominar. y para este fin se han desarrollado muchos métodos especiales. su rotación o tamaño en cada cuadro de la animación. Los efectos de iluminación pueden contribuir en gran medida al humor y la respuesta emocional generada por la escena. Las mallas de triángulos son populares ya que está probado que son fáciles de 'renderizar' usando Scanline rendering. conos. la profundidad de campo. que son redes de triángulos interconectados. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica general. en lugar de tener que corregir la posición de un objeto. Generalmente se buscan imágenes de calidad fotorrealista. en las denominadas mallas. el Raytracing. y en estos casos.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Estos artefactos son. Tesselation y mallas. Las representaciones poligonales no son utilizadas en todas las técnicas de rénder. En 1994. pues requiere simular gran cantidad de procesos físicos complejos. y comenzaron a reescribir SoftImage 3D para Windows NT. Es el líder en el desarrollo de 3D en la industria de juegos y usuarios hogareños. En 1998 Microsoft vendió Softimage a Avid. La capacidad de cálculo se ha incrementado rápidamente a través de los años. escribió Softimage 3D. Es el favorito entre los entusiastas.El contrincante más grande de Maya. Kinetix luego se fusionó con la última adquisición de Autodesk. El resultado se llamó SoftimageXSI. los cuatro que se han ganado la mayor popularidad son:     Alias Wavefront's Maya . En 1987.Fue originalmente desarrollado por Amiga Computers a principios de la década de 1990. Se han desarrollado técnicas con el propósito de simular otros efectos de origen natural. que se convirtió rápidamente en el programa de 3D más popular de ese período. Es utilizado por muchos de los estudios de efectos visuales más importantes en combinación con RenderMan. El programa consiste en dos componentes: Modelador y Editor de escena. y las cáusticas para simular el efecto de la luz al atravesar superficies refractantes.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Estudios de cine que producen animaciones generadas por ordenador hacen uso. permitiendo un grado superior de realismo en los rénders. Microsoft compró Softimage Inc. en general. Mac OS y Mac OS X. Newtek's Lightwave 3D . Softimage Inc. el muestreo volumétrico para simular niebla. el motor de rénder fotorrealista de Pixar. humo o fuego. Discreet's 3D Studio Max .Es quizá el software más popular en la industria. por lo menos hasta 2003. polvo y otros efectos atmosféricos. de lo que se conoce como rénder farm (granja de rénder) para acelerar la producción de fotogramas A pesar de haber muchos paquetes de modelado y animación 3D. El proceso de rénder necesita una gran capacidad de cálculo. Más tarde evolucionó en un avanzado y muy usado paquete de gráficos y animación 3D. Avid's Softimage XSI . Discreet Logic. Ejemplos de estas técnicas incluyen los sistemas de partículas que pueden simular lluvia. . una compañía situada en Montreal..Originalmente escrito por Kinetix (una división de Autodesk) como el sucesor de 3D Studio. y es utilizado en muchas de las mayores productoras de efectos visuales como Digital Domain. como la interacción de la luz con la atmósfera o el humo. Actualmente disponible para Windows. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica simulación de dichos efectos aportan un elemento de realismo a la escena. posee un motor robusto para la programación de juegos. es común el manejo de API’s especializadas para facilitar los procesos en todas las etapas de la generación de gráficos por computadora. bucles y declaraciones condicionales. formZ . ya que proveen un camino al programador para acceder al hardware de manera abstracta. Incluye rénder. la creatividad. NaN*Blender . con una interfaz muy intuitiva. Es completamente gratuito aunque no fue lanzado bajo GPL. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Junto a estos paquetes mayores. Una característica distintiva de esta aplicación es que todas las fases de creación de gráficos 3D son realizadas dentro de un único programa. con características como macros.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Estas APIs han demostrado ser vitales para los desarrolladores de hardware para gráficos por computadora.Un avanzado software gratuito de Raytracing. un Motor de rénder propio y una comunidad de usuarios totalmente abierta y dispuesta a colaborar. cálculo de radiosidad. RealSoft3D . pero la posibilidad de realizar un trabajo de calidad no depende de esto.Paquete de modelado y animación con uno de los motores de rénder más rápidos que existen.Un potente modelador bajo NURBS.Modelador 3D para Linux y Windows. colisiones entre cuerpos). con características como soporte para programación bajo Python con un amplia gamma de script en constante desarrollo. Cinema4d . gravedad. No incluye modelador. Rhinoceros 3D . hay otros que no se han ganado tal aceptación general.Ofrece manipulación topológica de las geometrías. pero que no son simples juguetes. POV-Ray . Cada software tiene sus ventajas y desventajas frente a los demás. pero provee características como simulación de fenómenos físicos (viento. Universe por Electric Image . Algunos son:         Caligari trueSpace .una aplicación 3D integrada. Además del software especializado.Programa de modelado y animación libre. Usa su propio lenguaje de descripción de escena. Las siguientes APIs para gráficos por computadora son particularmente populares:    OpenGL Direct3D (subconjunto de DirectX para producir gráficos interactivos en 3D) RenderMan .Motor de rénder rápido. aprovechando las ventajas de tal o cual tarjeta de video. y no tanto del software. No es tan avanzado como los paquetes líderes. sino de los conocimientos. memi. 4 de Mayo. VNU eMedia Inc. DELRIEUX.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. [En línea] http://wwwdi. Última actualización: Septiembre 15 de 2005. [En línea] http://www.ht . BUXTON & s. GREENBERG (eds) "Readings in Human-Computer Interaction: toward the year 2000".htm. Fecha de consulta: Septiembre de 2005. J.ii.es/~fconde/Confe-infografia.com/editorandpublisher/features_columns/article_display. CONDE RODRÍGUEZ.uam.com/articulos/1483. Pedro J. GRUDIN.edu.ujaen.org/computing_history/new_page_6. Departamento de Ingeniería Eléctrica. Luciano. Fecha de consulta: Septiembre de 2005. “News sites repeat mistakes of the past. We still don´t recognize the power of interactivity”.php?manual=47.htmlweb.comphist. Fecha de consulta: Mayo de 2005. Second Edition. Curso práctico de diseño web.pdf.es/~pedro/graficos/teoria/Conceptos/ConceptosFundamentales. Fecha de consulta: Mayo de 2005.desarrolloweb. y GUTIÉRREZ. Teoría del color.editorandpublisher. CEBRIÁN.com/articulos/cebrian/teoria_color1. John. Universidad Nacional del Sur. Learning Computing History. [En línea] http://www.COM. Consultado en abril de 2002 en: www. Gráficos digitales [En Línea] http://www. A Brief History of Computer Graphics [En línea] http://www. Steve. Conceptos fundamentales de computación gráfica.js p?vnu_content_id=1461161 PASCUAL BRONCANO. W. MorganKauffmann.bo/~mscinfo/cursos/graficos/main. Editor & Publisher. [En línea] http://www. Introducción a la Computación gráfica. 1997.htm. En el Foro sobre Juventud y Nuevas Tecnologías. Informe de Luciano Moreno [En línea] http://www.lilliputmodel. Antonio.umss. Fecha de consulta: Septiembre de 2005. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Fuentes documentales unidad 1 BAECKER. IMPAGLIAZZO.net/diseno/graficos_digitales/graficos_3.html consulta: Mayo de 2005 Fecha de OUTING. Francisco de Asís. Rafael. Charla sobre: La infografía y los efectos especiales en el cine. Claudio.htm. DESARROLLOWEB. MORENO. uji. "HumanComputer Interaction". SHARP. BENYON.html Fecha de consulta: Mayo de 2005. Material teórico para el curso Multimedia. .cnice. UNIVERSITAT J’AUME I. S. Carey. Addison-Wesley.pdf. Escuela Técnica Superior de Informática de la Universidad Autónoma de Madrid. [En línea] http://www4. http://www4. Última actualización: 03/07/2004.pdf. H. D. Fecha de consulta: Septiembre de 2005. T. [En línea] http://platea. Y.es/~belfern/IX34/Documentos/Teoria/Graficos.pdf Fecha de consulta: Mayo de 2005. http://www4.mecd.uji. Manual de diseño digital. PREECE.es/~belfern/IX34/Documentos/Teoria/Video.es/~jmas/manual/html/uso. HOLLAND.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. ROGERS. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica m#estandar. 1994 TYPEPHASES DESIGN.uji. 1998-2000.es/~belfern/IX34/Documentos/Teoria/Animacion. para posteriormente abordar lo correspondiente a llenado de áreas y transformaciones. geométrico y la . Objetivos Conocer los algoritmos necesarios para el trazado de curvas en dos dimensiones. Proporcionar al estudiante los lineamientos tecnológicos básicos que le permitan utilizar librerías gráficas (Ej. como fundamento para la visualización gráfica en el computador. Intencionalidades Formativas Propósitos Introducir al estudiante en el conocimiento de los principales algoritmos y estructuras de datos utilizados en Computación Gráfica para modelar y visualizar escenas en 2 y 3 dimensiones. llegando al proceso de discretización necesario para su dibujo en un dispositivo como el monitor. círculos. En cada uno de los algoritmos básicos se proporciona la codificación en lenguaje Java con el fin de acercarlo a la programación. Para ello se parte de la conceptualización matemática de cada una de estas primitivas.. polígonos. En la próxima unidad se mostrará con un mayor nivel de detalle las posibilidades de un API para la graficación. Aquí dará sus primeros pasos. a partir del estudio de su origen matemático. En esta segunda unidad didáctica se van a encontrar los métodos para graficar las primitivas básicas: rectas.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. la idea fundamental es conocer ¿cómo funciona el dibujado en el monitor.pero serán esenciales. OpenGL) en conjunto con lenguajes de programación estructurada como JAVA... Aunque muchos de los lenguajes computacionales ya tienen definidas en sus librerías gráficas funciones que permiten dibujar estas primitivas sin tener que incluirse en el problema de la discretización. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica UNIDAD 2 ALGORITMOS BÁSICOS DE DIBUJO EN 2 DIMENSIONES Introducción Una vez se han clarificado algunos de los fundamentos de la computación gráfica es necesario abordar el proceso de representación. a partir de su unidad básica: el píxel? Se espera que este conocimiento redunde en un mejor manejo de los algoritmos que describen este proceso. utilizando librerías gráficas y lenguajes de programación. Elaborar ejercicios de llenado de áreas y transformaciones de figuras de dos dimensiones. Describir el funcionamiento matemático y geométrico que permite el dibujo de gráficos en el computador. Mapa Conceptual de la Unidad Productos de Aprendizaje Individual . partiendo de la conceptualización geométrica respectiva. Competencias El estudiante programa empleando algoritmos que permiten dibujar las principales figuras geométricas en dos dimensiones. El estudiante conoce los fundamentos matemáticos de la representación de gráficos computacionales en tres dimensiones y utiliza los algoritmos que las realizan. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica ejemplificación utilizando librerías gráficas en conjunto con leguajes de programación. Utilizar y construir algoritmos para dibujo de gráficos en 2D y 3D.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Metas Al finalizar esta unidad didáctica el estudiante estará en capacidad de:    Usar librerías gráficas para la construcción de gráficos computacionales. convierte el código fuente en . Consolidación de conceptos. glosario técnico y mapa conceptual de la unidad. Consultar en internet sobre los temas de la unidad y publicar preguntas en el foro de la unidad correspondiente para que sean solucionadas por el tutor o los compañeros. Grupo de Curso    Por cada tipo de algoritmo que se estudia se realizará una práctica en computadores. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica    Lectura autorregulada de la Unidad Didáctica realizando fichas textuales y mapas conceptuales para archivar en el portafolio. los requerimientos mínimos de hardware y software para su correcto funcionamiento y los comandos básicos para su implementación. a continuación se presenta una relación de sus principales componentes: java Gestor de aplicaciones Java.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Esta herramienta es el intérprete de los archivos de clase generados por el javac (compilador). Sustentación individual de los programas desarrollados. CAPÍTULO 4 Requerimientos de software Este capítulo presenta las herramientas necesarias para la construcción y ejecución de programas en el lenguaje de programación JAVA. Los enunciados serán entregados por el tutor indicando las fechas y condiciones de entrega. Pequeño Grupo Colaborativo Desarrollo de tres (3) ejercicios de programación aplicando algoritmos de graficación en JAVA. Socialización de los productos individuales y en pequeño grupo colaborativo. para repasar los conceptos básicos y probar los algoritmos codificados en JAVA. javac Compilador de aplicaciones Java. Lección 16 JDK El JDK (Java Development Kit) comprende todas las herramientas necesarias para la programación en JAVA. allí deberá hacer clic en el enlace de descarga y seleccionar el instalador correspondiente a su sistema operativo. javadoc Generador de documentación. genera automáticamente la documentación del código fuente desarrollado a partir de los comentarios insertados en cada archivo. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica bytecode de Java.html.oracle. jar Archivador. Figura 29 Descarga del Instalador JDK . permite empaquetar en un único archivo JAR las librerías de clase empleadas en un programa desarrollado. 16.1 Instalación de la herramienta Para realizar la instalación del JDK de JAVA es necesario descargarlo desde la página http://www.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. appletviewer Esta herramienta es empleada para ejecutar y depurar aplicaciones Java sin necesidad de un navegador web.com/technetwork/java/javase/downloads/index. out. // Declaración del constructor de la clase // Instrucciones (solo muestra un texto en pantalla) } // Fin del constructor public static void main(String[] args) { // Declaración del método principal nclase prueba = new nclase(). } // Creación de una instancia de la clase // Fin del método principal } // Fin de la clase Algunos apuntes para programar en Java:     El lenguaje de programación Java es fuertemente tipado por lo cual debe prestarse mucha atención a los nombres de librerías. o No puede emplear palabras reservadas (ej. Al documentar el código fuente se suelen emplear comentarios. estos se pueden emplear de la siguiente manera: o Comentarios de una sola línea: // comentario o Comentarios de más de una línea: /* comentarios… */ o Comentarios de documentación: /** comentarios… */ Una sentencia es una instrucción que se le da al programa para realizar una tarea específica. toda sentencia debe finalizar con “. un método o una función. . // Declaración de librerías de clase a emplear //package prueba.*. una variable.print("Texto a mostrar"). utilizadas por el lenguaje).*. o Puede contener pero no iniciar por números.awt.awt. o No puede contener espacios en blanco. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Lección 17 Estructura básica de un programa en JAVA El desarrollo de un programa en JAVA requiere los siguientes componentes básicos en su estructura: import java. Un identificador es el nombre que identifica a una clase. // Declaración del paquete contenedor public class nclase { // Declaración de la clase (nombre de la clase) public nclase() { System. estos siguen las siguientes reglas: o Debe iniciar con una letra. comandos etc. (distinguiendo mayúsculas y minúsculas).” ej. el carácter subrayado (_) o signo peso ($). clases.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. import java. '5'.1 Tipos de datos primitivos Java soporta los siguientes tipos de datos: boolean Comprende dos valores true o false. 'ó'. int y double. Valores desde -215 hasta 215-1 (-32768 a 32767) int Tamaño 32 bits. . Caracteres En Java los caracteres no están limitados a los presentes en la tabla ASCII.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. empleados para representar caracteres de control o caracteres que no se imprimen. son Unicode.40239846e–45f a 3. Una secuencia de escape está formada por la barra invertida (\) y un caracter. 18.) Sin embargo los tipos de datos mayormente empleados en la programación básica con JAVA son boolean.40282347e+38f) double Tamaño 64 bits. El tipo de dato char se emplea para almacenar estos caracteres. Números en coma flotante de doble precisión. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Lección 18 Tipos de datos y variables 18. La siguiente tabla presenta las secuencias de escape más utilizadas. (de 4. Un tipo especial de caracteres comprenden la secuencia de escape.2.7976931348623157e+308d.94065645841246544e–324d a 1. byte Tamaño 8 bits. char Caracteres Unicode de 16 bits Los caracteres alfa-numéricos son los mismos que los ASCII con el bit alto puesto a 0. Estándar IEEE 754-1985 (de 1. Un caracter se presenta siempre entre comillas simples ej. Valores desde -263 hasta 263-1 (-9223372036854775808 a 9223372036854775807) float Tamaño 32 bits. Valores desde -231 hasta 231-1 (-2147483648 a 2147483647) long Tamaño 64 bits. Valores desde -27 hasta 27 -1 (-128 a 127) short Tamaño 16 bits. Estándar IEEE 754-1985. 'A'. Números en coma flotante de simple precisión. Valores desde 0 hasta 65535 (valores de 16-bits sin signo). etc. int. short. Ej. las variables enteras se enuncian en java con las palabras reservadas (int. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica \r Retorno de carro (hace que se mueva el cursor a la primera posición de una línea) \t Tabulador horizontal (genera un espacio de separación entre caracteres) \n Nueva línea (indica el final de una línea de texto y el paso a la siguiente). enteras Una variable entera corresponde a cualquier combinación de cifras precedida por el signo más + (opcional).3f.3 Variables booleanas Una variable booleana solamente puede guardar uno de los dos posibles valores: true (verdadero) y false (falso). Sin embargo existen multiples alternativas independientes. o el signo menos -. float var1 = 4. \\ Escribe una barra invertida. en coma flotante Las variables del tipo float o double (coma flotante) se emplean para almacenar valores que poseen parte entera y parte decimal. su valor permanece y no es posible modificarlo durante la ejecución del programa.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. para los positivos.5. Lección 19 IDE para JAVA El JDK (Java Development Kit) de Java presentado previamente no contiene un IDE (Integrated Development Environment . final int VAR1=256. . Ej. Valores constantes Cuando se declara una variable de tipo final. int var1 = -254. para los negativos. boolean var1 = true. byte.Entorno de desarrollo integrado). long) según la longitud de los valores a contener. Ej. double var1 = 3. A continuación se presentan algunas de los IDE para JAVA más populares: IntelliJ IDEA: Considerado uno de los mejores entornos de desarrollo. Ej. posee soporte para multiples lenguajes de programación. 18. UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 30 Entorno del IDE intelliJ IDEA Las siguientes son algunas de sus principales características:          Asistencia inteligente de codificación Generación de código Estilo de código Documentación de código Navegación y búsqueda Análisis de código sobre la marcha Propiedades del editor de archivos Diseñador de GUI Swing Diagramación de clases UML Eclipse: Entorno de desarrollo integrado de código abierto multiplataforma. el entorno de desarrollo integrado (IDE) de Eclipse emplea módulos (plug-in) para . Figura 31 Entorno del IDE Eclipse Las siguientes son algunas de sus principales características:      Editor de texto con resaltado de sintaxis Compilación es en tiempo real Control de versiones con CVS Integración con Ant Asistentes (wizards) para creación de proyectos . las necesite el usuario o no.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. a diferencia de otros entornos monolíticos donde las funcionalidades están todas incluidas. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica proporcionar toda su funcionalidad al frente de la plataforma de cliente enriquecido. El SDK de Eclipse incluye las herramientas de desarrollo de Java. Esto permite técnicas avanzadas de refactorización y análisis de código. ofreciendo un IDE con un compilador de Java interno y un modelo completo de los archivos fuente de Java. UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. . Cada módulo provee una función bien definida. Todas las funciones del IDE son provistas por módulos. permitiéndole al usuario comenzar a trabajar inmediatamente. Debido a que los módulos pueden ser desarrollados independientemente. una comunidad en constante crecimiento. NetBeans contiene todos los módulos necesarios para el desarrollo de aplicaciones Java en una sola descarga. Figura 32 Entorno del IDE Netbeans Modularidad. tales como el soporte de Java. y con cerca de 100 socios en todo el mundo. Sun MicroSystems fundó el proyecto de código abierto NetBeans en junio de 2000 y continúa siendo el patrocinador principal de los proyectos. Un módulo es un archivo Java que contiene clases de java escritas para interactuar con las APIs de NetBeans y un archivo especial (manifest file) que lo identifica como módulo. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Netbeans: NetBeans es un proyecto de código abierto de gran éxito con una gran base de usuarios. las aplicaciones basadas en la plataforma NetBeans pueden ser extendidas fácilmente por otros desarrolladores de software. o soporte para el sistema de control de versiones. La plataforma NetBeans permite que las aplicaciones sean desarrolladas a partir de un conjunto de componentes de software llamados módulos. Las aplicaciones construidas a partir de módulos pueden ser extendidas agregándole nuevos módulos. edición. UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Es rápido. tales como:    Gestión de proyectos Plantillas de proyecto Finalización de código . Es la herramienta perfecta para los programadores de todos los niveles Figura 33 Entorno del IDE JCreator Figura 34 Pestañas y resaltado de sintaxis en JCreator JCreator posee una amplia gama de funcionalidades. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica JCreator: JCreator es una herramienta de desarrollo para JAVA. eficiente y confiable. exe.1 Compilación Al emplear la herramienta de compilación.htm.jcreator. JCreator identifica automáticamente el archivo con el método principal o el archivo html cargador del applet de Java. a continuación se presenta la ubicación de dichas herramientas en el entorno del IDE: 20. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica     interfaz de depuración Editor con resaltado de sintaxis Asistentes Interfaz de usuario totalmente personalizable Con JCreator es posible compilar o ejecutar directamente el programa Java sin necesidad de activar el documento principal.org/download. Para el desarrollo de las actividades prácticas del presente curso se recomienda el empleo de JCreator (versión LE). Figura 35 Descarga del Instalador de JCreator Lección 20 Compilación y ejecución Empleando el IDE JCreator se tiene acceso a las herramientas de compilación y ejecución de un programa en JAVA. JCreator hace el llamado al compilador de JAVA ejecutando el programa javac.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. allí deberá seleccionar el instalador correspondiente a su sistema operativo y hacer clic en el enlace de descarga. . Para realizar la instalación del JCreator es necesario descargarlo desde la página http://www. se genera un nuevo archivo en el directorio original con la extensión . 20.exe.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. el recuadro de la derecha presentará el mensaje de error generado indicando el número de fila correspondiente. el cual puede ser interpretado ejecutando el programa java. Si el programa es compilado efectivamente.2 Ejecución Una vez compilado el programa en JAVA. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 36 Acceso a la herramienta de compilación en JCreator En caso de presentarse errores durante la compilación. Figura 37 Acceso a la herramienta de ejecución en JCreator Los mensajes de salida producidos por la ejecución del programa serán visualizados en el recuadro de la derecha (General output). el recuadro enunciará “Process completed”.class. . circunferencias y arcos. Simetría e invariancia geométrica: Esta especificación se refiere a que un método de discretización debe producir resultados equivalentes si se modifican algunas propiedades geométricas de la primitiva que se está discretizando. Segmentos de recta: Son esenciales para la mayor parte de las entidades. Polígonos: Son indispensables para representar entidades sólidas. Debe ser uniforme. Debe pasar por la discretización del primer y último punto del segmento. podemos mencionar las siguientes: Apariencia: Es la especificación más obvia. Su discretización es directa. es indispensable contar con criterios que permitan evaluar y comparar las ventajas y desventajas de las distintas alternativas. Es muy difícil escoger un conjunto de primitivas gráficas que sea adecuado para la representación de todo tipo de entidades gráficas. Sin embargo. Se especifican con la posición de su centro y su radio. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica CAPÍTULO 5 Algoritmos básicos En este capítulo se revisan los fundamentos geométricos y matemáticos a partir de los cuales se generan los algoritmos que dibujan primitivas gráficas como líneas.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Se especifican a partir de un par de puntos que representan sus extremos. Lección 21 Especificación de una discretización En el momento de escoger un método de discretización para una primitiva gráfica. el siguiente subconjunto resulta suficiente en la práctica: Puntos: Se especifican a partir de su localización y color. Circunferencias: En algunos casos representar entidades curvadas con segmentos poligonales puede ser inadecuado o costoso. Tampoco debe tener discontinuidades. Se representan a partir de la secuencia de puntos que determina la poligonal de su perímetro. por lo que en la prácticas las circunferencias o círculos se adoptan como primitivas. Para su desarrollo se utilizó el capítulo correspondiente del texto de Claudio Delrieux y se complementa con la codificación en Java de los algoritmos. Normalmente se espera que un segmento de recta tenga una “apariencia recta” más allá de que se hallan escogido los pixels matemáticamente más adecuados. Entre todas las especificaciones posibles. Por . etc. aunque no es fácil describirla en términos formales. como se mencionó con anterioridad. se supone que:    x = (x1 . pero que al mismo tiempo se pueden generalizar a todos los demás casos por medio de simetrías.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. lo más adecuado es caracterizar matemáticamente a dicha primitiva. dado un pixel que pertenece a la discretización de la primitiva. denominado DDA (discrete diference analyzer) consiste en plantear la ecuación diferencial de la primitiva a discretizar. y0) a (x1.1 Métodos de discretización Dada una primitiva gráfica a discretizar. Dichos casos surgen de suposiciones específicas que simplifican el problema. y1). etc. Lección 22 Segmentos de recta El análisis de los métodos de discretización de rectas parte de considerar el comportamiento esperado en determinados casos particulares. Para ello.x0 )  0. y luego evaluar dicha expresión a intervalos adecuados. y x  y. o si es rotado. cuál es el próximo pixel que minimiza una determinada expresión que evalúa el error que comete la discretización. y = (y1 . Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica ejemplo.y0 )  0. . en momentos en que las posibilidades del hardware y software eran muy limitadas. los métodos tienden a no depender de estructuras complejas y a ser directamente implementables en hardware específico de baja complejidad. 21. debemos encontrar los pixeles que la representen de la manera más correcta posible. la discretización de un segmento no debe variar si dicho segmento se traslada a otra localización en el espacio. Simplicidad y velocidad de cómputo: Como los métodos tradicionales de discretización de primitivas se desarrollaron hace tres décadas. Por lo tanto. de modo que su discretización pueda efectuarse en forma sencilla. los resultados eran muy sensibles al uso de memoria u operaciones aritméticas complejas. Análisis del error: Estos métodos fueron desarrollados por Bressenham y se basan en analizar. Entre los diversos métodos que pueden plantearse destacamos los dos siguientes: Evaluar su ecuación diferencial a diferencias finitas: Este método. Dado un segmento de recta que va de (x0. y1). si bien es trivial.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. la ecuación diferencial es: El método busca encontrar una secuencia de n + 1 puntos tales que (x0.yn) = (x1. Esto significa que es equivalente transformar los extremos del segmento y discretizar el segmento transformado. donde el origen es el pixel que corresponde a la discretización del punto (x0.y0) y la zona sombreada a los lugares donde puede ubicarse el punto (x1. Un valor muy pequeño determina que muchas muestras producirán puntos que serán discretizados al . Dada la ecuación diferencial y un incremento finito arbitrario .y0) = (x0. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Esto equivale a trabajar en el “octavo” del espacio de pantalla sombreado en la Figura 38. … (xn. La discretización de cada uno de ellos son los pixeles de la discretización del segmento. o discretizar primero y transformar cada punto obtenido.1 Segmentos de recta DDA Como ya se mencionó. los métodos DDA evalúan la ecuación diferencial de la primitiva a intervalos finitos. Figura 38 Espacio designado para caracterizar la discretización de rectas 22. (x1.y0). Esta propiedad.y1). Sin embargo. podemos pasar de un pixel dado de la secuencia al siguiente por medio de la expresión  determina la “frecuencia” de muestreo del segmento. la primera alternativa es mucho más eficiente.y1 ). es de gran importancia porque determina que la discretización de un segmento de recta es invariante frente a transformaciones afines. En el caso particular de los segmentos de recta. dado que la secuencia tiene n + 1 puntos). se toma el color como un objeto de tipo Color que puede ser de los preterminados de Java o creado a partir de los parámetros r. Obsérvese que se computan las variables en punto flotante. Observese que los puntos extremos (x0. Esta llamada al método setColor permite modificar el color del “lápiz” que dibuja sobre el contexto gráfico. la discretización tiene tantos pixeles como longitud tiene el segmento en la variable que más varía (más uno. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica mismo pixel. Al mismo tiempo es fácil ver que En la Figura 39 es posible ver el resultado de discretizar un segmento particular por el método DDA. .y1) son en efecto puntos y por lo tanto están ubicados en cualquier lugar dentro del pixel que corresponde a su discretización. Un pequeño paréntesis para explicar algunas sentencias que pueden causar dudas: 1.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. b. y0) a (x1. Un valor práctico es elegir x = 1 y por lo tanto n = x. Figura 39 Discretización de un segmento de recta con DDA Un algoritmo sencillo escrito en lenguaje Java que computa la discretización de un segmento de recta por el método DDA se muestra en la Figura 40. Por el contrario. corresponde al contexto gráfico de la ventana (algo así como un lienzo) sobre el cual se dibuja. y que además se requiere una división en punto flotante que corresponde al cálculo de m. 2. g. es decir. La llamada al método setColor (línea 34) permite modificar el color actual con el cual se está dibujando. Sobre el parámetro Graphics g (línea 26). un valor muy grande determinaría que el segmento aparezca “punteado” en vez de ser continuo como corresponde. Java no tiene una sentencia básica para dibujar puntos (pixeles).x0 )  0. Si por ejemplo no se cumple que y = (y1 . 4. caso que el algoritmo de la Figura 40 realiza automáticamente. que en su ejecución se traduce a pintar un único pixel ubicado en el punto enviado como parámetro. entonces es necesario intercambiar los roles de las variables x e y (simetría C).UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. La ejecución del algoritmo daría como resultado algo similar a lo mostrado en la Figura 41 para 3 líneas diferentes. Cualquier combinación de situaciones se puede resolver con combinaciones de simetrías (ver Figura 42). . entonces es Figura 41 Ejecución del algoritmo DDA necesario decrementar a x en el ciclo e iterar en Java mientras no sea menor que x1 (simetría B). si x = (x1 . En la misma sentencia g. Para poder discretizar un segmento de recta en cualquiera de las posibilidades es necesario considerar las simetrías que se aplican. Por último. en este caso se utiliza la sentencia g. En cambio.drawRect (línea 35) se utiliza el “casting” a enteros para lograr la discretización de las coordenadas flotantes.y0)  0. entonces hay que considerar pendientes negativas (simetría A). Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 40 Codificación en Java del algoritmo DDA de dibujo de líneas 3. si no se cumple que x  y.drawRect (línea 35) para dibujar un rectángulo con un ancho y alto de 0. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 42 Simetrías para discretizar segmentos de recta 22. Esto significa que (x0. La decisión de ir hacia el paso E o D se toma en función del error que se comete en cada caso. o el ubicado en diagonal hacia la derecha y hacia abajo (D o “en diagonal”) como se muestra en la Figura 43. y1). entonces es conveniente efectuar la llamada al algoritmo luego de discretizar los extremos. El punto de partida del análisis es el siguiente.y por lo tanto x y y son enteros. y por lo tanto. En este algoritmo se considera que el error es la distancia entre el . Figura 43 Si p pertenece a la discretización el próximo punto será E o D Luego. su ejecución es más rápida y económica. y0) y (x1. entonces en las condiciones particulares mencionadas.2 Segmentos de rectas por Bressenham En el algoritmo DDA para segmentos de recta es necesario computar sumas entre las variables en punto flotante. y es de fácil implementación con hardware específico. el próximo pixel solamente puede ser el ubicado a la derecha (E o “hacia el este”). si p es un pixel que pertenece a la discretización del segmento.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. y además se requiere una división en punto flotante para computar la pendiente. El mérito del algoritmo que vamos a presentar consiste en que todas las operaciones se realizan en aritmética entera por medio de operaciones sencillas. Si la discretización de los puntos extremos del segmento debe pertenecer a la discretización del segmento. UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. multiplicamos el error por 2x. pasa más cerca del pixel E (ver Figura 45).5   2y  x  x    Paso a E : e = e+2y Paso a D: e = e+2(y-x) . multiplicar el error por una constante no afecta el resultado. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica centro del pixel elegido y el segmento de recta. medida en dirección del eje Y positivo del espacio de pantalla (es decir.5 entonces el segmento de recta pasa más cerca del pixel D. entonces al ir hacia E el error pasa a ser m (la pendiente del segmento). Por lo tanto. Expresado de otra manera. Si el error en p fuese cero.5 entonces en cada paso hay que chequear e >0 para elegir D.1 (ver Figura 44). Como se evalúa el error por cero. Figura 44 Error al desplazarse en E Figura 45 Elección del próximo pixel En general. Es fácil ver que si se inicializa el error en e = m – 0. hacia abajo). la actualización del error es:   Paso a E : e = e + m Paso a D : e = e + m –1 Por lo tanto. se constatan las siguientes igualdades:  y  e0  2x  0. si en p el error es e. A partir de dicho cambio. sea e el error en un determinado pixel. La otra economía proviene de realizar manipulaciones algebraicas para efectuar un cómputo equivalente pero en aritmética entera. y en D el error pasa a ser m . y si no. la elección del paso E o D depende de que el valor absoluto de e+m sea o no menor que el valor absoluto de e+m-1. Una de las economías de cómputo del método proviene de poder evaluar el error preguntando por cero. Si e +m> 0. Teniendo en cuenta que los productos por 2 en aritmética entera se efectúan con un desplazamiento a izquierda. Lección 23 Discretización de circunferencias Como en el caso de los segmentos de recta.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Igualmente se dispone de algoritmos DDA y de Bressenham para el dibujo de circunferencias. Figura 46 Algoritmo de Bressenham para segmentos de recta La implementación del algoritmo de Bressenham para segmentos de recta se muestra en la Figura 46. En este aparte se mostrará una adaptación del algoritmo DDA a partir de la ecuación de la circunferencia. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica De esta manera todas las operaciones se efectúan en aritmética entera. tomado de la página internet de Roberto Albornoz. en la discretización de circunferencias o círculos es posible trabajar un sólo segmento de la circunferencia y se obtienen las demás por simetría. con su correspondiente agilización del tiempo de procesamiento. Para poder realizar el dibujo de la circunferencia usaremos las ecuaciones de la circunferencia en coordenadas polares que son: x  r * cos  y  r * sen  . es posible observar que el mismo utiliza operaciones elementales e implementables con hardware específico muy sencillo. UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas, Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Estas ecuaciones serán las que ocuparemos para calcular cada punto (x,y) del círculo, donde el r será obviamente el radio de círculo y  será el ángulo que forma el radio con la parte positiva del eje x. En forma gráfica sería así: Figura 47 Circunferencia con coordenadas polares El ángulo deberá estar en radianes ya que las funciones de seno y coseno que incluye Java, trabajan con los ángulos en radianes. La fórmula para transformar grados a radianes es la siguiente: radianes  gra dos *  180 Entonces para dibujar el círculo de un radio determinado, solamente tenemos que hacer un ciclo desde 0 hasta 360, pero con incrementos pequeños, calcular cada punto con las ecuaciones en coordenadas polares e ir dibujando cada punto. El ciclo en vez de ir de 0 a 360 (ángulos en grados) irá de 0 a 6.28 (360*3.14/180=6.28) ya que el ángulo debe estar en radianes. Como dijimos el ciclo de 0 a 6.28 debe hacerse con incrementos pequeños, no contando de uno en uno, ya que para un círculo de radio muy grande, podrían aparecer huecos entre un punto y el siguiente, por lo tanto tenemos que usar un incremento fraccionario. El valor 0.005 produce buenos resultados. Dibujar el círculo punto a punto es una tarea un poco lenta, debido a que se debe calcular en cada punto el seno y el coseno del ángulo, y estas funcionas son muy lentas. Para solucionar esto se pueden crear tablas predefinidas o pre-calculadas. En la siguiente figura se muestra el código en Java que permitiría dibujar el círculo en una ventana. UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas, Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 48 Código en Java para el dibujo de circunferencias Nótese que al calcular las coordenadas x e y, estamos sumándoles las coordenadas cx e cy. Esto se hace para trasladar el centro del círculo a cualquier punto que queramos. De esta forma, para dibujar un círculo solamente es necesario especificar las coordenadas del centro (cx, cy), el radio, el color del círculo y el contexto gráfico. Figura 49 Resultado de la ejecución del algoritmo dibujo de circunferencias Lección 24 Dibujo de polígonos Se considera un polígono una figura cerrada, formada a partir de varias líneas. Para la discretización de polígonos se considerarán 2 tipos de polígonos: los irregulares y los regulares, en concordancia con lo mostrado por Steven R Davidson en su curso de gráficos disponible en internet. 24.1 Polígonos irregulares La graficación de polígonos irregulares se realiza a partir de un conjunto de puntos que se unen secuencialmente, el polígono se cierra al unir el primer y último puntos. A continuación se muestra el código Java que dibujaría un polígono irregular a partir de un vector de elementos de tipo Punto y el correspondiente número de puntos. UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas, Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 50 Código en java para el dibujo de polígonos Figura 51 Resultado de la ejecución del algoritmo de dibujo de Polígonos Cabe recordar que en Java, al igual que en C, el índice de los vectores inicia en 0. Por tanto, la primera línea se dibuja desde el primer punto (índice 0) hasta el segundo punto (índice 1), continúa del segundo al tercero (índice 2) y así sucesivamente, hasta dibujar la línea del penúltimo punto (índice N-2) hasta el último punto del vector (índice N-1). Al finalizar el ciclo, dibuja la línea de cierre del polígono entre el último punto (índice N-1) y el primero (índice 0). Como se podrá deducir del código el objeto Punto incluye las coordenadas x e y de un punto en el plano cartesiano. 24.2 Polígonos regulares Un polígono regular se compone de aristas/lados de igual longitud. Esto implica que el ángulo entre cada arista contigua es el mismo. Si trazamos un segmento del centro a un vértice y otro segmento del centro a otro vértice contiguo, entonces el ángulo entre estos dos segmentos es un divisor de 2π = 360°. En otras palabras, cada ángulo mencionado es inversamente proporcional a la cantidad de lados del polígono regular. Podemos usar la siguiente fórmula:  α = 2π / N, donde α es el ángulo, y N es la cantidad de lados Crearemos polígonos regulares en base a una circunferencia que circunscribe nuestro polígono regular. Esto implica, que el centro de la circunferencia coincide con el centro geométrico de cualquier polígono regular. Para esto, necesitamos usar algunas funciones trigonométricas, junto con el ángulo ya calculado. El paso 2. conseguimos mover el centro geométrico del origen (0.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica principal es averiguar la coordenada del siguiente vértice de nuestro polígono. Al agregar el centro a nuestra fórmula.1..N-1. el radio de la circunferencia (radio). En la Figura 52 se muestra el código que generaría los polígonos regulares. el punto centro de la circunferencia (centro). . Figura 52 Código en java para dibujar polígonos regulares Los parámetros de entra para el método especifican el número de lados del polígono (N).. y  c = (cx..  r es el radio de la circunferencia..0) al que nosotros deseemos. el contexto gráfico (g) y el color. Usaremos las siguientes fórmulas:  x i = cx + r * cos( i*α )  y i = cy + r * sen( i*α ) donde:  i = 0. cy) es la coordenada del centro geométrico de la circunferencia y del polígono. ya que las coordenadas de los puntos se deben expresar como datos enteros.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Por lo tanto el triángulo será la base del análisis de la conversión scan de polígonos en general. que se basa en encontrar la intersección de todos los lados del polígono con cada línea de barrido (a y constante). Para computarla es necesario dimensionar dos arreglos auxiliares de enteros minx. maxx que para cada línea de barrido almacenarán el menor y mayor x respectivamente. Este método es de gran importancia porque se generaliza a una clase de algoritmos denominados scan-line para resolver determinados problemas de iluminación y sombreado en tres dimensiones. algoritmo para dibujar polígonos regulares Lección 25 Llenado de áreas Si bien existen diversos métodos. Finalmente. Los datos así calculados se utilizan en la conformación de cada vértice del polígono (línea 48). una vez obtenidas las coordenadas de todos los vértices del polígono se realiza la llamada al proceso de dibujarPolígonos explicado Figura 53 Resultado de la ejecución del en la sección anterior (línea 50). por lo que el método se denomina conversión scan del polígono. aquí presentaremos el más económico y difundido. . Todo polígono plano puede descomponerse en triángulos. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Observe que es necesario hacer un proceso de conversión a entero del dato resultante en la multiplicación del coseno del ángulo por el radio (líneas 46 y 47). Un animador puede modificar la posición de un personaje. Los números son susceptibles a las operaciones matemáticas denominadas transformaciones. a partir de lo mostrado por el euitmt WWW team de la Universidad de Oviedo. Se espera que el estudiante en su proceso de profundización realice los algoritmos que permitan hacer estas transformaciones. En esta sección se presentan los principales fundamentos matemáticos que subyacen al proceso de transformación de los gráficos en dos dimensiones. Estos cambios son fáciles de realizar porque la imagen gráfica ha sido codificada en forma de números y almacenada en el interior del ordenador. graficar una línea de minx[y] a maxx[y]. etc. Para cada y activo. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 54 Dibujo scan de un polígono 1. también se desea moverlos. así como se desean dibujar gráficos. Discretizar cada arista del triángulo (con DDA o Bressenham) reemplazando la sentencia de dibujado por  if (x>maxx[y]) maxx[y]=x. Un gerente puede cambiar la escala de las gráficas de un informe. 3. 2. rotarlos. Inicializar minx a infinito y maxx a menos infinito. Un arquitecto puede ver un edificio desde distintos puntos de vista. . Un cartógrafo puede cambiar la escala de un mapa.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. CAPÍTULO 6 Transformaciones Naturalmente. cambiar su tamaño. Una de las mayores virtudes de los gráficos generados por ordenador es la facilidad con se pueden realizar algunas modificaciones sobre las imágenes.  if (x<minx[y]) minx[y]=x. por ejemplo: son cuatro matrices diferentes. donde es normalmente más fácil modificar una pequeña porción del dibujo que crear un dibujo completamente nuevo. Esto supone un complemento muy útil para las técnicas de dibujo manual. Lección 26 Breve repaso sobre matrices Las imágenes gráficas que se han generado están compuestas por un conjunto de segmentos que están representados por las coordenadas de sus extremos. como se expresan de una forma sencilla mediante multiplicaciones de matrices y se introducirán las coordenadas homogéneas con el fin de tratar de una manera uniforme las transformaciones y como anticipo de las transformaciones producidas por la perspectiva en los modelos tridimensionales. es necesario repasar algunas de las herramientas matemáticas que se necesitarán. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Las transformaciones permiten alterar de una forma uniforme toda la imagen. consideraremos que una matriz es un conjunto ndimensional de números. Es un hecho que a veces es más fácil modificar toda la imagen que una porción de ella. la traslación y la rotación. Antes de ver algunas de las posibles transformaciones. Algunos cambios en la imagen pueden ser fácilmente realizados mediante la aplicación de algunas operaciones matemáticas sobre estas coordenadas. como la multiplicación de matrices.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Para nuestro propósito. Es esta sección se verán transformaciones geométricas como el cambio de escala. . Supongamos que se define la matriz A como: Entonces el elemento situado en la segundo fila y la tercera columna será A[2][3] y tendrá un valor de 6. no importa cuales multipliquemos primero. Al contrario que la multiplicación de números. Esto significa que si tenemos varias matrices para multiplicar a la vez.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. la multiplicación de matrices no es conmutativa. aunque podemos multiplicar A por B no podemos multiplicar B por A. a partir del ejemplo. es decir. produciendo como resultado unos cálculos más eficientes. La multiplicación de matrices es algo más complicada que la simple multiplicación de dos números. Esta matriz producto tendrá el mismo número de filas que la primera de las matrices que se multiplican y el mismo número de columnas que la segunda. De forma matemática: A(BC) = (AB) C Esta es una propiedad muy útil ya que permitirá combinas varias transformaciones gráficas en una sola transformación. por que B tiene sólo dos columnas que no se corresponden con las tres filas de A. es decir. Por ejemplo. la multiplicación de la matriz A3x3 con la matriz B3x2 da como resultado la matriz C3x2. supone varios productos sencillos y sumas de los elementos de la matriz. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica La operación matricial que más se empleará será la multiplicación de matrices. No todas las parejas de matrices pueden ser multiplicadas. Se pueden multiplicar dos matrices A y B si el número de columnas de la primera matriz A es igual al número de filas de la segunda matriz B. Los elementos de la matriz producto C se expresan en función de los elementos de las matrices A por B mediante la siguiente fórmula: En nuestro caso particular de C = A B La multiplicación de matrices es una operación asociativa. Cuando multiplicamos dos matrices se obtiene como resultado otra matriz. . si escogemos como matriz A la última que hemos visto y como matriz B la siguiente: Entonces podemos multiplicar A por B porque la primera tiene tres columnas y la segunda tres filas. Sin embargo. Por tanto. Por ejemplo De forma matemática A = AI Lección 27 Cambios de escala ¿Cómo se aplica todo esto a los gráficos? Bueno. Son matrices cuadradas (tienen el mismo número de columnas y de filas) con todos los elementos 0 excepto los elementos de la diagonal principal. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Existe un conjunto de matrices que cuando multiplican a otra matriz.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Las líneas horizontales serán dos veces más largas en la nueva imagen. la matriz T es una aplicación entre el punto original P1 y el nuevo punto P2. si escogemos la matriz entonces Cada una de las nuevas coordenadas x tiene el doble de valor que las antiguas. que valen todos 1. escogemos la matriz identidad entonces la imagen no se verá alterada. por supuesto. consideremos un punto P1=[x1 y1] como una matriz de 1x2. Si la multiplicamos por una matriz T2x2. obtendremos otra matriz que puede ser interpretada como otro punto. ¿Qué pasará si transformamos cada uno de los puntos mediante una multiplicación por una matriz T y dibujamos el resultado? ¿Qué aspecto tendrá esta nueva imagen? La respuesta. la reproducen. Si. La nueva imagen tendrá la misma altura. Por esta razón reciben el nombre de matrices identidad. Si suponemos la imagen compuesta por los vértices de un polígono. . depende de los elementos de la matriz T. pero parecerá que la hemos estirado hasta alcanzar el doble del ancho original. por ejemplo. Se denominan transformaciones de escalado. y1) en (x2. Sea un punto p1=(x1. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica antes de la transformación después de la transformación En general. Para esto es necesario recordar las razones trigonométricas de seno y coseno. debemos saber primero que (x2. y2). y2). Lección 28 Rotación La siguiente transformación gráfica que vamos a ver es la rotación. antes de comprobar si alguna transformación es la adecuada. Ex es el factor de escala para la coordenada x y Ey es de la coordenada y. y1) y . Para introducir esta transformación recordaremos brevemente algunos conceptos trigonométricos. y1) y lo giramos alrededor del origen un ángulo  para pasar a una nueva posición p2=(x2. Pero. y2) debe escribirse en función de (x1. . Queremos encontrar la transformación que convierte (x1.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. las transformaciones de la forma Cambian el tamaño y la proporción de la imagen. A la vista de esta figura tenemos: Donde L es la distancia del punto al origen de coordenadas. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica A la vista de esta figura sabemos que Es importante señalar que cuando la longitud del segmento es la unidad También emplearemos las siguientes relaciones trigonométricas para determinar como gira un punto: Ahora estamos listos ya para determinar la rotación de un punto alrededor del origen.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Por otro lado: Que nos lleva a De forma análoga: . por último. con el fin de trasladar un imagen (Tx. Desplazar la imagen recibe el nombre de traslación. Si fuésemos capaces de trasladar toda la imagen de un punto a otro de la pantalla.. basta sustituir en la expresión anterior el valor del ángulo por . En general. Así nos queda Lección 29 Coordenadas homogéneas y traslación Supongamos que necesitamos realizar un giro alrededor de un punto que no es el origen.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. podríamos realizar este giro moviendo primero la imagen hasta que el centro de rotación coincida con el origen. cada punto (x1. Se realiza de una forma sencilla mediante la suma a cada punto de la cantidad que vamos a mover la imagen. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Dando A la vista de estas ecuaciones podemos imaginar una matriz que relacione las coordenadas del punto original y del punto girado: Así la matriz de transformación para una rotación en sentido contrario a las agujas del reloj de ángulo alrededor del origen es Para una rotación en el sentido de las agujas del reloj. y2) donde . luego realizamos la rotación y. Ty). y1) se convierte en uno nuevo (x2. devolvemos la imagen a su posición original. yw. lo veremos de forma general como anticipo de las transformaciones tridimensionales.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. En dos dimensiones su valor suele ser 1 para simplificar. los puntos están definidos por tres coordenadas y no por dos. en: . Tal combinación sería deseable. por lo tanto no podría ser combinada con las otras transformaciones mediante una simple multiplicación de matrices. usando coordenadas homogéneas. esta forma de describir la traslación no hace uso de matrices. En estas coordenadas. w). En el caso de la matriz de rotación en sentido anti-horario Se convierte. Sin embargo. No emplearemos la coordenada w hasta que no veamos las transformaciones tridimensionales de perspectiva. w) obtenemos Si dividimos ahora por el tercer valor w tenemos (Exx. Así un punto (x. introduciendo una coordenada auxiliar w. Este método recibe el nombre de coordenadas homogéneas. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Desafortunadamente. Sería deseable combinar estas tres transformaciones en una sola transformación por motivos de eficacia y elegancia. Las coordenadas x e y se pueden recuperar fácilmente dividiendo los dos primeros números por el tercero respectivamente. por ejemplo. yw. y) estará representado por la tripleta (xw. una rotación u otra traslación. En coordenadas homogéneas la matriz de cambio de escala se convierte en Si aplicamos esta matriz a un punto (xw. Eyy) que es el punto correcto cambiado de escala. hemos visto que la rotación alrededor de un punto que no sea el origen puede realizarse mediante una traslación. Una forma de hacer esto es emplear matrices 3x3 en vez de matrices 2x2. devolveremos el centro de rotación a su posición original. Haremos esta transformación en tres pasos. Ty en coordenadas homogéneas es Para comprobar que esto es así apliquemos la matriz a un punto genérico Que nos da el punto trasladado Lección 30 Rotación alrededor de un punto Determinemos ahora la matriz de transformación para la rotación en sentido antihorario alrededor del punto (xC. La traslación que desplaza al punto (xC. yC) al origen. Primero trasladaremos el punto (xC. por último. yC) al origen es . luego haremos la rotación alrededor del origen y. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Si aplicamos esta matriz a un punto (xw.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. yC). w) obtenemos Para dar el punto correctamente rotado La matriz de transformación para una traslación Tx. yw. 1 Otras transformaciones Las tres transformaciones de cambio de escala.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. teniendo en cuenta la propiedad asociativa de la multiplicación de matrices. rotación y traslación son las más útiles y las más usadas. 30. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica La rotación es Y la traslación que devuelve al centro de rotación a su posición es Para transformar un punto podemos realizar la siguiente multiplicación Pero. Son también posibles otras transformaciones. podemos multiplicar todas las transformaciones primero para obtener la matriz global de transformación Cabe destacar que esta matriz se puede formar también mediante una rotación inicial de ángulo  y una traslación definida por los valores contenidos en la tercera fila. Dado que una matriz 2x2 cualquiera . . aunque es mucho más fácil aplicar la matriz resultante. Las simetrías respecto a las rectas y=x e y=-x pueden realizarse mediante un cambio de escale y un giro posterior.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Puede convertirse en una matriz 3x3 en coordenadas homogéneas como Algunas de estas transformaciones como matrices 2x2: -1 0 0 1 Reflexión respecto al eje y 1 0 0 -1 Reflexión respecto al eje x -1 0 0 -1 Reflexión respecto al origen 0 1 1 0 Reflexión respecto a la recta y=x 0 -1 -1 0 Reflexión respecto a la recta y=-x 1 a 0 1 Deformación en el eje y 1 b Deformación en el eje x 0 1 Las primeras tres reflexiones son simples cambios de escala pero con factores negativos. Es posible realizar las deformaciones mediante una secuencia de rotaciones y cambios de escala. De igual forma se pueden construir transformaciones de cambio de escala y rotación a partir de las deformaciones. php Fecha de consulta: Diciembre de 2005.htm.htm Fecha de consulta: Septiembre de 2005.dc.com/programacion_grafica/prog_graf. Fecha de consulta: Octubre de 2005. [En línea] http://www. Introducción a la computación gráfica. Curso de gráficos con clase.net/curso/index. [En [En línea] línea] DELRIEUX. steven@conclase. Transformaciones 2 y 3 D.conclase.net C.13:36:26 .uniovi. Steven. Universidad Nacional del Sur. EUITMT WWW TEAM. Departamento de Ingeniería eléctrica. Claudio. Campus Mieres. Última modificación: 9 de Julio de 1999 .UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.geocities. [En línea] http://www. Programación gráfica en lenguaje http://www.uba.es/egi/dao/apuntes/.mieres. Universidad de Oviedo.ar/people/materias/cgr/util. http://graficos. Dibujo asistido por ordenador.org. DAVIDSON. Claudio@acm. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Fuentes documentales unidad 2 ALBORNOZ Roberto. y elipses y un mecanismo para renderizar virtualmente cualquier forma geométrica. Durante el primer capítulo de esta Unidad didáctica se cubrirán los tópicos correspondientes a la graficación en 2D mediante el uso del API 2D de Java. . El API 2D de Java proporciona:       Un modelo de renderizado uniforme para pantallas e impresoras. El lenguaje de programación Java proporciona como parte de su conjunto de clases fundamentales para la creación de interfaces gráficas de usuario.2 proporciona gráficos avanzados en dos dimensiones. texto. Un amplio conjunto de gráficos primitivos geométricos. Soporte para imprimir documentos complejos. a partir de la recopilación de dos documentos de internet que son magníficos puntos de referencia: El tutorial sobre gráficos en Java de Agustín Froufe y el curso de Java en Castellano traducido por Juan Antonio Palos (ozito). rectángulos. El API 2D de Java introducido en el JDK 1. como OpenGL son muy utilizadas por dos razones: su potencial y la libre distribución. un conjunto de clases denominado Java 2D. programas de dibujo sofisticados y editores de imágenes. En esta Unidad deseamos introducir el manejo de una API gráfico. texto e imágenes. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica UNIDAD 3 TRABAJANDO CON UN API GRÁFICA Introducción En los capítulos anteriores nos hemos acercado al mundo de la computación gráfica conociendo sus bases conceptuales y haciendo pequeños programas que permiten dibujar en la pantalla a partir de la unidad básica de dibujo: el píxel. y capacidades de manejo de imágenes para los programas Java a través de la extensión del AWT. Mecanismos para detectar esquinas de formas. texto e imágenes en un marco de trabajo flexible y lleno de potencia para desarrollar interfaces de usuario.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Este paquete de dibujo soporta líneas artísticas. algunas de ellas. Soporte de color mejorado que facilita su manejo. Como se mencionaba en la primera unidad las API gráficas proporcionan un conjunto de primitivas independientes del hardware que le facilitan el proceso de dibujo computacional. como curvas. Un modelo de composición que proporciona control sobre cómo se renderizan los objetos solapados. El API Java 3D proporciona una colección de constructores de alto-nivel para crear y manipular geometrías 3D y estructuras para dibujar esta geometría. Proporcionar al estudiante los lineamientos tecnológicos básicos que le permitan utilizar API gráficas en conjunto con lenguajes de programación de alto nivel. visualizaciones. . utilizando librerías gráficas y lenguajes de programación. partiendo de la conceptualización geométrica respectiva. Aunque se reconoce que la información que se proporciona es bastante limitada. Java 3D es una extensión estándar del JDK 2 de Java. En el segundo capítulo de esta Unidad se proporcionan los elementos fundamentales para asumir el estudio del API Java 3D. La implementación de buena parte de los ejemplos requiere que usted conozca con anticipación los fundamentos básicos de la clase Awt o Swing de Java. Java 3D proporciona las funciones para creación de imágenes.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. revise la sección de enlaces. Objetivos Programar ejercicios de llenado de áreas y transformaciones de figuras en dos dimensiones. los límites se los impone su creatividad y sus deseos de realizar nuevas cosas. especialmente en la generación de gráficos en dos dimensiones. Esta unidad final del curso de Computación Gráfica quiere acercarlo aún más a la visualización de gráficos computacionales. En la sección de Enlaces relacionados podrá encontrar enlaces con una gran cantidad de información adicional. proporcionando algunos ejemplos básicos. si quiere repasarlos. animaciones y programas de aplicaciones gráficas 3D interactivas. El API Java 3D es un interface para escribir programas que muestran e interactúan con gráficos tridimensionales. para ayudarlo a hacer volar su imaginación. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica En cuanto al dibujo (o renderizado) en 3D. Intencionalidades Formativas Propósitos Introducir al estudiante en el conocimiento de los principales algoritmos y estructuras de datos utilizados en Computación Gráfica. para el proceso de modelamiento y construcción de escenarios gráficos en 2D y 3D. Para el desarrollo de esta parte de la Unidad se ha recopilado nuevamente la información proporcionada por Juan Antonio Palos (ozito). en la programación de ejercicios que exigen la representación de gráficos en dos y tres dimensiones. Competencias El estudiante programa y emplea algoritmos que permiten dibujar las principales figuras geométricas en dos dimensiones.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. mediante la funcionalidad que proporciona el paradigma orientado a objetos y el API Java 2D. Identificar algunas de las potencialidades para el dibujo y animación de escenarios gráficos en tres dimensiones. El estudiante utiliza las principales clases proporcionadas por el API 2D y 3D de Java. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Emplear los fundamentos necesarios para la construcción de aplicaciones que presenten objetos gráficos en dos dimensiones. Utilizar y construir algoritmos para dibujo de gráficos en 2D y 3D. Describir el funcionamiento matemático y geométrico que permite el dibujo de gráficos en el computador. El estudiante conoce los fundamentos matemáticos de la representación de gráficos computacionales en dos dimensiones y utiliza algoritmos que las realizan. Mapa Conceptual de la Unidad . Metas Al finalizar esta unidad didáctica el estudiante estará en capacidad de:    Usar API gráficas para la construcción de gráficos computacionales. a partir de la programación de ejemplos básicos que utilizan el API Java 3D. Sustentación individual de los programas desarrollados en JAVA. glosario técnico y mapa conceptual de la unidad. . Consolidación de conceptos. Pequeño Grupo Colaborativo Desarrollo de un proyecto de programación utilizando texturas e iluminación con el API 3D. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Productos de Aprendizaje Individual    Lectura autorregulada de la Unidad Didáctica realizando fichas textuales y mapas conceptuales para archivar en el portafolio. Grupo de Curso    Por cada tipo de algoritmo que se estudia se realizará una práctica en computadores. para repasar los conceptos básicos y probar los algoritmos codificados en JAVA.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Los enunciados serán entregados por el tutor indicando las fechas y condiciones de entrega. Consultar en internet sobre los temas de la unidad y publicar preguntas en el foro de la unidad correspondiente para que sean solucionadas por el tutor o los compañeros. Socialización de los productos individuales y en pequeño grupo colaborativo. texto e imágenes de la Abstract Windowing Toolkit (AWT).1 Mejoras de gráficos.1 Características generales del API 2D de Java A continuación se presentan algunas de las características del API 2D de Java. El API 2D de Java también hace posible la creación de librerías gráficas avanzadas. A través de la clase Graphics. Como un paquete de dibujo simplificado. letra e imágenes. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica CAPÍTULO 7 Fundamentos del API 2D de JAVA Lección 31 Características generales del API 2D de Java 31. Además de sus mejoras en gráficos. Los APIs de Java Animation y Java Media Framework le proporcionan al API 2D de Java el soporte para el renderizado. además de la detección de formas y texto en formas geométricas arbitrarias y un modelo de dibujado (rendering) para impresoras y dispositivos de visualización. con . el API 2D de Java soporta mejoras para la definición y composición del color. el API 2D de Java puede utilizarse para crear y visualizar animaciones y otras presentaciones multimedia. texto e imágenes. 31. así como la creación de imágenes y de filtros para archivos gráficos. texto e imágenes Las últimas versionas del AWT proporcionaron un paquete simple para construir páginas comunes HTML. El API 2D de Java mejora las capacidades de gráficos. elipses y polígonos. haciendo posible el desarrollo de interfaces de usuario mejoradas y nuevos tipos de aplicaciones Java. Cuando se usa en conjunto con al Java Media Framework y otras APIs de Java Media. el AWT encapsuló casos específicos de conceptos de renderizado más general.1. El API 2D de Java provee una paquete de renderizado más flexible y con amplias características que expanden el AWT para soportar gráficos generales y operaciones de renderizado. es posible dibujar rectángulos.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. El Graphics2D incorpora el concepto de renderizado geométrico proporcionando un mecanismo para dibujar virtualmente cualquier forma geométrica. Igualmente. tales como librerías de CAD-CAM y de gráficos o librerías de efectos especiales para imágenes. pero no contemplaban características completas suficientes para dibujar gráficos complejos. a partir de la documentación proporcionada por Sun Microsystems para el J2SE. Como se muestra en el siguiente código: public void Paint (Graphics g) { Graphics2D g2 = (Graphics2D) g. 31.awt. Las curvas y los arcos también son implementaciones específicas de la interfaz Shape. rotación.Graphics2D. TexturePaint y Color. por ejemplo las figuras Rectangle2D y Ellipse2D. un nuevo tipo de objeto Graphics.1. el API 2D de Java presenta java. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica el API Java 2D es posible dibujar líneas con estilos. de Las regiones de clipping se definen por las mismas implementaciones de la interface Shape que se usan para definir regiones generales de clipping. incluyendo el escalado. } . que a su vez está definida por Shapes individuales. Graphics2D desciende de la clase Graphics para roporcionar acceso a las características avanzadas de renderizado del API 2D de Java. de cualquier ancho y formas geométricas rellenas con virtualmente cualquier textura. Un objeto Font se define como una colección de Glyphs. Para usar las características del API 2D de Java. GradientPaint..2 Modelo de Renderizado El mecanismo de renderizado básico es el mismo que en las versiones anteriores del JDK. El sistema de dibujo o renderizado controla cuándo y cómo dibuja un programa. Como ya se mencionó. tenemos que forzar el objeto Graphics pasado al método de dibujo de un componente a un objeto Graphics2D. por ejemplo AlphaComposite. Los rellenos y estilos de lápiz (denominado Filete en múltiples aplicaciones de dibujo) se proporcionan a través de implementaciones de las interfaces Paint y Stroke. Cuando un componente necesita ser mostrado. por ejemplo Rectangle2D y GeneralPath. traslación y recortado. La implementación AffineTransform define transformaciones lineales coordenadas 2D. se llama automáticamente a su método paint o update dentro del contexto Graphics apropiado. Las formas geométricas se proporcionan a través de implementaciones de la interfaz Shape. . Las composiciones de color se proporcionan por implementaciones de la interfaz Composite.. por ejemplo: BasicStroke.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. gradientes o patrones. recortado. el contexto de renderizado de Graphics2D contiene varios atributos. como draw o fill. Cómo muestra la siguiente figura. El estilo de lápiz que se aplica al exterior de una forma. podemos configurar este contexto y luego llamar a uno de los métodos de renderizado de la clase Graphics2D. . Se puede usar cualquier forma para definir un clip. Para mostrar texto. La transformación que se aplica durante el dibujado para convertir el objeto dibujado desde el espacio de usuario a las coordenadas de espacio del dispositivo. formas o imágenes.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. El estilo de composición se utiliza cuando los objetos dibujados se solapan con objetos existentes. También se pueden aplicar otras transformaciones opcionales como la traducción. Algunas aplicaciones de dibujo lo denominan filete. El estilo de relleno que se aplica al interior de la forma. Este atributo paint permite rellenar formas con colores sólidos. rotación escalado. a través de este atributo. La fuente se usa para convertir cadenas de texto. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Al conjunto de atributos de estado asociados con un objeto Graphics2D se le conoce como Contexto de Renderizado de Graphics2D. El Clip que restringe el dibujado al área dentro de los bordes de un Shape se utiliza para definir el área de recorte. Este atributo stroke permite dibujar líneas con cualquier tamaño de punto y patrón de sombreado y aplicar finalizadores y decoraciones a la línea. 31. es posible especificar que se desea usar antialiasing. fill Dibuja cualquier forma geométrica primitiva rellenado su interior . se usan los métodos setAttribute. Graphics2D contiene referencias a sus objetos atributos. es necesario llamar al método set para notificarlo al contexto.30f. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Punto de Renderizado que especifican las preferencias en cuanto a velocidad y calidad. g2. para cambiar el atributo paint a un relleno de gradiente azul-gris.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. si está disponible. deberíamos construir el objeto GradientPaint y luego llamar a setPaint. La modificación de un atributo de un objeto durante el renderizado puede causar comportamientos impredecibles. texto o imagen. Si se modifica un objeto atributo que forma parte del contexto Graphics2D. Para configurar un atributo en el contexto de renderizado de Graphics2D.setPaint(gp). Por ejemplo. gp = new GradientPaint(0f.0f.1. Por ejemplo. draw Dibuja el exterior de una forma geométrica primitiva usando los atributos stroke y paint.3 Métodos de renderizado de Graphics2D Graphics2D proporciona los siguientes métodos generales de dibujado que pueden usarse para dibujar cualquier primitivo geométrico.green). se el pasa al objeto el atributo apropiado.blue. setStroke setPaint setComposite setTransform setClip setFont setRenderingHints Cuando se configura un atributo.0f. no son clonados. estas diferencias son invisibles para los programas Java. Aunque el sistema de coordenadas para una ventana o una pantalla podría ser muy distinto que para una impresora. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica con el color o patrón especificado por el atributo paint. como drawOval y fillRect. El espacio de dispositivo es el sistema de coordenadas para un dispositivo específico de salida. una ventana o una impresora. El atributo font se usa para convertir la fuente a Glyphs que luego se rellenan con el color o patrón especificados por el atributo paint. drawImage Dibuja la imagen especificada. y este es el espacio en el que se especifican los gráficos primitivos del Java 2D. Además. textos e imágenes 32. Lección 32 Ubicación espacial. con los valores de x incrementando a la derecha y los valores de y incrementando hacia abajo. . En un ambiente multi-ventana con un escritorio virtual donde una ventana puede expandirse más allá de la pantalla del dispositivo físico. como una pantalla. Las conversiones necesarias entre el espacio de usuario y el espacio de dispositivo se realizan automáticamente durante el dibujado. Espacio de usuario Como se muestra en la Figura 55. Graphics2D soporta los métodos de renderizado de Graphics para formas particulares.1 Sistema de coordenadas El sistema 2D de Java mantiene dos sistemas de coordenadas:   El espacio de usuario es un sistema de coordenadas lógicas independiente del dispositivo. el origen del espacio de usuario se localiza en la esquina superior izquierda del espacio. Las aplicaciones usan este sistema de coordenadas exclusivamente.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. este escritorio virtual se adapta a todas las pantallas. drawString Dibuja cualquier cadena de texto. El GraphicsEnvironment describe la colección de dispositivos de renderizado disponible para una aplicación Java en un plataforma particular. Los dispositivos de renderizado incluyen pantallas. Frecuentemente. Sin embargo. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 55 Espacio de usuario El espacio del usuario representa una abstracción uniforme de todas los posibles sistemas de coordenadas de dispositivos. la plataforma subyacente o driver del dispositivo se utilizan para desarrollar esta conversión. Espacio de dispositivo El API 2D de Java define tres niveles de información de configuración que se mantienen para permitir la conversión desde un espacio de usuario a un espacio de dispositivo. las coordenadas del espacio del usuario son automáticamente transformadas en las apropiadas para el espacio del dispositivo cuando se dibuja un objeto gráfico. El espacio de dispositivo para un dispositivo particular podría tener el mismo origen y dirección del espacio del usuario.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Una aplicación puede tener acceso a esta información. El GraphicsEnvironment también incluye una lista de todas las fuentes disponibles en una plataforma. impresoras y búferes de imagen. Esta información está encapsulada en tres clases:    GraphicsEnvironment GraphicsDevice GraphicsConfiguration Entre ellas. representan toda la información necesaria para localizar un dispositivo de renderizado o fuente en la plataforma Java y para convertir las coordenadas del espacio de usuario al espacio de dispositivo. . o podrían ser diferentes. pero no necesita desarrollar modificaciones en ellas. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica El GraphicsDevice describe un dispositivo de renderizado visible para la aplicación. Todas las transformaciones de coordenadas.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Cuando se dibuja una cadena. incluyendo transformaciones desde el espacio del usuario al espacio del dispositivo. La transformación se realiza cuando el espacio de coordenadas de usuario se convierte en espacio de coordenadas del dispositivo. Es posible adicionar un AffineTransform al contexto gráfico para rotar. escalar. las figuras que la fuente usa para mostrar la cadena no siempre corresponden con caracteres individuales. cada GraphicsDevice puede tener una o más GraphicsConfiguration. Transformaciones El API Java 2D ha unificado su modelo de transformación de coordenadas. La pantalla SVGA está representada por un objeto GraphicsDevice y cada uno de los modos es representado por un objeto GraphicsConfiguration. Una fuente puede representar un carácter como una a con tílde usando varios glyphs. un dispositivo de visualización SVGA puede operara en varios modos: 640*480*16 colores. tal como una pantalla o impresora. una glyph es .2 Fuentes Una cadena se asume de manera normal. son representadas por objetos de la clase AffineTransform. a su vez. En el API Java 2D. o representar ciertas combinaciones de caracteres como la fi de final con un único glyph. su apariencia está determinada por la letra o fuente que está seleccionada. texto o imagen cuando se esta renderizando. La transformación adicional se aplica a cualquier objeto gráfico renderizado en ese contexto. 640*480*256 colores y 800*600*256 colores. ciertas combinaciones de dos o más caracteres se reemplazan a menudo por una figura simple denominada ligature. Las figuras que una fuente usa para representar los caracteres en las cadenas se denominan Glyphs. trasladar o recortar una figura geométrica. en publicidad profesional. por ejemplo. 32. en términos de los caracteres que la conforman. que define las reglas para manipular coordenadas usando matrices. Un GraphicsEnvironment puede contener uno o más GraphicsDevice. Cada configuración posible de el dispositivo se representa por una GraphicsConfiguration. Sin embargo. Por ejemplo. una colección de glyphs con una forma particular de estilo conforma una font face. Esta posibilidad hace más fácil de usar la misma fuente en texto con diferentes características. médium. La apariencia del texto está separada lógicamente de las características del texto. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica simplemente un Shape que puede ser manipulado y dibujado en la misma forma que cualquier otro objeto Shape. de diferentes familias. . alpha y otras características de cada localización de la pantalla. pero ellas son más realistas. las fuentes se especifican por un nombre que describe una particular font face (por ejemplo: Helvetica Bold) Es diferente a como se asume en el JDK 1. Una única fuente puede tener muchas versiones. y una colección de font families conforma el grupo de fuentes disponible en un GraphicsEnvironment particular. Usando el API 2D de Java es posible componer y dibujar cadenas que contienen múltiples fuentes. Una fuente puede ser entendida como una colección glyphs. tales como heavy. Un arreglo bidimensional de píxeles se denomina una ráster. Tales imágenes tienden a ser muchos más grandes que las imágenes de color indexado (indexed-color images). Para lograr compatibilidad el API Java 2D soporta la especificación de fuentes por su nombre lógico y también por su nombre de font face. oblique. tamaños e incluso lenguajes. y la información de características del texto se almacena en objetos TextLayout y TextAttibuteSet. En otras palabras. En el API Java 2D.3 Imágenes Las imágenes son colecciones de píxeles organizados espacialmente.1. La apariencia del píxel puede definirse directamente o como un índice en una tabla de color para una imagen. Todas las caras de una fuente tienen un diseño tipográfico similar y pueden ser reconocidas como miembros de una misma familia. Un píxel define la apariencia de una imagen en una ubicación simple. En imágenes que contienen muchos colores (más de 256). en las que las fuentes eran descritas por nombres lógicos que tomaban la forma de diferentes font face dependiendo de las fuentes disponibles en la plataforma particular. 32. ghotic y regular. los píxeles usualmente representan directamente el color. Estas diferentes versiones son llamadas caras (faces). Los objetos Font se utilizan para describir la apariencia.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. caras. una colección de formas de font faces forman una font family. debe estar relacionado con un modelo de color. los colores en la imagen están limitados a los colores especificados en una tabla de colores. a menudo.awt.image contiene la implementación de varios ColorModel. La implementación del ColorSpace en el java.1 Rellenos y Filetes . Por ejemplo.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. por tanto el resultado es que las imágenes de colores indexados son más pequeñas. Un píxel en una imagen de modelo de color directo puede tomarse de una colección de valores de las bandas para una localización en la pantalla. Filetes y Composiciones 33. Verde (Green)y Azul (Blue) son las bandas o canales de una imagen RGB. incluyendo representaciones de pixeles empaquetados o comprimidos y de componente. incluyendo RGB y escala de grises. el resultado es que sólo es posible usar unos pocos colores en la imagen. Las reglas para interpretar los píxeles están encapsuladas en un objeto ColorModel (por ejemplo. los valores podrían ser interpretados de dos formas. Al separar el espacio de color (ColorSpace) del modelo de color (ColorModel) se proporciona mayor flexibilidad para representar y convertir de una representación de color a otra. Las imágenes en el API 2D de java tiene dos componentes primarios:   Los datos de la imagen original (los píxeles) La información necesaria para interpretar los píxeles. Es importante aclarar que un espacio de color no es una colección de colores. Para que un píxel pueda ser mostrado. como colores directos o indexados). El paquete java.awt. El formato de píxel es popular para las imágenes que contienen sólo 16 o 256 colores. un índice requiere menos almacenamiento que un valor de color. Lección 33 Rellenos. Sin embargo. Una objeto ColorSpace encapsula las reglas que gobiernan la forma como un conjunto de valores numéricos corresponden a un color particular.color representa los espacios de color más popular. el define las reglas como deberán ser interpretados los valores de colores individuales. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica En una imagen de color indexado. Una banda o canal (band) es un componente del espacio de color de una imagen. el Rojo (Red). El filete hace posible especificar diferentes anchos y patrones de diseño para líneas y curvas. drawString actualmente rellena los . Como el texto está en últimas representado por un conjunto de glyphs. Figura 56 Dibujo con diferentes tipos de filete Los estilos de lápices están definidos por objetos que implementan la interfaz Stroke. La clase Color. Cuando se renderiza una cadena de texto. que está disponible en versiones anteriores de AWT. El API 2D de Java proporciona dos implementaciones adicionales para Paint. es un tipo simple de un objeto Saint usado para definir rellenos de colores sólidos. el atributo actual de Paint se aplica a los glyphs que forman la cadena. el renderizado de la línea exterior y el relleno de una figura son dos operaciones separadas: Usando el método draw se dibuja el contorno (línea exterior) de la figura usando el estilo de lápiz especificado en el atributo Stroke y el patrón de relleno especificado por el atributo Paint. Sin embargo. con el API 2D de Java es posible usar diferentes estilos de lápices (filetes) y patrones de relleno. a las cadenas de texto también se les puede aplicar atributos de filete y relleno. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Como ya se había mencionado. Los patrones de rellenos están definidos por objetos que implementan la interfaz Paint. El GradientPaint define un relleno como un gradiente entre dos colores. El TexturePaint define un patrón de relleno utilizando un simple fragmento de imagen que se repite uniformemente. Usado el método fill se rellena el interior de la figura con el patrón especificado en el atributo Paint. Figura 57 Relleno de gradiente y de textura En Java 2D.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. TexturePaint y GradientPaint. OR y XOR.renderable . ya que el resultado de la operación booleana de dos valores de píxel en una imagen es la composición de dos índices. El API 2D de Java evita estos inconvenientes al implementar reglas de mezcla alfa (alpha-blending) que tienen en cuenta la información acerca del modelo de color al hacer las composiciones. además de no considerar el caso de las imágenes de color indexado. Este enfoque tiene varios inconvenientes. Para modificar el filete del contorno de los glyphs en una cadena de texto. una regla de composición booleana puede definir los valores de color de la fuente y el destino a partir de operaciones de And. como lo poco intuitivo para el ser humano. 33. Lección 34 Los paquetes del API 2D de Java Las clases del API Java 2D está organizada en los siguientes paquetes: java. no de dos colores. Por ejemplo.color java. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica glyphs que están siendo renderizados.awt.print java. El objeto alphaComposite incluye el modelo del color de los colores fuente y destino.awt.awt. es necesario enviar el contorno y renderizarlos como figuras usando el método draw. El API 2D de Java encapsula reglas para combinar los colores en el objeto Composite.image.image java.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. es necesario determinar como se deben combinar los colores del nuevo objeto von los colores que ya están ocupando el área donde se está dibujando. además que este tipo de composiciones no permite la composición de colores en diferentes espacios de color.awt java.2 Composiciones (composites) Cuando se renderiza un objeto que se sobrepone con otro objeto existente.font java.awt.awt.awt.geom java. Los sistemas de renderizado primitivo proporcionan solamente operadores boléanos básicos para combinar los colores. AffineTransform Arc2D Arc2D.Float Dimension2D Ellipse2D Ellipse2D.Float Rectangle2D Rectangle2D.Double Point2D.Double Ellipse2D.Double CubicCurve2D.Flota PathIterator Point2D Point2D.Double QuadCurve2D.Double Rectangle2D.awt son clases del Java 2D. . obviamente no todas las clases del java.awt.Float QuadCurve2D QuadCurve2D.Float RectangularShape RoundRectangle2D RoundRectangle2D.Double Line2D.geom contiene clases e interfaces relacionadas con la definición de primitivas geométricas.Double RoundRectangle2D. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica El paquete java.Float y .Float Area CubicCurve2D CubicCurve2D.Float Muchas de las primitivas geométricas tienen sus correspondientes implementaciones . pero a expensas del desempeño en algunas plataformas.awt contiene algunas clases e interfaces del API Java 2D.Double Arc2D.Double. AlphaComposite BasicStroke Color Composite CompositeContext Font GradientPaint Graphics2D GraphicsConfiguration GraphicsDevice GraphicsEnvironment Paint PaintContext Rectangle Shape Stroke TexturePaint Transparency El paquete java.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.Float FlatteningPathIterator GeneralPath Line2D Line2D. Las implementaciones de doble precisión proporcionan mayor precisión de renderizado. renderable contienen clases e interfaces para la definición y renderizado de imágenes.image y java.color contiene clases e interfaces para la definición de espacios de color y perfiles de color.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.awt.awt. ColorSpace ICC_ColorSpace ICC_ProfileGray ICC_ProfileRGB ICC_Profile Los paquetes java.awt. FontRenderContext GlyphJustificationInfo GlyphMetrics GlyphVector GraphicAttribute ImageGraphicAttribute LineBreakMeasurer LineMetrics MultipleMaster OpenType ShapeGrapicAttribute TextAttribute TextHitInfo TextLayout TransformAttribute El paquete java.image. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica El paquete java.awt. AffineTransformOp BandCombineOp BandedSampleModel BufferedImage BufferedImageFilter BufferedImageOp ByteLookupTable ColorConvertOp ColorModel ComponentColorModel ComponentSampleModel ConvolveOp ContextualRenderedImageFactory DataBuffer DataBufferByte DataBufferInt DataBufferShort DataBufferUShort DirectColorModel IndexColorModel Kernel LookupOp LookupTable MultiPixelPackedSampleModel PackedColorModel ParameterBlock PixelInterleavedSampleModel Ráster RasterOp RenderableImage RenderableImageOp RenderContext RenderableImageProducer RenderedImageFactory .font contiene clases e interfaces que se utilizan para proporcionar características al texto y la definición de fuentes. gráficos e imágenes. Un objeto Graphics encapsula la siguiente información que será necesaria a la hora de las operaciones básicas de pintado. superclase de Graphics2D y revisar algunos conceptos básicos acerca del contexto gráfico. y para mantener consistencia. . Lección 35 La clase Graphics La clase Graphics es la clase base abstracta que proporciona toda. de la funcionalidad para poder pintar tanto sobre componentes como sobre imágenes fuera de pantalla. El paquete java. Book Pageable PageFormat Paper Printable PrinterGraphics PrinterJob Antes de comenzar en serio con los componentes gráficos que proporciona el API 2D de java.image. como texto. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica RenderedImage RescaleOp SampleModel ShortLookupTable TileObserver WritableRaster WritableRenderedImage SinglePixelPackedSampleModel El API Java 2D mejora las siguientes clases heredadas de la clase image de AWT ColorModel DirectColorModel IndexColorModel Estas clases de modelo de color recogen las características del java.awt.awt. es necesario. que posteriormente permitirán comprender mucho mejor los ejemplos que se presentarán.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.awt.print contiene clases e interfaces que hacen posible la impresión de todos los objetos gráficos basados en Java 2D. las nuevas clases del modelo de color también están localizadas en el paquete java. hacer una pequeña revisión de la clase Graphics.image para compatibilidad. o al menos la mayoría. Hay que empezar hablando del constructor de la clase Graphics. quizá una de las mejores formas sea a través de sus múltiples métodos. por lo que las aplicaciones no pueden llamar a este constructor directamente. cualquier operación gráfica que se realice modificará solamente los pixeles que se encuentren dentro de los límites de la zona de recorte actual y el componente que fue utilizado para crear el objeto Graphics. Para poder revisar esta clase. intentando agruparlos por funcionalidad. que no tiene argumentos. como la clase Rectangle y la clase Polygon. utilizando el modo de dibujo actual y la fuente de caracteres actual. Se puede obtener un objeto de tipo Graphics a partir de otro objeto Graphics llamando al método getGraphics() sobre un componente.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. 35. sin una asignación específica de funcionalidad con respecto a acciones determinadas de . También se puede recibir un objeto Graphics como parámetro cuando se van a sobreescribir los métodos paint() o update(). una zona a la que va a afectar. ese dibujo o escritura se realiza en el color actual. que es lo que se ha intentado aquí. Cuando se pinta o escribe. aunque Graphics es una clase abstracta. aunque si el lector quiere una referencia completa y una descripción de los métodos de esta clase deberá recurrir a la documentación que JavaSoft proporciona sobre el AWT. Hay muchas otras clases.1 Métodos generales de la clase Graphics En esta categoría estarían incluidos los métodos útiles en general. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica El objeto de tipo Component sobre el que se pinta Un origen de traslación para coordenadas de pintado y clipping La región actual ocupada por el componente El color actual La fuente de caracteres actual La operación lógica actual para utilizar con pixeles (XOR o Paint) La actual alteración de color XOR Un objeto Graphics describe un contexto gráfico. Un contexto gráfico define una zona de recorte. que utilizan como soporte a las operaciones que se pueden realizar con la clase Graphics. crea un nuevo objeto de tipo Graphics que es copia del objeto Graphics que ha invocado al método.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. traslada el origen del contexto gráfico al punto que se pasa en los dos parámetros en el sistema de coordenadas que se esté utilizando.int. . devuelve el color actual fijado para el contexto gráfico.int. copyArea( int. fija el color del contexto gráfico al color que se pasa como parámetro. setXORMode( Color ). para seguir con la descripción y uso de algunos de ellos en aplicaciones de ejemplo. se le pasa un rectángulo y borra la zona con el color que se haya establecido de fondo para la superficie donde se está pintando. y es importante que se eliminen estos objetos manualmente. dispose(). en lugar de esperar a que se finalice la ejecución.int. setColor( Color ). create().int ). Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica dibujo. en otra posición del contexto gráfico desplazada las distancia indicada en los dos últimos parámetros. finalice(). translate( int.int. incluyendo todos los recursos. Todas las operaciones gráfica siguientes que utilicen este contexto gráfico. copia la zona rectangular del componente que se indica en los primeros cuatro parámetros.int. cuando ya no se necesiten. utilizarán el color que se especifica en este método. clearRect( int. fija la forma de pintar del contexto gráfico de modo que se sustituya lo que había con lo nuevo. fija la forma de pintar del contexto gráfico a una alternancia entre en color actual y el color de la zona de destino. elimina el contexto gráfico cuando ya no hay ninguna referencia sobre él.int. Cualquier operación de pintado sobreescribirá lo que hubiese en la zona de destino con el color actual. toString(). setPaintMode(). elimina el contexto gráfico sobre el cual es invocado y devuelve al sistema todos los recursos que estaba utilizando.int ). no solamente la memoria. Un objeto Graphics no se puede utilizar después de haber llamado a este método. getColor(). bien sea creados directamente desde un componente o a partir de otro objeto Graphics. devuelve un objeto de tipo String representando el valor del objeto Graphics. A continuación se enumeran algunos de los métodos considerados generales.int ). Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica 35. para unos significa que la aplicación ha conseguido la habilidad para pintar o colocar imágenes sobre un componente que tiene la característica de soportar el pintado o visualización de imágenes. más la fuente de caracteres. es decir. como puede ser el caso de una animación o que se vaya a utilizar doble buffer. se está pintando en el doble buffer. y no se ha proporcionado al lector una explicación concreta de lo que significan estos términos. Lo normal es pues la presentación de información gráfica colocando el código encargado de ello en el método sobreescrito paint() y luego invocando al método repaint() para indicar al sistema que presente ese material en pantalla. aunque el método paint() también puede ser invocado por causas externas. que solamente funciona para objetos de tipo Image creados en memoria a través del método createImage(). el método paint() se sobreescribe cuando se quiere colocar algún tipo de material gráfico sobre la pantalla. son sorprendentemente simples. figuras y texto. hay que ver cómo se consigue crear uno. sin control alguno por parte de la aplicación. Para empezar. Y otros autores indican que un objeto Graphics es la superficie última sobre la que se pueden colocar líneas.2 Obtener un contexto gráfico La verdad es que se han escrito varias veces las palabras contexto gráfico. color y cualquier otro factor. porque se hace automáticamente. ya que la clase Graphics es abstracta y no puede ser instanciada por el código de la aplicación. Esta es una técnica utilizada normalmente cuando se están usando imágenes que se crean en memoria y luego se transfieren a la pantalla. Normalmente. como puede ser el . en los cuales Java pasa como parámetro el contexto gráfico del objeto al que pertenece el método. Hay varias definiciones. y es cuando se sobreescriben los métodos paint() y update(). Ahora que ya se sabe lo que es un contexto gráfico. Uno de estos caminos indirectos para obtener un contexto gráfico es invocar el método getGraphics() sobre otro objeto. luego ese objeto Graphics define un contexto gráfico a través del cual se pueden manipular todas las actividades gráficas sobre esa superficie. Sin embargo. Hay otros dos caminos para obtener un contexto gráfico y. esto no puede hacerse instanciando directamente un objeto de tipo Graphics. Otros autores prefieren decir que cada objeto Graphics representa una determinada superficie de dibujo. de la clase Component. este método devuelve un contexto gráfico de una imagen. por lo cual puede recibir también el nombre de contexto gráfico al aunar información sobre la zona de dibujo. es decir. así que hay que recurrir a formas indirectas para conseguir el contexto gráfico. y el método update() se sobreescribe en circunstancias especiales.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. pero esto lo hará el método update() que se llame a continuación. el método paint() es el que ofrece el sistema para poder pintar lo que se quiera sobre un determinado componente. la implementación por defecto de update() borra el contexto gráfico rellenando el fondo en el color que se haya asignado como color de fondo. En síntesis. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica redimensionamiento de la ventana en la que se está presentando la información gráfica. se sobreescribe para hacer presentar un rectángulo relleno con el color de fondo. Normalmente. por lo que es posible que múltiples llamadas a repaint() puedan recogerse en una sola llamada a update().UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. . Si no se sobreescribe update() para hacer una animación. fijando de nuevo el color al color del primer plano y llamando a paint(). No hay una relación uno a uno entre las llamadas a repaint() y update(). En la clase base Component. Notará que se utiliza la clase Frame del AWT y no la JFrame del Swing. en el caso de applets. este método no hace absolutamente nada. Si el componente no es ligero (lightweight). Veamos un primer ejemplo básico de obtención del contexto gráfico y pintado de una cadena de texto en un objeto Frame en la Figura 58. se verá siempre un parpadeo en el refresco del componente por causa de este borrado del fondo. Hay que tener en cuenta que el método repaint() pide al sistema que redibuje el componente tan pronto como sea posible. El método update() es invocado automáticamente cuando se pide repintar un Componente. ya que se quieren asegurar la compatibilidad. awt. . Las clases en el paquete java. cada una de las otras clases geométricas implementa el interfaz Shape. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 58 Primer ejemplo de dibujo utilizando Java 2D Observe que en la línea 36 se está convirtiendo el contexto gráfico original g en un contexto gráfico 2D denominado g2. como puntos. que es el que finalmente se utiliza para dibujar la cadena. rectángulos y elipses.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. líneas.geom son: Arc2D Ellipse2D QuadCurve2D Area GeneralPath Rectangle2D CubicCurve2D Line2D RectangularShape Dimension2D Point2D RoundRectangle2D Excepto para Point2D y Dimension2D.geom definen gráficos primitivos comunes. CAPÍTULO 8 API 3D de JAVA Lección 36 Figuras básicas en Java 2D (Shape) Las clases del paquete java. curvas. arcos. que proporciona un conjunto de métodos comunes para describir e inspeccionar objetos geométricos bi-dimensionales.awt. Estas posiciones pueden ser conectadas por segmentos de línea. Figura 59 Formas rectangulares 36.1 Formas Rectangulares Los primitivos Rectangle2D. RoundRectangle2D. . El siguiente ejemplo muestra el uso de algunos de estos objetos gráficos y además de las opciones para relleno y filete. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Con estas clases podemos crear de forma virtual cualquier forma geométrica y dibujarla a través de Graphics2D llamando al método draw o al método fill.2 GeneralPath La clase GeneralPath permite crear una curva arbitraria especificando una serie de posiciones a lo largo de los límites de la forma.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. que define métodos para objetos Shape que pueden ser descritos por una caja rectangular. Arc2D. como se muestra en la siguiente figura. 36. curvas cuadráticas o curvas cúbicas. y Ellipse2D descienden de la clase RectangularShape. El código original corresponde en un demo proporcionado en el tutorial de Java 2D de la documentación del J2SE. La geometría de un RectangularShape puede ser extrapolada desde un rectángulo que encierra completamente el exterior de la forma. Figura 60 Forma GeneralPath Esta figura puede ser creada con 3 segmentos de línea y una curva cúbica. awt. /* * Este es un ejemplo sobre el dibujo de Shapes.event.swing. proporcionado por la * documentación de Java en la versión 1. import java. Una vez lo ha implementado y comprendido. Como se dará cuenta es bastante extenso. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 61 Ejecución del renderizado de figuras primitivas El código comentado se muestra a continuación.*.*. Si se define como hija * directa de la clase Frame. import javax. import java.geom. */ . se tiene problemas al redimensionar el * Frame.awt.awt.*. ya que no se redibujan automáticamente las figuras.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. */ import java. /* * La clase se crea como hija de la clase Applet.2. por lo que se recomienda seguirlo cuidadosamente.*. intente realizar modificaciones en los parámetros de dibujo de las diferentes figuras. BasicStroke. final static Color white = Color.0f). } /* Permite redimensionar el tamaño de la letra a partir de un objeto de tipo Fontmetrics * dependiendo del tamaño del contexto gráfico. //Definición de los tipos de filete final static BasicStroke stroke = new BasicStroke(2.0f). 0.CAP_BUTT. final static Color fg = Color. setForeground(fg).0f. final static int minFontSize = 6. Dimension totalSize. . Font font = g2. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica public class ShapesDemo2D extends JApplet { final static int maxCharHeight = 15. final static float dash1[] = {10. final static Color bg = Color.getFont().white. 10.0f}. final static BasicStroke wideStroke = new BasicStroke(8. dash1. int xSpace) { boolean fontFits = false. BasicStroke.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.white. si se disminuye el tamaño del contexto la letra disminuirá */ FontMetrics pickFont(Graphics2D g2. final static BasicStroke dashed = new BasicStroke(1. String longString.JOIN_MITER. si se amplía el tamaño de la ventana. public void init() { //Initialize drawing colors setBackground(bg). final static Color red = Color.black.red. FontMetrics fontMetrics. la * letra se ampliará.0f.0f). int gridWidth = d.getSize().KEY_ANTIALIASING.getName(). --size)). . style. } } } return fontMetrics. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica FontMetrics fontMetrics = g2.stringWidth(longString) <= xSpace) ) { fontFits = true.getHeight() <= maxCharHeight) && (fontMetrics.setRenderingHint(RenderingHints. } else { if ( size <= minFontSize ) { fontFits = true. int size = font. fontMetrics = g2. } else { g2.VALUE_ANTIALIAS_ON). RenderingHints.width / 6. /* Toma las dimensiones del contexto y lo divide para saber el ancho y alto de * cada una de las celdas de la cuadrícula donde dibujará */ Dimension d = getSize().getFontMetrics().getFontMetrics(). g2.setFont(font = new Font(name.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. } public void paint(Graphics g) { Graphics2D g2 = (Graphics2D) g. int style = font.getStyle(). while ( !fontFits ) { if ( (fontMetrics. String name = font. width . 3. stringY). x += gridWidth.Double(x+20. int rectHeight = stringY . g2. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica int gridHeight = d.draw3DRect(3. d. g2. g2. y+5. true).fontMetrics.setPaint(fg3D). .drawString("Rectangle 2D".setPaint(fg). //Obtiene el tamaño de la letra a partir de la cadena más larga a escribir fontMetrics = pickFont(g2. int stringY = gridHeight . dibuja el rectángulo y debajo su respectivo texto g2.1.setStroke(stroke).setStroke(dashed). d. int y = 7. /* Asigna el filete como punteado. y+20. rectHeight-5)).2*x. g2. gridWidth).getDescent().3 .draw3DRect(0.fontMetrics.draw(new RoundRectangle2D. x.2. g2.y . 0. g2.Double(x+5.Double(x. x += gridWidth.height . // Dibuja una línea con su respectivo texto inferior g2. y)). rectWidth-40. x + rectWidth. y+rectHeight-1.7.draw(new Line2D. stringY).UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.1. g2. rectWidth-5. "GeneralPath con relleno y contorno". // Asigna un filete. //Dibuja el cuadrado general que sirve de fondo al applet Color fg3D = Color.getMaxAscent() . g2. d.height .7. false). int x = 5.drawString("Line2D".draw(new Rectangle2D. int rectWidth = gridWidth .height / 2. d. dibuja un rectángulo con * bordes redondeados y su texto inferior * Los parámetros de creación del objeto correspoden al valor en x e y inicial * x e y final y el radio de la circunferencia que define las puntas redondeadas.lightGray. x. */ g2.width . GeneralPath polygon = new GeneralPath(GeneralPath. en este caso 60 y 135 grados.draw(polygon).y. polygon. }. y}. * crea el objeto GeneralPath (polygon) trazando lineas entre las coordenadas * y finalmente cierra el poligono. x += gridWidth. stringY).moveTo(x1Points[0].draw(new Ellipse2D. stringY).setStroke(stroke).Double(x. // Asigna el filete. x. rectWidth.setStroke(wideStroke). x. . * Finalmente el último parámetro corresponde al tipo de arco. Arc2D. * Ellos son: el rectángulo que enmarca el arco tiene esquina superior izquierda en * en x. y.drawString("RoundRectangle2D". g2. for ( int index = 1. el valor máximo en y. Dibuja el polígono y el texto inferior * correspondiente.lineTo(x1Points[index]. x += gridWidth. polygon. x+rectWidth}. index++ ) { polygon. 60. PIE.WIND_EVEN_ODD. g2.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. x. int x1Points[] = {x. y1Points[0]). /* Asigna el filete. 135. dibuja un arco con 7 parámetros de construcción. CHORD. */ g2.Double(x. rectHeight. g2.draw(new Arc2D. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica rectHeight-40. * Debajo escribe el texto correspondiente */ g2.drawString("Arc2D".closePath(). y+rectHeight. g2.OPEN)). index < x1Points. stringY).setStroke(stroke). 40)).length.length). 40. y+rectHeight. g2. rectHeight)). los posibles valores son * OPEN. y.el valor máximo en x. x1Points. rectWidth. dibuja una elipse y el texto inferior correspondiente g2. y1Points[index]). x. x+rectWidth. Los siguientes dos parámetros * corresponde a los ángulos de inicio y fin del arco. g2. crea unos vectores con las coordenadas de los puntos del polígono. /* Asigna el filete. int y1Points[] = {y. x += gridWidth.drawString("Ellipse2D". draw(polyline). y2Points[0]). stringY). x+rectWidth}. g2. en este caso al negro y dibuja el texto inferior correspondiente */ g2.y. GeneralPath polyline = new GeneralPath(GeneralPath.yellow).setPaint(relleno). stringY += gridHeight.blue).Double(x.WIND_EVEN_ODD.moveTo (x2Points[0]. x+rectWidth. int y2Points[] = {y. Nuevamente * asigna el color. // Modifica los valores de coordenadas x e y para dibujar la segunda fila x = 5. x += gridWidth. g2. g2. x. index++ ) { polyline.setPaint(fg). y.drawString("Rectangle2D con relleno".Color. index < x2Points. Ese objeto GradientPaint se envía como * color de relleno mediante el setPaint. . Se dibuja el rectángulo redondeado. }. y. g2.red. * Se restaura el color de dibujo al negro y se dibuja el texto inferior.setPaint(Color. x. polyline. y+rectHeight.lineTo(x2Points[index]. x2Points.drawString("GeneralPath". g2. y}. y+rectHeight. for ( int index = 1. x += gridWidth. y += gridHeight.x+rectWidth. */ GradientPaint relleno = new GradientPaint(x. x.drawString("GeneralPath (Abierto)". x. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica g2. partiendo * del color rojo hasta el color amarillo. rectHeight)). rectWidth. stringY). Rellena un objeto rectángulo y lo dibuja. y2Points[index]).fill(new Rectangle2D.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.length. /* Realiza los mismo pasos que para el polígono anterior. g2. stringY).length). lo que varía es * que en este caso no se cierra el polígono */ int x2Points[] = {x. /* Asigna el color de relleno a azul. /* Define el objeto gradiente para rellenar el rectángulo redondeado. x += gridWidth. 10. g2. x3Points. g2. int y3Points[] = {y. y. */ int x3Points[] = {x. for ( int index = 1. Crea el polígono uniendo * los puntos con líneas. stringY). Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica g2.WIND_EVEN_ODD. rectWidth.y. filledPolygon. Arc2D.length.red.Double(x. stringY). rectWidth.fill (new Ellipse2D. g2. lo * que origina que se sibuje el filete del polígono. index < x3Points.yellow). x += gridWidth. // Define un relleno de gradiente de rojo a blanco y dibuja la elipse rellena.length). x. y+rectHeight. y. rectHeight. * Retorna el valor de la pintura a negro y dibuja el polígono mediante draw. g2.drawString("RoundRectangle2D con gradiente". 135.white). y3Points[0]).setPaint(fg).x+rectWidth. stringY).setPaint(fg). y. g2. rectHeight)). g2.setPaint(fg). Asigna el color rojo y dibuja el polígono relleno.fill(new Arc2D. g2. filledPolygon.setPaint(relleno). x.Double(x. GeneralPath filledPolygon = new GeneralPath(GeneralPath. g2. relleno = new GradientPaint(x. x. /* Define los arreglos de las coordenadas para el polígono.setPaint(Color. y+rectHeight. g2. rectWidth.Double(x.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.fill(filledPolygon).closePath(). y}. y3Points[index]). g2. x+rectWidth.moveTo(x3Points[0]. rectHeight.PIE)).drawString("Ellipse2D con gradiente". g2. index++ ) { filledPolygon. g2.fill(new RoundRectangle2D. x. 10)). y.drawString("Arc2D con relleno". }. . x += gridWidth. x+rectWidth}. 90. // Define el color de relleno en rojo y dibuja el arco.setPaint(red).lineTo(x3Points[index]. x.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) {System.3 QuadCurve2D y CubicCurve2D La clase QuadCurve2D permite crear segmentos de curvas cuadráticos. g2.pack(). los segmentos de curvas cúbicos también se conocen como curvas de Bézier. } } 36. stringY). f. } //Clase que se ejecuta public static void main(String s[]) { //Crea el Frame JFrame f = new JFrame("Demo de Figuras Primitivas").init(). //Crea el applet de acuerdo a la clase ShapesDemo2D JApplet applet = new ShapesDemo2D().setStroke(wideStroke). La clase CubicCurve2D permite crear segmentos de curvas cúbicos.drawString("GeneralPath con relleno y contorno".draw(filledPolygon).UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. g2.} }).add("Center". Las siguientes figuras muestran ejemplos de curvas cuadráticas y cúbicas. g2. . Una curva cuadrática está definida por dos puntos finales y un punto de control. Una curva cúbica está definida por dos puntos finales y dos puntos de control. f. applet).show().exit(0). applet. f.300)).getContentPane(). //Agrega el objeto applet al Frame f. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica g2. f.setPaint(fg).setSize(new Dimension(550. KEY_ANTIALIASING.white). .VALUE_ANTIALIAS_ON). import java.awt. g2.height.awt.*.awt. int h = d. import java. import javax. setForeground(Color. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 62 Formas Curvas El siguiente código crea una curva cuadrática con dos puntos finales y un punto de control.swing. import java. int w = d.Double().*.width. //Crea el objeto de tipo QuadCurve2D QuadCurve2D. Las posiciones de los puntos se seleccionan con respecto al tamaño de la ventana.geom.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.event. Dimension d = getSize().black).*. } public void paint(Graphics g) { Graphics2D g2 = (Graphics2D) g. public class EjemploQuad extends JApplet { public void init() { setBackground(Color.setRenderingHint(RenderingHints.Double quad = new QuadCurve2D.*. RenderingHints. 3)).setPaint(Color.x. h/2+50).0f)).x+5. .fill(new Rectangle2D.drawString("Fin". (int) inicio.3. g2.Double inicio. //Construye la curva //Define color y filete g2.Double(inicio.x.fill(new Rectangle2D. fin = new Point2D.y)-100). Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica //Crea los objetos que definen los puntos de inicio. (int)(inicio. g2.drawString("Inicio". inicio = new Point2D.x+5. control. control = new Point2D. fin.black).draw(quad).magenta). //Modifica el color para dibujar los puntos como rectángulos g2.3)).(int) fin. g2.Double(). //Dibuja la curva g2.x.y. g2.x+5.exit(0).} }).Double(). control.3)). final y control Point2D.3. (int)control.y.Double(fin. fin.setLocation(w/2+100.Double(). fin).y. //Le asigna coordenadas a los puntos en x e y a partir del tamaño de la ventana inicio.drawString("Control". quad.y+5).y+5). inicio.(int)control.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. control.Double(control. g2.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) {System.x)+100.setStroke(new BasicStroke(2. g2. fin.setLocation((int)(inicio. h/2+50).setCurve(inicio. (int)fin.y+5). g2.setPaint(Color.fill(new Rectangle2D.setLocation(w/2-100. control.(int) inicio.3. f. } //Clase que se ejecuta public static void main(String s[]) { //Crea el Frame JFrame f = new JFrame("Dibujando un QuadCurve2D"). f. permite crear rápidamente objetos Shape complejos sin tener que describir cada línea de segmento o cada curva. //Agrega el objeto applet al Frame f.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. mediante rectángulos rellenos.init(). Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica //Crea el applet de acuerdo a la clase ShapesDemo2D JApplet applet = new EjemploQuad(). applet.setSize(new Dimension(400. este proceso se denomina construir un área geométrica (CAG).getContentPane().pack().300)). f. sobre dos objetos Shape cualquiera. a partir de lo ya visto. dibuje también los puntos de referencia para la curva. Figura 63 Ejecución del dibujo de una curva cuadrática Lección 37 Áreas Con la clase Area se pueden realizar operaciones boolenas. . Una Area soporta las siguientes operaciones booleanas.add("Center". applet).show(). intersecciones y substracciones. Esta técnica. } } La ejecución de este código proporciona la siguiente ventana gráfica: Intente implementar una aplicación que dibuje una curva cúbica. como uniones. f. Aplique diferentes tipos de filete. applet.swing.*. import javax.*.*. La ejecución proporciona la siguiente ventana gráfica. Figura 64 Formación de una pera a partir de operaciones de área El código que se requiere para el renderizado de este gráfico se presenta a continuación.font. tomado del tutorial de gráficos del sitio web de Programación en castellano.*.awt.event. se crea un Area que dibuja una pera a partir de objetos elipses y operaciones de unión. /* * Este applet dibuja una pera.awt. import java.*.*.geom. import java. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica unión Sustracción Intersección Or-Exclusivo (XOR) En el siguiente ejemplo. sustracción e intersección.awt. import java.awt.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. import java. import java. usando métodos de Constructive Area Geometry (CSG) . leaf1. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica * para adición. leaf1 = new Area(leaf).width. ov = new Area(oval). /* Crea la primera hoja a partir de la intersección de dos objetos Area. Area circ.Double(). circ = new Area(circle). leaf2. ov. oval = new Ellipse2D. public void init() { circle = new Ellipse2D.Double(). int w = d.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. double eh = h/2.green). leaf = new Ellipse2D.Double(). */ public class Pera extends Applet { Ellipse2D. } public void paint (Graphics g) { Graphics2D g2 = (Graphics2D) g.white). g2. st1 = new Area(stem). setBackground(Color. oval.Double().Double circle. st1. leaf.setColor(Color. st2. en este caso el Frame Dimension d = getSize(). double ew = w/2. stem. int h = d. st2 = new Area(stem). creados * a partir de una elipse . //Toma las dimensiones del contexto gráfico. leaf2 = new Area(leaf). sustracción e intersección.height. stem = new Ellipse2D. 0). 70. g2. 40.0). g2.black). oval. leaf. */ stem.fill(leaf2). 40. eh.subtract(st2).setFrame(ew-19. 15. */ circle. circ.setFrame(ew-25.fill(st1).0). . stem. eh-47. leaf1 = new Area(leaf).intersect(leaf1). 15.yellow). Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica */ leaf.setColor(Color. g2. circ = new Area(circle). 40.intersect(leaf2).0). eh-47.0. creados de una elipse un circulo.setFrame(ew-14.0. g2.0.0. /* Crea el pedazo de tronco a partir del llenado del Area resultante de la sustracción de * dos objetos Area creados a partir de una elipse. st1 = new Area(stem).0. 15. leaf2 = new Area(leaf).UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.0. leaf1. ov = new Area(oval). // Crea la segund hoja. leaf. /* Crea el cuerpo de la pera llenado el Area resultante de la unión de dos objetos * Area.0).setFrame(ew. st2 = new Area(stem).add(ov). leaf2. 30.setFrame(ew-16. 30.setFrame(ew+3.setColor(Color.fill(leaf1). 50. 15.0. 50.fill(circ). leaf1 = new Area(leaf).0). eh-42.0). 50. eh-20. eh-29. st1. g2.setFrame(ew+1. 50. eh-29. g2. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica } public static void main(String s[]) { JFrame f = new JFrame("Pera").getAvailableFontFamilyNames.show(). f.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. La ejecución del programa genera una pantalla como la que se muestra al lado. . cualquiera de estas cadenas.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) {System. además del tamaño y el estilo. Para determinar las fuentes que están disponibles en el sistema es necesario llamar el método GrpahicsEnvironment. pueden ser utilizados como argumentos para crear un nuevo objeto Font. applet). tamaño y estilo a partir de 3 objetos combo y observar las modificaciones en la cadena dibujada. } } Lección 38 Texto y Fuentes Es posible mostrar una cadena de texto con cualquier tipo de letra disponible en el sistema.init().200)). Figura 65 Ejemplo de dibujo de fuentes El siguiente ejemplo.} }). muestra una aplicación donde es posible seleccionar el tipo de fuente. en cualquier tamaño y en el estilo que se seleccione. f.pack(). f. applet.getContentPane(). f.add("Center". f. Este método retorna un arreglo de cadenas que contiene los nombres de las familias de las fuentes disponibles.exit(0).setSize(new Dimension(150. El ejemplo es tomado del Tutorial de Java 2D de Sun Microsystems. Applet applet = new Pera(). String ntam){ Integer nuevoTam = new Integer(ntam).getLocalGraphicsEnvironment(). cmbFuente. A continuación se crea un objeto Font con un estilo Font.setMaximumRowCount( 9 ).PLAIN.addItemListener(this). Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Para construir el ejemplo. 10). que posteriormente puede pasarse a un combo que despliegue los nombres de las fuentes: GraphicsEnvironment gEnv = GraphicsEnvironment.add(cmbFuente). for ( int i = 1. estilo y tamaño. pnlLetra. por lo que se debe convertir a entero para poder crear la nueva fuente. thisFont = new Font("Arial". Al seleccionarse el tamaño el valor de item es de tipo cadena.addElement(envcmbFuente[i]). thisFont = new Font(nf. nuevafuente = envcmbFuente[0]. cmbFuente. int nest. Vector vector = new Vector(). Los otros estilos disponibles son ITALIC. es necesario utilizar el siguiente código que permite obtener los datos de las fuentes instaladas en el sistema y guardarlos en un objeto Vector. String envcmbFuente[] = gEnv.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. repaint().getAvailableFontFamilyNames(). BOLD y BOLD+ITALIC.length. public void cambiarFuente(String nf... Font thisFont. tam). nest. . Posteriormente es posible crear un nuevo objeto Font a partir de un nombre de fuente. i < envcmbFuente. Font. que pueden seleccionarse de distintos combo. } cmbFuente = new JComboBox( vector ). i++ ) { vector. int tam = nuevoTam.PLAIN y un tamaño de 10.intValue(). } ` . lblTamano.setFont(thisFont).*.Vector. tamaño y estilo para modificarme". de manera que siempre se dibuje en el centro del componente. int ancho = medida.util. public class FontSelection extends JApplet implements ItemListener { JLabel lblFuente. comentado se muestra a continuación: /* * Ejemplo de selección de fuentes.awt. lblEstilo.awt. */ import java.lang. Los atributos de la fuente se envían pasando un objeto Font al método setFont. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Para controlar la fuente que se utiliza para dibujar el texto. import java. int alto = medida. FontMetrics medida = g2.font.awt.getFontMetrics(). El método getFontMetrics permite medir la longitud en píxeles de la cadena considerando los nuevos atributos.event. g2. En este ejemplo. import java. JComboBox cmbFuente.stringWidth( cadena ). Construido para el Tutorial * de Java2D de Sun Microsystems. import java. es necesario enviar los atributos de la fuente al contexto Graphics2D antes de renderizar. //Dibuja la cadena en el centro del panel correspondiente g2.swing. w/2-ancho/2.*.*. } El código completo del ejemplo.getHeight(). se construye un nuevo objeto Font y se envía al contexto Graphics 2D en el metodo Paint() para que sean redibujados.geom. cmbEstilo.*. h/2-alto/2 ). . import java.*.drawString( cadena.Integer. pnlLetra fontC. import javax. import java.awt.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. int i = 0. los atributos son envidos al construir el nuevo objeto Font y la cadena se dibuja en el centro del componente usando esta fuente. cmbTamano. Cada vez que se modifiquen los atributos. String cadena = "Seleccione una fuente. pnlSuperior.setLayout( new BorderLayout() ).add(lblFuente). public void init() { getContentPane(). getContentPane(). pnlEstilo ). pnlTamano ).add( BorderLayout.NORTH.setLayout( new GridLayout( 2.setLayout( new BorderLayout() ). 1 ) ). Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica String nuevafuente = "Fuente sin seleccionar". pnlTamano.setFont(newFont). String nuevotam = "10".setText("Fuentes"). JPanel pnlSuperior = new JPanel().setLayout( new GridLayout( 2.add( BorderLayout. pnlEstiloTamano ). lblFuente. //Se asignan las distribuciones para cada panel pnlSuperior.add( BorderLayout. JPanel pnlEstiloTamano = new JPanel().add( BorderLayout.CENTER. . pnlLetra.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Font newFont = getFont().setLayout( new BorderLayout() ). //Incluye cada panel dentro de los correspondientes para visualizar mejor //la distribución de la aplicación pnlSuperior.WEST. pnlEstiloTamano. pnlSuperior ).CENTER). int nuevoestilo = 0. pnlLetra ). lblFuente.add( BorderLayout.setHorizontalAlignment(JLabel. JPanel pnlTamano = new JPanel(). lblFuente.WEST. pnlEstiloTamano.setLayout( new GridLayout( 2. 1 ) ). JPanel pnlLetra = new JPanel(). pnlLetra. JPanel pnlEstilo = new JPanel(). pnlEstilo. //Asigna características a la etiqueta de texto Fuentes lblFuente = new JLabel(). 1 ) ). pnlEstiloTamano.CENTER.deriveFont(1). length. /*Se asignan los valores para el combo de tamaño. Se agrega el combo *al panel correspondiente. */ GraphicsEnvironment gEnv = GraphicsEnvironment. los posibles tamaños serán 10.add(lblEstilo).addElement(envcmbFuente[i]). *Finalmente se agrega el combo al panel correspondiente. pnlLetra. Se asigna un máximo de items para mostrar en el combo de 9 fila *y se predetermina como fuente inicial.setHorizontalAlignment(JLabel.setText("Estilo"). Se define como máximo número de filas a mostrar 9. pnlTamano. pnlEstilo.14. lblEstilo.addItemListener(this). /*Se obtienen las fuentes disponibles en el contexto gráfico *se asignan al objeto vector que posteriomente es enviado al combo *de Fuentes.add(lblTamano). i++ ) { vector. lblTamano. .setMaximumRowCount( 9 ). cmbFuente. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica //Asigna características a la etiqueta de texto Tamaño lblTamano = new JLabel(). Vector vector = new Vector(). *12.getLocalGraphicsEnvironment().setFont(newFont). String envcmbFuente[] = gEnv.add(cmbFuente). nuevafuente = envcmbFuente[0]. } cmbFuente = new JComboBox( vector ). lblEstilo.16. la primera fuente ubicada (indice 0). lblTamano. i < envcmbFuente.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. for ( int i = 1.getAvailableFontFamilyNames().setFont(newFont).setText("Tamaño"). lblEstilo.CENTER).setHorizontalAlignment(JLabel. //Asigna características a la etiqueta de texto Estilo lblEstilo = new JLabel().18. cmbFuente.CENTER). lblTamano. getContentPane(). cmbTamano. fontC.setMaximumRowCount( 9 ).addItemListener(this).setBackground(Color.setMaximumRowCount( 9 ). */ fontC = new pnlLetra().setMaximumRowCount( 9 ). "16".getSource().add(cmbEstilo). } /* El siguiente método detecta cuando se ha realizado la modificación de item * en alguno de los combos.getStateChange() != ItemEvent. "12".SELECTED ) { return. */ cmbEstilo = new JComboBox( new Object[]{ "PLAIN". /*Se arma el combo de estilo a partir de los estilos predeterminados.se siguen los mismo *pasos que para los combos anteriores y finalmente se incluye el combo en el panel *correspondiente. /*Se especifican las caracteristicas del Panel que va a contener el texto. pnlTamano. cmbTamano. //Obtiene el objeto combo que cambió de item . cmbTamano.CENTER. fontC). "ITALIC". } Object combomodif = e.white). "18"} ). cmbEstilo. */ public void itemStateChanged(ItemEvent e) { if ( e.add(cmbTamano). cmbEstilo. "14". "BOLD & ITALIC"} ). pnlEstilo.addItemListener(this).add( BorderLayout. "BOLD".UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica */ cmbTamano = new JComboBox( new Object[]{ "10". } //Cambia la fuente del contexto.getSelectedItem().exit(0). } else { nuevotam = (String)cmbTamano.setSize(new Dimension(550.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. f. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica //Compara con cada uno de los combos posibles if ( combomodif == cmbFuente ) { nuevafuente = (String)cmbFuente. } . 10).250)). BorderLayout.getContentPane(). } } class pnlLetra extends JPanel { Font thisFont.cambiarFuente(nuevafuente. nuevoestilo. Seleccion.getSelectedIndex().init().setVisible(true). Font.PLAIN. } public static void main(String s[]) { JFrame f = new JFrame("Ejemplo de renderizado de texto"). f. JApplet Seleccion = new FontSelection().addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) {System.} }).add(Seleccion. f. de acuerdo con los nuevos atributos seleccionados en los combo fontC.getSelectedItem().CENTER). f. nuevoestilo = i. nuevotam). public pnlLetra(){ thisFont = new Font("Arial". } else if ( combomodif == cmbEstilo ) { i = cmbEstilo. int w = getWidth(). que puede usarse para manipular datos de una imagen recuperados desde un archivo o una URL.getHeight(). w/2-ancho/2. //Dibuja la cadena en el centro del panel correspondiente g2. String cadena = "Seleccione una fuente. int h = getHeight().setColor(Color.stringWidth( cadena ). thisFont = new Font(nf.getFontMetrics().darkGray). repaint(). int ancho = medida. Por ejemplo. } public void paintComponent (Graphics g) { super.awt. g2. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica // Este método es el que modifica la fuente de acuerdo con los nuevos parámetros public void cambiarFuente(String nf. h/2-alto/2 ). tamaño y estilo para modificarme".UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. se puede usar un BufferedImage para implementar doble búfer . como en el caso de un párrafo.paintComponent( g ). tam). nest. g2. int alto = medida.drawString( cadena. String ntam){ Integer nuevoTam = new Integer(ntam).image. . La clase BufferedImage es una nueva clase Image en el paquete java. FontMetrics medida = g2.intValue().setFont(thisFont). Graphics2D g2 = (Graphics2D) g. } } Se recomienda revisar el ejemplo y plantear una solución para cuando el texto no cabe en una línea y se requiere separarlo. int nest. int tam = nuevoTam. Lección 39 Imágenes El API 2D de Java implementa un nuevo modelo de imagen que permite la manipulación de imágenes de resolución fija almacenadas en memoria. Un BufferedImage puede ser renderizado en un contexto Graphics o en un contexto Graphics2D. es un Un un los Figura 66 Clase BufferedImage (Sun Microsystems) El ColorModel proporciona una interpretación de color de los datos de los píxeles de la imagen. El modelo de imagen productor/consumidor proporcionado en las versiones anteriores del JDK se mantiene por razones de compatibilidad. 39. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Las clases BufferedImage y BufferedImageOp también permiten realizar una gran variedad de operaciones de filtrado de imágenes como blur o sharpen. El Ráster representa las coordenadas rectangulares de la imagen. interpretar y dibujar cada dato de pixel. El Ráster también proporciona métodos para acceder a píxeles específicos dentro de la imagen. mantiene los datos de la imagen en memoria. BufferedImage es la clase clave del API del modo-inmediato. Esta clase maneja una imagen en memoria y proporciona métodos para almacenar.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.2 Filtrado de un BufferedImage El API Java 2D define varias operaciones de filtrado para objetos BufferedImage. Cada operación de proceso de imágenes está incluida en una clase que implementa la interfaz BufferedImageOp. Es posible acceder a los datos de la imagen en una gran variedad de formatos y usar varios tipos de operaciones de filtrado para manipular los datos. La clase BufferedImageOp en el API Java 2D soporta:   Transformación afin Escalado .1 El modelo de imágenes de modo inmediato y el BufferedImage El modelo de imágenes en "modo inmediato" permite manipular y mostrar imágenes de pixeles mapeados cuyos datos están almacenados en memoria. La manipulación de imágenes se realiza en el método filter. 39. y proporciona un mecanismo para crear múltiples subimagenes de un sólo búfer de imagen. BufferedImage tiene ColorModel y un Ráster de datos de la imagen. Un BufferedImage esencialmente un Image con búfer de datos accesible. Para filtrar un BufferedImage usando una de las clases de operación de imagense debe: 1. 2.f. pasando el BufferedImage que se desea filtrar y el BufferedImage donde se quiere almacenar el resultado.f. El filtro sharpen se realiza usando un ConvolveOp.f. cop. 0. o RescaleOp. BufferedImage dstbimg = new BufferedImage(iw. El siguiente ejemplo.3.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. 0.BufferedImage. El resultado de la ejecución es la pantalla que se muestra en la Figura 67.filter(srcbimg. -1. ConvolveOp. BandCombineOp. -1. ConvolveOp cop = new ConvolveOp(kernel. -1. -1. La mayoría de los algoritmos de filtrado espacial están basados en las operaciones de convolución. . Constuir una instancia de una de las clases BufferedImageOp: AffineTransformOp.f}.f. sharpen. Llamar al método de operación filter. Se hicieron algunas modificaciones.dstbimg). Convolución es el proceso de hacer más pesado el valor de cada pixel en una imagen con los valores de los pixeles vecinos.f. public static final float[] SHARPEN3x3 = { 0.ih.EDGE_NO_OP. Kernel kernel = new Kernel(3. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica     Modificación de Aspecto Combinación Linear de Bandas Conversión de color Convolución. 0. LookupOp .TYPE_INT_RGB). 5. este ejemplo usa un código similar al del siguiente fragmento. tomado del Tutorial de Java 2D de Sun Microsystems ilustra el uso de cuatro operaciones de filtrado de imagenes: low-pass.f. Para construir y aplicar este tipo de filtrado al BufferedImage.0f. y rescale.SHARPEN3x3).f. ColorConvertOp. null). lookup. pues se presentaban errores al cargar los archivos de imagen. ConvolveOp. import java. La definición del Kernel determina el resultado del filtro.AffineTransform. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 67 Ejemplo de tratamiento de imágenes El objeto Kernel define matemáticamente cómo se ve afectada la salida de cada pixel en su área inmediata.TextLayout.awt.awt. .awt. que contiene los cuatro filtros aplicados a las imágenes es el siguiente: /* * Ejemplo de aplicación de filtros utilizando BufferedImage y BufferedImageOp.awt. */ import java. El código completo de la aplicación. * Versión modificada del ejemplo del Tutorial de Java 2D de Sun Microsystems.image.font.geom.awt.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.*. import javax. import java.*.swing.*. import java.*.event. import java. 5. optimiza el proceso de cargado de la imagen al bloquear la tarea hasta que * la imagen esté totalmente cargada. import java.WindowEvent.f. tracker. import java.f.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. con lo que se elimina el parpadeo que se produce al ir * presentándose en la pantalla partes de esa imagen que no está totalmente cargada.addImage(imagen. -1.WindowListener.f. } catch ( Exception e ) { } int iancho = imagen. vectorbi = new BufferedImage[4]. import java.f.waitForID(0). i++ ) { //Obtiene la imagen a partir del nombre de archivo correspondiente Image imagen = Toolkit.jpg".URL.jpg". -1. .*.net.event.white).awt.WindowAdapter. 0. public void init() { setBackground(Color.f.f.event. 0. String nombresimg[] = { "canocristales01. */ try { MediaTracker tracker = new MediaTracker(this).f.awt.jpg". /* El objeto MediaTracker.jpg"}.f.length. -1. -1.f}. tracker. 0. for ( int i = 0.awt. i < vectorbi. "canocristales01.getDefaultToolkit(). public static final float[] SHARPEN3x3_3 = { 0. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica import java. "rioapaporis01. 0).getImage(nombresimg[i]).applet. public class ImageOps extends Applet { private BufferedImage vectorbi[]. import java.getWidth(this). "rioapaporis01.event. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica int ialto = imagen. "RescaleOp"}. RenderingHints. SHARPEN3x3_3}.getHeight(this).TYPE_INT_RGB). transformacion. i < vectorbi.0/ialto). //Crea un contexto gráfico a partir de la imagen Graphics2D completa = vectorbi[i]. // Matriz del Filtro 0. 0. String Descrip[] = { "Convolve LowPass".KEY_RENDERING. AffineTransform transformacion = new AffineTransform(). BufferedImage.//BufferedImage donde quedará la modificada . } } public void paint(Graphics g) { Graphics2D g2 = (Graphics2D) g.VALUE_ANTIALIAS_ON). y = 0. 0. 0.1f.0/iancho. vectorbi[i] = new BufferedImage(iancho.VALUE_RÉNDER_QUALITY).0. "Convolve Sharpen". int altoap = getSize().getHeight(this).2f. (altoap-34)/2.1f.1f.createGraphics().setRenderingHint(RenderingHints. g2.black). int ialto = vectorbi[i].1f. g2.height. //Dibuja en el contexto la imagen completa. g2. 0. "LookupOp".this). 0. ialto.setRenderingHint(RenderingHints. BufferedImageOp bitrans = null. 0. for ( int i = 0.KEY_ANTIALIASING. float[][] datos = {{0. int x = 0.1f. //Tamaño del applet para calcular los tamaños de imagen y sus posiciones int anchoap = getSize().getWidth(this). RenderingHints.width.1f}.0.1f. i++ ) { int iancho = vectorbi[i].scale((anchoap-14)/2.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.setColor(Color.length.1f. 0.drawImage(imagen. filter(vectorbi[i].1f.ialto.biorig). byte chlut[] = new byte[256].y).EDGE_NO_OP.biorig). break. ConvolveOp cop = new ConvolveOp(kernel. texto. null).0f.chlut).filter(vectorbi[i].3. g2. } //Dibuja la imagen en el contexto gráfico en la correspondiente x e y. (float) x.AffineTransformOp.draw(g2.bitrans. //BufferedImage original switch ( i ) { case 0 : case 1 : x = i==0?5:anchoap/2+3. y = altoap/2+15. g2.drawImage(biorig. bitrans = new AffineTransformOp(transformacion.g2.getFontRenderContext()). ByteLookupTable blut=new ByteLookupTable(0. cop. } } . RescaleOp rop = new RescaleOp(1. lop.TYPE_NEAREST_NEIGHBOR). Kernel kernel = new Kernel(3.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. //Dubija el texto TextLayout texto = new TextLayout(Descrip[i].TYPE_BILINEAR).getFont().TYPE_INT_RGB). ConvolveOp.j<200 .20. AffineTransformOp. (float) y-4).BufferedImage. for ( int j=0.j++ ) chlut[j]=(byte)(256-j).AffineTransformOp.x. null). Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica BufferedImage biorig = new BufferedImage(iancho. y = 15.TYPE_BILINEAR). rop. bitrans = new AffineTransformOp(transformacion. case 2 : x = 5. y = altoap/2+15. LookupOp lop = new LookupOp(blut.datos[i]). bitrans = new AffineTransformOp(transformacion.biorig). null). break.filter(vectorbi[i]. case 3 : x = anchoap/2+3. createGraphics para obtener el objeto Graphics2D.pack().setSize(new Dimension(610. profundidad y distribución de pixeles corresponden exactamente a la ventana en la que serán dibujados. llamada doble búfer. se llama al método BufferedImage. elapplet. luego se llama a los métodos de dibujo apropiados del Graphics2D. se usa frecuentemente para animaciones.} }).show().init(). Applet elapplet = new ImageOps(). Para crear un BufferedImage cuyo espacio. Esta técnica.450)). Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica public static void main(String s[]) { JFrame f = new JFrame("Tratamiento de imágenes"). .UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.getContentPane().addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) {System. Para dibujar dentro de una imagen almacenada. Nota!!! Cuando dibujamos sobre automáticamente el doble búfer un componente Swing. f.exit(0). Si se necesita un control sobre el tipo de la imagen fuera de la pantalla o su transparencia. Todo el API de dibujo de Java 2D puede usarse cuando se dibuja sobre un BufferedImage que está siendo utilizado como un búfer fuera de pantalla. f. f. } } Lección 40 Técnica de Doble Búfer Cuando un gráfico es complejo o se usa repetidamente. se puede reducir el tiempo que tarda en mostrarse renderizándolo primero en un búfer fuera de pantalla y luego copiando el búfer en la pantalla. f. f. elapplet).add("Center". éste utiliza Un BufferedImage puede usarse fácilmente como un búfer fuera de pantalla. color. se llama al método createImage del componente. se puede construir directamente un objeto BufferedImage y usarlo como un búfer fuera de pantalla. Applet.image. Cuando se arrastra el rectángulo. se usa un BufferedImage como búfer fuera de la pantalla. El siguiente ejemplo permite al usuario arrastrar un rectángulo sobre la ventana del applet. para proporcionar información al usuario. Lea atentamente el código comentado. public class BufferedShapeMover extends Applet{ static protected Label lblTexto. import java. simplemente se llama al método drawImage sobre el contexto Graphics2D del componente y se le pasa el BufferedImage.event. En lugar de dibujar el rectángulo en cada posición del cursor. es renderizado dentro del BufferedImage en cada nueva posición y el BufferedImage se copia en la pantalla.awt.awt.*.*. public void init(){ //Define la organización del applet setLayout(new BorderLayout()).*. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Cuando esté listo para copiar el BufferedImage en la pantalla. import java.awt. import java. El ejemplo fue tomado del Tutorial de Sun Microsystems además de ilustrar el uso del doble búfer le puede servir para ilustrar un posible proceso de animación.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. .applet. Figura 68 Ejecución del ejemplo de doble búfer import java. pack(). * falso de lo contrario */ . Rectangle area.setSize(new Dimension(550.show(). } } class BSMCanvas extends Canvas implements MouseListener. */ int ult_x. applet). 0. boolean primeraVez = true. f. f. f. BufferedImage bi.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) {System. f. } public static void main(String s[]) { Frame f = new Frame("Ejemplo de uso de doble búfer"). applet. /* Toma las coordenas de la última vez que el usuario presiono el mouse y se ejecutó * el evento mousePressed.} }). Applet applet = new BufferedShapeMover(). MouseMotionListener{ Rectangle rect = new Rectangle(0.add("Center". Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica add(new BSMCanvas()). /* Esta variable es True si el usuario dió clic o movio el mouse fuera del area del rectangulo.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.init(). 100. lblTexto). TexturePaint texturaRelleno. 50). lblTexto = new Label("Arrastre el rectángulo dentro del área"). ult_y. texturaFilete. add("South".250)).exit(0). Graphics2D contexto. f. fillOval(0.setColor(Color.setColor(Color. BufferedImage. 2).white). r = new Rectangle(0.fillRect(0. 0. //Crea el patrón para el filete bi = new BufferedImage(5. contexto = bi. 0. 7.setColor(Color. contexto. contexto. 0.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Rectangle r = new Rectangle(0. } // Maneja el evento cuando se ha dado clic a un botón del mouse.createGraphics().y .cyan). // Crea el patrón para el relleno bi = new BufferedImage(5.blue). contexto.setColor(Color. 7). //Esta es la clase que define el fondo donde actua el rectángulo public BSMCanvas(){ setBackground(Color. contexto = bi. 5.e.0.getY(). 2.getX(). contexto.5. contexto. contexto. contexto. 2.blue).fillOval(0.TYPE_INT_RGB). contexto. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica boolean estaFuera = false. 5. .e.5.dispose(). public void mousePressed(MouseEvent e){ ult_x = rect. 0.x . r).createGraphics(). BufferedImage.cyan). texturaFilete = new TexturePaint(bi.0. addMouseListener(this). contexto.5).fillRect(0.dispose(). ult_y = rect. texturaRelleno = new TexturePaint(bi. contexto. 7.TYPE_INT_RGB). addMouseMotionListener(this). 2). r). 7).5). getX(). } } // Este método es requerido por el MouseListener.setText("Posicione el cursor en el rectángulo y luego arrastre"). } } // Maneja el evento cuando el usuario suelta el boton del mouse public void mouseReleased(MouseEvent e){ /* Chequea si el cursor está dentro del rectángulo cuando el usuario suelta el botón del mouse * e.setText("Posicione el cursor en el rectángulo y luego arrastre"). } } // Maneja el evento cuando el usuario arrastra el mouse miesntras mantiene presionado el botón. estaFuera = true.contains(e. } else { BufferedShapeMover.contains(e.setText("Posicione el cursor en el rectángulo y luego arrastre"). e. .getX y e. } else { BufferedShapeMover. estaFuera = false. public void mouseDragged(MouseEvent e){ if(!estaFuera){ updateLocation(e).lblTexto.getY())){ updateLocation(e). } else { BufferedShapeMover.getY())){ updateLocation(e).getY proporcionan las coordenadas donde se soltó el botón */ if(rect. no se implementa.lblTexto. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica // Chequea si el usuario dio clic dentro del rectangulo y se mantiene allí if(rect. e.getX().UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.lblTexto. UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas, Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica public void mouseMoved(MouseEvent e){} // Estos métodos son requeridos por el MouseMotionListener no se implementa. public void mouseClicked(MouseEvent e){} public void mouseExited(MouseEvent e){} public void mouseEntered(MouseEvent e){} // Este método es el que actualiza la localización del rectángulo public void updateLocation(MouseEvent e){ rect.setLocation(ult_x + e.getX(), ult_y + e.getY()); /* Si el método chequearRect retorna verdadero actualiza el contenido del texto para que * muestre la localización actual del rectángulo, de lo contrario muestr un mensaje */ if (chequearRect()) { BufferedShapeMover.lblTexto.setText("Rectángulo localizado en " + rect.getX() + ", " + rect.getY()); } else { BufferedShapeMover.lblTexto.setText("Por favor no intente arrastrar el rectángulo"+ " fuera del área"); } repaint(); } public void paint(Graphics g){ update(g); } public void update(Graphics g){ Graphics2D g2 = (Graphics2D)g; if(primeraVez){ Dimension dim = getSize(); int ancho = dim.width; int alto = dim.height; UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas, Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica area = new Rectangle(dim); bi = (BufferedImage)createImage(ancho, alto); contexto = bi.createGraphics(); rect.setLocation(ancho/2-50, alto/2-25); contexto.setStroke(new BasicStroke(10.0f)); primeraVez = false; } // Pone en blanco el rectángulo que se dibujó con anterioridad contexto.setColor(Color.white); contexto.clearRect(0, 0, area.width, area.height); // Dibuja y rellena el rectángulo en la nueva posición del búfer contexto.setPaint(texturaFilete); contexto.draw(rect); contexto.setPaint(texturaRelleno); contexto.fill(rect); // Dibuja la imagen del búfer en la pantalla. g2.drawImage(bi, 0, 0, this); } /* Esta función chequea si el rectángulo se encuentra dentro de la ventana del applet. * Si no se encuentra dentro del applet, el se redibuja de forma que quede al lado del * margen de la ventana. */ boolean chequearRect(){ if (area == null) { return false; } if(area.contains(rect.x, rect.y, 100, 50)){ return true; } int nuevo_x = rect.x; int nuevo_y = rect.y; UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas, Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica if((rect.x+100)>area.width){ nuevo_x = area.width-99; } if(rect.x < 0){ nuevo_x = -1; } if((rect.y+50)>area.height){ nuevo_y = area.height-49; } if(rect.y < 0){ nuevo_y = -1; } rect.setLocation(nuevo_x, nuevo_y); return false; } } CAPÍTULO 9 API 3D de JAVA A continuación se presenta un tutorial introductorio al API 3D de Java, tomado de la traducción realizada por Juan Antonio Palos al Tutorial de Sun Microsystems. Sólo contempla la etapa de reconocimiento del modelamiento inicial con el API 3D de Java, se espera que el estudiante profundice su estudio a partir de sus necesidades e intereses individuales. El API Java 3D es un interface para escribir programas que muestran e interactúan con gráficos tridimensionales. Java 3D es una extensión estándar del JDK 2 de Java. El API Java 3D proporciona una colección de constructores de alto-nivel para crear y manipular geometrías 3D y estructuras para dibujar esta geometría. Java 3D proporciona las funciones para creación de imágenes, visualizaciones, animaciones y programas de aplicaciones gráficas 3D interactivas. Esta colección de objetos describe un universo virtual. o ámbos. . que va a ser renderizado.java.media. A pesar de toda esta funcionalidad. Sin embargo. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Lección 41 Lo básico de Java 3D El API 3D de Java es un árbol de clases Java que sirven como interfaz para sistemas de renderizado de gráficos tridimensionales y un sistema de sonido. El programador trabaja con constructores de alto nivel para crear y manipular objetos geométricos en 3D. Aprovechándose de los Threads Java. Esta sección describe un conjunto mínimo de objetos y sus interacciones para renderizar un universo virtual. Un programa Java 3D crea ejemplares de objetos Java 3D y los sitúa en un estructura de datos de escenario gráfico. Estos objetos geométricos residen en un universo virtual. Lección 42 Empezar con Java 3D Todo programa Java 3D está. al menos parcialmente. Este escenario gráfico es una composición de objetos 3D en una estructura de árbol que especifica completamente el contenido de un universo virtual. Los detalles de renderizado se manejan automáticamente. Los programas Java 3D pueden escribirse para ser ejecutados como aplicaciones solitarias o como applets en navegadores que hayan sido extendidos para soportar Java 3D. que luego es renderizado. que muestra un cubo giratorio. y se presenta en varias versiones.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. y cómo va a ser renderizado. Hay cientos de campos y métodos en las clases del API Java 3D. el renderizador Java 3D es capaz de renderizar en paralelo. un sencillo universo virtual que incluya animación puede construirse con unas pocas clases. el API es sencillo de usar. ensamblado por objetos del árbol de clases Java 3D. El API está diseñado con flexibilidad para crear universos virtuales precisos de una ámplia variedad de tamaños. llamado HelloJava3Dd. Esta sección incluye el desarrollo de un sencillo pero completo programa Java 3D.j3d. El renderizador también puede optimizarse automáticamente para mejorar el rendimiento del renderizado. para demostrar cada parte del proceso de programación Java 3D. El programa de ejemplo se desarrolla de forma incremental. El API define unas 100 clases presentadas en el paquete javax. desde astronómicos a subatómicos. UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas, Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Además del paquete corazón de Java 3D, se usan otros paquetes para escribir programas Java 3D. Uno de estos paquetes es com.sun.j3d.utils al que normalmente se hace referencia como clases de utilidades de Java 3D. El paquete de las clases corazón incluye sólo las clases de menor nivel necesarias en la programación Java 3D. Las clases de utilidades son adiciones convenientes y poderosas al corazón. Estas clases se dividen en cuatro categorías: cargadores de contenidos, ayudas a la construcción del escenario gráfico, clases de geometría y utilidades de conveniencia. Al utilizar las clases de utilidades se reduce significativamente el número de líneas de código en un programa Java 3D. Además de las clases de los paquetes corazón y de utilidades de Java 3D, todo programa 3D usa clases de los paquetes java.awt y javax.vecmath. En el resto del texto, el término objeto visual se utilizará para hacer referencia a un "objeto del escenario gráfico" (por ejemplo, un cubo o una esfera). El término objeto sólo se usará para referirse a un ejemplar de una clase. El término contenido se usará para referirnos a objetos visuales en un escenario gráfico como un todo. 42.1 Construir un Escenario Gráfico Un universo virtual Java 3D se crea desde un escenario gráfico. Un escenario gráfico se crea usando ejemplares de clases Java 3D. El escenario gráfico está ensamblado desde objetos que definen la geometría, los sonidos, las luces, la localización, la orientación y la apariencia de los objetos visuales y sonoros. Una definición común de un escenario gráfico es una estructura de datos compuesta de nodos y arcos. Un nodo es un elemento dato y un arco es una relación entre elementos datos. Los nodos en un escenario gráfico son los ejemplares de las clases Java 3D. Los arcos representan dos tipos de relaciones entre ejemplares Java 3D. La relación más común es padre-hijo. Un nodo Group puede tener cualquier número de hijos, pero sólo un padre. Un nodo hoja sólo puede tener un padre y no puede tener hijos. La otra relación es una referencia. Una referencia asocia un objeto NodeComponent con un nodo del escenario gráfico. Los objetos NodeComponent definen la geometría y los atributos de apariencia usados para renderizar los objetos visuales. UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas, Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Un escenario gráfico Java 3D está construido de objetos nodos con relaciones padre-hijo formando una estructura de árbol. En una estructura de árbol, un nodo es el raíz. Se puede acceder a otros nodos siguiendo los arcos desde el raíz. Los nodos de un árbol no forman bucles. Un escenario gráfico está formado desde los árboles con raíces en los objetos Locale. Los NodeComponents y las referencias a arcos no forman parte del escenario gráfico. Sólo existe un camino desde la raíz de un árbol a cada una de las hojas; por lo tanto, sólo hay un camino desde la raíz hasta el escenario gráfico de cada nodo hoja. El camino desde la raíz de un escenario gráfico hasta una hoja especificada es el camino al escenario gráfico del nodo hoja. Como un camino de un escenario gráfico trata exactamente con un sola hoja, hay un camino de escenario gráfico para cada hoja en el escenario. Todo camino de escenario gráfico en un escenario gráfico Java 3D especifica completamente la información de estado de su hoja. Esta información incluye, la localización, la orientación y el tamaño del objeto visual. Consecuentemente, los atributos visuales de cada objeto visual dependen sólo de su camino de escenario gráfico. El renderizador Java 3D se aprovecha de este hecho y renderiza las hojas en el orden que él determina más eficiente. El programador Java 3D normalmente no tiene control sobre el orden de renderizado de los objetos. Las representaciones gráficas de un escenario gráfico pueden servir como herramienta de diseño y/o documentación para los programas Java 3D. Los escenarios gráficos se dibujan usando símbolos gráficos estándar como se ve en la Figura 69. Los programas Java 3D podrían tener más objetos que los que hay en su escenario gráfico. Para diseñar un universo virtual Java 3D se dibuja un escenario gráfico usando un conjunto de símbolos estándar. Después de completar el diseño, este escenario gráfico es la especificación para el programa. Después de completar el programa, el mismo escenario gráfico es una representación concisa del programa (asumiendo que se siguió la especificación). UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas, Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 69 Notación utilizada para la representación de un escenario gráfico Cada uno de los símbolos mostrados al lado izquierdo de la Figura 69 representa un sólo objeto cuando se usa en un escenario gráfico. Los dos primeros símbolos representan objetos de clases específicas: VirtualUniverse y Locale. Lo siguientes tres símbolos de la izquierda representan objetos de las clases Group, Leaf, y NodeComponent. Estos tres símbolos normalmente tienen anotaciones para indicar la subclase del objeto específico. El último símbolo se usa para representar otras clases de objetos. El símbolo de la flecha sólida representa una relación padre-hijo entre dos objetos. La flecha punteada es una referencia a otro objeto. Los objetos referenciados pueden ser compartidos entre diferentes ramas de un escenario gráfico. En la Figura 70, se puede observar un sencillo escenario gráfico. UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Recuerda que una hoja sólo puede tener un padre. sólo puede haber un camino desde el objeto Locale hasta la hoja (o un camino desde la hoja hasta el objeto Locale). En otras palabras. Este escenario es ilegal porque viola las propiedades de un DAG. Figura 71 Ejemplo de escenario gráfico ilegal . Se puede ver uno en la Figura 71. El problema son los dos objetos TransformGroup(TG) que tienen al mismo objeto Shape3D como hijo. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 70 Ejemplo de escenario gráfico Es posible crear un escenario gráfico ilegal. Para el ejemplo de la Figura 61. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Es posible pensar que la estructura mostrada en la Figura 71 define tres objetos visuales en un universo virtual. muestra una posible solución para este escenario gráfico. Las explicaciones del árbol y de las estructuras DAG son correctas. Un resultado de la limitación de la estructura de árbol es que cada objeto Shape3D está limitado a un sólo padre. Conceptualmente. Pero el escenario gráfico define dos objetos visuales que re-usan el objeto visual (Shape3D) del lado derecho de la figura. cada objeto TransformGroup que apadrina al ejemplar compartido de Shape3D podría situar una imagen en el objeto visual en diferentes localizaciones. el resultado es que el objeto Shape3D tiene más de un padre. Figura 72 Posible solución al escenario gráfico ilegal Cada escenario gráfico tiene un sólo VirtualUniverse. Además. Es técnicamente posible para un programa Java 3D tener más de un objeto VirtualUniverse. Sin embargo. Se puede pensar en los objetos Locale como marcas de tierra que determinan la localización de los objetos visuales en el universo virtual. el sistema de ejecución Java 3D reporta el error en términos de la relación hijopadre. Sin embargo. En este ejemplo. se lanzará una excepción 'multiple parent' en el momento de la ejecución. Este objeto tiene una lista de objetos Locale.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. un objeto de . no hay ninguna forma de comunicación entre los universos virtuales. Sin embargo. con un padre para cada objeto Shape3D. La Figura 72. Un objeto Locale proporciona una referencia a un punto en el universo virtual. es un escenario gráfico ilegal porque el arco padrehijo no forma un árbol. y así definir más de un universo virtual. la mayoría de los programas Java 3D tiene un sólo objeto Locale. 42. La rama de vista gráfica especifica los parámetros de visualización.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica un escenario gráfico no puede existir en más de un universo virtual. o rama gráfica. Cada objetoLocale puede servir de raíz para varios sub-gráficos del escenario gráfico. . si se hace referencia a la Figura 70 se podrá observar las dos ramas sub-gráficas que salen desde el objeto Locale. las dos ramas especifican la mayoría del trabajo que el renderizador tiene que hacer. Un objeto BranchGroup es la raíz de un sub-gráfico. Es altamente recomendable usar uno y sólo un ejemplar de VirtualUniverse en cada programa Java 3D. Group. sonidos y luces. comportamiento. como la posición de visualización y la dirección. Hay dos categorias de escenarios sub-gráficos: la rama de vista gráfica y la rama de contenido gráfico. La rama de contenido gráfico especifica el contenido del universo virtual . Locale. y Leaf. Mientras que un objeto VirtualUniverse podría referenciar muchos objetos Locale. Juntas. localización. En esta parte del árbol aparecen las clases VirtualUniverse.geometría. apariencia. Por ejemplo.2 Árbol de Clases de Alto Nivel del API Java 3D En la Figura 73 se pueden ver los tres primeros niveles del árbol de clases del API Java 3D. Clase Node La clase Node es una superclase abstracta de las clases Group y Leaf. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 73 Árbol de clases del API Java 3D SceneGraphObject es la superclase de casi todas las clases corazón y de utilidad de Java 3D. Esta clase define algunos de los métodos importantes de sus subclases.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Tiene dos subclases: Node y NodeComponent. Un objeto Node es un objeto nodo Group o un objeto nodo Leaf. Dos de las subclases de . Las subclases de Node proporcionan la mayoría de los objetos de un escenario gráfico. Las subclases de Node componen escenarios gráficos. Clase Group La clase Group es la superclase usada en especificación de localización y orientación de objetos visuales en el universo virtual. 7.3 Receta para Escribir Programas Java 3D Las subclases de SceneGraphObject son los ladrillos que se ensamblan en los escenarios gráficos. la textura y las propiedades de material de un nodo Shape3D (Leaf). 2. 6. el sonido y comportamiento de los objetos visuales en el universo virtual. Los NodeComponents no forman parte del escenario gráfico. Light. 42. Clase NodeComponent La clase NodeComponent es la superclase usada para especificar la geometría.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. PhysicalEnvironment. 1. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Group son: BranchGroup y TransformGroup. 11. 10. pero son referenciados por él. 3. y Canvas3D al objeto View Construir la(s) rama(s) gráfica(s) de contenido Compilar la(s) rama(s) gráfica(s) Insertar los subgráficos dentro del objeto Locale . Estos objetos podrían no tener hijos pero podrían referenciar a NodeComponents. 9. 5. Behavior. PhysicalBody. y Sound. 4. la apariencia. Clase Leaf La clase Leaf es la superclase usada para especificar la forma. Esta receta puede usarse para ensamblar muchos programas útiles de Java 3D. En la representación gráfica de un escenario gráfico. etc. Un NodeComponent podría ser referenciado por más de un objeto Shape3D. La línea básica de desarrollo de un programa Java 3D consiste en siete pasos (a los que la especificación del API Java 3D se referiere como un Receta) presentados a continuación. los simbolos de Group (círculos) normalmente se anotan con BG para BranchGroups. 12. Algunas de las subclases de Leaf son: Shape3D. 8. Crear un Objeto Canvas3D Crear un objeto VirtualUniverse Crear un objeto Locale. adjuntarlo al objeto VirtualUniverse Construir la rama de vista gráfica Crear un objeto View Crear un objeto ViewPlatform Crear un objeto PhysicalBody Crear un objeto PhysicalEnvironment Adjuntar los objetos ViewPlatform. La Figura 70 muestra algunos ejemplos de esto. TG para TransformGroups. usar SimpleUniverse no permite tener varias vistas de un universo virtual. Los programas Java 3D escritos usando la receta básica tienen ramas de vista gráfica con idéntica estructura. Esto es de lo que se trata el escribir programas Java 3D. Observe que SimpleUniverse sólo usa indirectamente los objetos View y ViewPlatform del corazón Java 3D. Los objetos SimpleUniverse suministran la funcionalidad de todos los objetos que hay dentro del recuadro azul de la Figura 74. 3 y 4 de la receta básica. Consecuentemente. La clase SimpleUniverse se usa en todos los ejemplos de programación de este tutorial. Los ejemplares de esta clase realizan los pasos 2. La clase SimpleUniverse El constructor de SimpleUniverse crea un escenario gráfico que incluye un objeto VirtualUniverse y Locale. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Esta receta ignora algunos detalles pero ilustra el concepto fundamental para toda la programación Java 3D: crear la rama gráfica del escenario gráfico es la programación principal. porque permite al programador ignorar las ramas de vista gráfica. y una rama de vista gráfica completa. Usando la clase SimpleUniverse en programación Java 3D se reduce significativamente el tiempo y el esfuerzo necesario para crear las ramas de vista gráfica. los siguientes párrafos explican una forma sencilla de construir un escenario gráfico muy similar con menos programación. Sin embargo.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. En vez de ampliar esta receta. . La regularidad de la estructura de las ramas de vista gráfica tambien se encuentra en la clase de utilidad SimpleUniverse. Esta rama gráfica creada usa un ejemplar de las clases de conveniencia ViewingPlatform y Viewer en lugar de las clases corazón usadas para crear una rama de vista gráfica. el programador tiene más tiempo para concentrarse en el contenido. La clase SimpleUniverse es un buen punto de inicio en la programación Java 3D. j3d. Esta clase de utilidad crea todos los objetos necesarios para la rama de vista gráfica. . Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 74 Universo virtual mínimo proporcionado por la clase SimpleUniverse (en azul) El paquete com. Especificamente crea los objetos Locale. 5. Crear un objeto Canvas3D Crear un objeto SimpleUniverse que referencia al objeto Canvas3D anterior Personalizar el objeto SimpleUniverse Construir la rama de contenido Compilar la rama de contenido gráfico Insertar la rama de contenido gráfico dentro del objeto Locale de SimpleUniverse Constructores de SimpleUniverse Paquete: com.sun.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.utils.universe Esta clase configura un entorno de usuario mínimo para obtener rápida y fácilmente un programa Java 3D y ejecutarlo. Al usar los objetos SimpleUniverse la receta básica se simplifica: 1. ViewingPlatform. y clases Viewer de conveniencia. ViewingPlatform. y Viewer (todos con sus valores por defecto). 3.sun. 4. VirtualUniverse. Los objetos tiene las relaciones apropiadas para formar la rama de vista gráfica.j3d.universe contiene SimpleUniverse. 6. 2.utils. UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.0. puede ser el plato de imagen. La orientación por defecto es mirando hacia abajo el eje Z. el plato de imagen está centrado en el origen de SimpleUniverse. Desde esta posición. Esta idea se ilustra con los cuatro proyectores de la imagen (líneas punteadas). El renderizado puede ser como una proyección de los objetos visuales sobre el plato de imagen. y el universo virtual. un sencillo universo El objeto SimpleUniverse crea una rama de vista gráfica completa para un universo virtual. . la posición del ojo. El objeto Canvas3D. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica SimpleUniverse proporciona toda la funcionalidad necesaria para muchas aplicaciones Java 3D básicas. el punto (0. Viewer y ViewingPlatform son clases de conveniencia. el eje X es una línea horizontal que atraviesa el plato de imagen con los valores positivos hacia la derecha. Los objetos visuales delante del plato de imagen son renderizados en el plato de imagen. Figura 75 Representación del Plato de imagen y el ojo visor en el universo virtual Por defecto. La Figura 75 muestra la relación entre el plato de imagen. Esta rama incluye un plato de imagen. El eje Y es una línea vertical que atraviesa el centro del plato de imagen. SimpleUniverse() Construye un sencillo universo virtual. Un plato de imagen es el rectángulo conceptual donde se proyecta el contenido para formar la imagen renderizada. con los valores positivos arriba. Consecuentemente. SimpleUniverse(Canvas3D canvas3D) Construye virtual con una referencia al objeto Canvas3D nombrado. estas clases usan las clases View y ViewPlatform del corazón Java.0) es el centro del plato de imagen. que proporciona una imagen en una ventana de nuestra pantalla. La posición del ojo está detrás del plato de imagen. UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. el siguiente paso es la creacción de la rama de contenido gráfico. Desde esta distancia y con el campo de vista por defecto.utils. al origen dentro de la vista.utils.41) buscando en dirección z negativa hacia el origen. 2. Esto también significa que no hay una clase de "contenido sencillo" para ningún universo que podamos querer ensamblar. La regularidad de estructura encontrada en la rama de vista gráfica no existe para la rama de contenido gráfico.universe. los objetos con 2 metros de altura o de anchura generalmente entran en el plato de imagen. El Método ViewingPlatform setNominalViewingTransform() Paquete: com. Este método normalmente se usa en conjunción con el método getViewingPlatform de la clase SimpleUniverse. Este BranchGroup se añade como hijo del objeto Locale creado por SimpleUniverse. . Después de crear los objetos Canvas3D y SimpleUniverse. Después de crear la rama de contenido gráfico.j3d. se muestran a continuación: void addBranchGraph(BranchGroup bg) Se usa para añadir Nodos al objeto Locale del escenario gráfico creado por el SimpleUniverse. 0. Este método toma un ejemplar de BranchGroup como único argumento.sun. void setNominalViewingTransform() Selecciona la distancia nominal de la vista a una distancia de aproximadamente 2. se inserta dentro del universo usando el método addBranchGraph de SimpleUniverse. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Los típicos programas Java 3D mueven la vista hacía atrás (z positivo) para hacer que los objetos se acerquen.j3d. Se usa para añadir una rama de contenido gráfico al universo virtual. Algunos de los métodos de SimpleUniverse correspondiente al paquete: com.42 metros en la vista de transformación de un SimpleUniverse.sun.universe La clase ViewingPlatform se usa para configurar la rama de vista gráfica de un escenario gráfico Java 3D en un objeto SimpleUniverse. La clase SimpleUniverse tiene un miembro que es un objeto de la clase ViewingPlatform. La rama de contenido varía de un programa a otro haciendo imposible obtener los detalles de su construcción en una receta. Esta clase tiene un método setNominalViewingTransform que selecciona la posición del ojo para que esté centrado en (0. 4 Alguna Terminología Java 3D Insertar una rama gráfica dentro de un Locale la hace viva. SceneGraphObject es la superclase usada para crear un escenario gráfico incluyendo Group. Los objetos BranchGroup pueden ser compilados. Los parámetros de los objetos vivos no pueden ser modificados a menos que la capacidad correspondiente haya sido seleccionada especificamente antes de que el objeto esté vivo. Los objetos vivos estan sujetos a renderización. Los conceptos de compilado y vivo se implementan en la clase SceneGraphObject. el renderizador Java 3D realiza las operaciones mostradas en el siguiente listado: . Una vez arrancado. SceneGraphObject proporciona varios métodos y campos comunes para sus subclases: boolean isCompiled() Devuelve una bandera indicando si el nodo forma parte de un escenario gráfico que ha sido compilado. y NodeComponent. Leaf. 42. boolean isLive() Devuelve una bandera que indica si el nodo forma parte de un escenario gráfico vivo. cada uno de los objetos de esa rama gráfica también están vivos. Compilar un BranchGroup lo convierte a él y a todos sus ancestros en una forma más eficiente para el renderizado. Es mejor compilar solo los objetos BranchGroup insertados dentro de objetos Locale El método BranchGroup compile() compila la fuente BranchGroup asociada con este objeto creado y coloca en memoria caché el escenario gráfico compilado. El renderizador Java 3D empieza a funcionar en un bucle infinito cuando una rama gráfica que contiene un ejemplar de View se vuelve vivo en un universo virtual. Este método se usa con el método setNominalViewingTransform() de ViewingPlatform para ajustar la localización de la posición de vista. Compilar los objetos BranchGroup está recomendado como el último paso antes de hacerlo vivir.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica ViewingPlatform getViewingPlatform() Se usa para recuperar el objeto ViewingPlatform del SimpleUniverse ejemplarizado. y consecuentemente. Abajo se pueden ver los dos métodos de la clase SceneGraphObject que se relacionan con estos conceptos. Hay algunas consecuencias cuando un objeto se convierte en vivo. Observe que no hay un paso "Empezar a renderizar" en ninguna de las recetas anteriores. Los programas Java 3D podrían escribirse como aplicaciones. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica while(true) { Procesos de entrada If (petición de salida) break Realiza comportamientos Atraviesa el escenario gráfico y renderiza los objetos visuales } Limpieza y salida Las secciones anteriores explicaban la construcción de un sencillo universo virtual sin una rama de contenido gráfico. La clase principal de un programa Java 3D normalmente define un método para construir la rama de contenido gráfico. La creacción de esta rama es el objetivo de las siguientes secciones. En el ejemplo HelloJava3Da dicho método está definido como createSceneGraph(). Los pasos de la receta sencilla se implementan en el constructor de la clase HelloJava3Da. que se muestra en la Figura 76.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. pero usar applets ofrece una forma más sencilla de producir una aplicación con ventanas. . El ejemplo HelloJava3Da. Lección 43 Un Ejemplo de la aplicación de la receta El programa Java 3D típico empieza definiendo una nueva clase que extiende la clase Applet.java es una clase definida para extender la clase Applet. se hace en la línea 31. personalizar el objeto SimpleUniverse. un ColorCube que se observa en la línea 45. compilar la rama de contenido gráfico. se hace en la línea 28. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 76 Fragmento del código de HelloJava3Da. se completa en la línea 37. El paso 4. se completa en la línea 23. Finalmente el paso 5. se realiza en la llamada al método createSceneGraph() de la línea 27. construir la rama de contenido. La clase Applet se usa como clase base para hacer más fácil la escritura de un programa Java 3D que se . insertar la rama de contenido gráfico en el objeto Locale del SimpleUniverse. Éste está localizado en el origen del sistema de coordenadas del universo virtual.4. El paso 3 de esta sencilla receta es crear la rama de contenido gráfico.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. crear un objeto SimpleUniverse. La clase HelloJava3Da está derivada de Applet pero el programa puede ejecutarse como una aplicación con el uso de la clase MainFrame. El paso 2.0. El paso 3. el valor del lado del cubo es de 0. Esta rama se crea en el fragmento de código que se muestra en la Figura 77. El paso 2a. crear un objeto Canvas3D. Contiene un objeto gráfico estático. Figura 77 Fragmento para la creación de la rama de contenido gráfico Probablemente sea la rama de contenido gráfico más sencilla posible. se realiza en la línea 35. considerando que el tamaño total del applet es 1.java El paso 1. j3d. La mayoría de los programas Java 3D tienen las sentencias import mostradas en el fragmento de la Figura 79. Figura 79 Sentencias import para HelloJava3Da.java.media.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Figura 78 Método main que crea la ventana invocando MainFrame Los tres fragmentos de código anteriores (Figura 76. A continuación se pueden ver las sentencias import necesarias para compilar la clase HelloJava3Da. Figura 77 y Figura 78) forman un programa Java 3D completo cuando se usan las sentencias import adecuadas. sólo la clase de utilidad ColorCube se encuentra en el paquete com. o javax.java . MainFrame proporciona un marco AWT (ventana) para un applet permitiendo que el applet se ejecute como una aplicación. Las clases más comunmente usadas en Java 3D se encuentran en los paquetes javax. sólo se sitúo un objeto gráfico en una única localización.geometry. El tamaño de la ventana de la aplicación resultante se especifica en la construcción de la clase MainFrame.vecmath. En el programa de ejemplo HelloJava3Da.utils. En la Figura 80 se observa el escenario gráfico resultante: Figura 80 Escenario gráfico de HelloJava3Da.sun.j3d. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica ejecuta en una ventana.java En este ejemplo. UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Los objetos BranchGroup son los únicos que pueden ser hijos de los objetos Locale. El constructor por defecto de BranchGroup es: BranchGroup() Los ejemplares de BranchGroup sirven como raíz para las ramas del escenario gráfico.java Como no se explica cada línea de código del ejemplo HelloJava3Da.1 Clases Java 3D Usadas en HelloJava3Da Para añadir un poco de entendimiento del API Java 3D y el ejemplo HelloJava3Da aquí se presenta una síntesis de las clases del API Java 3D usadas en HelloJava3Da. La siguiente sección presenta cada una de las clases usadas en el programa. Figura 81 Ejecución de HelloJava3Da. Los ejemplares de BranchGroup son la raíz de los sub-gráficos. Los hijos de un objeto BranchGroup pueden ser otros objetos Group o Leaf. Los objetos BranchGroup pueden tener varios hijos. los objetos BranchGroup son los únicos objetos que pueden insertarse en un conjunto de objetos Locale. . las ideas básicas de ensamblar un programa Java 3D deberían estar claras habiendo leído el ejemplo. 43. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica La imagen que proporciona la ejecución del código completo se muestra en la Figura 81. Clase BranchGroup Los objetos de este tipo se usan para formar escenarios gráficos. Algunas aproximaciones son: 45º es 0. Un objeto Transform3D no se usa en un escenario gráfico. Cuando se especifica una rotación.785.PI. o una combinación de éstas. una rotación. Clase Transform3D Los objetos Transform3D representan transformaciones de geometrías 3D como una traslación o una rotación. 90º es 1.14.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. se construye el objeto Transform3D. La representación matemática es la mejor forma. . posiblemente desde una combinación de objetos Transform3D. A continuación se presenta una lista parcial de métodos de Transform3D void rotX(double angle) Selecciona el valor de esta transformación a una rotación en contra del sentido del reloj sobre el eje-x. Primero. Luego se construye el objeto TransformGroup usando el objeto Transform3D. Es una extensión de la clase Canvas del AWT. El constructor de Canvas3D es: Canvas3D(GraphicsConfiguration graphicsconfiguration) Construye e inicializa un nuevo objeto Canvas3D que el Java 3D puede renderizar dando un objeto GraphicsConfiguration válido. Estos objetos normalmente sólo se usan en la creacción de un objeto TransformGroup. el ángulo se expresa en radianes. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Clase Canvas3D La clase Canvas3D deriva de la clase Canvas del AWT. Un objeto de transformación generalizado se representa internamente como una matriz de 4x4 doubles de punto flotante. Se usa para especificar la transformación de un objeto TransformGroup. Por lo menos un objeto Canvas3D debe ser referenciado en la rama de vista gráfica del escenario gráfico. Un objeto Transform3D puede representar una traslación. El ángulo se especifica en radianes.57. y 180º es 3. Otra forma es especificar los valores directamente. un escalado. El constructor por defecto de Transform3D Transform3D() Construye un objeto Transform3D que representa la matriz de identidad (no la transformación). Una rotación completa es 2 PI radianes. Una forma de especificar ángulos es usar la constante Math. Los objetos Vector se usan frecuentemente para . Los objetos TransformGroup contienen transformaciones geométricas como traslaciones y rotaciones. El ángulo se especifica en radianes. La transformación contenida en un objeto Transform3D se copia a un objeto TransformGroup o cuando se crea el TransformGroup. e z. TransformGroup(Transform3D t1) Construye e inicializa un TransformGroup desde un objeto Transform3D t1 pasado como parámetro. Clase TransformGroup Como una subclase de la clase Group.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Clase Vector3f Vector3f es una clase matemática que se encuentra en el paquete javax. que no es un objeto del escenario gráfico. void rotZ(double angle) Selecciona el valor de esta transformación a una rotación en contra del sentido del reloj sobre el eje-z. Así: void setTransform(Transform3D t1) Selecciona el componente de transformación de este TransformGroup a partir del valor de de la transformación pasada en el parámetro t1. o usando el método setTransform(). La transformación normalmente se crea en un objeto Transform3D. Los contructores de TransformGroup son: TransformGroup() Construye e inicializa un TransformGroup usando una identidad de transformación.vecmath para especificar un vector usando tres valores de punto flotante para las coordenadas x. void set(Vector3f translate) Selecciona el valor transacional de esta matriz al valor del parámetro Vector3f. El ángulo se especifica en radianes. y selecciona los otros componentes de la matriz como si ésta transformación fuera una matriz idéntica. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica void rotY(double angle) Selecciona el valor de esta transformación a una rotación en contra del sentido del reloj sobre el eje-y. y. los ejemplares de TransformGroup se usan en la creacción de escenarios gráficos y tienen una colección de objetos nodos como hijos. z especificadas. A continuación se muestran los constructores de Vector3f Vector3f() Construye e inicializa un Vector3f a (0. Por defecto. El fragmento de código de la Figura 82 incorpora un objeto TransformGroup en el escenario gráfico para rotar el cubo sobre el eje x.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Lección 44 Rotación de objetos Una simple rotación del cubo puede hacer que se vea más de una de sus caras. ColorCube extiende la clase Shape3D. . El primer paso es crear la transformación deseada usando un objeto Transform3D.0. Clase ColorCube ColorCube es una clase de utilidad que se encuentra en el paquete com.sun. Los otros colores son azul. scale) y (-scale. float y. de ancho y de profundo. es un nodo hoja. verde y cian. float z) Construye e inicializa un Vector3f desde las coordenadas x. Si un cubo sin rotar se sitúa en el origen (como en HelloJava3Da). Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica especificar traslaciones de geometrías. ColorCube(double scale) Construye un cubo de color escalado por el valor especificado. Primero se crea la transformación de rotación usando el objeto rotate de Transform3D.utils. por lo tanto.j3d. amarillo. se verá la cara roja desde la localización de visión nominal. u otras cosas.geometry que define la geometría y colores de un cubo centrado en el origen y con diferentes colores en cada cara. Se usan para especificar las traslaciones. scale. Los objetos Vector3f no se usan directamente en la construcción de un escenario gráfico. -scale. en la linea 24. . Vector3f(float x. magenta. El tamaño por defecto es 2 unidades de lado. resultando un cubo que está centrado en el origen y tiene 2 unidades de alto. una esquina está situada a 1 unidad de cada uno de los ejes desde el origen. El ColorCube resultante tiene esquinas en (scale. Los coonstructores de ColorCube son: ColorCube() Construye un cubo de color del tamaño por defecto. superficies normales. y.0). -scale). En este caso el objeto TransformGroup cambia la orientación. El objeto TransformGroup es el único que puede cambiar la localización. Por supuesto. se usa en la creacción del objeto TransformGroup objRotate (línea 31). Solamente las líneas 24 y 27 ejecutan la rotación en un eje. A su vez. El objeto Transform3D se usa en el escenario gráfico. El eje se elige seleccionando el método apropiado (rotX. . Después de crear el objeto Transform3D. el objeto ColorCube es necesario para suministrar el objeto visual. rotate.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. El objeto BranchGroup es el único que puede ser hijo de un Locale. la orientación. o el tamaño de un objeto visual. Entonces se crea el objeto TransformGroup en la línea 31 para contener la transformación de rotación. y el ángulo de rotación. el valor PI/4 es 1/8 de una rotación completa. Como el ángulo de rotación se especifica en radianes. El ángulo de rotación es el valor que se le pasa como argumento. o 45 grados. Figura 82 Fragmento de código para rotar un objeto Dos parámetros especifican la rotación: el eje de revolución. Entonces el objeto objRotate hace que ColorCube sea su hijo (línea 34). La rama de contenido gráfico ahora incluye un objeto TransformGroup en el camino del escenario gráfico hacia el objeto ColorCube. Cada uno de los caminos del escenario gráfico es necesario. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica La rotación se especifica usando el método rotX() de la línea 27. A continuación se puede observar el escenario gráfico producido por el fragmento de la Figura 82. Figura 83 Escenario gráfico para la rotación del cubo El resultado de la ejecución de la rotación en un eje y al modificar el eje se se puede observar en la siguiente secuencia gráfica. rotY o rotZ). el objeto objRoot hace a objRotate como su hijo (línea 33). Hasta el momento nos habíamos fijado solamente en las líneas 24 y 27 para rotar el objeto visual en un solo eje. El ejemplo rota el cubo sobre los ejes x e y. Para el ejemplo se pedirá revisar nuevamente el código de la Figura 82.java es el siguiente: /* @(#)HelloJava3Db.1 Combinación de transformaciones Frecuentemente un objeto visual se traslada y se rota. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 84 Resultado de rotar el cubo en X Figura 85 Resultado de rotar el cubo en Y Figura 86 Resultado de rotar el cubo en Z 44. * HelloJava3Db dibuja un cubo simple rotado 45° en x y 36° en y . Se crean dos objetos Transform3D. al incluir las demás líneas se obtendrá una combinación de rotaciones. Luego las rotaciones se combinan mediante la multiplicación de los objetos Transform3D (línea 29). Para crear estas dos rotaciones simultáneas se requiere combinar dos objetos Transform3D de rotación. En cualquier caso. Inc.1 00/09/22 13:55 * Copyright (c) 1996-2000 Sun Microsystems. La combinación de las dos transformaciones se carga en el objeto TransformGroup (línea 31). correspondiente al programa HelloJava3Db. Las rotaciones individuales se especifican para los dos objetos TransformGroup (líneas 27 y 28). o se rota sobre dos ejes. uno por cada rotación (líneas 24 y 25). El código completo del ejemplo HelloJava3Db.java 1. Las dos transformaciones pueden combinarse en una matriz de transformaciones y contenerse en un sólo objeto TransformGroup.java. se especifican dos transformaciones diferentes para un sólo objeto visual.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. All Rights Reserved. vecmath.event.PI/4. return objRoot. } // Fin del método CreateSceneGraph que crea la escena .sun. TransformGroup objRotate = new TransformGroup(rotate).geometry. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica */ import java.*.utils.4)).sun.utils. Transform3D tempRotate = new Transform3D().*.sun.mul(tempRotate). import javax.awt.j3d. import java. objRoot. rotate. import com.*.0d). import com.GraphicsConfiguration.media.j3d. public class HelloJava3Db extends Applet { public BranchGroup createSceneGraph() { // Crea la raíz del árbol BranchGroup objRoot = new BranchGroup().UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.MainFrame.rotX(Math.BorderLayout.addChild(new ColorCube(0.awt. import java.applet. import com. // El objeto rotate contiene la matriz de transformación Transform3D rotate = new Transform3D(). objRotate.j3d.*.addChild(objRotate).Applet.universe. import java. tempRotate.awt.awt.PI/5.compile().*. import java.rotY(Math.0d).Frame.j3d. rotate.applet.utils. // Compila la escena gráfica objRoot. import javax. GraphicsConfiguration config = SimpleUniverse. Canvas3D canvas3D = new Canvas3D(config).getViewingPlatform().addBranchGraph(scene). que está construida por un SimpleUniverse y representada por una gran estrella. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica // Crea una escena simple relacionada con el universo virtual public HelloJava3Db() { setLayout(new BorderLayout()).setNominalViewingTransform().getPreferredConfiguration(). } // Fin del constructor HelloJava3Db public static void main(String[] args) { Frame frame = new MainFrame(new HelloJava3Db().UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. . canvas3D). add("Center".java. 256). BranchGroup scene = createSceneGraph(). simpleU. SimpleUniverse simpleU = new SimpleUniverse(canvas3D). En la Figura 88 se puede observar el resultado de la ejecución. La rama de vista gráfica es la misma producida en HelloJava3Da. 256. } // Fin del método main } // Fin de la clase HelloJava3Db En la Figura 87 se puede ver el escenario gráfico creado en HelloJava3Db. La rama de contenido gráfico ahora incluye un TransformGroup en el camino del escenario gráfico hacia el objeto ColorCube. simpleU. Sin embargo. Compilar Contenidos El objeto BranchGroup tiene un método compilador. Una forma es compilar todas las ramas gráficas. Sin embargo. Las posibles optimizaciones no se especifican en el API Java 3D. Para mejorar el rendimiento de la renderización se usa una representación más eficiente del universo virtual. se puede ganar en eficiencia de varias formas. Una de las posibles optimizaciones es combinar TransformGroups con caminos de escenario gráfico. si un . Además de la conversión. La otra forma es insertar una rama gráfica en un universo virtual para darle vida.2 Capacidades y Rendimiento El escenario gráfico construido por un programa Java 3D podría usarse directamente para renderizar. la representación interna podría optimizarse de una o varias maneras. Llamando a este método se convierte la rama gráfica completa que hay debajo del BranchGroup a la representación interna de Java 3D de la rama gráfica. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 87 Escenario gráfico para varias transformaciones Figura 88 Ejecución de HelloJava3Db con rotación en X e Y 44. la representación no es muy eficiente. Hay dos formas para hacer que el sistema Java 3D haga la conversión de la representación interna. Por ejemplo. Java 3D tiene una representación interna para una universo virtual y los métodos para hacer la conversión.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. La flexibilidad construida dentro de cada objeto escenario gráfico (que no se van a discutir en este tutorial) crean un representación sub-optima del universo virtual. Para que esto suceda. uno de ellos es fijar el valor de transformaciones y otros objetos en el escenario gráfico. Hay casos en que un programa necesita la capacidad de cambiar estos valores después de que estén vivos. Estos tipos de optimizaciones se hacen posibles cuando las capacidades no se configuran. Figura 89 Representación conceptual del proceso de compilar un escenario gráfico Capacidades Una vez que una rama gráfica empieza a vivir o es compilada el sistema de renderizado Java 3D la convierte a una representación interna más eficiente. Por ejemplo. la transforamción debe . El escenario gráfico del lado izquierdo es compilado y transformado en la representación interna mostrada en el lado derecho. El efecto más importante de esta conversión es la mejora del rendimiento de renderizado. cambiar el valor de un objeto TransformGroup crea animaciones. Otra posibilidad es combinar objetos Shape3D que tienen una relación estática física. este no tendrá la capacidad de cambiar los valores de los objetos del escenario gráfico una vez que estén vivos.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. La figura sólo representa el concepto de representación interna. La Figura 89 presenta una representación conceptual de la conversión a una representación más eficiente. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica escenario gráfico tiene dos objetos TransformGroup en una relacion padre-hijo pueden ser representados por un objeto TransformGroup. Pero también tiene otros efectos. A menos que especificamente se le proporcionen al programa. no como Java 3D realmente lo hace. Las dos capacidades listadas aquí son las únicas definidas por TransformGroup. para poder leer el valor de la transformación representada por un objeto TransformGroup. su capacidad de escribir transformación debe configurarse antes de compilarlo o darle vida. Leaf. void clearCapability(int bit) Borra el bit de capacidad especificado.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. el objeto TransformGroup debe tener su capacidad ALLOW_TRANSFORM_WRITE activada antes de que sea compilado o se le de vida. Para que esto sea posible. Como ejemplo. para poder cambiar el valor de la transformación en un objeto TransformGroup. ALLOW_TRANSFORM_READ Especifica que el nodo TransformGroup permite acceder a la información de transformación de su objeto. Las capacidades también controlan el acceso a otros aspectos de un objeto TransformGroup. Éste hereda varias capacidades de sus clases ancestros: Group y Node. SceneGraphObject es la superclase de casi cualquier clase usada para crear un escenario gráfico. y NodeComponent. A continuación se presenta la lista parcial de capacidades de TransformGroup. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica poder cambiar después de estar viva. ALLOW_TRANSFORM_WRITE Especifica que el nodo TransformGroup permite escribir la información de transformación de su objeto. A continuación se presenta la lista parcial de métodos de SceneGraphObject. las animaciones se crean usando una transformación de rotación que varía con el tiempo. De forma similar. Los valores de estos bits determinan que capacidades existen para el objeto después de compilarlo o de darle vida. y de que forma. incluyendo Group. El conjunto de capacidades varía con la clase. eliminar o recuperar usando los métodos definidos en SceneGraphObject. En la siguiente sección. Cada SceneGraphObject tiene un conjunto de bits de capacidad. se llama capacidades del objeto. La configuración de capacidades se puede seleccionar. La lista de parámetros a los que se puede acceder. Los objetos TransformGroup heredan configuración de . void setCapability(int bit) Configura el bit de capacidad especificado. Intentar hacer un cambio en un objeto vivo o compilado para el que la propiedad adecuada no se ha configurado resultará en una excepción. boolean getCapability(int bit) Recupera el bit de capcidad especificado. esta capacidad debe activarse antes de compilarlo o darle vida. Un programador puede usar varios comportamientos predefinidos o especificar un comportamiento personalizado. Para especificar un comportamiento para un objeto visual. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica capacidades de sus clases ancestros: Group y Node. el programador crea objetos que especifiquen el comportamiento. Cada objeto visual del universo virtual puede tener su propio comportamiento predefinido. respectivamente. la orientación. ALLOW_CHILDREN_WRITE Permite que se puedan escribir las referencias a los hijos del nodo Group después de que esté compilado o vivo. ALLOW_CHILDREN_EXTEND Permite que se puedan añadir hijos al nodo Group después de que esté compilado o vivo. añade el objeto visual al escenario gráfico y hace las referencias apropiadas entre los objetos del escenario gráfico y los objetos Behavior. Una vez que se ha especificado un comportamiento para un objeto visual. es posible que la potencia de cálculo que necesita el comportamiento degrade el rendimiento del renderizado. La distinción entre animación e interacción es si el comportamiento es activado en respuesta al paso del tiempo o en respuesta a actividades del usuario. un objeto visual puede tener varios comportamientos. En un universo virtual con muchos comportamientos. u otros atributos del objeto visual. ALLOW_CHILDREN_READ Permite que se puedan leer las referencias a los hijos del nodo Group después de que esté compilado o vivo. El comportamiento puede cambiar virtualmente cualquier atributo de un objeto visual. Lección 45 Añadir Comportamiento de Animación En Java 3D. el color. De hecho.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. se necesita una significante potencia de cálculo para calcular los comportamientos. el sistema Java 3D actualiza automáticamente la posición. Behavior es una clase para especificar animaciones o interacciones con objetos visuales. En el siguiente bloque de referencia se pueden ver ver algunas de esas capacidades. Como tanto el renderizador como el comportamiento usan el mismo procesador. . Lista Parcial de Capacidades de Group: TransformGroup hereda varios bits de capacidades de sus clases ancestros. Especifica los parámetros de tiempo para el alpha. Un Interpolator es uno de las muchas clases de comportamientos predefinidos en el paquete corazón de Java 3D. el objeto Interpolator manipula los parámetros de un objeto del escenario gráfico. si nadie en el bosque ve el árbol caer. Crear un TransformGroup fuente. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Java 3D permite al programador manejar este problema especificando un límite espacial para que el comportamiento tenga lugar. La siguiente lista enumera los pasos que se requieren para especificar una animación con un objeto Interpolator. Personalizar los parámetros del comportamiento. 4. Configurar la región programada para el comportamiento. éste no cae. Este límite se llama región programada. Crear un objeto Alpha (función de tiempo en Java 3D). Los cinco pasos forman una receta para crear un comportamiento de animación con interpolación: 1. Basado en una función de tiempo.1 Ejemplo de Comportamiento: HelloJava3Dc El fragmento de código de la Figura 90 muestra un ejemplo completo del uso de las clases interpoladoras para crear una animación. Por ejemplo. Selecciona la capacidad ALLOW_TRANSFORM_WRITE. Tiene referencias con los objetos Alpha y TransformGroup. Hacer el comportamiento como hijo del TransformGroup 45. 2. . En otras palabras. 5.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. para el RotationInterpolator. Un comportamiento no está activo a menos que el volumen de activación de ViewPlatform interseccione con una región progamada del Behavior. 3. manipula la rotación especificada por un TransformGroup para afectar la rotación de los objetos visuales que son ancestros de TransformGroup. La animación creada con este código es una rotación continúa con un tiempo de rotación total de 4 segundos. La característica de región programada hace más eficiente a Java 3D en el manejo de universos virtuales con muchos comportamientos. Crear el objeto Interpolator. Especificar la región programada. El objeto TransformGroup llamado objSpin se crea en la línea 25. El objeto RotationInterpolator se crea en la línea 36. El paso 4 es especificar una región programada. La esfera se configura como los límites del comportamiento en la línea 41. Al ejecutar la aplicación veremos como . el comportamiento es rotar cada cuatro segundos. El interpolador debe tener referencias a la transformación fuente y al objeto alpha. El objeto TransformGroup fuente de un interpolador debe tener activada la capacidad de escritura. Esto se consigue en el constructor. El valor de "-1" especifica un bucle contínuo. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Figura 90 Código para la creación de la escena con comportamiento RotationInterpolator El paso 1 de la receta es crear el objeto TransformGroup para modificarlo durante la ejecución. El paso 2 es crear un objeto Alpha para dirigir la interpolación.java. Esto se consigue en la línea 42. Los dos parámetros especificados en la línea 34 del fragmento de código son el número de interacciones del bucle y el tiempo de un ciclo. El paso final.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. La capacidad de escritura de objSpin se selecciona en la línea 26. el 5. El paso 3 de la receta es crear el objeto Interpolator. El objeto BoundingSphere se crea en la línea 40. Este fragmento de código se usa con otros fragmentos anteriores para crear el programa de ejemplo HelloJava3Dc. Por lo tanto. Se usa un objeto BoundingSphere con sus valores por defecto. En este ejemplo se usa el comportamiento por defecto del RotationInterpolator para hacer una rotación completa sobre el eje y. El tiempo se especifica en milisegundos por lo que el valor de 4000 significa 4 segundos. hace del comportamiento un hijo del TransformGroup. El objeto rotation es tanto hijo del TransformGroup como una referencia a él. La línea punteada desde el Behavior hacia el TransformGroup es esta referencia. el color (ColorInterpolator). no lo hace.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.2 Clases que intervienen para programar el comportamiento de animación Una acción de comportamiento puede ser cambiar la localización (PositionInterpolator). o la transpariencia (TransparencyInterpolator) de un objeto visual. Aunque esta relación parece violar las restricciones de bucles dentro del escenaio gráfico. Recuerda que los arcos de referencia (flecha punteada) no son parte del escenario gráfico. Todos los comportamientos mencionados son posibles sin usar un Interpolator. la orientación (RotationInterpolator). . La ejecución del ejemplo HelloJava3Dc proporciona la siguiente ventana gráfica: Figura 92 Ejecución del ejemplo HelloJava3Dc.java 45. el tamaño (ScaleInterpolator). sin embargo. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica se renderiza el ColorCube con un comportamiento de rotación cada cuatro segundos. Como se mencionó antes. Figura 91 Escenario gráfico incluyendo comportamiento El programa HelloJava3Dc crea el escenario gráfico de la Figura 91. los Interpolators son clases de comportamiento predefinidas. El objeto TransformGroup de un interpolador debe tener la capacidad de escritura activada. el objeto RotationInterpolator tiene el siguiente constructor que puede usarse para eso: RotationInterpolator(Alpha alpha. inclusives. haciendo la programación tremendamente flexible.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Clase RotationInterpolator Esta clase se usa para especificar un comportamiento de rotación de un objeto visual o de un grupo de objetos visuales. Los objetos Alpha se usan comunmente con un comportamiento Interpolator para proporcionar animaciones de objetos visuales. usando el TransformGroup especificado. Las clases Interpolators existen para proporcionar otras acciones. incluyendo combinaciones de estas acciones. Sin entrar en detalles de cada parámetro. La clase Alpha produce un valor entre cero y uno. Como el valor de este objeto cambia cada vez. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica los interpolators hacen mucho más sencilla la cracción de comportamientos. la rotación también cambia. Clase Alpha Los objetos de la clase Alpha se usan para crear una función que varía en el tiempo. Un objeto RotationInterpolator es flexible en la especificación del eje de rotación. Para rotaciones constantes sencillas. El valor que produce depende de la hora y de los parámetros del objeto Alpha. el ángulo de inicio y el ángulo final. Mapear una acción en el tiempo se hace usando un objeto Alpha. saber que un ejemplar de Alpha puede combinarse fácilmente con un comportamiento para proporcionar rotaciones . Un objeto RotationIterpolator cambia un objeto TransformGroup a una rotación especififca en repuesta a un valor de un objeto Alpha. TransformGroup target) Este constructor usa valores por defecto de algunos parámetros del interpolador para construir una rotación completa sobre el eje y. Los parámetros son: alpha: la función de variación de tiempo para referencia. Alpha tiene diez parámetos. target: el objeto TransformGroup a modificar. La especificación de este objeto puede ser compleja. el objeto alpha se repite indefinidamente. Otras opciones incluyen BoundingBox y BoundingPolytope. increasingAlphaDuration: tiempo en milisegundos que tarda el objeto alpha en ir de cero a uno. la más sencilla es crear un objeto BoundingSphere. Región Progamada Como se mencionó anteriormente. La sintaxis del método setShedulingBounds se presenta a continuación: void setSchedulingBounds(Bounds region) . El objeto Alpha es efectivamente una función de tiempo que genera valores alpha entre cero y uno. Hay varias formas de especificar una región programada. Los parámetros: loopCount: número de veces que se ejecuta este objeto alpha. movimientos de péndulo. cada comportamiento tiene unos límites programados. Alpha(int loopCount. El tiempo que tarde en ir desde cero hasta uno está especificando en el segundo parámetro usando una escala de milisegundos. resultando un objeto Alpha que produce valores desde cero a uno crecientes.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. y eventos de una vez. Esto se repite el número de veces especificado por loopCount. long increasingAlphaDuration) Este constructor toma sólo loopCount e increasingAlphaDuration como parámetros y asigna los valores por defecto a todos los demás parámetros. Estos límites se configuran usando el método setSchedulingBounds de la clase Behavior. La función "f(t)" y las características del objeto Alpha están determinadas por parámetros definidos por el usuario: Algunos constructores para el objeto Alpha son: Alpha() Bucle continuo con un periodo de un segundo. como la apertura de puertas o el lanzamiento de cohetes. Si loopCount es -1. un valor de -1 especifica un bucle indefinido. La clase Alpha proporciona objetos para convertir la hora en un valor alpha (un valor entre 0 y 1). Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica sencillas. MainFrame. Algunos de los constructores de BoundingSphere son: BoundingSphere() Este constructor crea una límite esférico centrado en el origen (0.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.Frame. 0) con un radio de 1. All Rights Reserved.awt.applet. import com.*.Applet.3 Ejemplo de combinación de Transformación y Comportamiento: HelloJava3Dd Como se puede suponer. HelloJava3Dd. import java.awt. hay objetos llamados objRotate y objSpin. incluyendo todas las posibles localizaciones del objeto.applet. double radius) Construye e inicializa un BoundingSphere usando el punto central y el rádio especificados. . * Este ejemplo presenta la animación continua de un cubo rotado */ import java.1 00/09/22 13:55 * Copyright (c) 1996-2000 Sun Microsystems. 0). El código completo de la aplicación que permite dibujar la escena se presenta a continuación. import java.java 1. import java. /* @(#)HelloJava3Dd. 0.event. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Selecciona la región programada del Behavior a unos límites especificados por el parámetro region. 0. El uso normal de este tipo de límites es usar el centro a (0.BorderLayout. BoundingSphere(Point3d center.awt. 45.utils.java hace esto. que distinguen entre la rotación estática y el comportamiento de rotación (bucle continuo) del objeto Cube respectivamente.GraphicsConfiguration. Clase BoundingSphere Especificar un límite esférico se consigue especificando un punto central y un rádio para la esfera. En la rama de contenido gráfico.awt. Entonces el radio se selecciona lo suficientemente grande como para contener el objeto visual.j3d. es posible combinar comportamientos con las transformaciones de rotación de los ejemplos anteriores. Inc. import java.sun. setCapability(TransformGroup. // Crea el ColorCube y lo agrega a la escena objSpin. // Crea el objeto Behavior para desarrollar la animación deseada // que consiste en un rotación continua sobre el eje Y cada 4 sg Transform3D yAxis = new Transform3D(). public class HelloJava3Dd extends Applet { public BranchGroup createSceneGraph() { // Crea la raiz de la escena BranchGroup objRoot = new BranchGroup(). Alpha rotationAlpha = new Alpha(-1. observada en HelloJava3Dc TransformGroup objSpin = new TransformGroup(). Transform3D rotate = new Transform3D().*. rotate. import com.PI/5.*.universe. Transform3D tempRotate = new Transform3D().j3d.j3d.*. // Estas son las líneas que permiten el Behavior o // animación de rotación continua. import javax.vecmath.PI/4.utils.rotX(Math. tempRotate.0d).utils. 4000).addChild(new ColorCube(0.rotZ(Math.0d).j3d. objRoot.mul(tempRotate). objSpin. .UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.geometry. TransformGroup objRotate = new TransformGroup(rotate).ColorCube. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica import com.addChild(objRotate). // Estas son las líneas que permiten la rotación // combinada en los ejes X e Z.media. import javax.sun.sun.addChild(objSpin). rotate.ALLOW_TRANSFORM_WRITE).4)). objRotate. 0f).addBranchGraph(scene).setNominalViewingTransform(). GraphicsConfiguration config = SimpleUniverse.PI*2. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica RotationInterpolator rotator = new RotationInterpolator(rotationAlpha. 256). add("Center". objSpin. } // Fin del método main } // Fin de la clase HelloJava3Dd . objSpin.getPreferredConfiguration().setSchedulingBounds(bounds). 0. // Se especifica el área activa de la escena como una Esfera BoundingSphere bounds = new BoundingSphere().addChild(rotator).compile(). simpleU. } // Fin del constructor de HelloJava3Dd public static void main(String[] args) { Frame frame = new MainFrame(new HelloJava3Dd(). 256. return objRoot. canvas3D). scene. SimpleUniverse simpleU = new SimpleUniverse(canvas3D). } // Fin del método CreateSceneGraph public HelloJava3Dd() { setLayout(new BorderLayout()).getViewingPlatform(). simpleU. Canvas3D canvas3D = new Canvas3D(config). (float) Math.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. BranchGroup scene = createSceneGraph(). rotator.0f. yAxis. java .UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica La representación gráfica de la escena y la ventana generada se muestran en las siguientes figuras: Figura 93 Escena gráfica que combina transformación y comportamiento Figura 94 Ejecución del ejemplo HelloJava3Dd. overclockers. Curso de programacion Java en 3D. Definición de Alpha Blending. Tutorial de Java. CL.clase. Fecha de consulta: Noviembre de 2005.es/lsi/Invest/Java/Tuto.html#quinc e. Fecha de consulta: Diciembre de 2005. Computer graphics: principles and practice.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas. VAN DAM. PROGRAMACIÓN EN CASTELLANO. FOLEY. .com/videojuegos. PLANETALIA. Agustín.com/cursos/Java-Invaders/JAVA-INVADERS00.programacion.confluent.com/tutorial/3d/1/. Fecha de consulta: Noviembre de 2005.inf. CREATIVE COMMONS. [En línea] http://www. Miguel Angel et al. Addison Wesley. [En línea] http://www. Fecha de consulta: Noviembre de 2005. John F.php?name=enciclopedia&ver=4 Fecha de consulta: Enero de 2006.ubu. Videojuegos programados en Java.jsp.edu.Oct98/index. JAVA EN CASTELLANO. Archivo de ayuda construido a partir de la documentación del J2SE. FROUFE. Fecha de consulta: Enero de 2006.COM.planetalia.COM. Curso para la programacion de un juego de marcianitos en Java. Traducción del Tutorial de Sun Microsystems realizada por Juan Antonio Palos (ozito) [En línea] http://www. [En línea] http://grafics.mx/paginas/JavaTut/froufe/introduccion/indice2. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica Fuentes documentales unidad 3 ALLIMANT.itapizaco. James D.programacion.planetalia-exitos. Traducción del curso de Sun Microsystems realizada por Juan Antonio Palos (ozito) [En línea] http://www. Fecha de consulta: Noviembre de 2005. OVERCLOCKERS. [En línea] http://pisuerga. Gráficos con Java 2D.pina. Definición del término Alpha Blending.html. [En línea] http://www. 1996. Andries.cl/modules.fr/javadoc/indexe. Steven K. PLANETALIA. Guía rápida de aprendizaje del lenguaje Java. MANZANEDO. y HUGHES. Fecha de consulta: Diciembre de 2005.com/java/tutorial/2d/1/.be/definicio.php?id=21 Fecha de consulta: Enero de 2006.htm. [En línea] http://www.. Frank. FEINER. [En línea] http://www. sun. [En línea] http://es.UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD Escuela de Ciencias Básicas.html y http://java. [En línea] http://java.com/products/java-media/3d Fecha de consulta: Diciembre de 2005. .com/products/java-media/3D/downloads/index. Fecha de consulta: Enero de 2006. Tecnología e Ingeniería Ingeniería de Sistemas Curso Computación Gráfica SUN MICROSYSTEMS: Sitio oficial para descargas y documentación de Java.sun. WIKIPEDIA.org/wiki/API .wikipedia. Definición de API.