Sie sind auf Seite 1von 195

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

Escuela de Ciencias Bsicas, Tecnologa e Ingeniera


Ingeniera de Sistemas
Curso Computacin Grfica

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA

ESCUELA DE CIENCIAS BSICAS, TECNOLOGA E INGENIERA

MODULO DEL CURSO ACADMICO


COMPUTACIN GRFICA
299210

OSCAR JAVIER ABAUNZA GARCA


Director Nacional

Bucaramanga, Julio de 2012

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

UNIDAD 1 FUNDAMENTOS DE COMPUTACIN GRFICA.............................................. 9


CAPTULO 1 Evolucin de la computacin grfica ......................................................... 11
Leccin 1 Anticipando la tecnologa ............................................................................ 11
Leccin 2 Los primeros aportes .................................................................................. 13
Leccin 3 Teoras y planteamientos............................................................................ 15
Leccin 4 La revolucin .............................................................................................. 18
Leccin 5 Cronologa en el desarrollo de la computacin grfica ............................... 19
CAPTULO 2 Fundamentos de computacin grfica ...................................................... 23
Leccin 6 Tipos de graficacin computacional ............................................................ 23
Leccin 7 Sistema de coordenadas ............................................................................ 27
Leccin 8 Introduccin a la teora del color ................................................................. 29
Leccin 9 Modelos de color ........................................................................................ 33
Leccin 10 Representacin del color en computacin grfica ..................................... 37
CAPTULO 3 El hardware y el software para computacin grfica ................................. 41
Leccin 11 Dispositivos de vectores ........................................................................... 43
Leccin 12 Dispositivos de rster ............................................................................... 44
Leccin 13 Hardware grfico para monitores - La tarjeta de video .............................. 45
Leccin 14 Dispositivos de entrada............................................................................. 48
Leccin 15 Software de graficacin ............................................................................ 51
UNIDAD 2 ALGORITMOS BSICOS DE DIBUJO EN 2 DIMENSIONES .......................... 58
CAPTULO 4 Requerimientos de software ..................................................................... 60
Leccin 16 JDK........................................................................................................... 60
Leccin 17 Estructura bsica de un programa en JAVA ............................................. 62
Leccin 18 Tipos de datos y variables ........................................................................ 63
Leccin 19 IDE para JAVA ......................................................................................... 64
Leccin 20 Compilacin y ejecucin ........................................................................... 69
CAPTULO 5 Algoritmos bsicos.................................................................................... 71
Leccin 21 Especificacin de una discretizacin......................................................... 71
Leccin 22 Segmentos de recta.................................................................................. 72
Leccin 23 Discretizacin de circunferencias .............................................................. 78
Leccin 24 Dibujo de polgonos .................................................................................. 80

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Leccin 25 Llenado de reas ...................................................................................... 83


CAPTULO 6 Transformaciones ..................................................................................... 84
Leccin 26 Breve repaso sobre matrices .................................................................... 85
Leccin 27 Cambios de escala ................................................................................... 87
Leccin 28 Rotacin ................................................................................................... 88
Leccin 29 Coordenadas homogneas y traslacin .................................................... 90
Leccin 30 Rotacin alrededor de un punto ................................................................ 92
UNIDAD 3 TRABAJANDO CON UN API GRFICA ........................................................... 96
CAPTULO 7 Fundamentos del API 2D de JAVA ......................................................... 100
Leccin 31 Caractersticas generales del API 2D de Java ........................................ 100
Leccin 32 Ubicacin espacial, textos e imgenes ................................................... 104
Leccin 33 Rellenos, Filetes y Composiciones ......................................................... 108
Leccin 34 Los paquetes del API 2D de Java ........................................................... 110
Leccin 35 La clase Graphics ................................................................................... 113
CAPTULO 8 API 3D de JAVA ..................................................................................... 118
Leccin 36 Figuras bsicas en Java 2D (Shape) ...................................................... 118
Leccin 37 reas ...................................................................................................... 130
Leccin 38 Texto y Fuentes ...................................................................................... 134
Leccin 39 Imgenes ................................................................................................ 141
Leccin 40 Tcnica de Doble Bfer .......................................................................... 148
CAPTULO 9 API 3D de JAVA ..................................................................................... 155
Leccin 41 Lo bsico de Java 3D ............................................................................. 156
Leccin 42 Empezar con Java 3D ............................................................................ 156
Leccin 43 Un Ejemplo de la aplicacin de la receta ................................................ 170
Leccin 44 Rotacin de objetos ................................................................................ 176
Leccin 45 Aadir Comportamiento de Animacin.................................................... 184

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

ASPECTOS DE PROPIEDAD INTELECTUAL Y VERSIONAMIENTO

El contenido didctico del curso acadmico Computacin Grfica fue diseado


inicialmente en el ao 2005 por Adriana roco Lizcano Dallos, docente de la UNAD,
CEAD Bucaramanga, ingeniera de sistemas, en su desempeo como tutora.
Se han realizado las siguientes actualizaciones al contenido didctico:

Distribucin de captulos y lecciones segn el estndar CORE.

Adicin del captulo 4 Requerimientos de software

Estos cambios fueron realizados por Oscar Javier Abaunza Garca, docente de la
UNAD, CEAD Bucaramanga, ingeniero de sistemas, especialista en educacin
superior a distancia, en su desempeo como tutor y director del curso a nivel
nacional.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

INTRODUCCIN

Gracias a la paranoia de la Guerra Fra, el Departamento de Defensa de Estados


Unidos cre la Agencia de Proyectos de Investigacin Avanzada (ARPA, por sus
siglas en ingls). En torno a esta organizacin, jvenes ingenieros trabajaron en
varios centros acadmicos de Estados Unidos para lograr que la computacin
dejara de ser un campo reservado a expertos, como lo era a mediados del siglo
XX. Efectivamente, a inicios de la dcada de los sesenta, la computacin ya se
haba abierto un poco a las universidades, pero segua siendo asunto de una lite.
Sin embargo, a principios de la siguiente dcada, la computacin se convirti en
una industria y comenz a perfilarse como una subcultura.
El equipo que durante varios aos fue auspiciado por el ARPA estuvo dirigido por
Douglas C. Engelbart. El concepto de microcomputadora actual surgi de aquel
grupo; Engelbart insista en que las nuevas computadoras deban poder ser
utilizadas por personas no especialistas. Para ello, fue necesario el desarrollo e
integracin de la computacin grfica, la computacin interactiva y la de tiempo
compartido.
Ivan Sutherland, del Lincoln Laboratory del MIT y parte del grupo de Engelbart,
desarroll el campo de la computacin grfica, es decir, la incorporacin de una
pantalla a una computadora. En 1962, cre el primer sistema de interfaz grfica, el
Sketchpad. Poco despus, la computadora DEC-PDP-1, financiada por la DEC
(Digital Equipment Corporation), y diseada por ingenieros del MIT, fue la primera
microcomputadora que mostraba informacin en una pantalla. Atrs quedaba la
penosa comunicacin con la computadora por medio de tarjetas y cintas que
confunda la interpretacin y requera de un especialista en todo momento.
El segundo concepto, el de la computacin interactiva, se refiere al uso de una
computadora en tiempo real; es decir, durante los primeros aos de la dcada de
los sesenta, en paralelo a la evolucin de la computacin grfica, se desarrollaron
las tcnicas que permitieron que las computadoras pudieran usarse como un
msico lo hace con su instrumento: al tiempo que lo toca escucha el resultado de
su operacin. La intencin fue dejar atrs la mecnica de uso asincrnica, al menos
en tres tiempos: el acceso de informacin y/o programas por medio de tarjetas y
cintas perforadas, el lapso de espera mientras la mquina procesaba, y la salida de
resultados tambin en forma impresa. La computacin interactiva se desarroll
fundamentalmente en el Instituto de Investigaciones de la Universidad de Stanford.
En tercer lugar, tambin durante los aos 60, surge la computacin de tiempo
compartido, el sistema por medio del cual una misma computadora puede dar
servicio a muchas personas, a travs de terminales. La trascendencia de la
computacin de tiempo compartido estriba en que gracias a dicha forma de trabajo

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

se desarrollaron una serie de tcnicas encaminadas a permitir la transmisin de


informacin comunicacin- entre los usuarios; ejemplo derivado de ello es el
correo electrnico.
Finalmente, durante una conferencia de cmputo celebrada en San Francisco,
California, en 1968, el propio Douglas C. Engelbart present el resultado de la
integracin del trabajo de los equipos financiados por ARPA: el primer sistema
computacional que inclua teclado, tablero, mouse, monitor y ventanas
desplegables (interfaz grfica).
La interfaz grfica de usuario fue mejorada enormemente a partir de 1971 en Xerox
y poco despus en el MIT. Una dcada ms tarde, estos esfuerzos culminaron en
un producto real, cuando Steve Jobs tuvo la sabidura para introducir la Macintosh,
un microcomputador que permita interactuar fcilmente utilizando ventanas y
donde era posible ejecutar una aplicacin con un clic del ratn, este fue el principal
paso hacia adelante en el mercado y, en comparacin con ese avance, desde
entonces no ha sucedido nada importante. Copiar la Mac de Apple les llev ms de
cinco aos a todas las dems empresas.
Aun cuando el sistema grfico de interaccin por ventanas ya no es una novedad,
los desarrollos en la representacin de grficos mediante el computador se han
multiplicado a diversidad de campos: los juegos interactivos, la realidad virtual, las
simulaciones grficas de procesos qumicos, fsicos y matemticos, el cine, el
diseo asistido por computador y hasta el arte.
Pero detrs de toda la parafernalia de hardware y de la complejidad del software
para realizar representaciones en 2D y 3D, se encuentran un conjunto de principios
matemticos y algoritmos que la sustentan. Todo inicia con el punto y la recta,
desde all es posible generar la multiplicidad de aplicaciones que hoy en da
impactan y hacen pensar en una realidad paralela por su expresin y realismo.
Con el fin de proporcionar a los estudiantes de ingeniera de sistemas la posibilidad
de conocer estos fundamentos matemticos y algortmicos, que hacen posible la
representacin grfica en el computador, es que la Facultad de Ciencias bsicas e
Ingeniera de la UNAD presenta el curso de Computacin Grfica. Este curso tiene
asignados 3 crditos acadmicos y corresponde al campo de formacin Electivo del
Programa de Ingeniera de sistemas. Tiene un carcter terico-metodolgico pues
la pretensin principal est encaminada a que usted conozca los fundamentos de la
graficacin, especialmente en dos dimensiones, adems de realizar un trabajo de
uso de las posibilidades que proporcionan las API grficas, en este caso las que
proporciona el lenguaje de programacin Java para el dibujo. Este lenguaje fue
seleccionado dado su carcter de libre distribucin y la amplia gama de
posibilidades que proporciona para la graficacin tanto en dos como en tres
dimensiones.
Este curso, le proporcionar una base conceptual slida para que posteriormente a
travs del aprendizaje autnomo usted emprenda la profundizacin y la prctica en

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

el aprendizaje de otras herramientas de graficacin, lo mismo que el desarrollo de


grficos que puedan ser tiles en mltiples campos de desempeo, como los
mencionados en prrafos anteriores.
A travs del desarrollo de las diferentes unidades temticas usted conocer los
fundamentos conceptuales de la graficacin en computador, as como los
elementos matemticos y algortmicos para dibujar grficos en dos y tres
dimensiones. Tambin adquirir las destrezas necesarias para utilizar las
facilidades proporcionadas por una API grfica.
Para lograrlo se ha estructurado el curso en tres unidades didcticas: Fundamentos
de computacin grfica, Algoritmos bsicos de dibujo en dos dimensiones y
Trabajando con un API grfica.
En la unidad de Fundamentos de computacin grfica se estudiar su concepto y
evolucin, el hardware y software necesario para realizar desarrollos en
computacin grfica con altas especificaciones, los principales tipos de graficacin,
la terminologa comnmente utilizada y se presentarn algunas consideraciones
sobre el manejo del color y su representacin computacional.
En Algoritmos bsicos de dibujo en dos dimensiones se plantean los fundamentos
para la creacin de lneas, crculos, llenado de reas y polgonos, adems de
conocer los aspectos sobre el manejo de coordenadas espaciales en el
computador. En esta unidad se realizarn prcticas en los computadores con el fin
de realizar pequeos desarrollos grficos utilizando principios bsicos de dibujo del
lenguaje Java.
Finalmente, en la unidad correspondiente a Trabajando con un API grfica se
presentan las principales clases y algunos ejemplos que muestran las posibilidades
que ofrecen este tipo de interfaces para la creacin de programas que requieren el
tratamiento de grficos. Para ello se asume el estudio del API 2D y del API 3D de
Java a partir de las presentacin y comentario de ejemplos.
Para el desarrollo de las diferentes unidades del Mdulo del curso Computacin
Grfica se ha intentado recopilar la informacin ms relevante y actualizada,
organizndola de forma coherente y didctica,... por lo menos es la esperanza de la
autora que el lector encuentre en esta recopilacin un material agradable, legible y
actual. Se ha puesto especial inters en asegurar fuentes de calidad, pues aunque
la principal fuente de consulta es internet, se han seleccionado los materiales de
fuentes reconocidas que se podrn identificar y consultar en la seccin final de
cada Unidad didctica. Se ha acudido especialmente a traducciones de los
tutoriales y documentacin proporcionada por Sun Microsystems y por reconocidos
autores del rea.
Cada unidad didctica est estructurada en tres componentes bsicos, la
presentacin de la Unidad, el desarrollo temtico y las fuentes relacionadas. La
presentacin de la Unidad incluye la introduccin, intencionalidades formativas,

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

mapa conceptual y productos de aprendizaje, con el fin de recordar y orientar el


estudio de la misma. Estos componentes tambin los podr encontrar en la Gua
didctica del curso. Posteriormente se encuentra el desarrollo de los diferentes
temas, en algunos casos se proporcionan recomendaciones para la ampliacin del
tema mediante consultas en Internet y se suministran las direcciones
recomendadas de bsqueda y lectura. Se espera que el estudiante asuma el
estudio independiente de los diferentes temas, mediante lectura autorregulada y
construyendo mapas conceptuales, fichas de lectura y de conceptos, las cuales
deber archivar en el portafolio personal. Finalmente, las fuentes relacionadas
reconocen todas las fuentes utilizadas para la recopilacin y redaccin del
contenido temtico.
Adems, como material de consulta adicional se recomienda que usted acceda a
otros recursos documentales como la biblioteca de la Universidad
(www.unad.edu.co), enlaces internet (que se proporcionan en cada unidad del
mdulo), bases de datos como ProQuest a los que se tiene acceso gratuito desde
las salas de informtica de la UNAD.
Este mdulo no aborda toda la extensin de algoritmos y tpicos de la computacin
grfica, pero si compendia los conceptos fundamentales que le faciliten una
profundizacin posterior, segn los intereses del lector.
Como es de esperarse, este mdulo es una primera aproximacin que se espera
enriquecer con los aportes de los tutores y estudiantes que a nivel nacional
desarrollen el curso, es por tanto no solo fuente de consulta, sino tambin material
de discusin para el mejoramiento de los procesos de aprendizaje de la
Universidad Nacional Abierta y a Distancia.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

UNIDAD 1 FUNDAMENTOS DE COMPUTACIN GRFICA


Introduccin
Al comienzo todo era tinieblas. El procesamiento en el computador se realizaba en
lotes, cargando innumerables tarjetas perforadas y ejecutando un nico programa
a la vez, cuya salida solamente era visible en el formato impreso. 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 mltiples
institutos y universidades plantearan la posibilidad de realizar un computador con
una pantalla de monitor que permitiera visualizar los datos de diferentes formas, al
igual que dispositivos que hicieran posible la interaccin humano-mquina de forma
intuitiva. Aparece entonces la idea de la computacin grfica.
Despus de esto, su evolucin vertiginosa est estrechamente relacionada con dos
componentes: el mundo de los videojuegos y del cine animado. De hecho, los
grandes ejemplos de los logros en los algoritmos, hardware y software para diseo
asistido por computador son en su mayora de estas reas de trabajo.
Esta primera unidad busca familiarizarlo con la evolucin del concepto de
computacin grfica, los diferentes hitos que marcan su historia y algunos
conceptos fundamentales necesarios para su efectivo estudio.

Intencionalidades Formativas
Propsitos
Aportar a la fundamentacin terica del estudiante, como base para la
construccin de un discurso coherente y sustentado, a travs de la
profundizacin en la terminologa, fundamentos tecnolgicos, fsicos y
matemticos de la representacin grfica en el computador.
Objetivos
Comprender y emplear los diferentes conceptos relacionados con el la
representacin de grficos en el computador y los componentes hardware y
software necesarios partiendo de los fundamentos tericos y tecnolgicos de
esta disciplina.
Identificar el establecimiento de un sistema de coordenadas en la pantalla
del computador como base fundamental para la graficacin a travs del
estudio de los fundamentos matemticos que la estructuran.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Competencias
El estudiante describe y caracteriza de manera adecuada los conceptos y
elementos tecnolgicos relacionados con la presentacin de grficos en el
computador.
Metas
Al finalizar esta unidad didctica el estudiante estar en capacidad de:

Enumerar los diferentes elementos que se requieren para la realizacin


de grficos en el computador.
Definir y comparar trminos relacionados comnmente con la
computacin grfica.

Mapa Conceptual de la Unidad

Productos de Aprendizaje
Individual

Lectura autorregulada de la Unidad Didctica realizando fichas textuales y


mapas conceptuales para archivar en el portafolio.
Construir un glosario con los trminos desconocidos y su correspondiente
significado.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Pequeo Grupo Colaborativo


Documento original-traducido y diapositivas que permitan presentar un artculo
consultado en internet o en la biblioteca virtual, de mnimo 3 pginas en ingls que
demuestre una aplicacin o avance en torno a la computacin grfica.
Grupo de Curso

Socializacin de los productos individuales y en pequeo grupo colaborativo.


Consolidacin de conceptos, glosario tcnico y mapa conceptual de la
unidad.

CAPTULO 1 Evolucin de la computacin grfica


En este captulo se realiza una inspeccin histrica de los principales antecedentes
e hitos que marcan el desarrollo de la representacin computacional. Para ello se
ha utilizado especialmente una sntesis presentada por el profesor Vctor Simn
Theoktisto Costa de la Universidad de Simn Bolvar de Venezuela.
La sabidura popular dice que la historia no se repite y que el pasado no aplica
exactamente al presente. Las recetas del pasado, si se aplican ahora resultan en
general en algo diferente. Cmo entonces inferir del pasado? Cmo lograr un
modelo de la evolucin que pueda ayudar a saber y entender lo que est pasando
ahora en el presente y poder tomar las acciones adecuadas y necesarias?
En tecnologa est siempre la tendencia de mirar el futuro, pero muchos de sus
elementos, as como la mayora de las cosas, tienen sus fundamentos y su
significado en el pasado que siguen actuando en el presente.

Leccin 1 Anticipando la tecnologa


Esta sntesis se plantea desde la perspectiva histrica presentada por Baecker y
Buxton en "Human-Computer Interaction" de Jenny Preece y Laurie Keller (ver en
enlaces relacionados de la unidad), para quizs entender o apreciar a donde
hemos llegado, para inspirarnos o motivarnos a dar nuevos pasos que puedan
continuar un camino ya comenzado por otros o quizs por qu no, poder aportar
nuevas luces.
Aunque nuestras computadoras digitales estn sustentadas en conceptos
desarrollados en siglos pasados, no es sino hasta los aos 1930s y los 1940s que
son realmente disponibles para los investigadores. La motivacin principal era

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

acelerar los clculos requeridos para los cmputos de la energa balstica y


atmica. Quizs la primera persona que concibi la computadora ms all de este
uso fue VANNEVAR BUSH en 1945.
Vio a la computadora como una herramienta para transformar el pensamiento y la
actividad creativa del hombre. En su trabajo "As we may think", describe las
dificultades que el hombre tiene para conseguir, revisar, manejar y transmitir los
resultados de su investigacin. Para resolver este problema el inventa MEMEX, un
dispositivo con aspecto de escritorio con teclado y conjunto de botones y manillas,
donde el individuo poda guardar todos sus libros, sus registros y comunicaciones
para consultarlos de manera rpida y flexible. La tecnologa propuesta para este fin
fue la tcnica de los microfilms. Memex fue la primera versin del computador
personal, donde Bush no slo fue un visionario de la aplicacin de la computadora
para almacenamiento y recuperacin de informacin, y el valor del indexamiento
asociativo en esa actividad, sino tambin anticip la naturaleza multimedia del uso
del computador en el futuro. El predijo el desarrollo de una mquina que escribiera
cuando se le dictara, y especul sobre las posibilidades de establecer algn da un
camino ms directo entre la palabra escrita y el cerebro. Con la emergencia de los
CD/ROM (Lambert and Ropiequet 1986) y la computacin multimedia personal de
hoy se hace posible construir el MEMEX, el cual no se lleg a realizar en su
momento.
Otras personas tambin vieron el potencial del computador como un facilitador de
aspectos humanos como la creatividad y la resolucin de problemas. Entre stos
tenemos a J.C.R. LICKLIDER (1960), quien concibi un acoplamiento sinergtico
entre las capacidades del hombre y la mquina, a lo que llam "man-computer
symbiosis". La simbiosis se define como una forma de vida cooperativa en una
asociacin ntima o unin cerrada entre dos organismos disimilares. Las
computadoras estn pensadas para resolver problemas ya formulados y para
procesar datos de acuerdo a procesos predeterminados. En la realidad aparecen
giros inesperados en el razonamiento para llegar a una solucin y no siempre es
fcil la formulacin del problema; la simbiosis del hombre y la mquina pretendera
entonces incorporar a la computadora de manera ntima en todo el proceso de
formulacin y solucin de problemas tcnicos, logrando as integrarse
efectivamente en los procesos del pensamiento.
En un trabajo posterior con Clark en 1962, ellos listan aplicaciones en el rea
militar, programacin, juegos de guerra, planificacin, educacin, investigacin
cientfica. Con una extraordinaria visin listan algunos problemas cuyas soluciones
son prerrequisitos para una verdadera simbiosis entre el hombre y la computadora.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

A corto plazo:

Las aplicaciones de tiempo compartido entre varios usuarios.


La interfaz electrnica de entrada-salida para el despliegue y la
comunicacin de la informacin simblica y grfica.
Los sistemas interactivos y de tiempo real para el procesamiento y la
programacin de la informacin.
La posibilidad de concurrencia.

A largo plazo:

La lectura ptica de caracteres.


El reconocimiento y la produccin de la voz humana.
La comprensin del lenguaje natural.
La programacin heurstica.

Leccin 2 Los primeros aportes


Ya en los aos 50s era obvio que el computador poda manipular imgenes son
grficos y dibujos tan bien como el texto o los nmeros (oscillon, wirlwind, el juego
spacewar y sage ya se haban construido). Se comienza entonces a explorar el
potencial de la comunicacin grfica entre el hombre y la mquina. Fue IVAN
SUTHERLAND en su trabajo pionero en el MIT Lincoln Laboratory llamado el
sistema 'Sketchpad'.
Este programa permita dibujar formas
simples en la pantalla de un computador
mediante un lpiz ptico, salvarlas y volver
a cargarlas ms tarde.

Figura 1 Ivan Sutherland y el Sketchpad

Sketchpad supuso una revolucin en los


programas grficos. Muchas de las tcnicas
inventadas para este programa se siguen
usando hoy en da, sin embargo lo
realmente revolucionario de sketchpad era
la estructura de datos empleada. Se trataba
de un modelo del objeto a representar y no
slo un dibujo del mismo.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Algunas de las nuevas y poderosas ideas y conceptos fueron:

Estructura jerrquica interna de los grficos.


La definicin de objetos modelos y sus instancias que son versiones
transformadas de las primeras. Estos conceptos sirvieron de base para la
programacin orientada a objetos.
La nocin de restricciones para la especificacin de los detalles de la
geometra de un dibujo.
La utilizacin de iconos para la representacin simblica de los objetos y
restricciones.
El uso de los lpices de luz ("light pen") para la construccin interactiva de
los dibujos.
La separacin de los sistemas de coordenadas para describir el mundo y el
espacio de representacin en el computador.
La aplicacin de operaciones recursivas como mover y borrar a toda la
jerarqua que defina un objeto o escena grfica.

Sketchpad propici el nacimiento de la ciencia de grficas controladas por


computadora. Dos aos ms tarde, Sutherland colaborara con el doctor David
Evans para iniciar la exploracin de mezclas entre arte y ciencia (computacional).
Fue la universidad de Utah la primera que tuvo un laboratorio acadmico especfico
para desarrollar grficas por ordenador. De la investigacin realizada en la
universidad de Utah, hoy toman sus bases los paquetes grficos, de los de diseo
hasta los de realidad virtual.
No pas mucho tiempo sin que las compaas se empezaran a interesar por las
grficas en computadora, IBM, por ejemplo lanz al mercado la IBM 2250, la
primera computadora comercial con un sistema grfico. La compaa Magnavox, a
su vez obtuvo la licencia para distribuir un sistema de videojuegos creado por
Ralph Baer, el producto fue denominado Odyssey. El Odyssey fue el primer
producto orientado al consumidor con grficas generadas por computador.
Dave Evans fue contratado por la universidad de Utah para crear el laboratorio de
ciencias de la computacin. Evans tom como inters principal el desarrollar
grficas por computadora. Evans contrat a Sutherland, y es en Utah donde
Sutherland perfecciona una interfaz de HMD (head mounted display), que haba
desarrollado algunos aos antes. En ese periodo, Evans y Sutherland eran
frecuentemente asesores de compaas, no obstante, constantemente se
encontraban frustrados por la falta de tecnologa, razn que ms adelante los llev
a fundar su propia empresa.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Un estudiante de la clase de Sutherland en la universidad de Utah, EDWIN


CATMULL vislumbr a la animacin por computadora como una evolucin natural
de la animacin tradicional; cre una animacin, se trataba de su mano abrindose
y cerrndose. De la universidad de Utah surgi un gran avance tecnolgico en el
campo, JOHN WARNOCK fue uno de los pioneros digitales y fund una de las
empresas ms importantes que cambi el curso de la historia en cuanto a diseo
digital se refiere, fund Adobe. Otro egresado de la universidad de Utah no es
menos notorio, Jim Clark, fundador de Silicon Graphics Inc. (SGI).

Leccin 3 Teoras y planteamientos


1970 tambin marc una revolucin en el mercado televisivo. Cadenas como la
CBS empezaron a usar productos desarrollados para animar en la computadora. La
empresa Computer Image Corporation (CIC) desarroll combinaciones de
Hardware y Software para acelerar procesos de animacin tradicional, por medios
digitales. CIC ofreca ANIMAC, SCANIMATE y CAESAR, con estos programas se
podan escanear los dibujos, crear trayectorias, aplicar principios de animacin
tradicional tales como estiramiento y encogimiento.
En el campo de la animacin 3D, se cre un nuevo tipo de representacin digital, el
algoritmo de HENRI GOURAUD. Este permite que los contornos de los polgonos
no se vean tan lineales, ya que esto destrua la sensacin de una superficie suave.
El algoritmo crea la interpolacin de color entre polgonos y de esta forma logra una
mejor representacin de superficies curvas. La ventaja sobre el mtodo tradicional
(la representacin plana) es que la superficie en efecto parece perder dureza en la
representacin, con slo una pequea penalizacin en el tiempo que toma hacer la
representacin.
En 1971 surge el microprocesador, utilizando tecnologa de circuitos integrados, los
componentes electrnicos fueron miniaturizados. La compaa Atari fue creada y
en 1972 crea el primer videojuego de "mquina" (arcade), Pong. Evans y
Sutherland (E&S) se encontraban ya fabricando hardware propio para evitar
algunas de las limitantes tecnolgicas que algunos aos antes haban
experimentado. Uno de los sistemas ms impresionantes cre precisamente por
E&S era "Picture System", inclua una tableta grfica y un buffer en color. Triple I,
en 1974 desarroll un equipo para poder filmar las imgenes realizadas en
computadora. Otro de sus inventos fue la creacin de aceleradores grficos. Los
desarrollos de Triple I fueron un gran avance que permita que las grficas
sintticas pudieran ser utilizadas en cine.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Ed Catmull realiz su tesis de doctorado


sobre una nueva manera de representar
las superficies. Esta nueva tcnica llamada
z-buffer ayuda en el proceso de esconder
las partes de las superficies que no sern
vistas por el usuario en la representacin
final. Adems del z-buffer, Catmull incluy
un nuevo concepto, el de mapeo de
texturas. La historia cuenta que en una
discusin con otro de sus compaeros, a
Catmull se le ocurri que si a un objeto en
la vida real se le podan aplicar imgenes
para representar a otra cosa, en un mundo
virtual no haba razn para no hacerlo.

Figura 2 Aplicacin de texturas a objetos

El matemtico francs Dr. BENOIT MANDELBROT public un ensayo que permiti


aadir realismo a las escenas generadas por computadora. El documento "A
Theory of Fractal Sets", explica que una lnea es un objeto unidimesional, el plano
es un espacio bidimensional; no obstante, si la lnea describe una curva de manera
que cubra la superficie del plano deja de ser unidimensional, aunque tampoco es
bidimensional.
El Dr. Mandelbrot se refiri a este espacio
como una dimensin fraccionaria. Las
aplicaciones principales que se le dieron a
las teoras de Mandelbrot fueron la de
creacin de terrenos aleatorios, as como la
creacin de texturas en las cuales existen
subdivisiones dentro de un mismo patrn.

Figura 3 Modelo de terreno usando


geometra fractal

Despus de su graduacin, Catmull fue


contratado por la empresa Applicon, donde
no dur mucho tiempo, ya que recibi una
oferta de trabajo para fundar el laboratorio
de animacin por computadora del Instituto
Tecnolgico de Nueva York (NYIT).

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Algunos de los trabajadores de la Universidad de Utah tambin fueron invitados y


aceptaron el trabajo en el NYIT. Los primeros programas de animacin
desarrollados dentro del NYIT fueron para apoyar la animacin tradicional. La
primera aplicacin que Catmull desarrollo fue "tween", que permita realizar la
interpolacin entre cuadros. Tambin se desarroll un sistema de escaneo y pintura
que posteriormente se convirti en el sistema de produccin de Disney, el CAPS
(Computer Animation Production System).
El NYIT cre un departamento dedicado a la investigacin de grficas 3D, y por dos
aos su principal proyecto fue el de crear una pelcula, "the works", nunca fue
concluida, de hecho, pruebas preliminares fueron bastante desalentadoras. Ante el
fracaso del corto "Tubby the tuba", varios empleados salieron del NYIT. Al parecer
el director del instituto nunca acept que se contrataran directores de cine para
crear la pelcula, razn por la cual el resultado no era el mejor que se poda haber
obtenido.
En 1978 JAMES BLINN, desarroll un
algoritmo similar al de texturado, pero en
vez de representar color representaba
profundidad. Los colores mapeados
provocan que la superficie tenga un relieve
o una depresin. Las partes blancas de la
imagen
son
representadas
como
protuberancias, mientras las partes
oscuras representan las depresiones.

Figura 4 Aplicacin de texturas y relieves


con bump map

Dotando de texturas y relieves se pueden crear modelos bastante realistas. El


algoritmo fue nombrado "bump map". Otro algoritmo presentado por Blinn es el de
reflectividad, con el cual se simula un reflejo del ambiente en el que se encuentra el
objeto.
De la universidad de Cornell, ROB COOK plante un nuevo algoritmo que
erradicaba algunas de las limitantes de las representaciones anteriores. Cook
aprecio que las representaciones de la poca eran de apariencia plstica. Usando
la variable de energa luminosa que emite la luz virtual logr crear un material que
se parece al de un metal pulido. Los mtodos anteriores consideraban el brillo de la
luz sinttica.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Leccin 4 La revolucin
Sin duda la dcada de cambios ms vertiginosos fue la de 1980. El surgimiento de
las mquinas PC, aunque con capacidades grficas limitadas, permiti la
popularizacin de sistemas y aplicaciones que crearon un mercado exigente y
competitivo (por ejemplo con el Autocad). Tambin comenzaron a disearse
herramientas grficas de interfaz hombre mquina, como por ejemplo el sistema
operativo de la Macintosh II, los lenguajes de programacin visual y el hipertexto. El
rol que no alcanzaron a cumplir los Comits de estandarizacin (por ejemplo, el
GSK fue aprobado recin en 1985, cuando haca varios aos que ya era obsoleto)
fue cubierto por las compaas comerciales que al crear una aplicacin novedosa
se transformaban en estndares de facto en el mercado (por ejemplo el Poscript, el
OpenGL y X Windows).
Tambin esta dcada marc el segundo cambio de paradigma, porque la evolucin
de los modelos grficos, junto con la capacidad de representacin de los monitores
y la integracin de los sistemas grficos a otro tipo de aplicaciones (simulaciones
en ingeniera, sensores remotos, datos de satlites, etc.) permiti desarrollar
herramientas para la representacin grfica de conjuntos enormemente complejos
de datos. Estas ideas, que con el tiempo fueron el fundamento de la Visualizacin
Cientfica, apelan a la enorme capacidad de comprensin visual humana. De esa
manera es posible representar, por ejemplo, millones de datos meteorolgicos en
un nico grfico que permite comprender a golpe de vista las caractersticas
esenciales de una determinada situacin climtica.

Figura 5 Computacin grfica en


diferentes mbitos

La popularizacin de la computacin grfica


signific, adems, el surgimiento y
desarrollo de aplicaciones en las reas ms
diversas. Durante los 80 comenzaron a
utilizarse herramientas grficas para el
diseo en Ingeniera en todas sus
actividades, desde aviones y barcos hasta
circuitos integrados. En Arquitectura e
Ingeniera Civil se utilizan sistemas para la
simulacin, el diseo y la elaboracin y
anlisis de modelos. En Medicina podemos
mencionar desde el diagnstico por
imgenes
hasta
la
simulacin
y
planeamiento de operaciones quirrgicas o
el desarrollo de implantes.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

En animacin y videojuegos se dio un desarrollo espectacular en la calidad e


imaginacin con los que surgieron universos de fantasa.

Figura 6 Largometrajes completamente desarrollados por computador

Durante los 90s, Hollywood proporciona una gran publicidad gracias a la


produccin de largometrajes totalmente computarizados, ya haban sido premiados
algunos cortos de Pixar con anterioridad. El pionero en largometrajes animados
por computador es Toy History y a partir de all se han generado gran cantidad de
pelculas. El reto contina, por hacer crebles para los humanos, los grficos
creados por computador.

Leccin 5 Cronologa en el desarrollo de la computacin grfica


A continuacin se presenta una cronologa de los principales hitos en el desarrollo
de la computacin grfica tomada y traducida libremente de www.comphist.org.
En los aos 50: Salida usando teletipos, impresoras, y tubos de rayos catdicos
(CRT). Usando caracteres blanco y negro, se poda reproducir un cuadro.

1950
o Ben Laposky cre las primeras imgenes grficas, un osciloscopio,
generado por una mquina electrnica (anloga). La imagen fue
producida manipulando vigas electrnicas y registrndolas sobre una
pelcula alta de la velocidad.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

1951
o UNIVAC-I: la primera computadora comercial de propsito general,
usaba dispositivos en copia dura e impresoras de lnea.
o MIT WirldWind: la primera computadora que permita mostrar vdeo
en tiempo real, era capaz de exhibir texto y erfico en tiempo real en
una pantalla grande de osciloscopio.

En los aos 60: El comienzo de los grficos interactivos modernos, salida son
grficos vectoriales y grficos interactivos. Uno de los grandes problemas era el
costo y la inaccesibilidad de las mquinas.

1960
o Guillermo Fetter acua el trmino computacin grfica para describir
nuevos mtodos de diseo
1961
o Steve Russel, primer juego de video Spacewars
1963
o Douglas Englebart - primer ratn
o Ivan Sutherland - Sketchpad. Sistema interactivo de CG, un sistema
grfico de comunicacin humano-computadora.
Mens pop-up
Modelamiento jerrquico
Utiliz un lpiz de luz para la interaccin.
o Sutherland formul las ideas de usar primitivas para el dibujo de
lneas, polgonos, arcos, etc.; desarroll los algoritmos de dragging,
rubberbanding y transformacin; introdujo las estructuras de datos
para almacenar. Es considerado el fundador de los grficos por
computadora.
1964
o Guillermo Fetter - Primer modelo por computador de una figura
humana
1965
o Jack Bresenham - Algoritmo para el dibujo de lneas
1968
o Tektronix - Un computador basado en tubos de rayos catdicos, que
permita el almacenamiento, el teclado y el ratn, un computador con
una interfaz simple de US$15.000, que permita el uso de grficos.
o Ivan Sutherland Primer display head-mounted

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

1969
o Jhon Warnock - Algoritmo de la subdivisin de rea, algoritmos de
superficies ocultas.
o Laboratorios Bell Primer frambuffer que contiene 3 bits por pixel.

Al inicio de los aos 70: Comienzo de la salida usando dispositivos rster, la


capacidad de los grficos es cada vez mayor.

1972
o Nolan Kay Bushnell - Pong, juego de video
1973
o Juan Whitney Jr. y Gary Demos - "Westworld", primera pelcula con
grficos de computador
1974
o Edwin Catmuff - mapeo de texturas y algoritmo z-buffer para
superficies ocultas.
o James Blinn - superficies curvas y refinamiento del algoritmo de
mapeo de texturas.
o Phone Bui-Toung - iluminacin especular
1975
o Martin Newell - la famosa tetera que identifica la computacin grfica,
construida con curvas de Bezier.
o Benoit Mandelbrot - dimensin fractal/fraccional
1976
o James Blinn - mtodo para simular reflexiones especulares sobre
objetos
1977
o Steve Wozniak - Apple II, computador personal con grficos a color
1979
o Roy Trubshaw y Richard Bartle - Dominios multi-usuario (MUD Phone Bui-Toung - specular highlighting)

En los aos 80 los dispositivos de salida incorporan los grficos de rster imgenes
de mapas de bit (bitmap) y el pixel. Los costos de los computadores personales
decrecen dramticamente, el ratn y el trackball se convierten en los dispositivos
interactivos estndares.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

1982
o Steven Lisberger - "Tron", la primera pelcula de Disney que hace
uso intensivo de los grficos tridimensionales
o Tom Brighman - "Morphing" primera secuencia de pelcula juega con
un carcter 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 - "DataGlove", una pelcula de realidad virtual que usa
un guante instalado con interruptores y sensores para detectar el
movimiento de la mano.
1984
o Tech de Wavefron - Polhemus, primer software paras grficos en 3D
1985
o Pixar Animation Studios. Cortometrajes Luxo Jr. - 1989 y Tin toy
o NES Sistema de juegos casero Nintendo
1987
o IBM - VGA (Video Graphics Array) Se introdujo el arreglo de grficos
de video.
1989
o Video Electronics Standards Association (VESA) SVGA, Super VGA

En los aos 90, desde la introduccin del VGA y el SVGA, el computador personal
puede mostrar fcilmente imgenes fotorealistas y pelculas. La optimizacin de las
imgenes en 3D comienza su principal avance estimuladas por las aplicaciones
para grficos usadas en el cine.

1990
o Hanrahan and Lawson - Renderman
1991
o Disney y Pixar - Beauty and the Beast, CGI fue ampliamente
utilizada, el sistema Renderman proporciona rapidez, precisin y alta
calidad a los efectos por computador.
1992
o Silicon Graphics - Especificacin OpenGL
1993
o Universidad de Illinois - Mosaic. Primer navegador web grfico.
o Steven Spielberg - Jurassic Park una exitosa pelcula de ciencia
ficcin a partir de efectos de computacin grfica.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

1995
o Buena Vista Pictures - Toy Stroy el primer
completamente generado en computador
o NVIDIA Corporation - GeForce 256 (GeForce3 (2001)
2003
o ID Software - Motor de grficos Doom.

largometraje

CAPTULO 2 Fundamentos de computacin grfica


Los procesos de manipulacin de grficos requieren de una tecnologa sofisticada
en temas como intercambios de formatos, escalado, filtrado, manejo del color
mediante paletas, etc. Los formatos mas utilizados son BMP (Bitmap), GIF (Graphic
Interchange Format) y JPEG (Joint Picture Expert Group).
Cuanto mayor y ms ntida sea una imagen y cuantos ms colores tenga, ms
difcil es de presentar y manipular en la pantalla de un computador. Las fotografas,
dibujos y otras imgenes estticas deben pasarse a un formato que el computador
pueda manipular y presentar. Entre esos formatos estn los grficos de mapas de
bits (o de pxeles), conocido en el mbito de la computacin grfica como rster y
los grficos vectoriales.

Leccin 6 Tipos de graficacin computacional


6.1 Grficos rster
Las imgenes de mapa de bits (bitmaps o imgenes rster) estn formadas por una
rejilla de celdas, a cada una de las cuales, denominada pxel (Picture Element,
Elemento de Imagen), se le asigna un valor de color y luminancia propios, de tal
forma que su agrupacin crea la ilusin de una imagen de tono continuo.

Figura 7 Mapa de bits

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Un pxel es pues una unidad de informacin, pero no una unidad de medida, ya


que no se corresponde con un tamao concreto. Un pxel puede ser muy pequeo
(0.1 milmetros) o muy grande (1 metro).
Una imagen de mapa de bits se crea mediante una rejilla de pixeles nica. Cuando
se modifica su tamao, se modifican grupos de pixeles, no los objetos o figuras que
contiene, por lo que estos suelen deformarse o perder alguno de los pixeles que los
definen. Por lo tanto, una imagen de mapa de bits est diseada para un tamao
determinado, perdiendo calidad si se modifican sus dimensiones, dependiendo esta
prdida de la resolucin a la que se ha definido la imagen.

Figura 8 Dos rejillas de 3*3 pxeles

La resolucin de una imagen es un concepto que suele confundir bastante,


principalmente porque no es un concepto nico, sino que depende del medio en el
que la imagen vaya a ser visualizada o tratada. As, podemos hablar de resolucin
de un archivo digital, resolucin de impresin, resolucin de semitono, resolucin
de escaneado, etc. Se define como el nmero de pxeles distintos que tiene una
imagen por unidad de longitud, es decir, la densidad de stos en la imagen. Sus
unidades de medida son los pixeles por pulgada (ppp o ppi, pixels per inch, en
ingls) o los pixeles por centmetro (ms raramente). Cuanto mayor sea esta
resolucin, ms contenedores de informacin (pixeles) tiene el archivo digital, ms
calidad tendr la imagen y ms peso en Kb tendr el archivo.
Esta resolucin est muy ligada al concepto de resolucin de pantalla en un
monitor, referida al nmero de pxeles por pulgada existentes en la pantalla del
monitor en el que se visualiza la imagen. Una configuracin del monitor en alta
resolucin exhibir ms pxeles por pulgada, por lo que stos sern ms pequeos,
permitiendo una mejor visualizacin de la imagen en pantalla. En ningn caso
podremos visualizar una imagen a mayor resolucin que la de pantalla, que suele
ser de 72 ppp en un sistema Mac y de 96 ppp en un PC.
Una vez definida la resolucin de pantalla, el tamao de los pixeles depender del
tamao fsico de la pantalla, medido en pulgadas. En la prxima seccin se
profundizar sobre este punto.
En el trabajo de digitalizacin de imgenes con escner se maneja el concepto de
resolucin de muestreo, que define el nmero de muestras que se toman por

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

pulgada. Su unidad de medida son las muestras por pulgada (spi, samples per
inch). Cuantas ms muestras por pulgada tenga una imagen escaneada, ms
cercana estar la imagen digital a la imagen original. Esta forma de medir la
resolucin se utiliza poco, habindose adoptado como medida de calidad de una
imagen escaneada los pxeles por pulgada (ppp) que tiene la imagen digital
resultante del proceso.
Una forma comn de clasificar las imgenes segn su resolucin es aquella que las
divide en imgenes de alta resolucin (hi-res) e imgenes de baja resolucin (lowres). Una imagen de alta resolucin est prevista para la impresin, teniendo
generalmente 300 ppp o ms. Una imagen de baja resolucin est prevista
solamente para su exhibicin en pantalla, teniendo generalmente una resolucin de
100 ppp o menos.

Figura 9 Modificacin en la resolucin

A mayor resolucin, ms pxeles hay en una imagen, ms grande es su mapa de


bits, mayor informacin contiene y mayor capacidad de distinguir los detalles
espaciales finos, por lo que tendr ms definicin, permitiendo un mayor detalle,
unas transiciones de color ms sutiles y una mayor calidad de reproduccin.
Las imgenes de mapas de bits dependen de la resolucin a la que han sido
creadas, por lo que al modificar su tamao pierden calidad visual. Si se disminuye,
los trazos finos perdern definicin, desapareciendo partes de los mismos,
mientras que si se aumenta, la imagen se pixelar, al tener que cubrirse de forma
aproximada pixeles que inicialmente no existan, producindose el conocido efecto
de dientes de sierra.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 10 Efecto de pixelado en mapas de bits

El principal inconveniente con los grficos de mapas de pixeles durante el


almacenamiento a su transmisin a travs de una lnea de comunicacin de datos,
es el elevado tamao de los archivos que generan. Se hace por tanto necesaria la
compresin de estos archivos.
La compresin, tanto de archivos de imgenes como de cualquier otro tipo de
archivo informtico, puede ser de dos tipos, compresin con prdidas y compresin
sin prdidas. En la compresin con prdidas se elimina informacin de la imagen
que no es percibida por el ojo. Una vez se ha comprimido una imagen no se puede
volver a restaurar con la calidad de la original, la informacin irrelevante es
eliminada en el proceso de compresin.
Utilizar las tres dimensiones espaciales en los grficos complica tremendamente la
generacin de imgenes. No es nicamente utilizar una tercera coordenada en la
descripcin de los objetos, existen, adems nuevos problemas a tener en cuenta
como la iluminacin, la ocultacin de unos objetos por otros, el uso de textura y
una profundidad, adems de tecnologas utilizadas para dotar de realismo a las
imgenes generadas por computador.

6.2 Grfico vectorial


Un grfico vectorial est definido por un conjunto de primitivas geomtricas de tal
modo que, al dibujarlas, se compone la imagen final.
Por lo tanto, las imgenes en los grficos vectoriales no se construyen pxel a pxel,
sino que se forman a partir de vectores, objetos formados por una serie de puntos
y lneas rectas o curvas definidas matemticamente.
Por ejemplo, una lnea se define en un grfico de mapa de bits mediante las
propiedades de cada uno de los pxeles que la forman, mientras que en un grfico
vectorial se hace por la posicin de sus puntos inicial y final y por una funcin que

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

describe el camino entre ellos. Anlogamente, un crculo se define vectorialmente


por la posicin de su punto central (coordenadas x,y) y por su radio (r).
Cada vector en un grfico vectorial tiene una lnea de contorno, con un color y un
grosor determinados, y est relleno de un color a elegir. Las caractersticas de
contorno (o filete) y relleno se pueden cambiar en cualquier momento.
Las imgenes vectoriales se almacenan como una lista que describe cada uno de
sus vectores componentes, su posicin y sus propiedades.
En cuanto a la resolucin, los grficos vectoriales son independientes de la
resolucin, ya que no dependen de una retcula de pxeles dada. Por lo tanto,
tienen la mxima resolucin que permite el formato en que se almacena, no se
presentan inconvenientes con el efecto de pixelado ya que la descripcin
matemtica de un objeto es independiente del tamao al cual se est dibujando el
objeto.
Las entidades geomtricas que forman parte de un grfico vectorial son: el
segmento de recta, las circunferencias, las elipses, y los arcos de circunferencia.
Las trasformaciones tpicas sobre las imgenes vectoriales son la traslacin, la
rotacin, el escalado y la cizalla. Estas transformaciones, puramente geomtricas,
se muestran en la siguiente figura. Despus de aplicarlas el objeto grfico
conserva su precisin.

Figura 11 Transformaciones en grficos vectoriales

Leccin 7 Sistema de coordenadas


Segn Delrieux, el primer paso para conseguir una representacin adecuada de las
primitivas es caracterizar matemticamente el medio que nos permite
representarlas. Las primitivas grficas independientes de dispositivo (en la
imagen mental del usuario) normalmente se representan en un espacio euclidiano
de una determinada dimensin. En dichas condiciones un punto es una entidad
matemtica p = (x; y), donde (x;y) R2.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

En el soporte aritmtico de la computadora, dicha representacin se efecta con


los tipos de datos provistos, que pueden ser nmeros reales con punto flotante de
simple o doble precisin. Este espacio se denomina espacio de la escena y es uno
de los muchos espacios que se utilizarn para factorizar adecuadamente las
diversas tareas de un sistema grfico.
Por ltimo, en el soporte grfico del buffer de pantalla, un punto se representa con
un pixel, y dicha representacin se efecta accesando una posicin de memoria
con un contenido dado. Este espacio se denomina espacio de pantalla y se
direcciona a partir del sistema de coordenadas fsico, cuyo origen es el vrtice
superior izquierdo. Es posible encontrar varias correspondencias posibles entre el
sistema de coordenadas fsico y un sistema de coordenadas arbitrario en el
espacio de la escena. En la literatura normalmente se considera que un pixel es un
punto con extensin" en el espacio de la escena, y por lo tanto el origen de dicho
espacio coincide con el vrtice superior izquierdo del pixel (0,0). Como se muestra
en la siguiente figura. Una precisin mayor llevara a enunciar que se encuentra en
el centro del pixel (0.0).

Figura 12 Sistema de coordenadas en el espacio de la escena

De esa manera, el espacio de pantalla es un espacio discreto y acotado [0..maxx] *


[0..maxy], con maxx, maxy N, el cual est en correspondencia con el espacio de
la escena (euclidiano) (x; y) R2 . La conversin de los valores reales del espacio
euclidiano e enteros para la representacin en el espacio de pantalla se puede
realizar a partir de las operaciones de redondeo o truncamiento. Por ejemplo, en
el caso de C++ se puede realizar a travs de un proceso de casting a datos enteros
cortos o largos, o a travs de las funciones ceil y floor de la librera math.h. Por
dicha razn es que la operacin de llevar una primitiva del espacio de la escena al
espacio de pantalla se denomina discretizacin. Como se puede observar en la
Figura 12 los rtulos maxx y maxy corresponden al valor mximo del rango que

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

pueden tomar los puntos x,y en el espacio de pantalla, estos valores dependen de
la resolucin del monitor.
La transformacin de sistemas de coordenadas que es posible realizar en los
procesos de graficacin en 2D y 3D se explicarn en las unidades didcticas
correspondientes.

Leccin 8 Introduccin a la teora del color


Alrededor del color se han realizado numerosas investigaciones, en esta seccin se
proporcionan lo principios fundamentales de esta teora en un lenguaje lo ms claro
posible, utilizando para ello la conceptualizacin presentada por el Instituto de Artes
Visuales, la Web del programador, Rafael Cebrin y Claudio Delrieux.
Los colores forman parte de la vida misma, y el ser humano es uno de los seres
privilegiados de la Naturaleza por poder disfrutar de ellos. En cualquier momento
de la vida se estn recibiendo constantemente impresiones de color, en la calle,
trabajando, navegando por internet, estas impresiones tiene la facultad de exaltar,
tranquilizar, de poner de buen humor o de inspirar pena. Es el mundo de color.
Newton (1642-1727) primero y Young (1773-1829) despus establecieron un
principio que hoy nadie discute: la luz es color. Para llegar a este convencimiento,
Isaac Newton se encerr en una habitacin a oscuras, dejando pasar un hilillo de
luz por la ventana y poniendo un cristal un prisma de base triangular frente a
ese rayo de luz; el resultado fue que dicho cristal descompuso la luz exterior blanca
en los seis colores del espectro, los cuales se hicieron visibles al incidir sobre una
pared cercana.

Figura 13 Espectro con los 6 colores apreciados por Newton (violeta, azul, verde, amarillo, naranja y rojo)

Unos aos ms tarde, el fsico ingls Thomas Young realiz el experimento a la


inversa. En primer lugar determin por investigacin que los seis colores del
espectro pueden quedar reducidos a tres colores bsicos: el verde, el rojo y el azul
intenso. Tom entonces tres linternas y proyect tres haces de luz a travs de
filtros de los colores mencionados, hacindolos coincidir en un mismo espacio; los
haces verde, rojo y azul se convirtieron en luz blanca. En otras palabras, Young
recompuso la luz.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

As, la luz blanca, esa luz que rodea al ser humano, est formada por luz de seis
colores; y cuando incide en algn cuerpo ste absorbe alguno de dichos colores y
refleja otros. Esto da lugar al siguiente principio: Todos los cuerpos opacos, al ser
iluminados, reflejan todos o parte de los componentes de la luz que reciben.
En la prctica, y para comprender mejor este fenmeno, se dir que, por ejemplo,
un tomate rojo absorbe el verde y el azul y refleja el rojo; y un pltano amarillo
absorbe el color azul y refleja los colores rojo y verde, los cuales, sumados,
permiten ver el color amarillo.
El color es una sensacin subjetiva y nadie puede asegurar a ciencia cierta que
percibe los colores igual que otro. De todas formas los hombres vemos ms o
menos igual y partiendo de esta premisa se deber estudiar la teora del color.
Aprender a ver el color y obtener una interpretacin de sus propiedades inherentes
ha de ser el punto de partida si se desea realizar un tratamiento eficaz de ste en
las distintas aplicaciones grficas que se construyen.

8.1 Descripcin formal del color como fenmeno fsico


Podemos ver las cosas que nos rodean porque La Tierra recibe la luz del Sol, esta
estrella inunda constantemente el planeta con su luz, y gracias a ella es tambin
posible la vida.
La luz del Sol est formada en realidad por un amplio espectro de radiaciones
electromagnticas de diferentes longitudes de onda, formando un espectro
continuo de radiaciones, que comprende desde longitudes de onda muy pequeas,
de menos de 1 picmetro (rayos csmicos), hasta longitudes de onda muy grandes,
de ms de 1 kilmetro.
El ser humano tan solo es capaz de visualizar un subconjunto de ellas, las que van
desde 380 (violeta) a 780 nanmetros (rojo), esto lo apreci Newton en su
experimento.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 14 Espectro de la luz solar

Cada longitud de onda define un color diferente (colores de emisin). La suma de


todos los colores (longitudes de onda) da como resultado la luz blanca, siendo el
color negro u oscuridad la ausencia de colores.
En el fondo del ojo existen millones de clulas especializadas en detectar las
longitudes de onda procedentes del entorno. Estas clulas, principalmente los
conos y los bastoncillos, recogen las diferentes partes del espectro de luz solar y
las transforman en impulsos elctricos, que son enviados luego al cerebro a travs
de los nervios pticos, siendo ste el encargado de crear la sensacin del color.

Figura 15 Fisiologa del ojo humano

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Los conos se concentran en una regin cerca del centro de la retina llamada fvea.
Su distribucin sigue un ngulo de alrededor de 2 contados desde la fvea. La
cantidad de conos es de 6 millones y algunos de ellos tienen una terminacin
nerviosa que va al cerebro.
Los conos son los responsables de la visin del color y se cree que hay tres tipos
de conos, sensibles a los colores rojo, verde y azul, respectivamente. Dada su
forma de conexin a las terminaciones nerviosas que se dirigen al cerebro, son los
responsables de la definicin espacial. Tambin son poco sensibles a la intensidad
de la luz y proporcionan visin fotpica (visin a altos niveles).
Los bastones se concentran en zonas alejadas de la fvea y son los responsables
de la visin escotpica (visin a bajos niveles). Los bastones comparten las
terminaciones nerviosas que se dirigen al cerebro, siendo por tanto su aportacin a
la definicin espacial poco importante. La cantidad de bastones se sita alrededor
de 100 millones y no son sensibles al color. Los bastones son mucho ms
sensibles que los conos a la intensidad luminosa, por lo que aportan a la visin del
color aspectos como el brillo y el tono, y son los responsables de la visin nocturna.
Existen grupos de conos especializados en detectar y procesar un color
determinado, siendo diferente el total de ellos dedicados a un color y a otro. Por
ejemplo, existen ms clulas especializadas en trabajar con las longitudes de onda
correspondientes al rojo que a ningn otro color, por lo que cuando el entorno en
que nos encontramos nos enva demasiado rojo se produce una saturacin de
informacin en el cerebro de este color, originando una sensacin de irritacin en
las personas.
Cuando el sistema de conos y bastoncillos de una persona no es el correcto se
pueden producir una serie de irregularidades en la apreciacin del color, al igual
que cuando las partes del cerebro encargadas de procesar estos datos estn
daadas. Esta es la explicacin de fenmenos como la Daltonismo. Una persona
daltnica no aprecia las gamas de colores en su justa medida, confundiendo los
rojos con los verdes.
Debido a que el proceso de identificacin de colores depende del cerebro y del
sistema ocular de cada persona en concreto, es posible medir con toda exactitud la
longitud de onda de un color determinado, pero el concepto del color producido por
ella es totalmente subjetivo, dependiendo de la persona en s. Dos personas
diferentes pueden interpretar un color dado de forma diferente, y puede haber
tantas interpretaciones de un color como personas hay.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

En realidad el mecanismo de mezcla y produccin de colores generados por la


reflexin de la luz sobre un cuerpo es diferente al de la obtencin de colores por
mezcla directa de rayos de luz, como ocurre con el del monitor de un ordenador,
pero a grandes rasgos y a nivel prctico son suficientes los conceptos estudiados
hasta ahora.

Leccin 9 Modelos de color


Los colores obtenidos directa y naturalmente por descomposicin de la luz solar o
artificialmente mediante focos emisores de luz de una longitud de onda
determinada se denominan colores aditivos.
No es necesaria la unin de todas las longitudes del espectro visible para obtener
el blanco, ya que si se mezcla slo rojo, verde y azul se obtiene el mismo resultado.
Es por esto por lo que estos colores son denominados colores primarios, porque la
suma de los tres produce el blanco. Adems, todos los colores del espectro pueden
ser obtenidos a partir de ellos.

Figura 16 Colores primarios

Los colores aditivos son los usados en trabajo grfico con monitores de ordenador,
ya que el monitor produce los puntos de luz partiendo de tres tubos de rayos
catdicos, uno rojo, otro verde y otro azul. Por este motivo, el modelo de definicin
de colores usado en trabajos digitales es el modelo RGB (Red, Green, Blue).
Todos los colores que se visualizan en el monitor estn en funcin de las
cantidades de rojo, verde y azul utilizadas. Por ello, para representar un color en el
sistema RGB se le asigna un valor entre 0 y 255 (notacin decimal) o entre 00 y FF
(notacin hexadecimal) para cada uno de los componentes rojo, verde y azul que lo

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

forman. Los valores ms altos de RGB corresponden a una cantidad mayor de luz
blanca. Por consiguiente, cuanto ms altos son los valores RGB, ms claros
son los colores.
De esta forma, un color cualquiera vendr representado en el sistema RGB
mediante la sintaxis decimal (R,G,B) o mediante la sintaxis hexadecimal
#RRGGBB. El color rojo puro, por ejemplo, se especificar como (255,0,0) en
notacin RGB decimal y #FF0000 en notacin RGB hexadecimal, mientras que el
color rosa claro dado en notacin decimal por (252,165,253) se corresponde con el
color hexadecimal #FCA5FD.

Figura 17 Notacin RGB de colores

Esta forma aditiva de percibir el color no es nica. Cuando la luz solar choca contra
la superficie de un objeto, ste absorbe diferentes longitudes de onda de su
espectro total, mientras que refleja otras. Estas longitudes de onda reflejadas son
precisamente las causantes de los colores de los objetos, colores que por ser
producidos por filtrado de longitudes de onda se denominan colores sustractivos.
Este fenmeno es el que se produce en pintura, 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.
Un coche es de color azul porque absorbe todas las longitudes de onda que forman
la luz solar, excepto la correspondiente al color azul, que refleja, mientras que un
objeto es blanco porque refleja todo el espectro de ondas que forman la luz, es
decir, refleja todos los colores, y el resultado de la mezcla de todos ellos da como
resultado el blanco. Por su parte, un objeto es negro porque absorbe todas las
longitudes de onda del espectro: el negro es la ausencia de luz y de color.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

En esta concepcin sustractiva, los colores primarios son otros, concretamente el


cian, el magenta y el amarillo. A partir de estos tres colores es posible obtener
casi todos los dems, excepto el blanco y el negro.
Efectivamente, la mezcla de pigmentos cian, magenta y amarillo no produce el
color blanco, sino un color gris sucio, neutro. En cuanto al negro, tampoco es
posible obtenerlo a partir de los primarios, siendo necesario incluirlo en el conjunto
de colores bsicos sustractivos, obtenindose el modelo CMYK (Cyan, Magenta,
Yellow, Black).
El sistema CMYK, define los colores de forma similar a como funciona una
impresora de inyeccin de tinta o una imprenta comercial de cuatricroma. El color
resulta de la superposicin o de colocar juntas gotas de tinta semitransparente, de
los colores cian (un azul brillante), magenta (un color rosa intenso), amarillo y
negro, y su notacin se corresponde con el valor en tanto por ciento de cada uno
de estos colores.
De esta forma, un color cualquiera vendr expresado en el sistema CMYK
mediante la expresin (C,M,Y,K), en la que figuran los tantos por ciento que el color
posee de los componentes bsicos del sistema. Por ejemplo, (0,0,0,0) es blanco
puro (el blanco del papel), mientras que (100,0,100,0) corresponde al color verde.

Figura 18 Notacin CMYK de un color

Los colores sustractivos son usados en pintura, imprenta y, en general, en todas


aquellas composiciones en las que los colores se obtienen mediante la reflexin de
la luz solar en mezclas de pigmentos (tintas, leos, acuarelas, etc.). 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 composicin que deban ser blancas (imprenta).

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Los sistemas RGB y CMYK se encuentran relacionados, ya que los colores


primarios de uno son los secundarios del otro (los colores secundarios son los
obtenidos por mezcla directa de los primarios).
Otro modelo de definicin del color es el modelo HSV o HSB, que define los
colores en funcin de los valores de tres importantes atributos de estos, matiz
(Hue), saturacin (Saturation) y brillo (Value).

Figura 19 Modelo de color HSV

El matiz del color (Hue), tambin conocido como tono es el color en s mismo,
supone su cualidad cromtica, es -simplemente- un sinnimo de color. Es la
cualidad que define la mezcla de un color con blanco y negro. Est relacionado con
la longitud de onda de su radiacin. Segn su tonalidad se puede decir que un
color es rojo, amarillo, verde.
La saturacin est relacionada con la pureza cromtica o falta de dilucin con el
blanco. Constituye la pureza del color respecto al gris, y depende de la cantidad de
blanco presente. Cuanto ms saturado est un color, ms puro es y menos mezcla
de gris posee.

Figura 20 Saturacin

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

El brillo (Value) o brillantez tiene que ver con la intensidad o el nivel de energa. Es
la luminosidad de un color (la capacidad de reflejar el blanco. Alude a la claridad u
oscuridad de un tono. Es una condicin variable, que puede alterar
fundamentalmente la apariencia de un color. La luminosidad puede variar
aadiendo negro o blanco a un tono.

Leccin 10 Representacin del color en computacin grfica


El color en las tarjetas grficas, como vimos, se representa por medio del espacio
cromtico RGB. Esto significa que el color de cada pixel se representa por medio
de una terna de valores de las componentes en rojo, verde y azul, respectivamente,
que tiene dicho color. Si cada pixel tiene asignada memoria para sus componentes
RGB, se trata del modo true color. En cambio, 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, estamos en modos grficos ms econmicos.
En dichos modos, el acceso del ndice del color de un pixel se efecta segn la
aplicacin utilizada para disear el grfico. Por ejemplo, en C grfico esta
asignacin se realiza por medio de la sentencia putpixel(x,y,c), mientras que
asignar una entrada en la tabla de colores se realiza por medio de la sentencia
setrgbpalette(c,r,g,b). En dicho modelo se utiliza la sentencia putpixel(x,y,c) para
acceder al buffer de pantalla y dibujar un pixel en la posicin x, y con el ndice de
color c, con x, y, c de tipo entero. En Java la instruccin Color micolor = new
Color(r,g,b) define una objeto de la clase Color cuya coloracin estar definida por
los valores de sus parmetros enteros r, g, b. A su vez, para dibujar un pixel en el
dispositivo grfico actual no se define un mtodo, pero es posible realizarlo a partir
del mtodo drawRect(x,y, 0, 0) de la clase Graphics. Este mtodo dibuja un
rectngulo con 0 pixeles de ancho y 0 pixeles de alto en la coordenada precisada
por x, y (que son enteros), el resultado final de este mtodo es el dibujo de un pixel
en la ventana de grficos.
En los modos grficos VGA y super VGA, los parmetros r, g, b son de tipo
unsigned int, pero se truncan los dos bit menos significativos, dado que el rango
efectivo de cada componente es de 0 a 63. Por lo tanto es conveniente utilizar una
aritmtica dentro de dicho rango para representar los colores, y multiplicar por 4 en
el momento de la llamada.
Los modos grficos VGA y SVGA permiten definir en general 256 colores
simultneos (paleta grfica) de entre 256K colores posibles. Estas posibilidades
pueden ser, en algunos casos, poco satisfactorias, no solo porque la paleta sea

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

limitada, sino porque los colores son definibles con poca precisin en algunos
casos. Si bien el ojo humano detecta aproximadamente 350.000 colores diferentes
(y es capaz de distinguir aproximadamente 50.000 en forma simultnea), esta
sensibilidad no es uniforme en todo el espacio cromtico, 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).
De los 256K colores definibles, miles de ellos son idnticamente percibidos,
mientras que otros no se representan con una fidelidad adecuada. En otras
palabras, el espacio RGB es una forma muy ineficiente de representar colores
porque la informacin est codificada de una manera muy incoherente con
respecto a la capacidad del ojo.
En los modos grficos true color el problema se soluciona con un costo muy grande
(3 bytes por pixel es mucho ms de lo necesario). Sin embargo, hay personas con
visin cromtica muy sensible que siguen encontrando diferencias de matiz entre
colores contiguos en la gama del amarillo-anaranjado y del violceo.
Probablemente la mejor solucin hubiera sido contar con tecnologa CSV en las
tarjetas grficas, dado que la conversin al RGB del monitor se puede hacer dentro
de la controladora de video.

10.1 Paletas Estticas y Dinmicas


En muchas circunstancias la capacidad de manejo de colores en las tarjetas grfica
est restringida a una paleta de 256 colores simultneos. Esto puede deberse a
varios factores. Por ejemplo, puede ser necesaria la mayor resolucin posible, y sin
una cantidad de memoria adecuada para el frame buffer puede no ser suficiente
para soportar el modelo true color. Puede ocurrir tambin por limitaciones
tecnolgicas (tarjetas o monitores obsoletos, falta de drivers, etc.). La limitacin en
la cantidad de colores simultneos se sobrelleva, en general, con un esquema
cromtico que utiliza una paleta con los 256 colores ms significativos de la
imagen. Estos 256 colores son obtenidos durante la generacin de la misma
(generalmente con histogramas y tcnicas de separacin), por lo que las paletas se
denominan dinmicas.
Sin embargo, en un sistema grfico de propsito general el esquema dinmico de
paletas puede ser inadecuado cuando se desea manejar dos o ms imgenes
desarrolladas independientemente, porque cada una de ellas reclamar lo que
considera que son los colores ms adecuados. El sistema tiene que llegar a una
solucin de compromiso, sacrificando algunos de los colores de cada una de las

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

imgenes. Esto produce como resultado un deterioro impredecible en la calidad


grfica. Al mismo tiempo, una paleta dinmica 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
iluminacin, 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 estticas, por su parte existe un esquema cromtico predefinido. Es
decir, se define de antemano un conjunto de colores adecuados para graficar
cualquier escena, en cualquier condicin de iluminacin y bajo cualquier algoritmo.
Los resultados grficos tienden a ser de menor calidad. Sin embargo, la calidad de
las imgenes, una vez graficadas, no se deteriora con el posterior agregado de
otras imgenes. Al mismo tiempo, la referencia al ndice de color que corresponde
a cada pixel puede calcularse a partir del color que debera 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 esttico de color ubica el ndice de color con el que corresponde
colorear un pixel en funcin del color reclamado por el modelo de iluminacin, y los
colores ms cercanos disponibles en la paleta, probablemente por medio de
interpolacin. En captulos posteriores estudiaremos como funcionan los modelos
de iluminacin. 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 aritmtica de la tarjeta grfica. Al mismo tiempo, los valores de (R,G,B) deben
estar asociados a uno de los ndices de color disponibles.
Una forma de disear paletas estticas proviene de las siguientes consideraciones.
Normalmente las tarjetas representan la intensidad de cada primario con una
precisin 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
ms representativos para un uso general. Ms an, deben ser elegidos de manera
tal que cualquier aplicacin grfica que reclama un color no existente en la paleta,
pueda encontrar rpidamente el ndice de un color perteneciente a la paleta que
sea el ms 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 grficos de 64K colores (conocidos como hi-color), se utiliza una

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

particin en 32 * 64 * 32, asignndole mayor resolucin cromtica 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 pequeo, an para el primario azul. La combinacin que
empricamente result ideal fue 6 * 7 * 6, ya que su producto es 252, es decir,
desaprovecha solamente 4 ndices de color, y representa una buena solucin 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 ms 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 vrtice ms cercano. La determinacin de los
6*7*6 valores se debe realizar en forma experimental, teniendo en cuenta la
correccin del monitor utilizado. En un determinado monitor (un NEC MultiSync 3D)
para una posicin 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 grfico, es
posible dar un valor entero de 0 a 63 a la intensidad en cada primario. La estructura
de la cuantizacin del espacio RGB elegida resulta ser muy prctica en el momento
de encontrar el color con el cual pintar un pixel. Antes de ejecutar la graficacin, es
decir, como paso de inicializacin de la interfaz, se almacena la paleta en la tabla
de colores de la pantalla.
La estructura de la cuantizacin del espacio RGB elegida resulta ser muy prctica
en el momento de encontrar el color con el cual pintar un pixel. Antes de ejecutar la
grabacin, es decir, como paso de inicializacin 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 ms cercanos, y
luego se grafica el pixel con el ndice de color 42*r+6*g+b. Por ejemplo, si el
modelo de iluminacin 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
pequeas variaciones cromticas, 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 dinmicas, en nuestro esquema
es posible utilizar una tcnica de dithering aleatorio, es decir, se puede perturbar

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

aleatoriamente un color dado cambindolo por alguno de sus vecinos ms


prximos en la paleta.

Figura 21 Paleta esttica sin y con dithering aleatorio

Esto es as porque en nuestro modelo, dado un determinado color de la paleta, es


posible ubicar rpidamente a sus colores vecinos, los cuales, adems, son muy
similares.
Una forma muy econmica de producir este efecto consiste en perturbar para cada
primario la cuantizacin 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 eleccin del valor r o r+1
en la generacin del ndice de color asociado al pixel (lo propio se efecta con los
otros dos primarios). Para ello se genera un nmero 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 ms arriba, la eleccin para la cuantizacin
del rojo est circunscripta a los valores predefinidos 32 o 45. Como 35 es ms
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 cromtico producido por la
baja frecuencia de muestreo en un ruido uniforme.

CAPTULO 3 El hardware y el software para computacin grfica


Existen multitud de componentes que son necesarios para lograr realizar buenos
productos grficos, sin embargo en este apartado nos centraremos en la
clasificacin y caractersticas de los ms comunes, a partir de una caracterstica

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

fundamental: usan representacin vectorial o rster. Para ello se utiliza un


documento presentado por Claudio Delrieux.
Los resultados grficos de una aplicacin pueden mostrarse en una gran variedad
de dispositivos de salida. Normalmente estos dispositivos son o bien de pantalla o
bien de impresin. Sin embargo, desde el punto de vista de la Computacin grfica,
es importante otra clasificacin, referida al modo en que los mismos son manejados
por la computadora. De esa manera, podemos ver que existen dispositivos de los
siguientes tipos:

Dispositivos de vectores, los cuales reciben del computador la informacin


geomtrica de la localizacin y tamao de las primitivas que soportan, de las
cuales producen una reproduccin caligrfica. En la representacin
vectorial la imagen est igualmente constituida por puntos, pero en vez de
almacenar una matriz finita de puntos se almacenan vrtices, reglas de
trazado de lneas y de coloreado de superficies y lneas. Las imgenes
vectoriales son ms adecuadas que las de rster (mapas de bits-bitmap)
para ciertos tipos de aplicaciones (dibujos tcnicos, planos, cartografa, etc)
porque en realidad guardan reglas matemticas, por lo que contra lo que
sucede con las imgenes rster, pueden ser escaladas a cualquier tamao
sin prdida de calidad.
Dispositivos de rster. Los dispositivos de vectores fueron los primeros en
desarrollarse, pero luego del vertiginoso descenso en el costo de la memoria
voltil, a partir de la dcada del 70 se hicieron ms baratos los dispositivos
de rster. Esto implica un cambio en la manera de representar las primitivas
grficas (usualmente dichas primitivas son el punto, el segmento de recta y
la circunferencia o el crculo). La representacin rster, como ya se explic
en la seccin anterior, tambin es denominada mapa de bits ("bit-map"),
consiste en sustituir los infinitos puntos de la imagen original por un conjunto
finito de puntos, pixeles, tomados a intervalos regulares. Estos puntos
constituyen los nudos de una malla (generalmente las separaciones
horizontal y vertical son iguales). A partir de aqu, el conjunto de pixeles
representa los infinitos puntos de la imagen real. Posteriormente los puntos
de color son reducidos a nmeros para su almacenamiento y tratamiento en
el ordenador; el conjunto de valores numricos adopta la forma de una
matriz a la que denominamos matriz-imagen. La forma en que un punto de
luz es reducido a un nmero vara segn el mtodo utilizado, este nmero, o
conjunto de nmeros, debe indicar con precisin tanto el color (tono) como el
brillo (cuanta luz de dicho tono) y la saturacin (pureza del color) de original
correspondiente.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Leccin 11 Dispositivos de vectores


Actualmente estos dispositivos son ms caros, pero tienen ciertas ventajas que los
hacen nicos. Por ejemplo, tienen mucha mejor resolucin y precisin que los
dispositivos de rster, y requieren un ancho de banda de comunicacin mucho
menor dado que no reciben la discretizacin completa de las primitivas sino
solamente su posicin.
En sntesis los dispositivos vectoriales presentan las siguientes caractersticas.

Las lneas se guardan de forma aleatoria.


La velocidad de refresco depende del nmero de lneas.
Si hay pocas lneas el sistema espera para evitar refrescar ms de lo
necesario.
Presentan problemas al intentar dibujar polgonos rellenos.
Las posibilidades de color son mnimas.
Las lneas son exactas en su trazo (no hay efecto escalera).
La secuencia de dibujo es siempre la misma si no existe movimiento.
Al borrar una lnea, no se produce la estela.

Plotters: Grafican en una hoja (que en algunos casos puede ser de gran tamao)
sobre la cual se desliza una pluma movida por motores de pasos de gran precisin.

Figura 22 Plotter

En los plotters de tambor, la pluma se


desliza en sentido horizontal y el papel en
sentido vertical. En los plotters planos (ms
econmicos), el papel est fijo y la pluma
realiza todos los movimientos. Son usuales
las resoluciones del orden de los 10000 *
10000. Es posible utilizar colores por medio
de varias plumas. Son ideales para la
graficacin rpida y precisa de planos.

Displays de almacenamiento: Al igual que televisores y monitores, estos


dispositivos son pantallas de rayos catdicos, pero difieren en ciertos aspectos
tecnolgicos. Esencialmente, la pantalla tiene cierta memoria electrosttica que
mantiene visibles los elementos graficados con muy alta precisin y sin la
necesidad de refresco. Por lo tanto, una imagen muy compleja a la cual se van
agregando elementos en orden es idealmente representada por estos dispositivos.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Un elemento se representa pintndolo por medio de una serie de recorridas del


can electrnico. El borrado, sin embargo, no puede hacerse en forma selectiva,
por lo que no se puede alterar la posicin de un elemento sin tener que borrar y
redibujar todos los dems.
Sin embargo, su precisin y velocidad sin necesidad de memoria voltil los hace
ideales para la representacin de imgenes de radares.

Leccin 12 Dispositivos de rster


Los dispositivos de barrido (rster) surgen como alternativa. Los elementos del
dibujo se almacenan en forma de pixeles. Cada vez que se refresca la imagen el
can barre todos los pixeles.
Los dispositivos de barrido presentan las siguientes caractersticas:

La imagen completa la forman lneas horizontales formadas por pixeles.


Se realizan barridos de forma horizontal, de arriba a abajo.
Para cada pixel se ajusta la intensidad del haz.
El refresco tiene una frecuencia fija, entre 25 y 30 imgenes.
Las rdenes de dibujo que recibe el controlador se transforman a pixeles.
Incorporan fcilmente objetos rellenos (color o patrn).
El costo es menor.
La velocidad de refresco no depende de la complejidad de la imagen.

Dada la naturaleza discreta de los pixeles, es necesaria la conversin de primitivas


a pixeles. Los pixeles pueden dar apariencia de escalera (aliasing), para evitar
este efecto se han definido algoritmos y tcnicas antialiasing.
Impresoras de matriz: Era hasta hace poco el dispositivo de impresin ms
comn. Recibe de la computadora la informacin grfica como una secuencia
lneas, las cuales va reproduciendo con una cabeza impresora (por medio del golpe
de martillos o el roco de tinta).
Impresoras Laser: Recibe de la computadora la informacin grfica como una
secuencia de lneas, las cuales almacena en una memoria local. Dicha memoria es
utilizada para comandar la intensidad de un haz laser que recorre lnea por lnea el
papel, mientras es expuesto al contacto del toner. Donde el haz incide con gran
intensidad, el papel se dilata por el calor y absorbe el toner.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Monitores: Se han popularizado enormemente a partir del descenso en el precio


de la memoria voltil y el incremento constante en la calidad de las prestaciones
(resolucin, color, precisin). Esencialmente se comportan de una manera similar a
un receptor de televisin, excepto por el hecho de que reciben la seal de video y
sincronismo en forma directa de la computadora y no a travs de una portadora de
radio. Al igual que con las impresoras de matriz, la imagen se construye lnea por
lnea, en sentido horizontal primero (de izquierda a derecha) y vertical despus (de
arriba abajo). Debe existir un refresco de la imagen en memoria, la cual es
recorrida por la tarjeta grfica de la computadora para producir las lneas de
barrido.
Los monitores ms populares pueden tener resoluciones de hasta 1200 * 1024
pixeles (aunque este lmite avanza da a da), con una cantidad de colores limitada
por las prestaciones de la tarjeta grfica. Esto representa una calidad ms que
aceptable para la mayor parte de las aplicaciones. A continuacin se presentan los
diferentes estndares y su capacidad de resolucin:
Estndar
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)

Resolucin

Nmero 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.8M

Leccin 13 Hardware grfico para monitores - La tarjeta de video


Los dispositivos de rster requieren un refresco permanente de la discretizacin de
la salida grfica. En el caso de los monitores, dicho refresco se realiza en un
segmento de la memoria voltil de la computadora denominada frame buffer o
buffer de pantalla, que usualmente se implementa por medio de memoria RAM de

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

alta velocidad localizada dentro de la tarjeta grfica. El buffer de pantalla es


accedido en forma rtmica por el generador de video, que es el encargado de
componer la seal de video que va hacia el monitor. Al mismo tiempo, al
producirse una salida grfica por parte de la CPU de la computadora, la misma
debe ser discretizada y almacenada en el buffer de pantalla. Este acceso debe ser
permitido solamente en los momentos en los que el generador de video no est
accediendo al buffer, y por lo tanto se requiere el uso de un rbitro que mantenga
abierto el acceso al buffer solo en esos casos.
Tarjeta grfica

CPU

Arbitro

Frame
Buffer

Generador de video

MONITOR
Figura 23 Componentes bsicos de una
tarjeta grfica

El temporizado es crtico en el manejo del


buffer de pantalla, por lo que se requiere
memoria RAM de alta velocidad, mucho
mayor que la velocidad requerida para la
RAM de la CPU. Por ejemplo, en una
norma de video de 1024 pixeles por
lnea, la pantalla es refrescada 35 veces
por
segundo
a
una
tasa
de
aproximadamente un milln de pixeles
por pantalla.

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 slo con el refresco de
pantalla. En una situacin como esta, utilizar memoria de 25ns. para el buffer de
pantalla permite utilizar solamente un pico de 5 millones de accesos por segundo
para la CPU, lo cual en muchos casos es insuficiente si se tiene en cuenta que el
acceso entre la CPU y la tarjeta grfica por el bus ISA debe cumplir cierto protocolo
que hace ms lenta la comunicacin.
Otro esquema posible para manejar la memoria de pantalla es utilizar la tecnologa
de bus local (difundida alrededor de 1993 con las motherboard 486 y tarjetas Vesa
Local Bus). Bsicamente la idea es evitar el uso del bus de datos ISA para
interconectar la tarjeta grfica con la CPU. De ese modo se utiliza un segundo bus
(llamado bus local), normalmente de 32 bits en vez de 16, con la velocidad del reloj
externo del microprocesador (50Mhz. en vez de 8.33) y con capacidad de acceso
directo a memoria.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Este tipo de configuraciones


permite una mejor utilizacin del
ancho de banda marginal de la
memoria del frame buffer, y por lo
tanto,
en
determinadas
aplicaciones, como por ejemplo
animaciones, la prestacin de un
mismo hardware aumenta en un
orden de magnitud solamente al
modificar la configuracin de
acceso.

Tarjeta grfica

Frame
Buffer

Generador
de video

MONITOR

Bus Local

CPU

RAM

Figura 24 Tarjeta grfica con tecnologa de bus local

Por otra parte, muchas de las operaciones matemticas necesarias dentro en la


computacin grfica siguen un procesamiento disciplinado que puede en muchos
casos implementarse directamente en el hardware de la tarjeta. Es por dicha razn
que han surgido tarjetas aceleradoras por hardware (PCI o AGP) que permiten que
una aplicacin se deslinde del trabajo de efectuar las transformaciones
geomtricas, pintado de polgonos, el mapeo de texturas, etc.
Recapitulando, la clave del funcionamiento de la tarjeta grfica no est en los
requisitos de memoria, sino en la estructura del generador de video. El generador
de video debe recorrer la memoria del buffer de pantalla y entregar las lneas de
barrido al monitor dentro de una determinada norma de video. Dicha norma puede
ser una norma de televisin (PAL o NTSC) o de monitor (1024*768, 800*600, etc.).
Entonces, el barrido es producido por un generador de barrido cuyas frecuencias
horizontal y vertical son programables en funcin de la norma que se utiliza.
Las seales de barrido son enviadas al monitor, pero tambin se utilizan para
encontrar la posicin de memoria en la cual est almacenada la informacin grfica
de cada pixel que constituye una lnea de barrido. Esto se realiza por medio de una
unidad aritmtica que encuentra una direccin lineal a partir de los valores de la
seal de barrido horizontal y vertical. La direccin lineal habilita la salida del valor
almacenado en un lugar de la memoria del buffer de pantalla. Dicho valor es
transformado en informacin grfica por medio de una tabla de color, excepto en el
modo true color (color verdadero) que se explicar ms adelante.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Leccin 14 Dispositivos de entrada


Los dispositivos de entrada permiten la interaccin del usuario con el objeto grfico
creado. Estos dispositivos se pueden clasificar en teclados, apuntadores de control
directo, apuntadores de control indirecto y apuntadores de ltima tecnologa.

Figura 25 Diferentes tipos de teclado, incluido el teclado virtual

Un teclado est realizado mediante un microcontrolador, normalmente de las


familias 8048 u 8051 de Intel. Estos microcontroladores ejecutan sus propios
programas que estn grabados en sus respectivas ROMs internas. Estos
programas realizan la exploracin matricial de las teclas para determinar cuales
estn pulsadas.
Para lograr un sistema flexible los microcontroladores no identifican cada tecla con
su carcter serigrafiado en la misma, sino que se adjudica un valor numrico a
cada una de ellas que slo tiene que ver con su posicin fsica. Si no se hiciera as
ese sistema sera muy dependiente de cada idioma, tambin hay que tener en
cuenta que idiomas como por ejemplo en francs tienen teclados AZERTY en lugar
del que se tiene en Estados Unidos QWERTY.
Los teclados usados en Amrica latina y Espaa extienden la configuracin bsica
del teclado QWERTY con el fin de incluir la letra ee y facilidades para letras
acentuadas. Como el teclado espaol debe servir para las diversas lenguas de la
pennsula ibrica se facilita sobre todo la escritura de diversos acentos an los no
utilizados en el castellano. El teclado latinoamericano slo da soporte con teclas
directas a los caracteres especficos del castellano, que incluyen dos tipos de
acento, la letra ee y los inicios de exclamacin e interrogacin. El resto de
combinaciones de acentos se obtienen usando una tecla de extensin de grafismos
(<ALT-GR>). Por lo dems el teclado latinoamericano est orientado hacia la
programacin, con fcil acceso al juego de smbolos de la norma ASCII.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Por cada pulsacin o liberacin de una tecla el microcontrolador enva un cdigo


identificativo que se llama Scan Code. Para permitir que varias teclas sean
pulsadas simultneamente, el teclado genera un cdigo diferente cuando una tecla
se pulsa y cuando dicha tecla se libera.
En los teclados AT los cdigos generados son diferentes, por lo que por razones de
compatibilidad es necesario traducirlos. De esta funcin se encarga el controlador
de teclado que es otro microcontrolador (normalmente el 8042), ste ya situado en
el PC. Este controlador recibe el Keyboard Scan Code (Kscan Code) y genera el
propiamente dicho Scan Code. En cualquier caso ya sea teclado PS/2 AT el Scan
Code es entregado a la BIOS del PC para identificar la tecla pulsada.
La comunicacin del teclado es va serie. El protocolo de comunicacin es
bidireccional, por lo que el computador puede enviarle comandos al teclado para
configurarlo, resetearlo, realizar diagnsticos, etc.
Los apuntadores de control directo permiten sealar directamente sobre la
pantalla o monitor el objeto deseado, un ejemplo muy comn son las pantallas
sensibles al tacto y los lpices pticos (ligth pen).

Figura 26 Dispositivos con apuntadores de control directo

El lpiz ptico contiene sensores luminosos y enva una seal a la computadora


cada vez que registra una luz, por ejemplo al tocar la pantalla cuando los pixeles no
negros que se encuentran bajo la punta del lpiz son refrescados por el haz de
electrones de la pantalla. La pantalla de la computadora no se ilumina en su
totalidad al mismo tiempo, sino que el haz de electrones que ilumina los pixeles los
recorre lnea por lnea, todas en un espacio de 1/50 de segundo. Detectando el
momento en que el haz de electrones pasa bajo la punta del lpiz ptico, el
ordenador puede determinar la posicin del lpiz en la pantalla.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

El lpiz ptico no requiere una pantalla ni un recubrimiento especiales como puede


ser el caso de una pantalla tctil, pero tiene la desventaja de que sostener el lpiz
contra la pantalla durante periodos largos de tiempo llega a cansar al usuario.
En cuanto a las pantallas, el tipo de pantalla tctil ms sencillo est compuesto de
una red de lneas sensibles, que determinan la situacin de una presin mediante
la unin de los contactos verticales y horizontales.
Otros tipos de pantallas ms precisas utilizan una superficie cargada
elctricamente y sensores alrededor de los bordes externos de la pantalla, para
detectar la cantidad de cambio elctrico y sealar exactamente donde se ha
realizado el contacto. Un tercer tipo fija diodos emisores de rayos infrarrojos (LEDs,
acrnimo de Light-Emitting Diodes) y sensores alrededor de los bordes externos de
la pantalla. Estos LEDs y sensores crean una red invisible de infrarrojos en la parte
delantera de la pantalla que interrumpe el usuario con sus dedos.
Las pantallas tctiles de infrarrojos se usan a menudo en entornos sucios, donde la
suciedad podra interferir en el modo de operacin de otros tipos de pantallas
tctiles. La popularidad de las pantallas tctiles entre los usuarios se ha visto
limitada porque es necesario mantener las manos en el aire para sealar la
pantalla, lo que sera demasiado incmodo en largos periodos de tiempo. Adems
no ofrece gran precisin al tener que sealar ciertos elementos en programas de
alta resolucin. Las pantallas tctiles, sin embargo, son enormemente populares en
aplicaciones como los puestos de informacin porque ofrecen una forma de sealar
que no requiere ningn hardware mvil y porque presionar la pantalla es algo
intuitivo.
En cuanto a los apuntadores de control indirecto, con el ratn constituyen los de
uso ms extendido en conjunto con los teclados. Estos apuntadores estn
constituidos por dispositivos externos que permiten manejar un apuntador grfico
en el monitor, mediante su movimiento y realizar acciones sobre los objetos
mediante botones.

Figura 27 Dispositivos apuntadores indirectos: ratn, touchpad, trackpoint, joystick, tableta grfica, etc.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Los ratones (mouse) suelen estar constituidos por una caja con una forma ms o
menos anatmica en la que se encuentran dos botones que harn los famosos
clics de ratn siendo transmitidos por el cable al puerto PS/II o al puerto de serie.
Los ratones mecnicos mantienen dentro de esta caja una bola que sobresale de la
caja a la que se pegan 4 rodillos ortogonalmente dispuestos que sern los que
definan la direccin de movimiento del ratn. El ratn 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 seales elctricas y producen el
efecto de desplazamiento del ratn por la pantalla del ordenador.
Existen modelos en los que la transmisin 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. Otros utilizan diodos
emisores de luz (led), para capturar el movimiento del ratn, en este caso se
denominan ratones pticos.

Figura 28 Apuntadores de ltima tecnologa

Los apuntadores de ltima tecnologa permiten la captura de movimientos en


espacios tridimensionales y por ende la manipulacin de objetos tridimensionales.

Leccin 15 Software de graficacin


Hasta la llegada del software 3D la mayora de los efectos especiales se realizaban
por medio de efectos pticos, maquetas, matte painting, etc. Con el software de
graficacin en 3D se puede imitar la realidad con tal realismo, que es difcil detectar
si la escena se ha rodado o se ha generado en un ordenador. Esto ha quedado
patente en muchas pelculas, que ya hemos mencionado.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Los paquetes de animacin consisten en uno o varios mdulos con los que es
posible modelar, animar y dar apariencia real a un objeto. En un principio, las
empresas de animacin programaban su propio software con el cual luego
trabajaban. Poco a poco fueron surgiendo distintos programas, los cuales podan
ser adquiridos a travs de una licencia de uso.
El proceso de creacin de grficos 3D por computadora puede ser dividido en estas
tres fases bsicas:

Modelado
Composicin de la escena
Rnder (creacin de la imagen final)

Modelado. La etapa de modelado consta de ir dando forma a objetos individuales


que luego sern usados en la escena. Existen diversas tcnicas de modelado;
Constructive Solid Geometry, modelado con NURBS y modelado poligonal son
algunos ejemplos. Los procesos de modelado pueden incluir la edicin de la
superficie del objeto o las propiedades del material (por ejemplo, color,
luminosidad, difusin, especularidad, caractersticas de reflexin, transparencia u
opacidad, o el ndice de refraccin), agregar texturas, mapas de relieve (bumpmaps) y otras caractersticas.
El proceso de modelado puede incluir algunas actividades relacionadas con la
preparacin del modelo 3D para su posterior animacin. A los objetos se les puede
asignar un esqueleto, una estructura central con la capacidad de afectar la forma y
movimientos de ese objeto. Esto ayuda al proceso de animacin, en el cual el
movimiento
del
esqueleto
afectar
automticamente
las
porciones
correspondientes del modelo. Dos tcnicas para realizar la animacin son
Cinemtica Directa (Forward Kinematic animation) y animacin por Cinemtica
Inversa (Inverse Kinematic animation).
El modelado puede ser realizado por programas dedicados (como Lightwave 3D,
Rhinoceros 3D o Moray), un componente de una aplicacin (Shaper, Lofter en 3D
Studio) o por un lenguaje de descripcin de escenas (como en POV-Ray. En
algunos casos, no hay una distincin estricta entre estas fases; en dichos casos, el
modelado es slo una parte del proceso de creacin de escenas (por ejemplo, con
Caligari trueSpace).
Composicin de la escena. Esta etapa involucra la distribucin de objetos, luces,
cmaras y otras entidades en una escena que ser utilizada para producir una
imagen esttica o una animacin. Si se utiliza para Animacin, esta fase, en

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

general, hace uso de una tcnica llamada "Keyframing" (cuadros clave), que facilita
la creacin de movimientos complicados en la escena. Con la ayuda de la tcnica
de keyframing, en lugar de tener que corregir la posicin de un objeto, su rotacin o
tamao en cada cuadro de la animacin, solo se necesita marcar algunos cuadros
clave (keyframes). Los cuadros entre keyframes son generados automticamente,
lo que se conoce como 'Interpolacin'.
La iluminacin es un aspecto importante de la composicin de la escena. Como en
la realidad, la iluminacin es un factor importante que contribuye al resultado
esttico y a la calidad visual del trabajo terminado. Por eso, puede ser un arte difcil
de dominar. Los efectos de iluminacin pueden contribuir en gran medida al humor
y la respuesta emocional generada por la escena, algo que es bien conocido por
fotgrafos y tcnicos de iluminacin teatral.
Tesselation y mallas. El proceso de transformar la representacin de objetos,
como el punto medio de coordenadas de una esfera y un punto en su
circunferencia, en una representacin poligonal de una esfera, se conoce como
tesselation. Este paso es usado en el rnder basado en polgonos, donde los
objetos son descompuestos de representaciones abstractas primitivas como
esferas, conos, etctera, en las denominadas mallas, que son redes de tringulos
interconectados.
Las mallas de tringulos son populares ya que est probado que son fciles de
'renderizar' usando Scanline rendering.
Las representaciones poligonales no son utilizadas en todas las tcnicas de rnder,
y en estos casos, el paso de tesselation no es incluido en la transicin de
representacin abstracta y la escena 'renderizada'.
Renderizado. Se llama rnder al proceso final de generar la imagen 2D o
animacin a partir de la escena creada. Esto puede ser comparado a tomar una
foto o en el caso de la animacin, a filmar una escena de la vida real.
Generalmente se buscan imgenes de calidad fotorrealista, y para este fin se han
desarrollado muchos mtodos especiales. Las tcnicas van desde las ms
sencillas, como el rnder de alambre (wireframe rendering), pasando por el rnder
basado en polgonos, hasta las tcnicas ms modernas como el Scanline
Rendering, el Raytracing, la radiosidad o el Mapeado de fotones.
El software de rnder puede simular efectos cinematogrficos como el lens flare, la
profundidad de campo, o el motion blur (desenfoque de movimiento). Estos
artefactos son, en realidad, un producto de las imperfecciones mecnicas de la
fotografa fsica, pero como el ojo humano est acostumbrado a su presencia, la

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

simulacin de dichos efectos aportan un elemento de realismo a la escena. Se han


desarrollado tcnicas con el propsito de simular otros efectos de origen natural,
como la interaccin de la luz con la atmsfera o el humo. Ejemplos de estas
tcnicas incluyen los sistemas de partculas que pueden simular lluvia, humo o
fuego, el muestreo volumtrico para simular niebla, polvo y otros efectos
atmosfricos, y las custicas para simular el efecto de la luz al atravesar superficies
refractantes.
El proceso de rnder necesita una gran capacidad de clculo, pues requiere
simular gran cantidad de procesos fsicos complejos. La capacidad de clculo se ha
incrementado rpidamente a travs de los aos, permitiendo un grado superior de
realismo en los rnders. Estudios de cine que producen animaciones generadas
por ordenador hacen uso, en general, de lo que se conoce como rnder farm
(granja de rnder) para acelerar la produccin de fotogramas
A pesar de haber muchos paquetes de modelado y animacin 3D, los cuatro que
se han ganado la mayor popularidad son:

Alias Wavefront's Maya - Es quiz el software ms popular en la industria,


por lo menos hasta 2003. Es utilizado por muchos de los estudios de efectos
visuales ms importantes en combinacin con RenderMan, el motor de
rnder fotorrealista de Pixar.
Discreet's 3D Studio Max - Originalmente escrito por Kinetix (una divisin de
Autodesk) como el sucesor de 3D Studio. Kinetix luego se fusion con la
ltima adquisicin de Autodesk, Discreet Logic. Es el lder en el desarrollo de
3D en la industria de juegos y usuarios hogareos.
Newtek's Lightwave 3D - Fue originalmente desarrollado por Amiga
Computers a principios de la dcada de 1990. Ms tarde evolucion en un
avanzado y muy usado paquete de grficos y animacin 3D. Actualmente
disponible para Windows, Mac OS y Mac OS X.. El programa consiste en
dos componentes: Modelador y Editor de escena. Es el favorito entre los
entusiastas, y es utilizado en muchas de las mayores productoras de efectos
visuales como Digital Domain.
Avid's Softimage XSI - El contrincante ms grande de Maya. En 1987,
Softimage Inc, una compaa situada en Montreal, escribi Softimage 3D,
que se convirti rpidamente en el programa de 3D ms popular de ese
perodo. En 1994, Microsoft compr Softimage Inc. y comenzaron a
reescribir SoftImage 3D para Windows NT. El resultado se llam
SoftimageXSI. En 1998 Microsoft vendi Softimage a Avid.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Junto a estos paquetes mayores, hay otros que no se han ganado tal aceptacin
general, pero que no son simples juguetes. Algunos son:

Caligari trueSpace - una aplicacin 3D integrada, con una interfaz muy


intuitiva. Una caracterstica distintiva de esta aplicacin es que todas las
fases de creacin de grficos 3D son realizadas dentro de un nico
programa. No es tan avanzado como los paquetes lderes, pero provee
caractersticas como simulacin de fenmenos fsicos (viento, gravedad,
colisiones entre cuerpos).
Cinema4d - Motor de rnder rpido, clculo de radiosidad.
formZ - Ofrece manipulacin topolgica de las geometras.
Rhinoceros 3D - Un potente modelador bajo NURBS.
POV-Ray - Un avanzado software gratuito de Raytracing. Usa su propio
lenguaje de descripcin de escena, con caractersticas como macros, bucles
y declaraciones condicionales. Es completamente gratuito aunque no fue
lanzado bajo GPL. No incluye modelador.
NaN*Blender - Programa de modelado y animacin libre, con caractersticas
como soporte para programacin bajo Python con un amplia gamma de
script en constante desarrollo, posee un motor robusto para la programacin
de juegos, un Motor de rnder propio y una comunidad de usuarios
totalmente abierta y dispuesta a colaborar.
RealSoft3D - Modelador 3D para Linux y Windows. Incluye rnder.
Universe por Electric Image - Paquete de modelado y animacin con uno de
los motores de rnder ms rpidos que existen.

Cada software tiene sus ventajas y desventajas frente a los dems, pero la
posibilidad de realizar un trabajo de calidad no depende de esto, sino de los
conocimientos, la creatividad, y no tanto del software.
Adems del software especializado, es comn el manejo de APIs especializadas
para facilitar los procesos en todas las etapas de la generacin de grficos por
computadora. Estas APIs han demostrado ser vitales para los desarrolladores de
hardware para grficos por computadora, ya que proveen un camino al
programador para acceder al hardware de manera abstracta, aprovechando las
ventajas de tal o cual tarjeta de video.
Las siguientes APIs para grficos por computadora son particularmente populares:

OpenGL
Direct3D (subconjunto de DirectX para producir grficos interactivos en 3D)
RenderMan

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Fuentes documentales unidad 1


BAECKER, J. GRUDIN, W. BUXTON & s. GREENBERG (eds) "Readings in
Human-Computer Interaction: toward the year 2000". Second Edition. MorganKauffmann. 1997.
CEBRIN,
Rafael.
Teora
del
color.
[En
lnea]
http://www.lilliputmodel.com/articulos/cebrian/teoria_color1.htm. Fecha de consulta:
Mayo de 2005.
CONDE RODRGUEZ, Francisco de Ass. Charla sobre: La infografa y los efectos
especiales en el cine. En el Foro sobre Juventud y Nuevas Tecnologas. [En lnea]
http://wwwdi.ujaen.es/~fconde/Confe-infografia.pdf.
Fecha de consulta:
Septiembre de 2005.
DELRIEUX, Claudio. Introduccin a la Computacin grfica. Departamento de
Ingeniera
Elctrica.
Universidad
Nacional
del
Sur.
[En
lnea]
http://www.memi.umss.edu.bo/~mscinfo/cursos/graficos/main.htm.
Fecha
de
consulta: Septiembre de 2005.
DESARROLLOWEB.COM. Curso prctico de diseo web. Informe de Luciano
Moreno [En lnea] http://www.desarrolloweb.com/articulos/1483.php?manual=47.
Fecha de consulta: Mayo de 2005.
IMPAGLIAZZO, John. Learning Computing History. A Brief History of Computer
Graphics [En lnea] http://www.comphist.org/computing_history/new_page_6.htm.
ltima actualizacin: Septiembre 15 de 2005. Fecha de consulta: Septiembre de
2005.
MORENO, Luciano. Grficos digitales [En Lnea]
http://www.htmlweb.net/diseno/graficos_digitales/graficos_3.html
consulta: Mayo de 2005

Fecha

de

OUTING, Steve. News sites repeat mistakes of the past. We still dont recognize
the power of interactivity. Editor & Publisher. 4 de Mayo. VNU eMedia Inc.
Consultado
en
abril
de
2002
en:
www.editorandpublisher.com/editorandpublisher/features_columns/article_display.js
p?vnu_content_id=1461161
PASCUAL BRONCANO, Pedro J. y GUTIRREZ, Antonio.
Conceptos
fundamentales
de
computacin
grfica.
[En
lnea]
http://www.ii.uam.es/~pedro/graficos/teoria/Conceptos/ConceptosFundamentales.ht

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

m#estandar. Escuela Tcnica Superior de Informtica de la Universidad Autnoma


de Madrid, 1998-2000. ltima actualizacin: 03/07/2004. Fecha de consulta:
Septiembre de 2005.
PREECE, Y. ROGERS, H. SHARP, D. BENYON, S. HOLLAND, T. Carey. "HumanComputer Interaction", Addison-Wesley, 1994
TYPEPHASES
DESIGN.
Manual
de
diseo
digital.
[En
lnea]
http://platea.cnice.mecd.es/~jmas/manual/html/uso.html Fecha de consulta: Mayo
de 2005.
UNIVERSITAT JAUME I. Material terico para el curso Multimedia. [En lnea]
http://www4.uji.es/~belfern/IX34/Documentos/Teoria/Animacion.pdf.
http://www4.uji.es/~belfern/IX34/Documentos/Teoria/Video.pdf,
http://www4.uji.es/~belfern/IX34/Documentos/Teoria/Graficos.pdf
Fecha
de
consulta: Mayo de 2005.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

UNIDAD 2 ALGORITMOS BSICOS DE DIBUJO EN 2 DIMENSIONES


Introduccin
Una vez se han clarificado algunos de los fundamentos de la computacin grfica
es necesario abordar el proceso de representacin. En esta segunda unidad
didctica se van a encontrar los mtodos para graficar las primitivas bsicas:
rectas, crculos, polgonos, para posteriormente abordar lo correspondiente a
llenado de reas y transformaciones.
Para ello se parte de la conceptualizacin matemtica de cada una de estas
primitivas, llegando al proceso de discretizacin necesario para su dibujo en un
dispositivo como el monitor. Aunque muchos de los lenguajes computacionales ya
tienen definidas en sus libreras grficas funciones que permiten dibujar estas
primitivas sin tener que incluirse en el problema de la discretizacin, la idea
fundamental es conocer cmo funciona el dibujado en el monitor, a partir de su
unidad bsica: el pxel? Se espera que este conocimiento redunde en un mejor
manejo de los algoritmos que describen este proceso.
En cada uno de los algoritmos bsicos se proporciona la codificacin en lenguaje
Java con el fin de acercarlo a la programacin. En la prxima unidad se mostrar
con un mayor nivel de detalle las posibilidades de un API para la graficacin. Aqu
dar sus primeros pasos....pero sern esenciales.

Intencionalidades Formativas
Propsitos
Introducir al estudiante en el conocimiento de los principales algoritmos y
estructuras de datos utilizados en Computacin Grfica para modelar y
visualizar escenas en 2 y 3 dimensiones, como fundamento para la
visualizacin grfica en el computador.
Proporcionar al estudiante los lineamientos tecnolgicos bsicos que le
permitan utilizar libreras grficas (Ej. OpenGL) en conjunto con lenguajes de
programacin estructurada como JAVA.
Objetivos
Conocer los algoritmos necesarios para el trazado de curvas en dos
dimensiones, a partir del estudio de su origen matemtico, geomtrico y la

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

ejemplificacin utilizando libreras grficas en conjunto con leguajes de


programacin.
Elaborar ejercicios de llenado de reas y transformaciones de figuras de dos
dimensiones, utilizando libreras grficas y lenguajes de programacin,
partiendo de la conceptualizacin geomtrica respectiva.
Competencias
El estudiante programa empleando algoritmos que permiten dibujar las
principales figuras geomtricas en dos dimensiones.
El estudiante conoce los fundamentos matemticos de la representacin de
grficos computacionales en tres dimensiones y utiliza los algoritmos que las
realizan.
Metas
Al finalizar esta unidad didctica el estudiante estar en capacidad de:

Usar libreras grficas para la construccin de grficos computacionales.


Utilizar y construir algoritmos para dibujo de grficos en 2D y 3D.
Describir el funcionamiento matemtico y geomtrico que permite el
dibujo de grficos en el computador.

Mapa Conceptual de la Unidad

Productos de Aprendizaje
Individual

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Lectura autorregulada de la Unidad Didctica realizando fichas textuales y


mapas conceptuales para archivar en el portafolio.
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 compaeros.
Sustentacin individual de los programas desarrollados.

Pequeo Grupo Colaborativo


Desarrollo de tres (3) ejercicios de programacin aplicando algoritmos de
graficacin en JAVA. Los enunciados sern entregados por el tutor indicando las
fechas y condiciones de entrega.
Grupo de Curso

Por cada tipo de algoritmo que se estudia se realizar una prctica en


computadores, para repasar los conceptos bsicos y probar los algoritmos
codificados en JAVA.
Socializacin de los productos individuales y en pequeo grupo colaborativo.
Consolidacin de conceptos, glosario tcnico y mapa conceptual de la
unidad.

CAPTULO 4 Requerimientos de software


Este captulo presenta las herramientas necesarias para la construccin y
ejecucin de programas en el lenguaje de programacin JAVA, los requerimientos
mnimos de hardware y software para su correcto funcionamiento y los comandos
bsicos para su implementacin.

Leccin 16 JDK
El JDK (Java Development Kit) comprende todas las herramientas necesarias para
la programacin en JAVA, a continuacin se presenta una relacin de sus
principales componentes:
java

Gestor de aplicaciones Java. Esta herramienta es el intrprete de


los archivos de clase generados por el javac (compilador).

javac

Compilador de aplicaciones Java, convierte el cdigo fuente en

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

bytecode de Java.
appletviewer

Esta herramienta es empleada para ejecutar y depurar


aplicaciones Java sin necesidad de un navegador web.

javadoc

Generador de documentacin, genera automticamente la


documentacin del cdigo fuente desarrollado a partir de los
comentarios insertados en cada archivo.

jar

Archivador, permite empaquetar en un nico archivo JAR las


libreras de clase empleadas en un programa desarrollado.

16.1 Instalacin de la herramienta


Para realizar la instalacin del JDK de JAVA es necesario descargarlo desde la
pgina http://www.oracle.com/technetwork/java/javase/downloads/index.html, all
deber hacer clic en el enlace de descarga y seleccionar el instalador
correspondiente a su sistema operativo.

Figura 29 Descarga del Instalador JDK

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Leccin 17 Estructura bsica de un programa en JAVA


El desarrollo de un programa en JAVA requiere los siguientes componentes
bsicos en su estructura:
import java.awt.*;

// Declaracin de libreras de clase a emplear

//package prueba;

// Declaracin del paquete contenedor

public class nclase {

// Declaracin de la clase (nombre de la clase)

public nclase() {
System.out.print("Texto a mostrar");

// Declaracin del constructor de la clase


// Instrucciones (solo muestra un texto en pantalla)

// Fin del constructor

public static void main(String[] args) {

// Declaracin del mtodo principal

nclase prueba = new nclase();


}

// Creacin de una instancia de la clase


// Fin del mtodo principal

// Fin de la clase

Algunos apuntes para programar en Java:

El lenguaje de programacin Java es fuertemente tipado por lo cual debe


prestarse mucha atencin a los nombres de libreras, clases, comandos etc.
(distinguiendo maysculas y minsculas).
Al documentar el cdigo fuente se suelen emplear comentarios, estos se
pueden emplear de la siguiente manera:
o Comentarios de una sola lnea:
// comentario
o Comentarios de ms de una lnea:
/* comentarios */
o Comentarios de documentacin:
/** comentarios */
Una sentencia es una instruccin que se le da al programa para realizar una
tarea especfica, toda sentencia debe finalizar con ; ej. import java.awt.*;
Un identificador es el nombre que identifica a una clase, una variable, un
mtodo o una funcin, estos siguen las siguientes reglas:
o Debe iniciar con una letra, el carcter subrayado (_) o signo peso ($).
o No puede emplear palabras reservadas (ej. utilizadas por el lenguaje).
o No puede contener espacios en blanco.
o Puede contener pero no iniciar por nmeros.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Leccin 18 Tipos de datos y variables


18.1 Tipos de datos primitivos
Java soporta los siguientes tipos de datos:
boolean

Comprende dos valores true o false.

char

Caracteres Unicode de 16 bits Los caracteres alfa-numricos son los


mismos que los ASCII con el bit alto puesto a 0. Valores desde 0 hasta
65535 (valores de 16-bits sin signo).

byte

Tamao 8 bits. Valores desde -27 hasta 27 -1 (-128 a 127)

short

Tamao 16 bits. Valores desde -215 hasta 215-1 (-32768 a 32767)

int

Tamao 32 bits. Valores desde -231 hasta 231-1 (-2147483648 a


2147483647)

long

Tamao 64 bits. Valores desde -263 hasta 263-1 (-9223372036854775808


a 9223372036854775807)

float

Tamao 32 bits. Nmeros en coma flotante de simple precisin. Estndar


IEEE 754-1985 (de 1.40239846e45f a 3.40282347e+38f)

double

Tamao 64 bits. Nmeros en coma flotante de doble precisin. Estndar


IEEE
754-1985.
(de
4.94065645841246544e324d
a
1.7976931348623157e+308d.)

Sin embargo los tipos de datos mayormente empleados en la programacin bsica


con JAVA son boolean, int y double.

18.2. Caracteres
En Java los caracteres no estn limitados a los presentes en la tabla ASCII, son
Unicode. Un caracter se presenta siempre entre comillas simples ej. 'A', '5', '', etc.
El tipo de dato char se emplea para almacenar estos caracteres.
Un tipo especial de caracteres comprenden la secuencia de escape, empleados
para representar caracteres de control o caracteres que no se imprimen. Una
secuencia de escape est formada por la barra invertida (\) y un caracter. La
siguiente tabla presenta las secuencias de escape ms utilizadas.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

\r

Retorno de carro (hace que se mueva el cursor a la primera posicin de una lnea)

\t

Tabulador horizontal (genera un espacio de separacin entre caracteres)

\n

Nueva lnea (indica el final de una lnea de texto y el paso a la siguiente).

\\

Escribe una barra invertida.

18.3 Variables
booleanas

Una variable booleana solamente puede guardar uno de los


dos posibles valores: true (verdadero) y false (falso). Ej.
boolean var1 = true;

enteras

Una variable entera corresponde a cualquier combinacin de


cifras precedida por el signo ms + (opcional), para los
positivos, o el signo menos -, para los negativos. Ej. int var1 =
-254; las variables enteras se enuncian en java con las
palabras reservadas (int, byte, short, int, long) segn la
longitud de los valores a contener.

en coma flotante

Las variables del tipo float o double (coma flotante) se


emplean para almacenar valores que poseen parte entera y
parte decimal. Ej. float var1 = 4.3f; double var1 = 3.5;

Valores constantes

Cuando se declara una variable de tipo final, su valor


permanece y no es posible modificarlo durante la ejecucin del
programa. Ej. final int VAR1=256;

Leccin 19 IDE para JAVA


El JDK (Java Development Kit) de Java presentado previamente no contiene un
IDE (Integrated Development Environment - Entorno de desarrollo integrado). Sin
embargo existen multiples alternativas independientes.
A continuacin se presentan algunas de los IDE para JAVA ms populares:

IntelliJ IDEA: Considerado uno de los mejores entornos de desarrollo, posee


soporte para multiples lenguajes de programacin.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 30 Entorno del IDE intelliJ IDEA

Las siguientes son algunas de sus principales caractersticas:

Asistencia inteligente de codificacin


Generacin de cdigo
Estilo de cdigo
Documentacin de cdigo
Navegacin y bsqueda
Anlisis de cdigo sobre la marcha
Propiedades del editor de archivos
Diseador de GUI Swing
Diagramacin de clases UML

Eclipse: Entorno de desarrollo integrado de cdigo abierto multiplataforma, el


entorno de desarrollo integrado (IDE) de Eclipse emplea mdulos (plug-in) para

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

proporcionar toda su funcionalidad al frente de la plataforma de cliente enriquecido,


a diferencia de otros entornos monolticos donde las funcionalidades estn todas
incluidas, las necesite el usuario o no.
El SDK de Eclipse incluye las herramientas de desarrollo de Java, ofreciendo un
IDE con un compilador de Java interno y un modelo completo de los archivos
fuente de Java. Esto permite tcnicas avanzadas de refactorizacin y anlisis de
cdigo.

Figura 31 Entorno del IDE Eclipse

Las siguientes son algunas de sus principales caractersticas:

Editor de texto con resaltado de sintaxis


Compilacin es en tiempo real
Control de versiones con CVS
Integracin con Ant
Asistentes (wizards) para creacin de proyectos

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Netbeans: NetBeans es un proyecto de cdigo abierto de gran xito con una gran
base de usuarios, una comunidad en constante crecimiento, y con cerca de 100
socios en todo el mundo. Sun MicroSystems fund el proyecto de cdigo abierto
NetBeans en junio de 2000 y contina siendo el patrocinador principal de los
proyectos.
La plataforma NetBeans permite que las aplicaciones sean desarrolladas a partir de
un conjunto de componentes de software llamados mdulos. Un mdulo 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 mdulo. Las
aplicaciones construidas a partir de mdulos pueden ser extendidas agregndole
nuevos mdulos. Debido a que los mdulos pueden ser desarrollados
independientemente, las aplicaciones basadas en la plataforma NetBeans pueden
ser extendidas fcilmente por otros desarrolladores de software.

Figura 32 Entorno del IDE Netbeans

Modularidad. Todas las funciones del IDE son provistas por mdulos. Cada mdulo
provee una funcin bien definida, tales como el soporte de Java, edicin, o soporte
para el sistema de control de versiones. NetBeans contiene todos los mdulos
necesarios para el desarrollo de aplicaciones Java en una sola descarga,
permitindole al usuario comenzar a trabajar inmediatamente.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

JCreator: JCreator es una herramienta de desarrollo para JAVA. Es rpido,


eficiente y confiable. Es la herramienta perfecta para los programadores de todos
los niveles

Figura 33 Entorno del IDE JCreator

Figura 34 Pestaas y resaltado de sintaxis en JCreator

JCreator posee una amplia gama de funcionalidades, tales como:

Gestin de proyectos
Plantillas de proyecto
Finalizacin de cdigo

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

interfaz de depuracin
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. JCreator identifica automticamente el
archivo con el mtodo principal o el archivo html cargador del applet de Java.
Para el desarrollo de las actividades prcticas del presente curso se recomienda el
empleo de JCreator (versin LE).
Para realizar la instalacin del JCreator es necesario descargarlo desde la pgina
http://www.jcreator.org/download.htm, all deber seleccionar el instalador
correspondiente a su sistema operativo y hacer clic en el enlace de descarga.

Figura 35 Descarga del Instalador de JCreator

Leccin 20 Compilacin y ejecucin


Empleando el IDE JCreator se tiene acceso a las herramientas de compilacin y
ejecucin de un programa en JAVA, a continuacin se presenta la ubicacin de
dichas herramientas en el entorno del IDE:

20.1 Compilacin
Al emplear la herramienta de compilacin, JCreator hace el llamado al compilador
de JAVA ejecutando el programa javac.exe.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 36 Acceso a la herramienta de compilacin en JCreator

En caso de presentarse errores durante la compilacin, el recuadro de la derecha


presentar el mensaje de error generado indicando el nmero de fila
correspondiente. Si el programa es compilado efectivamente, el recuadro enunciar
Process completed.

20.2 Ejecucin
Una vez compilado el programa en JAVA, se genera un nuevo archivo en el
directorio original con la extensin .class, el cual puede ser interpretado ejecutando
el programa java.exe.

Figura 37 Acceso a la herramienta de ejecucin en JCreator

Los mensajes de salida producidos por la ejecucin del programa sern


visualizados en el recuadro de la derecha (General output).

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

CAPTULO 5 Algoritmos bsicos


En este captulo se revisan los fundamentos geomtricos y matemticos a partir de
los cuales se generan los algoritmos que dibujan primitivas grficas como lneas,
circunferencias y arcos. Para su desarrollo se utiliz el captulo correspondiente del
texto de Claudio Delrieux y se complementa con la codificacin en Java de los
algoritmos.
Es muy difcil escoger un conjunto de primitivas grficas que sea adecuado para la
representacin de todo tipo de entidades grficas. Sin embargo, el siguiente
subconjunto resulta suficiente en la prctica:
Puntos: Se especifican a partir de su localizacin y color. Su discretizacin es
directa, como se mencion con anterioridad.
Segmentos de recta: Son esenciales para la mayor parte de las entidades. Se
especifican a partir de un par de puntos que representan sus extremos.
Circunferencias: En algunos casos representar entidades curvadas con
segmentos poligonales puede ser inadecuado o costoso, por lo que en la prcticas
las circunferencias o crculos se adoptan como primitivas. Se especifican con la
posicin de su centro y su radio.
Polgonos: Son indispensables para representar entidades slidas. Se representan
a partir de la secuencia de puntos que determina la poligonal de su permetro.

Leccin 21 Especificacin de una discretizacin


En el momento de escoger un mtodo de discretizacin para una primitiva grfica,
es indispensable contar con criterios que permitan evaluar y comparar las ventajas
y desventajas de las distintas alternativas. Entre todas las especificaciones
posibles, podemos mencionar las siguientes:
Apariencia: Es la especificacin ms obvia, aunque no es fcil describirla en
trminos formales. Normalmente se espera que un segmento de recta tenga una
apariencia recta ms all de que se hallan escogido los pixels matemticamente
ms adecuados. Tampoco debe tener discontinuidades. Debe pasar por la
discretizacin del primer y ltimo punto del segmento. Debe ser uniforme, etc.
Simetra e invariancia geomtrica: Esta especificacin se refiere a que un
mtodo de discretizacin debe producir resultados equivalentes si se modifican
algunas propiedades geomtricas de la primitiva que se est discretizando. Por

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

ejemplo, la discretizacin de un segmento no debe variar si dicho segmento se


traslada a otra localizacin en el espacio, o si es rotado, etc.
Simplicidad y velocidad de cmputo: Como los mtodos tradicionales de
discretizacin de primitivas se desarrollaron hace tres dcadas, en momentos en
que las posibilidades del hardware y software eran muy limitadas, los resultados
eran muy sensibles al uso de memoria u operaciones aritmticas complejas. Por lo
tanto, los mtodos tienden a no depender de estructuras complejas y a ser
directamente implementables en hardware especfico de baja complejidad.

21.1 Mtodos de discretizacin


Dada una primitiva grfica a discretizar, debemos encontrar los pixeles que la
representen de la manera ms correcta posible. Para ello, lo ms adecuado es
caracterizar matemticamente a dicha primitiva, de modo que su discretizacin
pueda efectuarse en forma sencilla. Entre los diversos mtodos que pueden
plantearse destacamos los dos siguientes:
Evaluar su ecuacin diferencial a diferencias finitas: Este mtodo, denominado
DDA (discrete diference analyzer) consiste en plantear la ecuacin diferencial de la
primitiva a discretizar, y luego evaluar dicha expresin a intervalos adecuados.
Anlisis del error: Estos mtodos fueron desarrollados por Bressenham y se
basan en analizar, dado un pixel que pertenece a la discretizacin de la primitiva,
cul es el prximo pixel que minimiza una determinada expresin que evala el
error que comete la discretizacin.

Leccin 22 Segmentos de recta


El anlisis de los mtodos de discretizacin de rectas parte de considerar el
comportamiento esperado en determinados casos particulares. Dichos casos
surgen de suposiciones especficas que simplifican el problema, pero que al mismo
tiempo se pueden generalizar a todos los dems casos por medio de simetras.
Dado un segmento de recta que va de (x0; y0) a (x1; y1), se supone que:

x = (x1 - x0 ) 0,
y = (y1 - y0 ) 0, y
x y.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Esto equivale a trabajar en el octavo del espacio de pantalla sombreado en la


Figura 38, donde el origen es el pixel que corresponde a la discretizacin del punto
(x0;y0) y la zona sombreada a los lugares donde puede ubicarse el punto (x1;y1 ).

Figura 38 Espacio designado para caracterizar la discretizacin de rectas

22.1 Segmentos de recta DDA


Como ya se mencion, los mtodos DDA evalan la ecuacin diferencial de la
primitiva a intervalos finitos. En el caso particular de los segmentos de recta, la
ecuacin diferencial es:

El mtodo busca encontrar una secuencia de n + 1 puntos tales que (x0;y0) =


(x0;y0); (x1;y1); (xn;yn) = (x1;y1). La discretizacin de cada uno de ellos son los
pixeles de la discretizacin del segmento. Esta propiedad, si bien es trivial, es de
gran importancia porque determina que la discretizacin de un segmento de recta
es invariante frente a transformaciones afines. Esto significa que es equivalente
transformar los extremos del segmento y discretizar el segmento transformado, o
discretizar primero y transformar cada punto obtenido. Sin embargo, la primera
alternativa es mucho ms eficiente.

Dada la ecuacin diferencial y un incremento finito arbitrario


, podemos
pasar de un pixel dado de la secuencia al siguiente por medio de la expresin

determina la frecuencia de muestreo del segmento. Un valor muy pequeo

determina que muchas muestras producirn puntos que sern discretizados al

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

mismo pixel. Por el contrario, un valor muy grande determinara que el segmento
aparezca punteado en vez de ser continuo como corresponde. Un valor prctico
es elegir x = 1 y por lo tanto n = x, es decir, la discretizacin tiene tantos pixeles
como longitud tiene el segmento en la variable que ms vara (ms uno, dado que
la secuencia tiene n + 1 puntos). Al mismo tiempo es fcil ver que

En la Figura 39 es posible ver el resultado de discretizar un segmento particular por


el mtodo DDA. Observese que los puntos extremos (x0; y0) a (x1;y1) son en
efecto puntos y por lo tanto estn ubicados en cualquier lugar dentro del pixel que
corresponde a su discretizacin.

Figura 39 Discretizacin de un segmento de recta con DDA

Un algoritmo sencillo escrito en lenguaje Java que computa la discretizacin de un


segmento de recta por el mtodo DDA se muestra en la Figura 40. Obsrvese que
se computan las variables en punto flotante, y que adems se requiere una divisin
en punto flotante que corresponde al clculo de m.
Un pequeo parntesis para explicar algunas sentencias que pueden causar
dudas:
1. Sobre el parmetro Graphics g (lnea 26), corresponde al contexto grfico
de la ventana (algo as como un lienzo) sobre el cual se dibuja.
2. La llamada al mtodo setColor (lnea 34) permite modificar el color actual
con el cual se est dibujando, se toma el color como un objeto de tipo Color
que puede ser de los preterminados de Java o creado a partir de los
parmetros r, g, b. Esta llamada al mtodo setColor permite modificar el
color del lpiz que dibuja sobre el contexto grfico.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 40 Codificacin en Java del algoritmo DDA de dibujo de lneas

3. Java no tiene una sentencia bsica para dibujar puntos (pixeles), en este
caso se utiliza la sentencia g.drawRect (lnea 35) para dibujar un rectngulo
con un ancho y alto de 0, que en su ejecucin se traduce a pintar un nico
pixel ubicado en el punto enviado como parmetro.
4. En la misma sentencia g.drawRect (lnea 35) se utiliza el casting a enteros
para lograr la discretizacin de las coordenadas flotantes.

La ejecucin del algoritmo dara como resultado algo similar a lo mostrado en la


Figura 41 para 3 lneas diferentes.
Para poder discretizar un segmento de recta
en cualquiera de las posibilidades es
necesario considerar las simetras que se
aplican. Si por ejemplo no se cumple que y =
(y1 - y0) 0, entonces hay que considerar
pendientes negativas (simetra A), caso que el
algoritmo
de
la
Figura
40
realiza
automticamente.
En cambio, si x = (x1 - x0 ) 0, entonces es
Figura 41 Ejecucin del algoritmo DDA necesario decrementar a x en el ciclo e iterar
en Java
mientras no sea menor que x1 (simetra B).

Por ltimo, si no se cumple que x y, entonces es necesario intercambiar los


roles de las variables x e y (simetra C). Cualquier combinacin de situaciones se
puede resolver con combinaciones de simetras (ver Figura 42).

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 42 Simetras para discretizar segmentos de recta

22.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 adems se requiere una divisin en punto flotante
para computar la pendiente. El mrito del algoritmo que vamos a presentar consiste
en que todas las operaciones se realizan en aritmtica entera por medio de
operaciones sencillas, y por lo tanto, su ejecucin es ms rpida y econmica, y es
de fcil implementacin con hardware especfico.
El punto de partida del anlisis es el siguiente. Si la discretizacin de los puntos
extremos del segmento debe pertenecer a la discretizacin del segmento, entonces
es conveniente efectuar la llamada al algoritmo luego de discretizar los extremos.
Esto significa que (x0; y0) y (x1; y1),y por lo tanto x y y son enteros.

Figura 43 Si p pertenece a la discretizacin el


prximo punto ser E o D

Luego, si p es un pixel que pertenece a


la
discretizacin
del
segmento,
entonces
en
las
condiciones
particulares mencionadas, el prximo
pixel solamente puede ser el ubicado a
la derecha (E o hacia el este), o el
ubicado en diagonal hacia la derecha y
hacia abajo (D o en diagonal) como se
muestra en la Figura 43.

La decisin de ir hacia el paso E o D se toma en funcin del error que se comete en


cada caso. En este algoritmo se considera que el error es la distancia entre el

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

centro del pixel elegido y el segmento de recta, medida en direccin del eje Y
positivo del espacio de pantalla (es decir, hacia abajo). Si el error en p fuese cero,
entonces al ir hacia E el error pasa a ser m (la pendiente del segmento), y en D el
error pasa a ser m - 1 (ver Figura 44).

Figura 44 Error al desplazarse en E

Figura 45 Eleccin del prximo pixel

En general, si en p el error es e, la actualizacin del error es:

Paso a E : e = e + m
Paso a D : e = e + m 1

Por lo tanto, la eleccin 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. Expresado de otra manera, sea e
el error en un determinado pixel. Si e +m> 0.5 entonces el segmento de recta pasa
ms cerca del pixel D, y si no, pasa ms cerca del pixel E (ver Figura 45).
Una de las economas de cmputo del mtodo proviene de poder evaluar el error
preguntando por cero. Es fcil ver que si se inicializa el error en e = m 0.5
entonces en cada paso hay que chequear e >0 para elegir D. La otra economa
proviene de realizar manipulaciones algebraicas para efectuar un cmputo
equivalente pero en aritmtica entera. Como se evala el error por cero, multiplicar
el error por una constante no afecta el resultado. Por lo tanto, multiplicamos el error
por 2x. A partir de dicho cambio, se constatan las siguientes igualdades:

e0 2x
0.5 2y x
x

Paso a E : e = e+2y
Paso a D: e = e+2(y-x)

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

De esta manera todas las operaciones se efectan en aritmtica entera, con su


correspondiente agilizacin del tiempo de procesamiento.

Figura 46 Algoritmo de Bressenham para segmentos de recta

La implementacin del algoritmo de Bressenham para segmentos de recta se


muestra en la Figura 46. Teniendo en cuenta que los productos por 2 en aritmtica
entera se efectan con un desplazamiento a izquierda, es posible observar que el
mismo utiliza operaciones elementales e implementables con hardware especfico
muy sencillo.

Leccin 23 Discretizacin de circunferencias


Como en el caso de los segmentos de recta, en la discretizacin de circunferencias
o crculos es posible trabajar un slo segmento de la circunferencia y se obtienen
las dems por simetra. Igualmente se dispone de algoritmos DDA y de
Bressenham para el dibujo de circunferencias. En este aparte se mostrar una
adaptacin del algoritmo DDA a partir de la ecuacin de la circunferencia, tomado
de la pgina internet de Roberto Albornoz.
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

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Estas ecuaciones sern las que ocuparemos para calcular cada punto (x,y) del
crculo, donde el r ser obviamente el radio de crculo y ser el ngulo que forma
el radio con la parte positiva del eje x. En forma grfica sera 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 frmula para transformar
grados a radianes es la siguiente:
radianes

gra dos *
180

Entonces para dibujar el crculo de un radio determinado, solamente tenemos que


hacer un ciclo desde 0 hasta 360, pero con incrementos pequeos, 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 pequeos, no
contando de uno en uno, ya que para un crculo de radio muy grande, podran
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
crculo 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 cdigo en Java que permitira dibujar el crculo en
una ventana.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 48 Cdigo en Java para el dibujo de circunferencias

Ntese que al calcular las


coordenadas x e y, estamos
sumndoles las coordenadas cx e
cy. Esto se hace para trasladar el
centro del crculo a cualquier punto
que queramos. De esta forma,
para dibujar un crculo solamente
es necesario especificar las
coordenadas del centro (cx, cy), el
radio, el color del crculo y el
contexto grfico.

Figura 49 Resultado de la ejecucin del algoritmo


dibujo de circunferencias

Leccin 24 Dibujo de polgonos


Se considera un polgono una figura cerrada, formada a partir de varias lneas.
Para la discretizacin de polgonos se considerarn 2 tipos de polgonos: los
irregulares y los regulares, en concordancia con lo mostrado por Steven R
Davidson en su curso de grficos disponible en internet.

24.1 Polgonos irregulares


La graficacin de polgonos irregulares se realiza a partir de un conjunto de puntos
que se unen secuencialmente, el polgono se cierra al unir el primer y ltimo
puntos. A continuacin se muestra el cdigo Java que dibujara un polgono
irregular a partir de un vector de elementos de tipo Punto y el correspondiente
nmero de puntos.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 50 Cdigo en java para el dibujo de polgonos

Figura 51 Resultado de la ejecucin del


algoritmo de dibujo de Polgonos

Cabe recordar que en Java, al igual que


en C, el ndice de los vectores inicia en
0. Por tanto, la primera lnea se dibuja
desde el primer punto (ndice 0) hasta el
segundo punto (ndice 1), contina del
segundo al tercero (ndice 2) y as
sucesivamente, hasta dibujar la lnea
del penltimo punto (ndice N-2) hasta
el ltimo punto del vector (ndice N-1).
Al finalizar el ciclo, dibuja la lnea de
cierre del polgono entre el ltimo punto
(ndice N-1) y el primero (ndice 0).

Como se podr deducir del cdigo el objeto Punto incluye las coordenadas x e y de
un punto en el plano cartesiano.

24.2 Polgonos regulares


Un polgono 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 vrtice y otro segmento del centro a otro vrtice 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
polgono regular. Podemos usar la siguiente frmula:

= 2 / N, donde es el ngulo, y N es la cantidad de lados

Crearemos polgonos regulares en base a una circunferencia que circunscribe


nuestro polgono regular. Esto implica, que el centro de la circunferencia coincide
con el centro geomtrico de cualquier polgono regular. Para esto, necesitamos
usar algunas funciones trigonomtricas, junto con el ngulo ya calculado. El paso

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

principal es averiguar la coordenada del siguiente vrtice de nuestro polgono.


Usaremos las siguientes frmulas:
x i = cx + r * cos( i* )
y i = cy + r * sen( i* )
donde:
i = 0,1,2,...,N-1,
r es el radio de la circunferencia, y
c = (cx, cy) es la coordenada del centro geomtrico de la circunferencia y del
polgono.
Al agregar el centro a nuestra frmula, conseguimos mover el centro geomtrico
del origen (0,0) al que nosotros deseemos. En la Figura 52 se muestra el cdigo
que generara los polgonos regulares.

Figura 52 Cdigo en java para dibujar polgonos regulares

Los parmetros de entra para el mtodo especifican el nmero de lados del


polgono (N), el punto centro de la circunferencia (centro), el radio de la
circunferencia (radio), el contexto grfico (g) y el color.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Observe que es necesario hacer un


proceso de conversin a entero del dato
resultante en la multiplicacin del coseno
del ngulo por el radio (lneas 46 y 47),
ya que las coordenadas de los puntos se
deben expresar como datos enteros. Los
datos as calculados se utilizan en la
conformacin de cada vrtice del
polgono (lnea 48). Finalmente, una vez
obtenidas las coordenadas de todos los
vrtices del polgono se realiza la llamada
al proceso de dibujarPolgonos explicado
Figura 53 Resultado de la ejecucin del
en la seccin anterior (lnea 50).
algoritmo para dibujar polgonos regulares

Leccin 25 Llenado de reas


Si bien existen diversos mtodos, aqu presentaremos el ms econmico y
difundido, que se basa en encontrar la interseccin de todos los lados del polgono
con cada lnea de barrido (a y constante), por lo que el mtodo se denomina
conversin scan del polgono. Este mtodo es de gran importancia porque se
generaliza a una clase de algoritmos denominados scan-line para resolver
determinados problemas de iluminacin y sombreado en tres dimensiones.
Todo polgono plano puede descomponerse en tringulos. Por lo tanto el tringulo
ser la base del anlisis de la conversin scan de polgonos en general. Para
computarla es necesario dimensionar dos arreglos auxiliares de enteros minx,
maxx que para cada lnea de barrido almacenarn el menor y mayor x
respectivamente.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 54 Dibujo scan de un polgono

1. Inicializar minx a infinito y maxx a menos infinito.


2. Discretizar cada arista del tringulo (con DDA o Bressenham) reemplazando
la sentencia de dibujado por
if (x>maxx[y]) maxx[y]=x;
if (x<minx[y]) minx[y]=x;
3. Para cada y activo, graficar una lnea de minx[y] a maxx[y].

CAPTULO 6 Transformaciones
Naturalmente, as como se desean dibujar grficos, tambin se desea moverlos,
rotarlos, cambiar su tamao, etc. En esta seccin se presentan los principales
fundamentos matemticos que subyacen al proceso de transformacin de los
grficos en dos dimensiones, a partir de lo mostrado por el euitmt WWW team de la
Universidad de Oviedo. Se espera que el estudiante en su proceso de
profundizacin realice los algoritmos que permitan hacer estas transformaciones.
Una de las mayores virtudes de los grficos generados por ordenador es la
facilidad con se pueden realizar algunas modificaciones sobre las imgenes. Un
gerente puede cambiar la escala de las grficas de un informe. Un arquitecto puede
ver un edificio desde distintos puntos de vista. Un cartgrafo puede cambiar la
escala de un mapa. Un animador puede modificar la posicin de un personaje.
Estos cambios son fciles de realizar porque la imagen grfica ha sido codificada
en forma de nmeros y almacenada en el interior del ordenador. Los nmeros son
susceptibles a las operaciones matemticas denominadas transformaciones.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Las transformaciones permiten alterar de una forma uniforme toda la imagen. Es un


hecho que a veces es ms fcil modificar toda la imagen que una porcin de ella.
Esto supone un complemento muy til para las tcnicas de dibujo manual, donde
es normalmente ms fcil modificar una pequea porcin del dibujo que crear un
dibujo completamente nuevo.
Es esta seccin se vern transformaciones geomtricas como el cambio de
escala, la traslacin y la rotacin, como se expresan de una forma sencilla
mediante multiplicaciones de matrices y se introducirn las coordenadas
homogneas 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.

Leccin 26 Breve repaso sobre matrices


Las imgenes grficas que se han generado estn compuestas por un conjunto de
segmentos que estn representados por las coordenadas de sus extremos.
Algunos cambios en la imagen pueden ser fcilmente realizados mediante la
aplicacin de algunas operaciones matemticas sobre estas coordenadas. Antes
de ver algunas de las posibles transformaciones, es necesario repasar algunas de
las herramientas matemticas que se necesitarn, como la multiplicacin de
matrices.
Para nuestro propsito, consideraremos que una matriz es un conjunto ndimensional de nmeros, por ejemplo:

son cuatro matrices diferentes.


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.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

La operacin matricial que ms se emplear ser la multiplicacin de matrices. La


multiplicacin de matrices es algo ms complicada que la simple multiplicacin de
dos nmeros; supone varios productos sencillos y sumas de los elementos de la
matriz. No todas las parejas de matrices pueden ser multiplicadas. Se pueden
multiplicar dos matrices A y B si el nmero de columnas de la primera matriz
A es igual al nmero de filas de la segunda matriz B. Por ejemplo, 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. Al contrario que la multiplicacin de nmeros, la multiplicacin
de matrices no es conmutativa, es decir, aunque podemos multiplicar A por B no
podemos multiplicar B por A, por que B tiene slo dos columnas que no se
corresponden con las tres filas de A. Cuando multiplicamos dos matrices se
obtiene como resultado otra matriz. Esta matriz producto tendr el mismo
nmero de filas que la primera de las matrices que se multiplican y el mismo
nmero de columnas que la segunda, es decir, a partir del ejemplo, la multiplicacin
de la matriz A3x3 con la matriz B3x2 da como resultado la matriz C3x2.
Los elementos de la matriz producto C se expresan en funcin de los elementos de
las matrices A por B mediante la siguiente frmula:

En nuestro caso particular de C = A B

La multiplicacin de matrices es una operacin asociativa. Esto significa que si


tenemos varias matrices para multiplicar a la vez, no importa cuales multipliquemos
primero. De forma matemtica: A(BC) = (AB) C
Esta es una propiedad muy til ya que permitir combinas varias transformaciones
grficas en una sola transformacin, produciendo como resultado unos clculos
ms eficientes.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Existe un conjunto de matrices que cuando multiplican a otra matriz, la reproducen.


Por esta razn reciben el nombre de matrices identidad. Son matrices cuadradas
(tienen el mismo nmero de columnas y de filas) con todos los elementos 0 excepto
los elementos de la diagonal principal, que valen todos 1. Por ejemplo

De forma matemtica A = AI

Leccin 27 Cambios de escala


Cmo se aplica todo esto a los grficos? Bueno, 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.

Por tanto, la matriz T es una aplicacin entre el punto original P1 y el nuevo punto
P2. Si suponemos la imagen compuesta por los vrtices de un polgono. Qu
pasar si transformamos cada uno de los puntos mediante una multiplicacin por
una matriz T y dibujamos el resultado? Qu aspecto tendr esta nueva imagen?
La respuesta, por supuesto, depende de los elementos de la matriz T. Si, por
ejemplo, escogemos la matriz identidad entonces la imagen no se ver alterada.
Sin embargo, si escogemos la matriz

entonces
Cada una de las nuevas coordenadas x tiene el doble de valor que las antiguas.
Las lneas horizontales sern dos veces ms largas en la nueva imagen. La nueva
imagen tendr la misma altura, pero parecer que la hemos estirado hasta alcanzar
el doble del ancho original.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

antes de la transformacin

despus de la transformacin

En general, las transformaciones de la forma

Cambian el tamao y la proporcin de la imagen. Se denominan transformaciones


de escalado. Ex es el factor de escala para la coordenada x y Ey es de la
coordenada y.

Leccin 28 Rotacin
La siguiente transformacin grfica que vamos a ver es la rotacin. Para introducir
esta transformacin recordaremos brevemente algunos conceptos trigonomtricos.
Sea un punto p1=(x1, y1) y lo giramos alrededor del origen un ngulo para pasar
a una nueva posicin p2=(x2, y2). Queremos encontrar la transformacin que
convierte (x1, y1) en (x2, y2). Pero, antes de comprobar si alguna transformacin
es la adecuada, debemos saber primero que (x2, y2) debe escribirse en funcin de
(x1, y1) y . Para esto es necesario recordar las razones trigonomtricas de seno y
coseno.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

A la vista de esta figura sabemos que

Es importante sealar que cuando la longitud del segmento es la unidad

Tambin emplearemos las siguientes relaciones trigonomtricas para determinar


como gira un punto:

Ahora estamos listos ya para determinar la rotacin de un punto alrededor del


origen.

A la vista de esta figura tenemos:

Donde L es la distancia del punto al origen de coordenadas. Por otro lado:

Que nos lleva a

De forma anloga:

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

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 transformacin para una rotacin en sentido contrario a las agujas


del reloj de ngulo alrededor del origen es

Para una rotacin en el sentido de las agujas del reloj, basta sustituir en la
expresin anterior el valor del ngulo por - . As nos queda

Leccin 29 Coordenadas homogneas y traslacin


Supongamos que necesitamos realizar un giro alrededor de un punto que no es el
origen. Si fusemos capaces de trasladar toda la imagen de un punto a otro de la
pantalla, podramos realizar este giro moviendo primero la imagen hasta que el
centro de rotacin coincida con el origen, luego realizamos la rotacin y, por ltimo,
devolvemos la imagen a su posicin original.
Desplazar la imagen recibe el nombre de traslacin. Se realiza de una forma
sencilla mediante la suma a cada punto de la cantidad que vamos a mover la
imagen.
En general, con el fin de trasladar un imagen (Tx, Ty), cada punto (x1, y1) se
convierte en uno nuevo (x2, y2) donde

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Desafortunadamente, esta forma de describir la traslacin no hace uso de matrices,


por lo tanto no podra ser combinada con las otras transformaciones mediante una
simple multiplicacin de matrices.
Tal combinacin sera deseable; por ejemplo, hemos visto que la rotacin alrededor
de un punto que no sea el origen puede realizarse mediante una traslacin, una
rotacin u otra traslacin. Sera deseable combinar estas tres transformaciones en
una sola transformacin por motivos de eficacia y elegancia. Una forma de hacer
esto es emplear matrices 3x3 en vez de matrices 2x2, introduciendo una
coordenada auxiliar w. Este mtodo recibe el nombre de coordenadas
homogneas. En estas coordenadas, los puntos estn definidos por tres
coordenadas y no por dos. As un punto (x, y) estar representado por la tripleta
(xw, yw, w). Las coordenadas x e y se pueden recuperar fcilmente dividiendo los
dos primeros nmeros por el tercero respectivamente. No emplearemos la
coordenada w hasta que no veamos las transformaciones tridimensionales de
perspectiva. En dos dimensiones su valor suele ser 1 para simplificar. Sin embargo,
lo veremos de forma general como anticipo de las transformaciones
tridimensionales.
En coordenadas homogneas la matriz de cambio de escala

se convierte en
Si aplicamos esta matriz a un punto (xw, yw, w) obtenemos

Si dividimos ahora por el tercer valor w tenemos (Exx, Eyy) que es el punto correcto
cambiado de escala.

En el caso de la matriz de rotacin en sentido anti-horario

Se convierte, usando coordenadas homogneas, en:

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Si aplicamos esta matriz a un punto (xw, yw, w) obtenemos

Para dar el punto correctamente rotado


La matriz de transformacin para una traslacin Tx, Ty en coordenadas
homogneas es

Para comprobar que esto es as apliquemos la matriz a un punto genrico

Que nos da el punto trasladado

Leccin 30 Rotacin alrededor de un punto


Determinemos ahora la matriz de transformacin para la rotacin en sentido
antihorario alrededor del punto (xC, yC).
Haremos esta transformacin en tres pasos. Primero trasladaremos el punto (xC,
yC) al origen, luego haremos la rotacin alrededor del origen y, por ltimo,
devolveremos el centro de rotacin a su posicin original.
La traslacin que desplaza al punto (xC, yC) al origen es

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

La rotacin es

Y la traslacin que devuelve al centro de rotacin a su posicin es


Para

transformar

un

punto

podemos

realizar

la

siguiente

multiplicacin

Pero, teniendo en cuenta la propiedad asociativa de la multiplicacin de matrices,


podemos multiplicar todas las transformaciones primero para obtener la matriz
global de transformacin

Cabe destacar que esta matriz se puede formar tambin mediante una rotacin
inicial de ngulo y una traslacin definida por los valores contenidos en la tercera
fila.

30.1 Otras transformaciones


Las tres transformaciones de cambio de escala, rotacin y traslacin son las ms
tiles y las ms usadas. Son tambin posibles otras transformaciones. Dado que
una matriz 2x2 cualquiera

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Puede convertirse en una matriz 3x3 en coordenadas homogneas como

Algunas de estas transformaciones como matrices 2x2:


-1 0
0 1

Reflexin respecto al eje y

1 0
0 -1 Reflexin respecto al eje x
-1 0
0 -1 Reflexin respecto al origen
0
1

1
0

Reflexin respecto a la recta y=x

0 -1
-1 0 Reflexin respecto a la recta y=-x
1 a
0 1

Deformacin en el eje y

1
b

Deformacin en el eje x

0
1

Las primeras tres reflexiones son simples cambios de escala pero con factores
negativos. Las simetras respecto a las rectas y=x e y=-x pueden realizarse
mediante un cambio de escale y un giro posterior. Es posible realizar las
deformaciones mediante una secuencia de rotaciones y cambios de escala, aunque
es mucho ms fcil aplicar la matriz resultante. De igual forma se pueden construir
transformaciones de cambio de escala y rotacin a partir de las deformaciones.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Fuentes documentales unidad 2


ALBORNOZ Roberto. Programacin grfica en lenguaje
http://www.geocities.com/programacion_grafica/prog_graf.htm
Fecha de consulta: Septiembre de 2005.
DAVIDSON, Steven. Curso de grficos con clase.
http://graficos.conclase.net/curso/index.php
Fecha de consulta: Diciembre de 2005. steven@conclase.net

C.

[En

[En

lnea]

lnea]

DELRIEUX, Claudio. Introduccin a la computacin grfica. [En lnea]


http://www.dc.uba.ar/people/materias/cgr/util.htm. Universidad Nacional del Sur.
Departamento de Ingeniera elctrica. Claudio@acm.org.
EUITMT WWW TEAM. Dibujo asistido por ordenador. Transformaciones 2 y 3 D.
[En lnea] http://www.mieres.uniovi.es/egi/dao/apuntes/. Universidad de Oviedo.
Campus Mieres. Fecha de consulta: Octubre de 2005. ltima modificacin: 9 de
Julio de 1999 - 13:36:26

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

UNIDAD 3 TRABAJANDO CON UN API GRFICA


Introduccin
En los captulos anteriores nos hemos acercado al mundo de la computacin
grfica conociendo sus bases conceptuales y haciendo pequeos programas que
permiten dibujar en la pantalla a partir de la unidad bsica de dibujo: el pxel. En
esta Unidad deseamos introducir el manejo de una API grfico. Como se
mencionaba en la primera unidad las API grficas proporcionan un conjunto de
primitivas independientes del hardware que le facilitan el proceso de dibujo
computacional, algunas de ellas, como OpenGL son muy utilizadas por dos
razones: su potencial y la libre distribucin.
El lenguaje de programacin Java proporciona como parte de su conjunto de
clases fundamentales para la creacin de interfaces grficas de usuario, un
conjunto de clases denominado Java 2D.
El API 2D de Java introducido en el JDK 1.2 proporciona grficos avanzados en
dos dimensiones, texto, y capacidades de manejo de imgenes para los programas
Java a travs de la extensin del AWT. Este paquete de dibujo soporta lneas
artsticas, texto e imgenes en un marco de trabajo flexible y lleno de potencia para
desarrollar interfaces de usuario, programas de dibujo sofisticados y editores de
imgenes.
El API 2D de Java proporciona:

Un modelo de renderizado uniforme para pantallas e impresoras.


Un amplio conjunto de grficos primitivos geomtricos, como curvas,
rectngulos, y elipses y un mecanismo para renderizar virtualmente
cualquier forma geomtrica.
Mecanismos para detectar esquinas de formas, texto e imgenes.
Un modelo de composicin que proporciona control sobre cmo se
renderizan los objetos solapados.
Soporte de color mejorado que facilita su manejo.
Soporte para imprimir documentos complejos.

Durante el primer captulo de esta Unidad didctica se cubrirn los tpicos


correspondientes a la graficacin en 2D mediante el uso del API 2D de Java, a
partir de la recopilacin de dos documentos de internet que son magnficos puntos
de referencia: El tutorial sobre grficos en Java de Agustn Froufe y el curso de
Java en Castellano traducido por Juan Antonio Palos (ozito).

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

En cuanto al dibujo (o renderizado) en 3D, El API Java 3D es un interface para


escribir programas que muestran e interactan con grficos tridimensionales. Java
3D es una extensin estndar del JDK 2 de Java. El API Java 3D proporciona una
coleccin de constructores de alto-nivel para crear y manipular geometras 3D y
estructuras para dibujar esta geometra. Java 3D proporciona las funciones para
creacin de imgenes, visualizaciones, animaciones y programas de aplicaciones
grficas 3D interactivas. En el segundo captulo de esta Unidad se proporcionan los
elementos fundamentales para asumir el estudio del API Java 3D, proporcionando
algunos ejemplos bsicos. Para el desarrollo de esta parte de la Unidad se ha
recopilado nuevamente la informacin proporcionada por Juan Antonio Palos
(ozito).
Esta unidad final del curso de Computacin Grfica quiere acercarlo an ms a la
visualizacin de grficos computacionales. Aunque se reconoce que la informacin
que se proporciona es bastante limitada, los lmites se los impone su creatividad y
sus deseos de realizar nuevas cosas. En la seccin de Enlaces relacionados podr
encontrar enlaces con una gran cantidad de informacin adicional, para ayudarlo a
hacer volar su imaginacin.
La implementacin de buena parte de los ejemplos requiere que usted conozca con
anticipacin los fundamentos bsicos de la clase Awt o Swing de Java, si quiere
repasarlos, revise la seccin de enlaces.

Intencionalidades Formativas
Propsitos
Introducir al estudiante en el conocimiento de los principales algoritmos y
estructuras de datos utilizados en Computacin Grfica, especialmente en la
generacin de grficos en dos dimensiones.
Proporcionar al estudiante los lineamientos tecnolgicos bsicos que le
permitan utilizar API grficas en conjunto con lenguajes de programacin de
alto nivel, para el proceso de modelamiento y construccin de escenarios
grficos en 2D y 3D.
Objetivos
Programar ejercicios de llenado de reas y transformaciones de figuras en
dos dimensiones, utilizando libreras grficas y lenguajes de programacin,
partiendo de la conceptualizacin geomtrica respectiva.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Emplear los fundamentos necesarios para la construccin de aplicaciones


que presenten objetos grficos en dos dimensiones, mediante la
funcionalidad que proporciona el paradigma orientado a objetos y el API
Java 2D.
Identificar algunas de las potencialidades para el dibujo y animacin de
escenarios grficos en tres dimensiones, a partir de la programacin de
ejemplos bsicos que utilizan el API Java 3D.
Competencias
El estudiante programa y emplea algoritmos que permiten dibujar las
principales figuras geomtricas en dos dimensiones.
El estudiante conoce los fundamentos matemticos de la representacin de
grficos computacionales en dos dimensiones y utiliza algoritmos que las
realizan.
El estudiante utiliza las principales clases proporcionadas por el API 2D y 3D
de Java, en la programacin de ejercicios que exigen la representacin de
grficos en dos y tres dimensiones.
Metas
Al finalizar esta unidad didctica el estudiante estar en capacidad de:

Usar API grficas para la construccin de grficos computacionales.


Utilizar y construir algoritmos para dibujo de grficos en 2D y 3D.
Describir el funcionamiento matemtico y geomtrico que permite el
dibujo de grficos en el computador.

Mapa Conceptual de la Unidad

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Productos de Aprendizaje
Individual

Lectura autorregulada de la Unidad Didctica realizando fichas textuales y


mapas conceptuales para archivar en el portafolio.
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 compaeros.
Sustentacin individual de los programas desarrollados en JAVA.

Pequeo Grupo Colaborativo


Desarrollo de un proyecto de programacin utilizando texturas e iluminacin con el
API 3D. Los enunciados sern entregados por el tutor indicando las fechas y
condiciones de entrega.
Grupo de Curso

Por cada tipo de algoritmo que se estudia se realizar una prctica en


computadores, para repasar los conceptos bsicos y probar los algoritmos
codificados en JAVA.
Socializacin de los productos individuales y en pequeo grupo colaborativo.
Consolidacin de conceptos, glosario tcnico y mapa conceptual de la
unidad.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

CAPTULO 7 Fundamentos del API 2D de JAVA


Leccin 31 Caractersticas generales del API 2D de Java

31.1 Caractersticas generales del API 2D de Java


A continuacin se presentan algunas de las caractersticas del API 2D de Java, a
partir de la documentacin proporcionada por Sun Microsystems para el J2SE.
El API 2D de Java mejora las capacidades de grficos, texto e imgenes de la
Abstract Windowing Toolkit (AWT), haciendo posible el desarrollo de interfaces de
usuario mejoradas y nuevos tipos de aplicaciones Java. Adems de sus mejoras
en grficos, letra e imgenes, el API 2D de Java soporta mejoras para la definicin
y composicin del color, adems de la deteccin de formas y texto en formas
geomtricas arbitrarias y un modelo de dibujado (rendering) para impresoras y
dispositivos de visualizacin.
El API 2D de Java tambin hace posible la creacin de libreras grficas
avanzadas, tales como libreras de CAD-CAM y de grficos o libreras de efectos
especiales para imgenes, as como la creacin de imgenes y de filtros para
archivos grficos.
Cuando se usa en conjunto con al Java Media Framework y otras APIs de Java
Media, el API 2D de Java puede utilizarse para crear y visualizar animaciones y
otras presentaciones multimedia. Los APIs de Java Animation y Java Media
Framework le proporcionan al API 2D de Java el soporte para el renderizado.

31.1.1 Mejoras de grficos, texto e imgenes


Las ltimas versionas del AWT proporcionaron un paquete simple para construir
pginas comunes HTML, pero no contemplaban caractersticas completas
suficientes para dibujar grficos complejos, texto e imgenes. Como un paquete de
dibujo simplificado, el AWT encapsul casos especficos de conceptos de
renderizado ms general. El API 2D de Java provee una paquete de renderizado
ms flexible y con amplias caractersticas que expanden el AWT para soportar
grficos generales y operaciones de renderizado.
A travs de la clase Graphics, es posible dibujar rectngulos, elipses y polgonos.
El Graphics2D incorpora el concepto de renderizado geomtrico proporcionando un
mecanismo para dibujar virtualmente cualquier forma geomtrica. Igualmente, con

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

el API Java 2D es posible dibujar lneas con estilos, de cualquier ancho y formas
geomtricas rellenas con virtualmente cualquier textura.
Las formas geomtricas se proporcionan a travs de implementaciones de la
interfaz Shape, por ejemplo las figuras Rectangle2D y Ellipse2D. Las curvas y los
arcos tambin son implementaciones especficas de la interfaz Shape.
Los rellenos y estilos de lpiz (denominado Filete en mltiples aplicaciones de
dibujo) se proporcionan a travs de implementaciones de las interfaces Paint y
Stroke, por ejemplo: BasicStroke, GradientPaint, TexturePaint y Color.
La implementacin AffineTransform define transformaciones lineales
coordenadas 2D, incluyendo el escalado, rotacin, traslacin y recortado.

de

Las regiones de clipping se definen por las mismas implementaciones de la


interface Shape que se usan para definir regiones generales de clipping, por
ejemplo Rectangle2D y GeneralPath.
Las composiciones de color se proporcionan por implementaciones de la interfaz
Composite, por ejemplo AlphaComposite. Un objeto Font se define como una
coleccin de Glyphs, que a su vez est definida por Shapes individuales.

31.1.2 Modelo de Renderizado


El mecanismo de renderizado bsico es el mismo que en las versiones anteriores
del JDK. El sistema de dibujo o renderizado controla cundo y cmo dibuja un
programa. Cuando un componente necesita ser mostrado, se llama
automticamente a su mtodo paint o update dentro del contexto Graphics
apropiado.
Como ya se mencion, el API 2D de Java presenta java.awt.Graphics2D, un nuevo
tipo de objeto Graphics. Graphics2D desciende de la clase Graphics para
roporcionar acceso a las caractersticas avanzadas de renderizado del API 2D de
Java.
Para usar las caractersticas del API 2D de Java, tenemos que forzar el objeto
Graphics pasado al mtodo de dibujo de un componente a un objeto Graphics2D.
Como se muestra en el siguiente cdigo:
public void Paint (Graphics g) {
Graphics2D g2 = (Graphics2D) g;
}

...

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Al conjunto de atributos de estado asociados con un objeto Graphics2D se le


conoce como Contexto de Renderizado de Graphics2D. Para mostrar texto, formas
o imgenes, podemos configurar este contexto y luego llamar a uno de los mtodos
de renderizado de la clase Graphics2D, como draw o fill. Cmo muestra la
siguiente figura, el contexto de renderizado de Graphics2D contiene varios
atributos.
El estilo de lpiz que se aplica al exterior de una forma. Este atributo
stroke permite dibujar lneas con cualquier tamao de punto y patrn
de sombreado y aplicar finalizadores y decoraciones a la lnea.
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 slidos, gradientes o
patrones.

El estilo de composicin se utiliza cuando los objetos dibujados se


solapan con objetos existentes.

La transformacin que se aplica durante el dibujado para convertir el


objeto dibujado desde el espacio de usuario a las coordenadas de
espacio del dispositivo. Tambin se pueden aplicar otras
transformaciones opcionales como la traduccin, rotacin escalado,
recortado, a travs de este atributo.
El Clip que restringe el dibujado al rea dentro de los bordes de un
Shape se utiliza para definir el rea de recorte. Se puede usar
cualquier forma para definir un clip.

La fuente se usa para convertir cadenas de texto.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Punto de Renderizado que especifican las preferencias en cuanto a


velocidad y calidad. Por ejemplo, es posible especificar que se desea
usar antialiasing, si est disponible.
Para configurar un atributo en el contexto de renderizado de Graphics2D, se usan
los mtodos setAttribute.
setStroke
setPaint
setComposite
setTransform
setClip
setFont
setRenderingHints
Cuando se configura un atributo, se el pasa al objeto el atributo apropiado. Por
ejemplo, para cambiar el atributo paint a un relleno de gradiente azul-gris,
deberamos construir el objeto GradientPaint y luego llamar a setPaint.
gp = new GradientPaint(0f,0f,blue,0f,30f,green);
g2.setPaint(gp);

Graphics2D contiene referencias a sus objetos atributos, no son clonados. Si se


modifica un objeto atributo que forma parte del contexto Graphics2D, es necesario
llamar al mtodo set para notificarlo al contexto. La modificacin de un atributo de
un objeto durante el renderizado puede causar comportamientos impredecibles.

31.1.3 Mtodos de renderizado de Graphics2D


Graphics2D proporciona los siguientes mtodos generales de dibujado que pueden
usarse para dibujar cualquier primitivo geomtrico, texto o imagen.
draw

Dibuja el exterior de una forma geomtrica primitiva usando los


atributos stroke y paint.

fill

Dibuja cualquier forma geomtrica primitiva rellenado su interior

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

con el color o patrn especificado por el atributo paint.


drawString

Dibuja cualquier cadena de texto. El atributo font se usa para


convertir la fuente a Glyphs que luego se rellenan con el color o
patrn especificados por el atributo paint.

drawImage

Dibuja la imagen especificada.

Adems, Graphics2D soporta los mtodos de renderizado de Graphics para formas


particulares, como drawOval y fillRect.

Leccin 32 Ubicacin espacial, textos e imgenes


32.1 Sistema de coordenadas
El sistema 2D de Java mantiene dos sistemas de coordenadas:

El espacio de usuario es un sistema de coordenadas lgicas independiente


del dispositivo. Las aplicaciones usan este sistema de coordenadas
exclusivamente, y este es el espacio en el que se especifican los grficos
primitivos del Java 2D.
El espacio de dispositivo es el sistema de coordenadas para un dispositivo
especfico de salida, como una pantalla, una ventana o una impresora. En
un ambiente multi-ventana con un escritorio virtual donde una ventana
puede expandirse ms all de la pantalla del dispositivo fsico, este escritorio
virtual se adapta a todas las pantallas.

Aunque el sistema de coordenadas para una ventana o una pantalla podra ser
muy distinto que para una impresora, estas diferencias son invisibles para los
programas Java. Las conversiones necesarias entre el espacio de usuario y el
espacio de dispositivo se realizan automticamente durante el dibujado.

Espacio de usuario
Como se muestra en la Figura 55, el origen del espacio de usuario se localiza en la
esquina superior izquierda del espacio, con los valores de x incrementando a la
derecha y los valores de y incrementando hacia abajo.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 55 Espacio de usuario

El espacio del usuario representa una abstraccin uniforme de todas los posibles
sistemas de coordenadas de dispositivos. El espacio de dispositivo para un
dispositivo particular podra tener el mismo origen y direccin del espacio del
usuario, o podran ser diferentes. Sin embargo, las coordenadas del espacio del
usuario son automticamente transformadas en las apropiadas para el espacio del
dispositivo cuando se dibuja un objeto grfico. Frecuentemente, la plataforma
subyacente o driver del dispositivo se utilizan para desarrollar esta conversin.

Espacio de dispositivo
El API 2D de Java define tres niveles de informacin de configuracin que se
mantienen para permitir la conversin desde un espacio de usuario a un espacio de
dispositivo. Esta informacin est encapsulada en tres clases:

GraphicsEnvironment
GraphicsDevice
GraphicsConfiguration

Entre ellas, representan toda la informacin 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. Una aplicacin puede tener acceso a
esta informacin, pero no necesita desarrollar modificaciones en ellas.
El GraphicsEnvironment describe la coleccin de dispositivos de renderizado
disponible para una aplicacin Java en un plataforma particular. Los dispositivos
de renderizado incluyen pantallas, impresoras y bferes de imagen.
El
GraphicsEnvironment tambin incluye una lista de todas las fuentes disponibles en
una plataforma.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

El GraphicsDevice describe un dispositivo de renderizado visible para la aplicacin,


tal como una pantalla o impresora. Cada configuracin posible de el dispositivo se
representa por una GraphicsConfiguration.
Por ejemplo, un dispositivo de
visualizacin SVGA puede operara en varios modos: 640*480*16 colores,
640*480*256 colores y 800*600*256 colores. La pantalla SVGA est representada
por un objeto GraphicsDevice y cada uno de los modos es representado por un
objeto GraphicsConfiguration.
Un GraphicsEnvironment puede contener uno o ms GraphicsDevice, a su vez,
cada GraphicsDevice puede tener una o ms GraphicsConfiguration.

Transformaciones
El API Java 2D ha unificado su modelo de transformacin de coordenadas. Todas
las transformaciones de coordenadas, incluyendo transformaciones desde el
espacio del usuario al espacio del dispositivo, son representadas por objetos de la
clase AffineTransform, que define las reglas para manipular coordenadas usando
matrices.
Es posible adicionar un AffineTransform al contexto grfico para rotar, escalar,
trasladar o recortar una figura geomtrica, texto o imagen cuando se esta
renderizando. La transformacin adicional se aplica a cualquier objeto grfico
renderizado en ese contexto. La transformacin se realiza cuando el espacio de
coordenadas de usuario se convierte en espacio de coordenadas del dispositivo.

32.2 Fuentes
Una cadena se asume de manera normal, en trminos de los caracteres que la
conforman. Cuando se dibuja una cadena, su apariencia est determinada por la
letra o fuente que est seleccionada. Sin embargo, las figuras que la fuente usa
para mostrar la cadena no siempre corresponden con caracteres individuales, por
ejemplo, en publicidad profesional, ciertas combinaciones de dos o ms 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. Una fuente puede representar un carcter como una a con
tlde usando varios glyphs, o representar ciertas combinaciones de caracteres
como la fi de final con un nico glyph. En el API Java 2D, una glyph es

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

simplemente un Shape que puede ser manipulado y dibujado en la misma forma


que cualquier otro objeto Shape.
Una fuente puede ser entendida como una coleccin glyphs. Una nica fuente
puede tener muchas versiones, tales como heavy, mdium, oblique, ghotic y
regular. Estas diferentes versiones son llamadas caras (faces). Todas las caras de
una fuente tienen un diseo tipogrfico similar y pueden ser reconocidas como
miembros de una misma familia. En otras palabras, una coleccin de glyphs con
una forma particular de estilo conforma una font face, una coleccin de formas de
font faces forman una font family, y una coleccin de font families conforma el
grupo de fuentes disponible en un GraphicsEnvironment particular.
En el API Java 2D, 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.1, en las que las fuentes eran descritas por nombres lgicos que tomaban
la forma de diferentes font face dependiendo de las fuentes disponibles en la
plataforma particular. Para lograr compatibilidad el API Java 2D soporta la
especificacin de fuentes por su nombre lgico y tambin por su nombre de font
face.
Usando el API 2D de Java es posible componer y dibujar cadenas que contienen
mltiples fuentes, de diferentes familias, caras, tamaos e incluso lenguajes. La
apariencia del texto est separada lgicamente de las caractersticas del texto. Los
objetos Font se utilizan para describir la apariencia, y la informacin de
caractersticas del texto se almacena en objetos TextLayout y TextAttibuteSet.
Esta posibilidad hace ms fcil de usar la misma fuente en texto con diferentes
caractersticas.

32.3 Imgenes
Las imgenes son colecciones de pxeles organizados espacialmente. Un pxel
define la apariencia de una imagen en una ubicacin simple. Un arreglo
bidimensional de pxeles se denomina una rster.
La apariencia del pxel puede definirse directamente o como un ndice en una tabla
de color para una imagen. En imgenes que contienen muchos colores (ms de
256), los pxeles usualmente representan directamente el color, alpha y otras
caractersticas de cada localizacin de la pantalla. Tales imgenes tienden a ser
muchos ms grandes que las imgenes de color indexado (indexed-color
images), pero ellas son ms realistas.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

En una imagen de color indexado, los colores en la imagen estn limitados a los
colores especificados en una tabla de colores, a menudo, el resultado es que slo
es posible usar unos pocos colores en la imagen. Sin embargo, un ndice requiere
menos almacenamiento que un valor de color, por tanto el resultado es que las
imgenes de colores indexados son ms pequeas. El formato de pxel es popular
para las imgenes que contienen slo 16 o 256 colores.
Las imgenes en el API 2D de java tiene dos componentes primarios:

Los datos de la imagen original (los pxeles)


La informacin necesaria para interpretar los pxeles.

Las reglas para interpretar los pxeles estn encapsuladas en un objeto


ColorModel (por ejemplo, los valores podran ser interpretados de dos formas,
como colores directos o indexados). Para que un pxel pueda ser mostrado, debe
estar relacionado con un modelo de color.
Una banda o canal (band) es un componente del espacio de color de una imagen.
Por ejemplo, el Rojo (Red), Verde (Green)y Azul (Blue) son las bandas o canales
de una imagen RGB. Un pxel en una imagen de modelo de color directo puede
tomarse de una coleccin de valores de las bandas para una localizacin en la
pantalla.
El paquete java.awt.image contiene la implementacin de varios ColorModel,
incluyendo representaciones de pixeles empaquetados o comprimidos y de
componente.
Una objeto ColorSpace encapsula las reglas que gobiernan la forma como un
conjunto de valores numricos corresponden a un color particular. La
implementacin del ColorSpace en el java.awt.color representa los espacios de
color ms popular, incluyendo RGB y escala de grises. Es importante aclarar que
un espacio de color no es una coleccin de colores, el define las reglas como
debern ser interpretados los valores de colores individuales.
Al separar el espacio de color (ColorSpace) del modelo de color (ColorModel) se
proporciona mayor flexibilidad para representar y convertir de una representacin
de color a otra.

Leccin 33 Rellenos, Filetes y Composiciones


33.1 Rellenos y Filetes

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Como ya se haba mencionado, con el API 2D de Java es posible usar diferentes


estilos de lpices (filetes) y patrones de relleno. Como el texto est en ltimas
representado por un conjunto de glyphs, a las cadenas de texto tambin se les
puede aplicar atributos de filete y relleno.

Figura 56 Dibujo con diferentes tipos de filete

Los estilos de lpices estn definidos


por objetos que implementan la
interfaz Stroke. El filete hace posible
especificar diferentes
anchos
y
patrones de diseo para lneas y
curvas.

Los patrones de rellenos estn definidos por objetos que implementan la interfaz
Paint. La clase Color, que est disponible en versiones anteriores de AWT, es un
tipo simple de un objeto Saint usado para definir rellenos de colores slidos. El API
2D de Java proporciona dos implementaciones adicionales para Paint,
TexturePaint y GradientPaint.

El TexturePaint define un patrn


de relleno utilizando un simple
fragmento de imagen que se repite
uniformemente. El GradientPaint
define un relleno como un
gradiente entre dos colores.
Figura 57 Relleno de gradiente y de textura

En Java 2D, el renderizado de la lnea exterior y el relleno de una figura son dos
operaciones separadas:
Usando el mtodo draw se dibuja el contorno (lnea exterior) de la figura usando el
estilo de lpiz especificado en el atributo Stroke y el patrn de relleno especificado
por el atributo Paint.
Usado el mtodo fill se rellena el interior de la figura con el patrn especificado en
el atributo Paint.
Cuando se renderiza una cadena de texto, el atributo actual de Paint se aplica a los
glyphs que forman la cadena. Sin embargo, drawString actualmente rellena los

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

glyphs que estn siendo renderizados. Para modificar el filete del contorno de los
glyphs en una cadena de texto, es necesario enviar el contorno y renderizarlos
como figuras usando el mtodo draw.

33.2 Composiciones (composites)


Cuando se renderiza un objeto que se sobrepone con otro objeto existente, es
necesario determinar como se deben combinar los colores del nuevo objeto von los
colores que ya estn ocupando el rea donde se est dibujando. El API 2D de
Java encapsula reglas para combinar los colores en el objeto Composite.
Los sistemas de renderizado primitivo proporcionan solamente operadores
bolanos bsicos para combinar los colores. Por ejemplo, una regla de
composicin booleana puede definir los valores de color de la fuente y el destino a
partir de operaciones de And, OR y XOR. Este enfoque tiene varios inconvenientes,
como lo poco intuitivo para el ser humano, adems que este tipo de composiciones
no permite la composicin de colores en diferentes espacios de color, adems de
no considerar el caso de las imgenes de color indexado, ya que el resultado de la
operacin booleana de dos valores de pxel en una imagen es la composicin de
dos ndices, no de dos colores.
El API 2D de Java evita estos inconvenientes al implementar reglas de mezcla alfa
(alpha-blending) que tienen en cuenta la informacin acerca del modelo de color al
hacer las composiciones. El objeto alphaComposite incluye el modelo del color de
los colores fuente y destino.

Leccin 34 Los paquetes del API 2D de Java


Las clases del API Java 2D est organizada en los siguientes paquetes:
java.awt
java.awt.geom
java.awt.font
java.awt.color
java.awt.image
java.awt.print

java.awt.image.renderable

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

El paquete java.awt contiene algunas clases e interfaces del API Java 2D,
obviamente no todas las clases del java.awt son clases del Java 2D.
AlphaComposite

BasicStroke

Color

Composite

CompositeContext

Font

GradientPaint

Graphics2D

GraphicsConfiguration

GraphicsDevice

GraphicsEnvironment

Paint

PaintContext

Rectangle

Shape

Stroke

TexturePaint

Transparency

El paquete java.awt.geom contiene clases e interfaces relacionadas con la


definicin de primitivas geomtricas.
AffineTransform

Arc2D

Arc2D.Double

Arc2D.Float

Area

CubicCurve2D

CubicCurve2D.Double

CubicCurve2D.Float

Dimension2D

Ellipse2D

Ellipse2D.Double

Ellipse2D.Float

FlatteningPathIterator

GeneralPath

Line2D

Line2D.Double

Line2D.Flota

PathIterator

Point2D

Point2D.Double

Point2D.Float

QuadCurve2D

QuadCurve2D.Double

QuadCurve2D.Float

Rectangle2D

Rectangle2D.Double

Rectangle2D.Float

RectangularShape

RoundRectangle2D

RoundRectangle2D.Double

RoundRectangle2D.Float
Muchas de las primitivas geomtricas tienen sus correspondientes
implementaciones .Float y .Double. Las implementaciones de doble precisin
proporcionan mayor precisin de renderizado, pero a expensas del desempeo en
algunas plataformas.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

El paquete java.awt.font contiene clases e interfaces que se utilizan para


proporcionar caractersticas al texto y la definicin de fuentes.
FontRenderContext

GlyphJustificationInfo

GlyphMetrics

GlyphVector

GraphicAttribute

ImageGraphicAttribute

LineBreakMeasurer

LineMetrics

MultipleMaster

OpenType

ShapeGrapicAttribute

TextAttribute

TextHitInfo

TextLayout

TransformAttribute

El paquete java.awt.color contiene clases e interfaces para la definicin de


espacios de color y perfiles de color.
ColorSpace

ICC_ColorSpace

ICC_ProfileGray

ICC_ProfileRGB

ICC_Profile

Los paquetes java.awt.image y java.awt.image.renderable contienen clases e


interfaces para la definicin y renderizado de imgenes.
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

Rster

RasterOp

RenderableImage

RenderableImageOp

RenderContext

RenderableImageProducer

RenderedImageFactory

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

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 caractersticas del java.awt.image
para compatibilidad, y para mantener consistencia, las nuevas clases del modelo
de color tambin estn localizadas en el paquete java.awt.image.
El paquete java.awt.print contiene clases e interfaces que hacen posible la
impresin de todos los objetos grficos basados en Java 2D, como texto, grficos e
imgenes.
Book

Pageable

PageFormat

Paper

Printable

PrinterGraphics

PrinterJob
Antes de comenzar en serio con los componentes grficos que proporciona el API
2D de java, es necesario, hacer una pequea revisin de la clase Graphics,
superclase de Graphics2D y revisar algunos conceptos bsicos acerca del contexto
grfico, que posteriormente permitirn comprender mucho mejor los ejemplos que
se presentarn.

Leccin 35 La clase Graphics


La clase Graphics es la clase base abstracta que proporciona toda, o al menos la
mayora, de la funcionalidad para poder pintar tanto sobre componentes como
sobre imgenes fuera de pantalla.
Un objeto Graphics encapsula la siguiente informacin que ser necesaria a la hora
de las operaciones bsicas de pintado.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

El objeto de tipo Component sobre el que se pinta


Un origen de traslacin para coordenadas de pintado y clipping
La regin actual ocupada por el componente
El color actual
La fuente de caracteres actual
La operacin lgica actual para utilizar con pixeles (XOR o Paint)
La actual alteracin de color XOR
Un objeto Graphics describe un contexto grfico. Un contexto grfico define una
zona de recorte, una zona a la que va a afectar; cualquier operacin grfica que se
realice modificar solamente los pixeles que se encuentren dentro de los lmites de
la zona de recorte actual y el componente que fue utilizado para crear el objeto
Graphics.
Cuando se pinta o escribe, ese dibujo o escritura se realiza en el color actual,
utilizando el modo de dibujo actual y la fuente de caracteres actual.
Hay muchas otras clases, como la clase Rectangle y la clase Polygon, que utilizan
como soporte a las operaciones que se pueden realizar con la clase Graphics.
Para poder revisar esta clase, quiz una de las mejores formas sea a travs de sus
mltiples mtodos, intentando agruparlos por funcionalidad, que es lo que se ha
intentado aqu, aunque si el lector quiere una referencia completa y una descripcin
de los mtodos de esta clase deber recurrir a la documentacin que JavaSoft
proporciona sobre el AWT.
Hay que empezar hablando del constructor de la clase Graphics, que no tiene
argumentos; aunque Graphics es una clase abstracta, por lo que las aplicaciones
no pueden llamar a este constructor directamente. Se puede obtener un objeto de
tipo Graphics a partir de otro objeto Graphics llamando al mtodo getGraphics()
sobre un componente. Tambin se puede recibir un objeto Graphics como
parmetro cuando se van a sobreescribir los mtodos paint() o update().

35.1 Mtodos generales de la clase Graphics


En esta categora estaran incluidos los mtodos tiles en general, sin una
asignacin especfica de funcionalidad con respecto a acciones determinadas de

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

dibujo. A continuacin se enumeran algunos de los mtodos considerados


generales, para seguir con la descripcin y uso de algunos de ellos en aplicaciones
de ejemplo.
clearRect( int,int,int,int ), se le pasa un rectngulo y borra la zona con el color que
se haya establecido de fondo para la superficie donde se est pintando.
copyArea( int,int,int,int,int,int ), copia la zona rectangular del componente que se
indica en los primeros cuatro parmetros, en otra posicin del contexto grfico
desplazada las distancia indicada en los dos ltimos parmetros.
create(), crea un nuevo objeto de tipo Graphics que es copia del objeto Graphics
que ha invocado al mtodo.
dispose(), elimina el contexto grfico sobre el cual es invocado y devuelve al
sistema todos los recursos que estaba utilizando, incluyendo todos los recursos, no
solamente la memoria. Un objeto Graphics no se puede utilizar despus de haber
llamado a este mtodo; y es importante que se eliminen estos objetos
manualmente, bien sea creados directamente desde un componente o a partir de
otro objeto Graphics, cuando ya no se necesiten, en lugar de esperar a que se
finalice la ejecucin.
finalice(), elimina el contexto grfico cuando ya no hay ninguna referencia sobre l.
getColor(), devuelve el color actual fijado para el contexto grfico.
setColor( Color ), fija el color del contexto grfico al color que se pasa como
parmetro. Todas las operaciones grfica siguientes que utilicen este contexto
grfico, utilizarn el color que se especifica en este mtodo.
setPaintMode(), fija la forma de pintar del contexto grfico de modo que se
sustituya lo que haba con lo nuevo. Cualquier operacin de pintado sobreescribir
lo que hubiese en la zona de destino con el color actual.
setXORMode( Color ), fija la forma de pintar del contexto grfico a una alternancia
entre en color actual y el color de la zona de destino.
toString(), devuelve un objeto de tipo String representando el valor del objeto
Graphics.
translate( int,int ), traslada el origen del contexto grfico al punto que se pasa en
los dos parmetros en el sistema de coordenadas que se est utilizando.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

35.2 Obtener un contexto grfico


La verdad es que se han escrito varias veces las palabras contexto grfico, y no se
ha proporcionado al lector una explicacin concreta de lo que significan estos
trminos. Hay varias definiciones, para unos significa que la aplicacin ha
conseguido la habilidad para pintar o colocar imgenes sobre un componente que
tiene la caracterstica de soportar el pintado o visualizacin de imgenes. Otros
autores prefieren decir que cada objeto Graphics representa una determinada
superficie de dibujo, luego ese objeto Graphics define un contexto grfico a travs
del cual se pueden manipular todas las actividades grficas sobre esa superficie. Y
otros autores indican que un objeto Graphics es la superficie ltima sobre la que se
pueden colocar lneas, figuras y texto, por lo cual puede recibir tambin el nombre
de contexto grfico al aunar informacin sobre la zona de dibujo, ms la fuente de
caracteres, color y cualquier otro factor.
Ahora que ya se sabe lo que es un contexto grfico, hay que ver cmo se consigue
crear uno. Para empezar, esto no puede hacerse instanciando directamente un
objeto de tipo Graphics, ya que la clase Graphics es abstracta y no puede ser
instanciada por el cdigo de la aplicacin, as que hay que recurrir a formas
indirectas para conseguir el contexto grfico.
Uno de estos caminos indirectos para obtener un contexto grfico es invocar el
mtodo getGraphics() sobre otro objeto. Sin embargo, este mtodo devuelve un
contexto grfico de una imagen, es decir, que solamente funciona para objetos de
tipo Image creados en memoria a travs del mtodo createImage(), de la clase
Component. Esta es una tcnica utilizada normalmente cuando se estn usando
imgenes que se crean en memoria y luego se transfieren a la pantalla, es decir, se
est pintando en el doble buffer.
Hay otros dos caminos para obtener un contexto grfico y, son sorprendentemente
simples, porque se hace automticamente, y es cuando se sobreescriben los
mtodos paint() y update(), en los cuales Java pasa como parmetro el contexto
grfico del objeto al que pertenece el mtodo.
Normalmente, el mtodo paint() se sobreescribe cuando se quiere colocar algn
tipo de material grfico sobre la pantalla, y el mtodo update() se sobreescribe en
circunstancias especiales, como puede ser el caso de una animacin o que se vaya
a utilizar doble buffer. Lo normal es pues la presentacin de informacin grfica
colocando el cdigo encargado de ello en el mtodo sobreescrito paint() y luego
invocando al mtodo repaint() para indicar al sistema que presente ese material en
pantalla; aunque el mtodo paint() tambin puede ser invocado por causas
externas, sin control alguno por parte de la aplicacin, como puede ser el

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

redimensionamiento de la ventana en la que se est presentando la informacin


grfica.
Hay que tener en cuenta que el mtodo repaint() pide al sistema que redibuje el
componente tan pronto como sea posible, pero esto lo har el mtodo update() que
se llame a continuacin. No hay una relacin uno a uno entre las llamadas a
repaint() y update(), por lo que es posible que mltiples llamadas a repaint() puedan
recogerse en una sola llamada a update().
El mtodo update() es invocado automticamente cuando se pide repintar un
Componente. Si el componente no es ligero (lightweight), la implementacin por
defecto de update() borra el contexto grfico rellenando el fondo en el color que se
haya asignado como color de fondo, fijando de nuevo el color al color del primer
plano y llamando a paint(). Si no se sobreescribe update() para hacer una
animacin, se ver siempre un parpadeo en el refresco del componente por causa
de este borrado del fondo.
En sntesis, el mtodo paint() es el que ofrece el sistema para poder pintar lo que
se quiera sobre un determinado componente. En la clase base Component, este
mtodo no hace absolutamente nada. Normalmente, en el caso de applets, se
sobreescribe para hacer presentar un rectngulo relleno con el color de fondo.
Veamos un primer ejemplo bsico de obtencin del contexto grfico y pintado de
una cadena de texto en un objeto Frame en la Figura 58. Notar que se utiliza la
clase Frame del AWT y no la JFrame del Swing, ya que se quieren asegurar la
compatibilidad.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 58 Primer ejemplo de dibujo utilizando Java 2D

Observe que en la lnea 36 se est convirtiendo el contexto grfico original g en un


contexto grfico 2D denominado g2, que es el que finalmente se utiliza para dibujar
la cadena.

CAPTULO 8 API 3D de JAVA


Leccin 36 Figuras bsicas en Java 2D (Shape)
Las clases del paquete java.awt.geom definen grficos primitivos comunes, como
puntos, lneas, curvas, arcos, rectngulos y elipses.
Las clases en el paquete java.awt.geom son:
Arc2D

Ellipse2D

QuadCurve2D

Area

GeneralPath

Rectangle2D

CubicCurve2D

Line2D

RectangularShape

Dimension2D

Point2D

RoundRectangle2D

Excepto para Point2D y Dimension2D, cada una de las otras clases geomtricas
implementa el interfaz Shape, que proporciona un conjunto de mtodos comunes
para describir e inspeccionar objetos geomtricos bi-dimensionales.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Con estas clases podemos crear de forma virtual cualquier forma geomtrica y
dibujarla a travs de Graphics2D llamando al mtodo draw o al mtodo fill.

36.1 Formas Rectangulares


Los primitivos Rectangle2D, RoundRectangle2D, Arc2D, y Ellipse2D descienden de
la clase RectangularShape, que define mtodos para objetos Shape que pueden
ser descritos por una caja rectangular. La geometra de un RectangularShape
puede ser extrapolada desde un rectngulo que encierra completamente el exterior
de la forma, como se muestra en la siguiente figura.

Figura 59 Formas rectangulares

36.2 GeneralPath
La clase GeneralPath permite crear una curva arbitraria especificando una serie de
posiciones a lo largo de los lmites de la forma.
Estas posiciones pueden ser conectadas por
segmentos de lnea, curvas cuadrticas o curvas
cbicas.

Figura 60 Forma GeneralPath

Esta figura puede ser creada con 3 segmentos de


lnea y una curva cbica.

El siguiente ejemplo muestra el uso de algunos de estos objetos grficos y adems


de las opciones para relleno y filete. El cdigo original corresponde en un demo
proporcionado en el tutorial de Java 2D de la documentacin del J2SE.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 61 Ejecucin del renderizado de figuras primitivas

El cdigo comentado se muestra a continuacin. Como se dar cuenta es bastante


extenso, por lo que se recomienda seguirlo cuidadosamente. Una vez lo ha
implementado y comprendido, intente realizar modificaciones en los parmetros de
dibujo de las diferentes figuras.
/*
* Este es un ejemplo sobre el dibujo de Shapes, proporcionado por la
* documentacin de Java en la versin 1.2.
*/

import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import javax.swing.*;

/*
* La clase se crea como hija de la clase Applet. Si se define como hija
* directa de la clase Frame, se tiene problemas al redimensionar el
* Frame, ya que no se redibujan automticamente las figuras.
*/

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

public class ShapesDemo2D extends JApplet {


final static int maxCharHeight = 15;
final static int minFontSize = 6;

final static Color bg = Color.white;


final static Color fg = Color.black;
final static Color red = Color.red;
final static Color white = Color.white;

//Definicin de los tipos de filete


final static BasicStroke stroke = new BasicStroke(2.0f);
final static BasicStroke wideStroke = new BasicStroke(8.0f);

final static float dash1[] = {10.0f};


final static BasicStroke dashed = new BasicStroke(1.0f,
BasicStroke.CAP_BUTT,
BasicStroke.JOIN_MITER,
10.0f, dash1, 0.0f);
Dimension totalSize;
FontMetrics fontMetrics;

public void init() {


//Initialize drawing colors
setBackground(bg);
setForeground(fg);
}

/* Permite redimensionar el tamao de la letra a partir de un objeto de tipo Fontmetrics


* dependiendo del tamao del contexto grfico, si se ampla el tamao de la ventana, la
* letra se ampliar, si se disminuye el tamao del contexto la letra disminuir
*/
FontMetrics pickFont(Graphics2D g2,
String longString,
int xSpace) {
boolean fontFits = false;
Font font = g2.getFont();

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
FontMetrics fontMetrics = g2.getFontMetrics();
int size = font.getSize();
String name = font.getName();
int style = font.getStyle();

while ( !fontFits ) {
if ( (fontMetrics.getHeight() <= maxCharHeight)
&& (fontMetrics.stringWidth(longString) <= xSpace) ) {
fontFits = true;
}
else {
if ( size <= minFontSize ) {
fontFits = true;
}
else {
g2.setFont(font = new Font(name,
style,
--size));
fontMetrics = g2.getFontMetrics();
}
}
}

return fontMetrics;
}

public void paint(Graphics g) {


Graphics2D g2 = (Graphics2D) g;
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);

/* Toma las dimensiones del contexto y lo divide para saber el ancho y alto de
* cada una de las celdas de la cuadrcula donde dibujar
*/

Dimension d = getSize();
int gridWidth = d.width / 6;

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
int gridHeight = d.height / 2;

//Obtiene el tamao de la letra a partir de la cadena ms larga a escribir


fontMetrics = pickFont(g2, "GeneralPath con relleno y contorno",
gridWidth);

//Dibuja el cuadrado general que sirve de fondo al applet


Color fg3D = Color.lightGray;
g2.setPaint(fg3D);
g2.draw3DRect(0, 0, d.width - 1, d.height - 1, true);
g2.draw3DRect(3, 3, d.width - 7, d.height - 7, false);
g2.setPaint(fg);

int x = 5;
int y = 7;
int rectWidth = gridWidth - 2*x;
int stringY = gridHeight - 3 - fontMetrics.getDescent();
int rectHeight = stringY - fontMetrics.getMaxAscent() - y - 2;

// Dibuja una lnea con su respectivo texto inferior


g2.draw(new Line2D.Double(x, y+rectHeight-1, x + rectWidth, y));
g2.drawString("Line2D", x, stringY);
x += gridWidth;

// Asigna un filete, dibuja el rectngulo y debajo su respectivo texto


g2.setStroke(stroke);
g2.draw(new Rectangle2D.Double(x+5, y+5, rectWidth-5, rectHeight-5));
g2.drawString("Rectangle 2D", x, stringY);
x += gridWidth;

/* Asigna el filete como punteado, dibuja un rectngulo con


* bordes redondeados y su texto inferior
* Los parmetros de creacin 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.
*/
g2.setStroke(dashed);
g2.draw(new RoundRectangle2D.Double(x+20, y+20, rectWidth-40,

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
rectHeight-40, 40, 40));
g2.drawString("RoundRectangle2D", x, stringY);
x += gridWidth;

/* Asigna el filete, dibuja un arco con 7 parmetros de construccin.


* Ellos son: el rectngulo que enmarca el arco tiene esquina superior izquierda en
* en x,y,el valor mximo en x, el valor mximo en y. Los siguientes dos parmetros
* corresponde a los ngulos de inicio y fin del arco, en este caso 60 y 135 grados.
* Finalmente el ltimo parmetro corresponde al tipo de arco, los posibles valores son
* OPEN, CHORD, PIE.
* Debajo escribe el texto correspondiente
*/
g2.setStroke(wideStroke);
g2.draw(new Arc2D.Double(x, y, rectWidth, rectHeight, 60, 135, Arc2D.OPEN));
g2.drawString("Arc2D", x, stringY);
x += gridWidth;

// Asigna el filete, dibuja una elipse y el texto inferior correspondiente

g2.setStroke(stroke);

g2.draw(new Ellipse2D.Double(x, y, rectWidth, rectHeight));


g2.drawString("Ellipse2D", x, stringY);
x += gridWidth;

/* Asigna el filete, crea unos vectores con las coordenadas de los puntos del polgono,
* crea el objeto GeneralPath (polygon) trazando lineas entre las coordenadas
* y finalmente cierra el poligono. Dibuja el polgono y el texto inferior
* correspondiente.
*/
g2.setStroke(stroke);
int x1Points[] = {x, x+rectWidth, x, x+rectWidth};
int y1Points[] = {y, y+rectHeight, y+rectHeight, y};
GeneralPath polygon = new GeneralPath(GeneralPath.WIND_EVEN_ODD, x1Points.length);
polygon.moveTo(x1Points[0], y1Points[0]);
for ( int index = 1; index < x1Points.length; index++ ) {
polygon.lineTo(x1Points[index], y1Points[index]);
};
polygon.closePath();
g2.draw(polygon);

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
g2.drawString("GeneralPath", x, stringY);

// Modifica los valores de coordenadas x e y para dibujar la segunda fila


x = 5;
y += gridHeight;
stringY += gridHeight;

/* Realiza los mismo pasos que para el polgono anterior, lo que vara es
* que en este caso no se cierra el polgono
*/
int x2Points[] = {x, x+rectWidth, x, x+rectWidth};
int y2Points[] = {y, y+rectHeight, y+rectHeight, y};
GeneralPath polyline = new GeneralPath(GeneralPath.WIND_EVEN_ODD, x2Points.length);
polyline.moveTo (x2Points[0], y2Points[0]);
for ( int index = 1; index < x2Points.length; index++ ) {
polyline.lineTo(x2Points[index], y2Points[index]);
};
g2.draw(polyline);
g2.drawString("GeneralPath (Abierto)", x, stringY);
x += gridWidth;

/* Asigna el color de relleno a azul. Rellena un objeto rectngulo y lo dibuja. Nuevamente


* asigna el color, en este caso al negro y dibuja el texto inferior correspondiente
*/
g2.setPaint(Color.blue);
g2.fill(new Rectangle2D.Double(x, y, rectWidth, rectHeight));
g2.setPaint(fg);
g2.drawString("Rectangle2D con relleno", x, stringY);
x += gridWidth;

/* Define el objeto gradiente para rellenar el rectngulo redondeado, partiendo


* del color rojo hasta el color amarillo. Ese objeto GradientPaint se enva como
* color de relleno mediante el setPaint. Se dibuja el rectngulo redondeado.
* Se restaura el color de dibujo al negro y se dibuja el texto inferior.
*/
GradientPaint relleno = new GradientPaint(x,y,red,x+rectWidth, y,Color.yellow);
g2.setPaint(relleno);

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
g2.fill(new RoundRectangle2D.Double(x, y, rectWidth,
rectHeight, 10, 10));
g2.setPaint(fg);
g2.drawString("RoundRectangle2D con gradiente", x, stringY);
x += gridWidth;

// Define el color de relleno en rojo y dibuja el arco.


g2.setPaint(red);
g2.fill(new Arc2D.Double(x, y, rectWidth, rectHeight, 90, 135, Arc2D.PIE));
g2.setPaint(fg);
g2.drawString("Arc2D con relleno", x, stringY);
x += gridWidth;

// Define un relleno de gradiente de rojo a blanco y dibuja la elipse rellena.


relleno = new GradientPaint(x,y,red,x+rectWidth, y,white);
g2.setPaint(relleno);
g2.fill (new Ellipse2D.Double(x, y, rectWidth, rectHeight));
g2.setPaint(fg);
g2.drawString("Ellipse2D con gradiente", x, stringY);
x += gridWidth;

/* Define los arreglos de las coordenadas para el polgono. Crea el polgono uniendo
* los puntos con lneas. Asigna el color rojo y dibuja el polgono relleno.
* Retorna el valor de la pintura a negro y dibuja el polgono mediante draw, lo
* que origina que se sibuje el filete del polgono.
*/
int x3Points[] = {x, x+rectWidth, x, x+rectWidth};
int y3Points[] = {y, y+rectHeight, y+rectHeight, y};
GeneralPath filledPolygon = new GeneralPath(GeneralPath.WIND_EVEN_ODD,
x3Points.length);
filledPolygon.moveTo(x3Points[0], y3Points[0]);
for ( int index = 1; index < x3Points.length; index++ ) {
filledPolygon.lineTo(x3Points[index], y3Points[index]);
};
filledPolygon.closePath();
g2.setPaint(Color.yellow);
g2.fill(filledPolygon);

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
g2.setPaint(fg);
g2.setStroke(wideStroke);
g2.draw(filledPolygon);
g2.drawString("GeneralPath con relleno y contorno", x, stringY);
}

//Clase que se ejecuta


public static void main(String s[]) {
//Crea el Frame
JFrame f = new JFrame("Demo de Figuras Primitivas");
f.addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) {System.exit(0);}
});
//Crea el applet de acuerdo a la clase ShapesDemo2D
JApplet applet = new ShapesDemo2D();
//Agrega el objeto applet al Frame
f.getContentPane().add("Center", applet);
applet.init();
f.pack();
f.setSize(new Dimension(550,300));
f.show();
}
}

36.3 QuadCurve2D y CubicCurve2D


La clase QuadCurve2D permite crear segmentos de curvas cuadrticos. Una curva
cuadrtica est definida por dos puntos finales y un punto de control.
La clase CubicCurve2D permite crear segmentos de curvas cbicos. Una curva
cbica est definida por dos puntos finales y dos puntos de control, los segmentos
de curvas cbicos tambin se conocen como curvas de Bzier. Las siguientes
figuras muestran ejemplos de curvas cuadrticas y cbicas.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 62 Formas Curvas

El siguiente cdigo crea una curva cuadrtica con dos puntos finales y un punto de
control. Las posiciones de los puntos se seleccionan con respecto al tamao de la
ventana.
import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import javax.swing.*;

public class EjemploQuad extends JApplet {

public void init() {


setBackground(Color.white);
setForeground(Color.black);
}

public void paint(Graphics g) {


Graphics2D g2 = (Graphics2D) g;
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);

Dimension d = getSize();
int w = d.width;
int h = d.height;

//Crea el objeto de tipo QuadCurve2D


QuadCurve2D.Double quad = new QuadCurve2D.Double();

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
//Crea los objetos que definen los puntos de inicio, final y control
Point2D.Double inicio, fin, control;
inicio = new Point2D.Double();
fin = new Point2D.Double();
control = new Point2D.Double();

//Le asigna coordenadas a los puntos en x e y a partir del tamao de la ventana


inicio.setLocation(w/2-100, h/2+50);
fin.setLocation(w/2+100, h/2+50);
control.setLocation((int)(inicio.x)+100, (int)(inicio.y)-100);

quad.setCurve(inicio, control, fin); //Construye la curva

//Define color y filete


g2.setPaint(Color.magenta);
g2.setStroke(new BasicStroke(2.0f));

//Dibuja la curva
g2.draw(quad);

//Modifica el color para dibujar los puntos como rectngulos


g2.setPaint(Color.black);
g2.fill(new Rectangle2D.Double(inicio.x, inicio.y,3,3));
g2.drawString("Inicio", (int) inicio.x+5,(int) inicio.y+5);
g2.fill(new Rectangle2D.Double(fin.x, fin.y,3,3));
g2.drawString("Fin",(int) fin.x+5, (int)fin.y+5);
g2.fill(new Rectangle2D.Double(control.x, control.y,3,3));
g2.drawString("Control",(int)control.x+5, (int)control.y+5);
}
//Clase que se ejecuta
public static void main(String s[]) {

//Crea el Frame
JFrame f = new JFrame("Dibujando un QuadCurve2D");
f.addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) {System.exit(0);}
});

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
//Crea el applet de acuerdo a la clase ShapesDemo2D
JApplet applet = new EjemploQuad();
//Agrega el objeto applet al Frame
f.getContentPane().add("Center", applet);
applet.init();
f.pack();
f.setSize(new Dimension(400,300));
f.show();
}
}

La ejecucin de este cdigo proporciona la siguiente ventana grfica:

Intente implementar una aplicacin


que dibuje una curva cbica, dibuje
tambin los puntos de referencia para
la curva, mediante rectngulos
rellenos. Aplique diferentes tipos de
filete, a partir de lo ya visto.
Figura 63 Ejecucin del dibujo de una curva
cuadrtica

Leccin 37 reas
Con la clase Area se pueden realizar operaciones boolenas, como uniones,
intersecciones y substracciones, sobre dos objetos Shape cualquiera. Esta tcnica,
permite crear rpidamente objetos Shape complejos sin tener que describir cada
lnea de segmento o cada curva, este proceso se denomina construir un rea
geomtrica (CAG). Una Area soporta las siguientes operaciones booleanas.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

unin

Sustraccin

Interseccin

Or-Exclusivo
(XOR)

En el siguiente ejemplo, tomado del tutorial de grficos del sitio web de


Programacin en castellano, se crea un Area que dibuja una pera a partir de
objetos elipses y operaciones de unin, sustraccin e interseccin. La ejecucin
proporciona la siguiente ventana grfica.

Figura 64 Formacin de una pera a partir de operaciones de rea

El cdigo que se requiere para el renderizado de este grfico se presenta a


continuacin.
import java.awt.*;
import java.awt.event.*;
import java.awt.font.*;
import java.awt.geom.*;
import java.applet.*;
import javax.swing.*;

/*
* Este applet dibuja una pera, usando mtodos de Constructive Area Geometry (CSG)

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
* para adicin, sustraccin e interseccin.
*/

public class Pera extends Applet {

Ellipse2D.Double circle, oval, leaf, stem;


Area circ, ov, leaf1, leaf2, st1, st2;

public void init() {


circle = new Ellipse2D.Double();
oval = new Ellipse2D.Double();
leaf = new Ellipse2D.Double();
stem = new Ellipse2D.Double();
circ = new Area(circle);
ov = new Area(oval);
leaf1 = new Area(leaf);
leaf2 = new Area(leaf);
st1 = new Area(stem);
st2 = new Area(stem);

setBackground(Color.white);
}

public void paint (Graphics g) {


Graphics2D g2 = (Graphics2D) g;

//Toma las dimensiones del contexto grfico, en este caso el Frame


Dimension d = getSize();
int w = d.width;
int h = d.height;
double ew = w/2;
double eh = h/2;

g2.setColor(Color.green);

/* Crea la primera hoja a partir de la interseccin de dos objetos Area, creados


* a partir de una elipse

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
*/
leaf.setFrame(ew-16, eh-29, 15.0, 15.0);
leaf1 = new Area(leaf);
leaf.setFrame(ew-14, eh-47, 30.0, 30.0);
leaf2 = new Area(leaf);
leaf1.intersect(leaf2);
g2.fill(leaf1);

// Crea la segund hoja.


leaf.setFrame(ew+1, eh-29, 15.0, 15.0);
leaf1 = new Area(leaf);
leaf2.intersect(leaf1);
g2.fill(leaf2);

g2.setColor(Color.black);

/* Crea el pedazo de tronco a partir del llenado del Area resultante de la sustraccin de
* dos objetos Area creados a partir de una elipse.
*/
stem.setFrame(ew, eh-42, 40.0, 40.0);
st1 = new Area(stem);
stem.setFrame(ew+3, eh-47, 50.0, 50.0);
st2 = new Area(stem);
st1.subtract(st2);
g2.fill(st1);

g2.setColor(Color.yellow);

/* Crea el cuerpo de la pera llenado el Area resultante de la unin de dos objetos


* Area, creados de una elipse un circulo.
*/
circle.setFrame(ew-25, eh, 50.0, 50.0);
oval.setFrame(ew-19, eh-20, 40.0, 70.0);
circ = new Area(circle);
ov = new Area(oval);
circ.add(ov);
g2.fill(circ);

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
}
public static void main(String s[]) {
JFrame f = new JFrame("Pera");
f.addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) {System.exit(0);}
});
Applet applet = new Pera();
f.getContentPane().add("Center", applet);
applet.init();
f.pack();
f.setSize(new Dimension(150,200));
f.show();
}
}

Leccin 38 Texto y Fuentes


Es posible mostrar una cadena de texto con cualquier tipo de letra disponible en el
sistema, en cualquier tamao y en el estilo que se seleccione. Para determinar las
fuentes que estn disponibles en el sistema es necesario llamar el mtodo
GrpahicsEnvironment.getAvailableFontFamilyNames. Este mtodo retorna un
arreglo de cadenas que contiene los nombres de las familias de las fuentes
disponibles, cualquiera de estas cadenas, adems del tamao y el estilo, pueden
ser utilizados como argumentos para crear un nuevo objeto Font.

Figura 65 Ejemplo de dibujo de fuentes

El siguiente ejemplo, muestra


una aplicacin donde es
posible seleccionar el tipo de
fuente, tamao y estilo a partir
de 3 objetos combo y observar
las modificaciones en la
cadena dibujada. El ejemplo
es tomado del Tutorial de Java
2D de Sun Microsystems. La
ejecucin del programa genera
una pantalla como la que se
muestra al lado.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Para construir el ejemplo, es necesario utilizar el siguiente cdigo que permite


obtener los datos de las fuentes instaladas en el sistema y guardarlos en un objeto
Vector, que posteriormente puede pasarse a un combo que despliegue los
nombres de las fuentes:
GraphicsEnvironment gEnv = GraphicsEnvironment.getLocalGraphicsEnvironment();
String envcmbFuente[] = gEnv.getAvailableFontFamilyNames();
Vector vector = new Vector();
for ( int i = 1; i < envcmbFuente.length; i++ ) {
vector.addElement(envcmbFuente[i]);
}
cmbFuente = new JComboBox( vector );
cmbFuente.setMaximumRowCount( 9 );
cmbFuente.addItemListener(this);
nuevafuente = envcmbFuente[0];
pnlLetra.add(cmbFuente);

A continuacin se crea un objeto Font con un estilo Font.PLAIN y un tamao de 10.


Los otros estilos disponibles son ITALIC, BOLD y BOLD+ITALIC.
Font thisFont;
...

thisFont = new Font("Arial", Font.PLAIN, 10);

Posteriormente es posible crear un nuevo objeto Font a partir de un nombre de


fuente, estilo y tamao, que pueden seleccionarse de distintos combo. Al
seleccionarse el tamao el valor de item es de tipo cadena, por lo que se debe
convertir a entero para poder crear la nueva fuente.
public void cambiarFuente(String nf, int nest, String ntam){
Integer nuevoTam = new Integer(ntam);
int tam = nuevoTam.intValue();
thisFont = new Font(nf, nest, tam);
repaint();
}

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Para controlar la fuente que se utiliza para dibujar el texto, es necesario enviar los
atributos de la fuente al contexto Graphics2D antes de renderizar. Los atributos de
la fuente se envan pasando un objeto Font al mtodo setFont. En este ejemplo,
los atributos son envidos al construir el nuevo objeto Font y la cadena se dibuja en
el centro del componente usando esta fuente. Cada vez que se modifiquen los
atributos, se construye un nuevo objeto Font y se enva al contexto Graphics 2D en
el metodo Paint() para que sean redibujados. El mtodo getFontMetrics permite
medir la longitud en pxeles de la cadena considerando los nuevos atributos, de
manera que siempre se dibuje en el centro del componente.
g2.setFont(thisFont);
String cadena = "Seleccione una fuente, tamao y estilo para modificarme";
FontMetrics medida = g2.getFontMetrics();
int ancho = medida.stringWidth( cadena );
int alto = medida.getHeight();
//Dibuja la cadena en el centro del panel correspondiente
g2.drawString( cadena, w/2-ancho/2, h/2-alto/2 );

El cdigo completo del ejemplo, comentado se muestra a continuacin:


/*
* Ejemplo de seleccin de fuentes. Construido para el Tutorial
* de Java2D de Sun Microsystems.
*/

import java.lang.Integer;
import java.awt.*;
import java.awt.font.*;
import java.awt.geom.*;
import java.awt.event.*;
import javax.swing.*;
import java.util.Vector;

public class FontSelection extends JApplet implements ItemListener {


JLabel lblFuente, lblTamano, lblEstilo;
pnlLetra fontC;
JComboBox cmbFuente, cmbTamano, cmbEstilo;
int i = 0;

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
String nuevafuente = "Fuente sin seleccionar";
int nuevoestilo = 0;
String nuevotam = "10";

public void init() {

getContentPane().setLayout( new BorderLayout() );

JPanel pnlSuperior = new JPanel();


JPanel pnlLetra = new JPanel();
JPanel pnlTamano = new JPanel();
JPanel pnlEstilo = new JPanel();
JPanel pnlEstiloTamano = new JPanel();

//Se asignan las distribuciones para cada panel


pnlSuperior.setLayout( new BorderLayout() );
pnlLetra.setLayout( new GridLayout( 2, 1 ) );
pnlTamano.setLayout( new GridLayout( 2, 1 ) );
pnlEstilo.setLayout( new GridLayout( 2, 1 ) );
pnlEstiloTamano.setLayout( new BorderLayout() );

//Incluye cada panel dentro de los correspondientes para visualizar mejor


//la distribucin de la aplicacin
pnlSuperior.add( BorderLayout.WEST, pnlLetra );
pnlEstiloTamano.add( BorderLayout.WEST, pnlTamano );
pnlEstiloTamano.add( BorderLayout.CENTER, pnlEstilo );
pnlSuperior.add( BorderLayout.CENTER, pnlEstiloTamano );

getContentPane().add( BorderLayout.NORTH, pnlSuperior );

//Asigna caractersticas a la etiqueta de texto Fuentes


lblFuente = new JLabel();
lblFuente.setText("Fuentes");
Font newFont = getFont().deriveFont(1);
lblFuente.setFont(newFont);
lblFuente.setHorizontalAlignment(JLabel.CENTER);
pnlLetra.add(lblFuente);

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

//Asigna caractersticas a la etiqueta de texto Tamao


lblTamano = new JLabel();
lblTamano.setText("Tamao");
lblTamano.setFont(newFont);
lblTamano.setHorizontalAlignment(JLabel.CENTER);
pnlTamano.add(lblTamano);

//Asigna caractersticas a la etiqueta de texto Estilo


lblEstilo = new JLabel();
lblEstilo.setText("Estilo");
lblEstilo.setFont(newFont);
lblEstilo.setHorizontalAlignment(JLabel.CENTER);
pnlEstilo.add(lblEstilo);

/*Se obtienen las fuentes disponibles en el contexto grfico


*se asignan al objeto vector que posteriomente es enviado al combo
*de Fuentes. Se asigna un mximo de items para mostrar en el combo de 9 fila
*y se predetermina como fuente inicial, la primera fuente ubicada (indice 0).
*Finalmente se agrega el combo al panel correspondiente.
*/
GraphicsEnvironment gEnv = GraphicsEnvironment.getLocalGraphicsEnvironment();
String envcmbFuente[] = gEnv.getAvailableFontFamilyNames();
Vector vector = new Vector();
for ( int i = 1; i < envcmbFuente.length; i++ ) {
vector.addElement(envcmbFuente[i]);
}
cmbFuente = new JComboBox( vector );
cmbFuente.setMaximumRowCount( 9 );
cmbFuente.addItemListener(this);
nuevafuente = envcmbFuente[0];
pnlLetra.add(cmbFuente);

/*Se asignan los valores para el combo de tamao, los posibles tamaos sern 10,
*12,14,16,18. Se define como mximo nmero de filas a mostrar 9. Se agrega el
combo
*al panel correspondiente.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
*/
cmbTamano = new JComboBox( new Object[]{ "10", "12", "14", "16", "18"} );
cmbTamano.setMaximumRowCount( 9 );
cmbTamano.addItemListener(this);
pnlTamano.add(cmbTamano);

/*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.
*/
cmbEstilo = new JComboBox( new Object[]{
"PLAIN",
"BOLD",
"ITALIC",
"BOLD & ITALIC"} );
cmbEstilo.setMaximumRowCount( 9 );
cmbEstilo.addItemListener(this);
cmbTamano.setMaximumRowCount( 9 );
pnlEstilo.add(cmbEstilo);

/*Se especifican las caracteristicas del Panel que va a contener el texto.


*/
fontC = new pnlLetra();
fontC.setBackground(Color.white);
getContentPane().add( BorderLayout.CENTER, fontC);
}

/* El siguiente mtodo detecta cuando se ha realizado la modificacin de item


* en alguno de los combos.
*/
public void itemStateChanged(ItemEvent e) {
if ( e.getStateChange() != ItemEvent.SELECTED ) {
return;
}

Object combomodif = e.getSource(); //Obtiene el objeto combo que cambi de item

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
//Compara con cada uno de los combos posibles
if ( combomodif == cmbFuente ) {
nuevafuente = (String)cmbFuente.getSelectedItem();
} else if ( combomodif == cmbEstilo ) {
i = cmbEstilo.getSelectedIndex();
nuevoestilo = i;
} else {
nuevotam = (String)cmbTamano.getSelectedItem();
}
//Cambia la fuente del contexto, de acuerdo con los nuevos atributos seleccionados en los
combo
fontC.cambiarFuente(nuevafuente, nuevoestilo, nuevotam);
}

public static void main(String s[]) {


JFrame f = new JFrame("Ejemplo de renderizado de texto");
f.addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) {System.exit(0);}
});

JApplet Seleccion = new FontSelection();


f.getContentPane().add(Seleccion, BorderLayout.CENTER);
Seleccion.init();
f.setSize(new Dimension(550,250));
f.setVisible(true);
}

class pnlLetra extends JPanel {

Font thisFont;

public pnlLetra(){
thisFont = new Font("Arial", Font.PLAIN, 10);
}

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

// Este mtodo es el que modifica la fuente de acuerdo con los nuevos parmetros
public void cambiarFuente(String nf, int nest, String ntam){
Integer nuevoTam = new Integer(ntam);
int tam = nuevoTam.intValue();
thisFont = new Font(nf, nest, tam);
repaint();
}

public void paintComponent (Graphics g) {


super.paintComponent( g );
Graphics2D g2 = (Graphics2D) g;
int w = getWidth();
int h = getHeight();

g2.setColor(Color.darkGray);
g2.setFont(thisFont);
String cadena = "Seleccione una fuente, tamao y estilo para modificarme";
FontMetrics medida = g2.getFontMetrics();
int ancho = medida.stringWidth( cadena );
int alto = medida.getHeight();
//Dibuja la cadena en el centro del panel correspondiente
g2.drawString( cadena, w/2-ancho/2, h/2-alto/2 );
}
}

Se recomienda revisar el ejemplo y plantear una solucin para cuando el texto no


cabe en una lnea y se requiere separarlo, como en el caso de un prrafo.

Leccin 39 Imgenes
El API 2D de Java implementa un nuevo modelo de imagen que permite la
manipulacin de imgenes de resolucin fija almacenadas en memoria. La clase
BufferedImage es una nueva clase Image en el paquete java.awt.image, que puede
usarse para manipular datos de una imagen recuperados desde un archivo o una
URL. Por ejemplo, se puede usar un BufferedImage para implementar doble bfer .

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Las clases BufferedImage y BufferedImageOp tambin permiten realizar una gran


variedad de operaciones de filtrado de imgenes como blur o sharpen. El modelo
de imagen productor/consumidor proporcionado en las versiones anteriores del
JDK se mantiene por razones de compatibilidad.

39.1 El modelo de imgenes de modo inmediato y el BufferedImage


El modelo de imgenes en "modo inmediato" permite manipular y mostrar
imgenes de pixeles mapeados cuyos datos estn almacenados en memoria. 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.
BufferedImage es la clase clave del API del modo-inmediato. Esta clase maneja
una imagen en memoria y proporciona mtodos para almacenar, interpretar y
dibujar cada dato de pixel. Un BufferedImage puede ser renderizado en un contexto
Graphics o en un contexto Graphics2D.
Un
BufferedImage
esencialmente un Image con
bfer de datos accesible.
BufferedImage
tiene
ColorModel y un Rster de
datos de la imagen.

es
un
Un
un
los
Figura 66 Clase BufferedImage (Sun Microsystems)

El ColorModel proporciona una interpretacin de color de los datos de los pxeles


de la imagen. El Rster representa las coordenadas rectangulares de la imagen,
mantiene los datos de la imagen en memoria, y proporciona un mecanismo para
crear mltiples subimagenes de un slo bfer de imagen. El Rster tambin
proporciona mtodos para acceder a pxeles especficos dentro de la imagen.

39.2 Filtrado de un BufferedImage


El API Java 2D define varias operaciones de filtrado para objetos BufferedImage.
Cada operacin de proceso de imgenes est incluida en una clase que
implementa la interfaz BufferedImageOp. La manipulacin de imgenes se realiza
en el mtodo filter. La clase BufferedImageOp en el API Java 2D soporta:

Transformacin afin
Escalado

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Modificacin de Aspecto
Combinacin Linear de Bandas
Conversin de color
Convolucin.

Para filtrar un BufferedImage usando una de las clases de operacin de imagense


debe:
1.

2.

Constuir una instancia de una de las clases BufferedImageOp:


AffineTransformOp, BandCombineOp, ColorConvertOp, ConvolveOp,
LookupOp , o RescaleOp.
Llamar al mtodo de operacin filter, pasando el BufferedImage que se
desea filtrar y el BufferedImage donde se quiere almacenar el resultado.

El siguiente ejemplo, tomado del Tutorial de Java 2D de Sun Microsystems ilustra


el uso de cuatro operaciones de filtrado de imagenes: low-pass, sharpen, lookup, y
rescale. Se hicieron algunas modificaciones, pues se presentaban errores al
cargar los archivos de imagen. El resultado de la ejecucin es la pantalla que se
muestra en la Figura 67.
El filtro sharpen se realiza usando un ConvolveOp. Convolucin es el proceso de
hacer ms pesado el valor de cada pixel en una imagen con los valores de los
pixeles vecinos. La mayora de los algoritmos de filtrado espacial estn basados en
las operaciones de convolucin.
Para construir y aplicar este tipo de filtrado al BufferedImage, este ejemplo usa un
cdigo similar al del siguiente fragmento.
public static final float[] SHARPEN3x3 = {
0.f, -1.f, 0.f,
-1.f, 5.0f, -1.f,
0.f, -1.f, 0.f};
BufferedImage dstbimg = new BufferedImage(iw,ih,BufferedImage.TYPE_INT_RGB);
Kernel kernel = new Kernel(3,3,SHARPEN3x3);
ConvolveOp cop = new ConvolveOp(kernel, ConvolveOp.EDGE_NO_OP, null);
cop.filter(srcbimg,dstbimg);

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 67 Ejemplo de tratamiento de imgenes

El objeto Kernel define matemticamente cmo se ve afectada la salida de cada


pixel en su rea inmediata. La definicin del Kernel determina el resultado del filtro.
El cdigo completo de la aplicacin, que contiene los cuatro filtros aplicados a las
imgenes es el siguiente:
/*
* Ejemplo de aplicacin de filtros utilizando BufferedImage y BufferedImageOp.
* Versin modificada del ejemplo del Tutorial de Java 2D de Sun Microsystems.
*/

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import java.awt.image.*;
import java.awt.geom.AffineTransform;
import java.awt.font.TextLayout;

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
import java.awt.event.WindowEvent;
import java.awt.event.WindowListener;
import java.awt.event.WindowAdapter;
import java.applet.*;
import java.net.URL;

public class ImageOps extends Applet {

private BufferedImage vectorbi[];


public static final float[] SHARPEN3x3_3 = {
0.f, -1.f, 0.f,
-1.f, 5.f, -1.f,
0.f, -1.f, 0.f};

public void init() {


setBackground(Color.white);

vectorbi = new BufferedImage[4];


String nombresimg[] = { "canocristales01.jpg", "canocristales01.jpg", "rioapaporis01.jpg",
"rioapaporis01.jpg"};
for ( int i = 0; i < vectorbi.length; i++ ) {

//Obtiene la imagen a partir del nombre de archivo correspondiente


Image imagen = Toolkit.getDefaultToolkit().getImage(nombresimg[i]);

/* El objeto MediaTracker, optimiza el proceso de cargado de la imagen al bloquear la tarea


hasta que
* la imagen est totalmente cargada, con lo que se elimina el parpadeo que se produce al ir
* presentndose en la pantalla partes de esa imagen que no est totalmente cargada.
*/
try {
MediaTracker tracker = new MediaTracker(this);
tracker.addImage(imagen, 0);
tracker.waitForID(0);
}
catch ( Exception e ) { }
int iancho = imagen.getWidth(this);

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
int ialto = imagen.getHeight(this);
vectorbi[i] = new BufferedImage(iancho, ialto, BufferedImage.TYPE_INT_RGB);

//Crea un contexto grfico a partir de la imagen


Graphics2D completa = vectorbi[i].createGraphics();
//Dibuja en el contexto la imagen
completa.drawImage(imagen,0,0,this);
}
}

public void paint(Graphics g) {


Graphics2D g2 = (Graphics2D) g;
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
g2.setRenderingHint(RenderingHints.KEY_RENDERING,
RenderingHints.VALUE_RNDER_QUALITY);
//Tamao del applet para calcular los tamaos de imagen y sus posiciones
int anchoap = getSize().width;
int altoap = getSize().height;

g2.setColor(Color.black);
float[][] datos = {{0.1f, 0.1f, 0.1f,

// Matriz del Filtro

0.1f, 0.2f, 0.1f,


0.1f, 0.1f, 0.1f},
SHARPEN3x3_3};

String Descrip[] = { "Convolve LowPass", "Convolve Sharpen",


"LookupOp", "RescaleOp"};
for ( int i = 0; i < vectorbi.length; i++ ) {
int iancho = vectorbi[i].getWidth(this);
int ialto = vectorbi[i].getHeight(this);
int x = 0, y = 0;

AffineTransform transformacion = new AffineTransform();


transformacion.scale((anchoap-14)/2.0/iancho, (altoap-34)/2.0/ialto);

BufferedImageOp bitrans = null;//BufferedImage donde quedar la modificada

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
BufferedImage biorig = new BufferedImage(iancho,ialto,BufferedImage.TYPE_INT_RGB);
//BufferedImage original

switch ( i ) {
case 0 :
case 1 : x = i==0?5:anchoap/2+3; y = 15;
Kernel kernel = new Kernel(3,3,datos[i]);
ConvolveOp cop = new ConvolveOp(kernel,
ConvolveOp.EDGE_NO_OP,
null);
cop.filter(vectorbi[i],biorig);
bitrans = new AffineTransformOp(transformacion,
AffineTransformOp.TYPE_NEAREST_NEIGHBOR);
break;
case 2 : x = 5; y = altoap/2+15;
byte chlut[] = new byte[256];
for ( int j=0;j<200 ;j++ )
chlut[j]=(byte)(256-j);
ByteLookupTable blut=new ByteLookupTable(0,chlut);
LookupOp lop = new LookupOp(blut, null);
lop.filter(vectorbi[i],biorig);
bitrans = new AffineTransformOp(transformacion,AffineTransformOp.TYPE_BILINEAR);
break;
case 3 : x = anchoap/2+3; y = altoap/2+15;
RescaleOp rop = new RescaleOp(1.1f,20.0f, null);
rop.filter(vectorbi[i],biorig);
bitrans = new AffineTransformOp(transformacion,AffineTransformOp.TYPE_BILINEAR);
}

//Dibuja la imagen en el contexto grfico en la correspondiente x e y.


g2.drawImage(biorig,bitrans,x,y);
//Dubija el texto
TextLayout texto = new TextLayout(Descrip[i], g2.getFont(),g2.getFontRenderContext());
texto.draw(g2, (float) x, (float) y-4);
}
}

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
public static void main(String s[]) {
JFrame f = new JFrame("Tratamiento de imgenes");
f.addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) {System.exit(0);}
});

Applet elapplet = new ImageOps();


f.getContentPane().add("Center", elapplet);
elapplet.init();
f.pack();
f.setSize(new Dimension(610,450));
f.show();
}
}

Leccin 40 Tcnica de Doble Bfer


Cuando un grfico es complejo o se usa repetidamente, se puede reducir el tiempo
que tarda en mostrarse renderizndolo primero en un bfer fuera de pantalla y
luego copiando el bfer en la pantalla. Esta tcnica, llamada doble bfer, se usa
frecuentemente para animaciones.
Nota!!! Cuando dibujamos sobre
automticamente el doble bfer

un

componente

Swing,

ste

utiliza

Un BufferedImage puede usarse fcilmente como un bfer fuera de pantalla. Para


crear un BufferedImage cuyo espacio, color, profundidad y distribucin de pixeles
corresponden exactamente a la ventana en la que sern dibujados, se llama al
mtodo createImage del componente. Si se necesita un control sobre el tipo de la
imagen fuera de la pantalla o su transparencia, se puede construir directamente un
objeto BufferedImage y usarlo como un bfer fuera de pantalla.
Para dibujar dentro de una imagen almacenada, se llama al mtodo
BufferedImage.createGraphics para obtener el objeto Graphics2D; luego se llama a
los mtodos de dibujo apropiados del Graphics2D. Todo el API de dibujo de Java
2D puede usarse cuando se dibuja sobre un BufferedImage que est siendo
utilizado como un bfer fuera de pantalla.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Cuando est listo para copiar el BufferedImage en la pantalla, simplemente se


llama al mtodo drawImage sobre el contexto Graphics2D del componente y se le
pasa el BufferedImage.
El siguiente ejemplo permite al usuario arrastrar un rectngulo sobre la ventana del
applet. En lugar de dibujar el rectngulo en cada posicin del cursor, para
proporcionar informacin al usuario, se usa un BufferedImage como bfer fuera de
la pantalla. Cuando se arrastra el rectngulo, es renderizado dentro del
BufferedImage en cada nueva posicin y el BufferedImage se copia en la pantalla.
El ejemplo fue tomado del Tutorial de Sun Microsystems adems de ilustrar el uso
del doble bfer le puede servir para ilustrar un posible proceso de animacin. Lea
atentamente el cdigo comentado.

Figura 68 Ejecucin del ejemplo de doble bfer

import java.awt.*;
import java.awt.event.*;
import java.applet.Applet;
import java.awt.image.*;

public class BufferedShapeMover extends Applet{

static protected Label lblTexto;

public void init(){


//Define la organizacin del applet
setLayout(new BorderLayout());

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
add(new BSMCanvas());
lblTexto = new Label("Arrastre el rectngulo dentro del rea");
add("South", lblTexto);
}

public static void main(String s[]) {


Frame f = new Frame("Ejemplo de uso de doble bfer");
f.addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) {System.exit(0);}
});
Applet applet = new BufferedShapeMover();
f.add("Center", applet);
applet.init();
f.pack();
f.setSize(new Dimension(550,250));
f.show();
}

class BSMCanvas extends Canvas implements MouseListener, MouseMotionListener{

Rectangle rect = new Rectangle(0, 0, 100, 50);


BufferedImage bi;
Graphics2D contexto;

/* Toma las coordenas de la ltima vez que el usuario presiono el mouse y se ejecut
* el evento mousePressed.
*/
int ult_x, ult_y;
boolean primeraVez = true;
TexturePaint texturaRelleno, texturaFilete;
Rectangle area;

/* Esta variable es True si el usuario di clic o movio el mouse fuera del area del rectangulo,
* falso de lo contrario
*/

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
boolean estaFuera = false;

//Esta es la clase que define el fondo donde actua el rectngulo


public BSMCanvas(){
setBackground(Color.white);
addMouseMotionListener(this);
addMouseListener(this);

// Crea el patrn para el relleno


bi = new BufferedImage(5, 5, BufferedImage.TYPE_INT_RGB);
contexto = bi.createGraphics();
contexto.setColor(Color.blue);
contexto.fillRect(0, 0, 7, 7);
contexto.setColor(Color.cyan);
contexto.fillOval(0, 0, 2, 2);
Rectangle r = new Rectangle(0,0,5,5);
texturaRelleno = new TexturePaint(bi, r);
contexto.dispose();

//Crea el patrn para el filete


bi = new BufferedImage(5, 5, BufferedImage.TYPE_INT_RGB);
contexto = bi.createGraphics();
contexto.setColor(Color.cyan);
contexto.fillRect(0, 0, 7, 7);
contexto.setColor(Color.blue);
contexto.fillOval(0, 0, 2, 2);
r = new Rectangle(0,0,5,5);
texturaFilete = new TexturePaint(bi, r);
contexto.dispose();
}

// Maneja el evento cuando se ha dado clic a un botn del mouse.


public void mousePressed(MouseEvent e){

ult_x = rect.x - e.getX();


ult_y = rect.y - e.getY();

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
// Chequea si el usuario dio clic dentro del rectangulo y se mantiene all
if(rect.contains(e.getX(), e.getY())){
updateLocation(e);
} else {
BufferedShapeMover.lblTexto.setText("Posicione el cursor en el rectngulo y luego
arrastre");
estaFuera = true;
}
}

// Maneja el evento cuando el usuario arrastra el mouse miesntras mantiene presionado el botn.
public void mouseDragged(MouseEvent e){

if(!estaFuera){
updateLocation(e);
} else {
BufferedShapeMover.lblTexto.setText("Posicione el cursor en el rectngulo 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 rectngulo cuando el usuario suelta el botn del mouse
* e.getX y e.getY proporcionan las coordenadas donde se solt el botn
*/
if(rect.contains(e.getX(), e.getY())){
updateLocation(e);
} else {
BufferedShapeMover.lblTexto.setText("Posicione el cursor en el rectngulo y luego
arrastre");
estaFuera = false;
}
}

// Este mtodo es requerido por el MouseListener, no se implementa.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
public void mouseMoved(MouseEvent e){}

// Estos mtodos son requeridos por el MouseMotionListener no se implementa.


public void mouseClicked(MouseEvent e){}
public void mouseExited(MouseEvent e){}
public void mouseEntered(MouseEvent e){}

// Este mtodo es el que actualiza la localizacin del rectngulo


public void updateLocation(MouseEvent e){

rect.setLocation(ult_x + e.getX(), ult_y + e.getY());

/* Si el mtodo chequearRect retorna verdadero actualiza el contenido del texto para que
* muestre la localizacin actual del rectngulo, de lo contrario muestr un mensaje
*/
if (chequearRect()) {
BufferedShapeMover.lblTexto.setText("Rectngulo localizado en " +
rect.getX() + ", " +
rect.getY());
} else {
BufferedShapeMover.lblTexto.setText("Por favor no intente arrastrar el rectngulo"+
" 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 Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
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 rectngulo que se dibuj con anterioridad


contexto.setColor(Color.white);
contexto.clearRect(0, 0, area.width, area.height);

// Dibuja y rellena el rectngulo en la nueva posicin del bfer


contexto.setPaint(texturaFilete);
contexto.draw(rect);
contexto.setPaint(texturaRelleno);
contexto.fill(rect);

// Dibuja la imagen del bfer en la pantalla.


g2.drawImage(bi, 0, 0, this);
}

/* Esta funcin chequea si el rectngulo 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 Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
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;
}

CAPTULO 9 API 3D de JAVA


A continuacin se presenta un tutorial introductorio al API 3D de Java, tomado de
la traduccin realizada por Juan Antonio Palos al Tutorial de Sun Microsystems.
Slo 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 interactan
con grficos tridimensionales. Java 3D es una extensin estndar del JDK 2 de
Java. El API Java 3D proporciona una coleccin de constructores de alto-nivel para
crear y manipular geometras 3D y estructuras para dibujar esta geometra. Java
3D proporciona las funciones para creacin de imgenes, visualizaciones,
animaciones y programas de aplicaciones grficas 3D interactivas.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Leccin 41 Lo bsico de Java 3D


El API 3D de Java es un rbol de clases Java que sirven como interfaz para
sistemas de renderizado de grficos tridimensionales y un sistema de sonido. El
programador trabaja con constructores de alto nivel para crear y manipular objetos
geomtricos en 3D. Estos objetos geomtricos residen en un universo virtual, que
luego es renderizado. El API est diseado con flexibilidad para crear universos
virtuales precisos de una mplia variedad de tamaos, desde astronmicos a
subatmicos.
A pesar de toda esta funcionalidad, el API es sencillo de usar. Los detalles de
renderizado se manejan automticamente. Aprovechndose de los Threads Java,
el renderizador Java 3D es capaz de renderizar en paralelo. El renderizador
tambin puede optimizarse automticamente para mejorar el rendimiento del
renderizado.
Un programa Java 3D crea ejemplares de objetos Java 3D y los sita en un
estructura de datos de escenario grfico. Este escenario grfico es una
composicin de objetos 3D en una estructura de rbol que especifica
completamente el contenido de un universo virtual, y cmo va a ser renderizado.
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, o mbos.

Leccin 42 Empezar con Java 3D


Todo programa Java 3D est, al menos parcialmente, ensamblado por objetos del
rbol de clases Java 3D. Esta coleccin de objetos describe un universo virtual,
que va a ser renderizado. El API define unas 100 clases presentadas en el paquete
javax.media.j3d.
Hay cientos de campos y mtodos en las clases del API Java 3D. Sin embargo, un
sencillo universo virtual que incluya animacin puede construirse con unas pocas
clases. Esta seccin describe un conjunto mnimo de objetos y sus interacciones
para renderizar un universo virtual.
Esta seccin incluye el desarrollo de un sencillo pero completo programa Java 3D,
llamado HelloJava3Dd.java, que muestra un cubo giratorio. El programa de ejemplo
se desarrolla de forma incremental, y se presenta en varias versiones, para
demostrar cada parte del proceso de programacin Java 3D.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Adems del paquete corazn 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 corazn incluye slo las clases de menor nivel necesarias en la
programacin Java 3D.
Las clases de utilidades son adiciones convenientes y poderosas al corazn. Estas
clases se dividen en cuatro categoras: cargadores de contenidos, ayudas a la
construccin del escenario grfico, clases de geometra y utilidades de
conveniencia.
Al utilizar las clases de utilidades se reduce significativamente el nmero de lneas
de cdigo en un programa Java 3D. Adems de las clases de los paquetes corazn
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 trmino objeto visual se utilizar para hacer referencia a un
"objeto del escenario grfico" (por ejemplo, un cubo o una esfera). El trmino objeto
slo se usar para referirse a un ejemplar de una clase. El trmino contenido se
usar para referirnos a objetos visuales en un escenario grfico como un todo.

42.1 Construir un Escenario Grfico


Un universo virtual Java 3D se crea desde un escenario grfico. Un escenario
grfico se crea usando ejemplares de clases Java 3D. El escenario grfico est
ensamblado desde objetos que definen la geometra, los sonidos, las luces, la
localizacin, la orientacin y la apariencia de los objetos visuales y sonoros.
Una definicin comn de un escenario grfico es una estructura de datos
compuesta de nodos y arcos. Un nodo es un elemento dato y un arco es una
relacin entre elementos datos. Los nodos en un escenario grfico son los
ejemplares de las clases Java 3D. Los arcos representan dos tipos de relaciones
entre ejemplares Java 3D.
La relacin ms comn es padre-hijo. Un nodo Group puede tener cualquier
nmero de hijos, pero slo un padre. Un nodo hoja slo puede tener un padre y no
puede tener hijos. La otra relacin es una referencia. Una referencia asocia un
objeto NodeComponent con un nodo del escenario grfico. Los objetos
NodeComponent definen la geometra y los atributos de apariencia usados para
renderizar los objetos visuales.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Un escenario grfico 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 raz. Se puede acceder a otros nodos siguiendo los arcos desde el raz. Los
nodos de un rbol no forman bucles. Un escenario grfico est formado desde los
rboles con races en los objetos Locale. Los NodeComponents y las referencias a
arcos no forman parte del escenario grfico.
Slo existe un camino desde la raz de un rbol a cada una de las hojas; por lo
tanto, slo hay un camino desde la raz hasta el escenario grfico de cada nodo
hoja. El camino desde la raz de un escenario grfico hasta una hoja especificada
es el camino al escenario grfico del nodo hoja. Como un camino de un escenario
grfico trata exactamente con un sola hoja, hay un camino de escenario grfico
para cada hoja en el escenario.
Todo camino de escenario grfico en un escenario grfico Java 3D especifica
completamente la informacin de estado de su hoja. Esta informacin incluye, la
localizacin, la orientacin y el tamao del objeto visual. Consecuentemente, los
atributos visuales de cada objeto visual dependen slo de su camino de escenario
grfico. El renderizador Java 3D se aprovecha de este hecho y renderiza las hojas
en el orden que l determina ms eficiente. El programador Java 3D normalmente
no tiene control sobre el orden de renderizado de los objetos.
Las representaciones grficas de un escenario grfico pueden servir como
herramienta de diseo y/o documentacin para los programas Java 3D. Los
escenarios grficos se dibujan usando smbolos grficos estndar como se ve en la
Figura 69. Los programas Java 3D podran tener ms objetos que los que hay en
su escenario grfico.
Para disear un universo virtual Java 3D se dibuja un escenario grfico usando un
conjunto de smbolos estndar. Despus de completar el diseo, este escenario
grfico es la especificacin para el programa. Despus de completar el programa,
el mismo escenario grfico es una representacin concisa del programa
(asumiendo que se sigui la especificacin).

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 69 Notacin utilizada para la representacin de un escenario grfico

Cada uno de los smbolos mostrados al lado izquierdo de la Figura 69 representa


un slo objeto cuando se usa en un escenario grfico. Los dos primeros smbolos
representan objetos de clases especficas: VirtualUniverse y Locale. Lo siguientes
tres smbolos de la izquierda representan objetos de las clases Group, Leaf, y
NodeComponent. Estos tres smbolos normalmente tienen anotaciones para indicar
la subclase del objeto especfico. El ltimo smbolo se usa para representar otras
clases de objetos.
El smbolo de la flecha slida representa una relacin 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 grfico. En la
Figura 70, se puede observar un sencillo escenario grfico.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 70 Ejemplo de escenario grfico

Es posible crear un escenario grfico ilegal. Se puede ver uno en la Figura 71. Este
escenario es ilegal porque viola las propiedades de un DAG. El problema son los
dos objetos TransformGroup(TG) que tienen al mismo objeto Shape3D como hijo.
Recuerda que una hoja slo puede tener un padre. En otras palabras, slo puede
haber un camino desde el objeto Locale hasta la hoja (o un camino desde la hoja
hasta el objeto Locale).

Figura 71 Ejemplo de escenario grfico ilegal

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Es posible pensar que la estructura mostrada en la Figura 71 define tres objetos


visuales en un universo virtual. Pero el escenario grfico define dos objetos
visuales que re-usan el objeto visual (Shape3D) del lado derecho de la figura.
Conceptualmente, cada objeto TransformGroup que apadrina al ejemplar
compartido de Shape3D podra situar una imagen en el objeto visual en diferentes
localizaciones. Sin embargo, es un escenario grfico ilegal porque el arco padrehijo no forma un rbol. En este ejemplo, el resultado es que el objeto Shape3D
tiene ms de un padre.
Las explicaciones del rbol y de las estructuras DAG son correctas. Sin embargo,
el sistema de ejecucin Java 3D reporta el error en trminos de la relacin hijopadre. Un resultado de la limitacin de la estructura de rbol es que cada objeto
Shape3D est limitado a un slo padre. Para el ejemplo de la Figura 61, se lanzar
una excepcin 'multiple parent' en el momento de la ejecucin. La Figura 72, con
un padre para cada objeto Shape3D, muestra una posible solucin para este
escenario grfico.

Figura 72 Posible solucin al escenario grfico ilegal

Cada escenario grfico tiene un slo VirtualUniverse. Este objeto tiene una lista de
objetos Locale. Un objeto Locale proporciona una referencia a un punto en el
universo virtual. Se puede pensar en los objetos Locale como marcas de tierra que
determinan la localizacin de los objetos visuales en el universo virtual.
Es tcnicamente posible para un programa Java 3D tener ms de un objeto
VirtualUniverse, y as definir ms de un universo virtual. Sin embargo, no hay
ninguna forma de comunicacin entre los universos virtuales. Adems, un objeto de

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

un escenario grfico no puede existir en ms de un universo virtual. Es altamente


recomendable usar uno y slo un ejemplar de VirtualUniverse en cada programa
Java 3D.
Mientras que un objeto VirtualUniverse podra referenciar muchos objetos Locale,
la mayora de los programas Java 3D tiene un slo objeto Locale. Cada
objetoLocale puede servir de raz para varios sub-grficos del escenario grfico.
Por ejemplo, si se hace referencia a la Figura 70 se podr observar las dos ramas
sub-grficas que salen desde el objeto Locale.
Un objeto BranchGroup es la raz de un sub-grfico, o rama grfica. Hay dos
categorias de escenarios sub-grficos: la rama de vista grfica y la rama de
contenido grfico. La rama de contenido grfico especifica el contenido del universo
virtual - geometra, apariencia, comportamiento, localizacin, sonidos y luces. La
rama de vista grfica especifica los parmetros de visualizacin, como la posicin
de visualizacin y la direccin. Juntas, las dos ramas especifican la mayora del
trabajo que el renderizador tiene que hacer.

42.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. En esta parte del rbol aparecen las clases VirtualUniverse, Locale,
Group, y Leaf.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 73 rbol de clases del API Java 3D

SceneGraphObject es la superclase de casi todas las clases corazn y de utilidad


de Java 3D. Tiene dos subclases: Node y NodeComponent. Las subclases de
Node proporcionan la mayora de los objetos de un escenario grfico. Un objeto
Node es un objeto nodo Group o un objeto nodo Leaf.

Clase Node
La clase Node es una superclase abstracta de las clases Group y Leaf. Esta clase
define algunos de los mtodos importantes de sus subclases. Las subclases de
Node componen escenarios grficos.

Clase Group
La clase Group es la superclase usada en especificacin de localizacin y
orientacin de objetos visuales en el universo virtual. Dos de las subclases de

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Group son: BranchGroup y TransformGroup. En la representacin grfica de un


escenario grfico, los simbolos de Group (crculos) normalmente se anotan con BG
para BranchGroups, TG para TransformGroups, etc. La Figura 70 muestra algunos
ejemplos de esto.
Clase Leaf
La clase Leaf es la superclase usada para especificar la forma, el sonido y
comportamiento de los objetos visuales en el universo virtual. Algunas de las
subclases de Leaf son: Shape3D, Light, Behavior, y Sound. Estos objetos podran
no tener hijos pero podran referenciar a NodeComponents.
Clase NodeComponent
La clase NodeComponent es la superclase usada para especificar la geometra, la
apariencia, la textura y las propiedades de material de un nodo Shape3D (Leaf).
Los NodeComponents no forman parte del escenario grfico, pero son
referenciados por l. Un NodeComponent podra ser referenciado por ms de un
objeto Shape3D.

42.3 Receta para Escribir Programas Java 3D


Las subclases de SceneGraphObject son los ladrillos que se ensamblan en los
escenarios grficos. La lnea bsica de desarrollo de un programa Java 3D consiste
en siete pasos (a los que la especificacin del API Java 3D se referiere como un
Receta) presentados a continuacin. Esta receta puede usarse para ensamblar
muchos programas tiles de Java 3D.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

Crear un Objeto Canvas3D


Crear un objeto VirtualUniverse
Crear un objeto Locale, adjuntarlo al objeto VirtualUniverse
Construir la rama de vista grfica
Crear un objeto View
Crear un objeto ViewPlatform
Crear un objeto PhysicalBody
Crear un objeto PhysicalEnvironment
Adjuntar los objetos ViewPlatform, PhysicalBody, PhysicalEnvironment, y
Canvas3D al objeto View
Construir la(s) rama(s) grfica(s) de contenido
Compilar la(s) rama(s) grfica(s)
Insertar los subgrficos dentro del objeto Locale

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Esta receta ignora algunos detalles pero ilustra el concepto fundamental para toda
la programacin Java 3D: crear la rama grfica del escenario grfico es la
programacin principal. En vez de ampliar esta receta, los siguientes prrafos
explican una forma sencilla de construir un escenario grfico muy similar con
menos programacin.
Los programas Java 3D escritos usando la receta bsica tienen ramas de vista
grfica con idntica estructura. La regularidad de la estructura de las ramas de vista
grfica tambien se encuentra en la clase de utilidad SimpleUniverse. Los
ejemplares de esta clase realizan los pasos 2, 3 y 4 de la receta bsica. Usando la
clase SimpleUniverse en programacin Java 3D se reduce significativamente el
tiempo y el esfuerzo necesario para crear las ramas de vista grfica.
Consecuentemente, el programador tiene ms tiempo para concentrarse en el
contenido. Esto es de lo que se trata el escribir programas Java 3D.
La clase SimpleUniverse es un buen punto de inicio en la programacin Java 3D,
porque permite al programador ignorar las ramas de vista grfica. Sin embargo,
usar SimpleUniverse no permite tener varias vistas de un universo virtual.
La clase SimpleUniverse se usa en todos los ejemplos de programacin de este
tutorial.

La clase SimpleUniverse
El constructor de SimpleUniverse crea un escenario grfico que incluye un objeto
VirtualUniverse y Locale, y una rama de vista grfica completa. Esta rama grfica
creada usa un ejemplar de las clases de conveniencia ViewingPlatform y Viewer en
lugar de las clases corazn usadas para crear una rama de vista grfica. Observe
que SimpleUniverse slo usa indirectamente los objetos View y ViewPlatform del
corazn Java 3D. Los objetos SimpleUniverse suministran la funcionalidad de todos
los objetos que hay dentro del recuadro azul de la Figura 74.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 74 Universo virtual mnimo proporcionado por la clase SimpleUniverse (en azul)

El paquete com.sun.j3d.utils.universe contiene SimpleUniverse, ViewingPlatform, y


clases Viewer de conveniencia.
Al usar los objetos SimpleUniverse la receta bsica se simplifica:
1.
2.
3.
4.
5.
6.

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 grfico
Insertar la rama de contenido grfico dentro del objeto Locale de
SimpleUniverse

Constructores de SimpleUniverse
Paquete: com.sun.j3d.utils.universe
Esta clase configura un entorno de usuario mnimo para obtener rpida y fcilmente
un programa Java 3D y ejecutarlo.
Esta clase de utilidad crea todos los objetos necesarios para la rama de vista
grfica. Especificamente crea los objetos Locale, VirtualUniverse, ViewingPlatform,
y Viewer (todos con sus valores por defecto). Los objetos tiene las relaciones
apropiadas para formar la rama de vista grfica.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

SimpleUniverse proporciona toda la funcionalidad necesaria para muchas


aplicaciones Java 3D bsicas. Viewer y ViewingPlatform son clases de
conveniencia. estas clases usan las clases View y ViewPlatform del corazn Java.
SimpleUniverse() Construye un sencillo universo virtual.
SimpleUniverse(Canvas3D canvas3D)
Construye
virtual con una referencia al objeto Canvas3D nombrado.

un

sencillo

universo

El objeto SimpleUniverse crea una rama de vista grfica completa para un universo
virtual. Esta rama incluye un plato de imagen. Un plato de imagen es el rectngulo
conceptual donde se proyecta el contenido para formar la imagen renderizada. El
objeto Canvas3D, que proporciona una imagen en una ventana de nuestra pantalla,
puede ser el plato de imagen.
La Figura 75 muestra la relacin entre el plato de imagen, la posicin del ojo, y el
universo virtual. La posicin del ojo est detrs del plato de imagen. Los objetos
visuales delante del plato de imagen son renderizados en el plato de imagen. El
renderizado puede ser como una proyeccin de los objetos visuales sobre el plato
de imagen. Esta idea se ilustra con los cuatro proyectores de la imagen (lneas
punteadas).

Figura 75 Representacin del Plato de imagen y el ojo visor en el universo virtual

Por defecto, el plato de imagen est centrado en el origen de SimpleUniverse. La


orientacin por defecto es mirando hacia abajo el eje Z. Desde esta posicin, el eje
X es una lnea horizontal que atraviesa el plato de imagen con los valores positivos
hacia la derecha. El eje Y es una lnea vertical que atraviesa el centro del plato de
imagen, con los valores positivos arriba. Consecuentemente, el punto (0,0,0) es el
centro del plato de imagen.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Los tpicos programas Java 3D mueven la vista haca atrs (z positivo) para hacer
que los objetos se acerquen, al origen dentro de la vista. La clase SimpleUniverse
tiene un miembro que es un objeto de la clase ViewingPlatform. Esta clase tiene un
mtodo setNominalViewingTransform que selecciona la posicin del ojo para que
est centrado en (0, 0, 2.41) buscando en direccin z negativa hacia el origen.

El Mtodo ViewingPlatform setNominalViewingTransform()


Paquete: com.sun.j3d.utils.universe
La clase ViewingPlatform se usa para configurar la rama de vista grfica de un
escenario grfico Java 3D en un objeto SimpleUniverse. Este mtodo normalmente
se usa en conjuncin con el mtodo getViewingPlatform de la clase
SimpleUniverse.
void setNominalViewingTransform()
Selecciona la distancia nominal de la vista a una distancia de aproximadamente
2,42 metros en la vista de transformacin de un SimpleUniverse. Desde esta
distancia y con el campo de vista por defecto, los objetos con 2 metros de altura o
de anchura generalmente entran en el plato de imagen.
Despus de crear los objetos Canvas3D y SimpleUniverse, el siguiente paso es la
creaccin de la rama de contenido grfico. La regularidad de estructura encontrada
en la rama de vista grfica no existe para la rama de contenido grfico. La rama de
contenido vara de un programa a otro haciendo imposible obtener los detalles de
su construccin en una receta. Esto tambin significa que no hay una clase de
"contenido sencillo" para ningn universo que podamos querer ensamblar.
Despus de crear la rama de contenido grfico, se inserta dentro del universo
usando el mtodo addBranchGraph de SimpleUniverse. Este mtodo toma un
ejemplar de BranchGroup como nico argumento. Este BranchGroup se aade
como hijo del objeto Locale creado por SimpleUniverse.
Algunos de los mtodos de SimpleUniverse correspondiente al paquete:
com.sun.j3d.utils.universe, se muestran a continuacin:
void addBranchGraph(BranchGroup bg)
Se usa para aadir Nodos al objeto
Locale del escenario grfico creado por el SimpleUniverse. Se usa para aadir una
rama de contenido grfico al universo virtual.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

ViewingPlatform getViewingPlatform() Se usa para recuperar el objeto


ViewingPlatform del SimpleUniverse ejemplarizado. Este mtodo se usa con el
mtodo setNominalViewingTransform() de ViewingPlatform para ajustar la
localizacin de la posicin de vista.

42.4 Alguna Terminologa Java 3D


Insertar una rama grfica dentro de un Locale la hace viva, y consecuentemente,
cada uno de los objetos de esa rama grfica tambin estn vivos. Hay algunas
consecuencias cuando un objeto se convierte en vivo. Los objetos vivos estan
sujetos a renderizacin. Los parmetros 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 BranchGroup pueden ser compilados. Compilar un BranchGroup lo
convierte a l y a todos sus ancestros en una forma ms eficiente para el
renderizado. Compilar los objetos BranchGroup est recomendado como el
ltimo paso antes de hacerlo vivir. Es mejor compilar solo los objetos
BranchGroup insertados dentro de objetos Locale
El mtodo BranchGroup compile() compila la fuente BranchGroup asociada con
este objeto creado y coloca en memoria cach el escenario grfico compilado.
Los conceptos de compilado y vivo se implementan en la clase
SceneGraphObject. Abajo se pueden ver los dos mtodos de la clase
SceneGraphObject que se relacionan con estos conceptos.
SceneGraphObject es la superclase usada para crear un escenario grfico
incluyendo Group, Leaf, y NodeComponent. SceneGraphObject proporciona varios
mtodos y campos comunes para sus subclases:
boolean isCompiled()
Devuelve una bandera indicando si el nodo forma parte
de un escenario grfico que ha sido compilado.
boolean isLive() Devuelve una bandera que indica si el nodo forma parte de un
escenario grfico vivo.
Observe que no hay un paso "Empezar a renderizar" en ninguna de las recetas
anteriores. El renderizador Java 3D empieza a funcionar en un bucle infinito cuando
una rama grfica que contiene un ejemplar de View se vuelve vivo en un universo
virtual. Una vez arrancado, el renderizador Java 3D realiza las operaciones
mostradas en el siguiente listado:

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
while(true) {
Procesos de entrada
If (peticin de salida) break
Realiza comportamientos
Atraviesa el escenario grfico
y renderiza los objetos visuales
}
Limpieza y salida

Las secciones anteriores explicaban la construccin de un sencillo universo virtual


sin una rama de contenido grfico. La creaccin de esta rama es el objetivo de las
siguientes secciones.

Leccin 43 Un Ejemplo de la aplicacin de la receta


El programa Java 3D tpico empieza definiendo una nueva clase que extiende la
clase Applet. El ejemplo HelloJava3Da.java es una clase definida para extender la
clase Applet. Los programas Java 3D podran escribirse como aplicaciones, pero
usar applets ofrece una forma ms sencilla de producir una aplicacin con
ventanas.
La clase principal de un programa Java 3D normalmente define un mtodo para
construir la rama de contenido grfico. En el ejemplo HelloJava3Da dicho mtodo
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 Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 76 Fragmento del cdigo de HelloJava3Da.java

El paso 1, crear un objeto Canvas3D, se completa en la lnea 23.


El paso 2, crear un objeto SimpleUniverse, se hace en la lnea 31.
El paso 2a, personalizar el objeto SimpleUniverse, se realiza en la lnea 35.
El paso 3, construir la rama de contenido, se realiza en la llamada al mtodo
createSceneGraph() de la lnea 27.
El paso 4, compilar la rama de contenido grfico, se hace en la lnea 28.
Finalmente el paso 5, insertar la rama de contenido grfico en el objeto Locale del
SimpleUniverse, se completa en la lnea 37.
El paso 3 de esta sencilla receta es crear la rama de contenido grfico. Esta rama
se crea en el fragmento de cdigo que se muestra en la Figura 77.

Figura 77 Fragmento para la creacin de la rama


de contenido grfico

Probablemente sea la rama de


contenido grfico ms sencilla
posible. Contiene un objeto grfico
esttico, un ColorCube que se
observa en la lnea 45. ste est
localizado en el origen del sistema de
coordenadas del universo virtual, el
valor del lado del cubo es de 0.4,
considerando que el tamao total del
applet es 1.0.

La clase HelloJava3Da est derivada de Applet pero el programa puede ejecutarse


como una aplicacin con el uso de la clase MainFrame. La clase Applet se usa
como clase base para hacer ms fcil la escritura de un programa Java 3D que se

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

ejecuta en una ventana. MainFrame proporciona un marco AWT (ventana) para un


applet permitiendo que el applet se ejecute como una aplicacin.
El tamao de la ventana de la
aplicacin
resultante
se
especifica en la construccin
de la clase MainFrame.

Figura 78 Mtodo main que crea la ventana invocando


MainFrame

Los tres fragmentos de cdigo anteriores (Figura 76, Figura 77 y Figura 78) forman
un programa Java 3D completo cuando se usan las sentencias import adecuadas.
A continuacin se pueden ver las sentencias import necesarias para compilar la
clase HelloJava3Da. Las clases ms comunmente usadas en Java 3D se
encuentran en los paquetes javax.media.j3d, o javax.vecmath.

Figura 79 Sentencias import para


HelloJava3Da.java

En este ejemplo, slo la clase de


utilidad ColorCube se encuentra en el
paquete
com.sun.j3d.utils.geometry.
La mayora de los programas Java 3D
tienen las sentencias import mostradas
en el fragmento de la Figura 79.

En el programa de ejemplo HelloJava3Da.java, slo se sito un objeto grfico en


una nica localizacin. En la Figura 80 se observa el escenario grfico resultante:

Figura 80 Escenario grfico de HelloJava3Da.java

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

La imagen que proporciona la ejecucin del cdigo completo se muestra en la


Figura 81.

Figura 81 Ejecucin de HelloJava3Da.java

Como no se explica cada lnea de cdigo del ejemplo HelloJava3Da, las ideas
bsicas de ensamblar un programa Java 3D deberan estar claras habiendo ledo el
ejemplo. La siguiente seccin presenta cada una de las clases usadas en el
programa.

43.1 Clases Java 3D Usadas en HelloJava3Da


Para aadir un poco de entendimiento del API Java 3D y el ejemplo HelloJava3Da
aqu se presenta una sntesis de las clases del API Java 3D usadas en
HelloJava3Da.
Clase BranchGroup
Los objetos de este tipo se usan para formar escenarios grficos. Los ejemplares
de BranchGroup son la raz de los sub-grficos. Los objetos BranchGroup son los
nicos que pueden ser hijos de los objetos Locale. Los objetos BranchGroup
pueden tener varios hijos. Los hijos de un objeto BranchGroup pueden ser otros
objetos Group o Leaf.
El constructor por defecto de BranchGroup es:
BranchGroup()
Los ejemplares de BranchGroup sirven como raz para las
ramas del escenario grfico; los objetos BranchGroup son los nicos objetos que
pueden insertarse en un conjunto de objetos Locale.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Clase Canvas3D
La clase Canvas3D deriva de la clase Canvas del AWT. Por lo menos un objeto
Canvas3D debe ser referenciado en la rama de vista grfica del escenario grfico.
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 vlido. Es una extensin de la clase Canvas del AWT.

Clase Transform3D
Los objetos Transform3D representan transformaciones de geometras 3D como
una traslacin o una rotacin. Estos objetos normalmente slo se usan en la
creaccin de un objeto TransformGroup. Primero, se construye el objeto
Transform3D, posiblemente desde una combinacin de objetos Transform3D.
Luego se construye el objeto TransformGroup usando el objeto Transform3D.
Un objeto de transformacin generalizado se representa internamente como una
matriz de 4x4 doubles de punto flotante. La representacin matemtica es la mejor
forma. Un objeto Transform3D no se usa en un escenario grfico. Se usa para
especificar la transformacin de un objeto TransformGroup.
El constructor por defecto de Transform3D
Transform3D()
Construye un objeto Transform3D que representa la matriz de
identidad (no la transformacin).
Un objeto Transform3D puede representar una traslacin, una rotacin, un
escalado, o una combinacin de stas. Cuando se especifica una rotacin, el
ngulo se expresa en radianes. Una rotacin completa es 2 PI radianes. Una forma
de especificar ngulos es usar la constante Math.PI. Otra forma es especificar los
valores directamente. Algunas aproximaciones son: 45 es 0.785, 90 es 1.57, y
180 es 3.14.
A continuacin se presenta una lista parcial de mtodos de Transform3D
void rotX(double angle) Selecciona el valor de esta transformacin a una
rotacin en contra del sentido del reloj sobre el eje-x. El ngulo se especifica en
radianes.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

void rotY(double angle) Selecciona el valor de esta transformacin a una


rotacin en contra del sentido del reloj sobre el eje-y. El ngulo se especifica en
radianes.
void rotZ(double angle) Selecciona el valor de esta transformacin a una
rotacin en contra del sentido del reloj sobre el eje-z. El ngulo se especifica en
radianes.
void set(Vector3f translate) Selecciona el valor transacional de esta matriz al
valor del parmetro Vector3f, y selecciona los otros componentes de la matriz como
si sta transformacin fuera una matriz idntica.

Clase TransformGroup
Como una subclase de la clase Group, los ejemplares de TransformGroup se usan
en la creaccin de escenarios grficos y tienen una coleccin de objetos nodos
como hijos. Los objetos TransformGroup contienen transformaciones geomtricas
como traslaciones y rotaciones. La transformacin normalmente se crea en un
objeto Transform3D, que no es un objeto del escenario grfico.
Los contructores de TransformGroup son:
TransformGroup() Construye e inicializa un TransformGroup usando una identidad
de transformacin.
TransformGroup(Transform3D t1) Construye e inicializa un TransformGroup
desde un objeto Transform3D t1 pasado como parmetro.
La transformacin contenida en un objeto Transform3D se copia a un objeto
TransformGroup o cuando se crea el TransformGroup, o usando el mtodo
setTransform(). As:
void setTransform(Transform3D t1) Selecciona el componente de transformacin
de este TransformGroup a partir del valor de de la transformacin pasada en el
parmetro t1.

Clase Vector3f
Vector3f es una clase matemtica que se encuentra en el paquete javax.vecmath
para especificar un vector usando tres valores de punto flotante para las
coordenadas x, y, e z. Los objetos Vector se usan frecuentemente para

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

especificar traslaciones de geometras. Los objetos Vector3f no se usan


directamente en la construccin de un escenario grfico. Se usan para especificar
las traslaciones, superficies normales, u otras cosas.
A continuacin se muestran los constructores de Vector3f
Vector3f()

Construye e inicializa un Vector3f a (0,0,0).

Vector3f(float x, float y, float z) Construye e inicializa un Vector3f desde las


coordenadas x, y, z especificadas.

Clase ColorCube
ColorCube es una clase de utilidad que se encuentra en el paquete
com.sun.j3d.utils.geometry que define la geometra y colores de un cubo
centrado en el origen y con diferentes colores en cada cara, ColorCube extiende la
clase Shape3D, por lo tanto, es un nodo hoja. Si un cubo sin rotar se sita en el
origen (como en HelloJava3Da), se ver la cara roja desde la localizacin de visin
nominal. Los otros colores son azul, magenta, amarillo, verde y cian.
Los coonstructores de ColorCube son:
ColorCube() Construye un cubo de color del tamao por defecto. Por defecto, una
esquina est situada a 1 unidad de cada uno de los ejes desde el origen,
resultando un cubo que est centrado en el origen y tiene 2 unidades de alto, de
ancho y de profundo.
ColorCube(double scale) Construye un cubo de color escalado por el valor
especificado. El tamao por defecto es 2 unidades de lado. El ColorCube resultante
tiene esquinas en (scale, scale, scale) y (-scale, -scale, -scale).
.
Leccin 44 Rotacin de objetos
Una simple rotacin del cubo puede hacer que se vea ms de una de sus caras. El
primer paso es crear la transformacin deseada usando un objeto Transform3D.
El fragmento de cdigo de la Figura 82 incorpora un objeto TransformGroup en el
escenario grfico para rotar el cubo sobre el eje x. Primero se crea la
transformacin de rotacin usando el objeto rotate de Transform3D, en la linea 24.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

La rotacin se especifica usando el


mtodo rotX() de la lnea 27.
Entonces se crea el objeto
TransformGroup en la lnea 31
para contener la transformacin de
rotacin.

Figura 82 Fragmento de cdigo para rotar un objeto

Dos parmetros especifican la


rotacin: el eje de revolucin, y el
ngulo de rotacin.

El eje se elige seleccionando el mtodo apropiado (rotX, rotY o rotZ). El ngulo de


rotacin es el valor que se le pasa como argumento. Como el ngulo de rotacin se
especifica en radianes, el valor PI/4 es 1/8 de una rotacin completa, o 45 grados.
Solamente las lneas 24 y 27 ejecutan la rotacin en un eje.
Despus de crear el objeto Transform3D, rotate, se usa en la creaccin del objeto
TransformGroup objRotate (lnea 31). El objeto Transform3D se usa en el
escenario grfico. Entonces el objeto objRotate hace que ColorCube sea su hijo
(lnea 34). A su vez, el objeto objRoot hace a objRotate como su hijo (lnea 33).
La rama de contenido grfico ahora incluye un objeto TransformGroup en el camino
del escenario grfico hacia el objeto ColorCube. Cada uno de los caminos del
escenario grfico es necesario. El objeto BranchGroup es el nico que puede ser
hijo de un Locale.
El objeto TransformGroup es el nico que
puede cambiar la localizacin, la orientacin,
o el tamao de un objeto visual. En este caso
el objeto TransformGroup cambia la
orientacin. Por supuesto, el objeto
ColorCube es necesario para suministrar el
objeto visual. A continuacin se puede
observar el escenario grfico producido por
el fragmento de la Figura 82.

Figura 83 Escenario grfico para la rotacin


del cubo

El resultado de la ejecucin de la rotacin en un eje y al modificar el eje se se


puede observar en la siguiente secuencia grfica.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

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.1 Combinacin de transformaciones


Frecuentemente un objeto visual se traslada y se rota, o se rota sobre dos ejes. En
cualquier caso, se especifican dos transformaciones diferentes para un slo objeto
visual. Las dos transformaciones pueden combinarse en una matriz de
transformaciones y contenerse en un slo objeto TransformGroup. Para el ejemplo
se pedir revisar nuevamente el cdigo de la Figura 82, correspondiente al
programa HelloJava3Db.java. Hasta el momento nos habamos fijado solamente
en las lneas 24 y 27 para rotar el objeto visual en un solo eje, al incluir las dems
lneas se obtendr una combinacin de rotaciones.
Para crear estas dos rotaciones simultneas se requiere combinar dos objetos
Transform3D de rotacin. El ejemplo rota el cubo sobre los ejes x e y. Se crean dos
objetos Transform3D, uno por cada rotacin (lneas 24 y 25). Las rotaciones
individuales se especifican para los dos objetos TransformGroup (lneas 27 y 28).
Luego las rotaciones se combinan mediante la multiplicacin de los objetos
Transform3D (lnea 29). La combinacin de las dos transformaciones se carga en
el objeto TransformGroup (lnea 31).

El cdigo completo del ejemplo HelloJava3Db.java es el siguiente:


/*

@(#)HelloJava3Db.java 1.1 00/09/22 13:55

* Copyright (c) 1996-2000 Sun Microsystems, Inc. All Rights Reserved.


* HelloJava3Db dibuja un cubo simple rotado 45 en x y 36 en y

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
*/
import java.applet.Applet;
import java.awt.BorderLayout;
import java.awt.Frame;
import java.awt.event.*;
import java.awt.GraphicsConfiguration;
import com.sun.j3d.utils.applet.MainFrame;
import com.sun.j3d.utils.geometry.*;
import com.sun.j3d.utils.universe.*;
import javax.media.j3d.*;
import javax.vecmath.*;

public class HelloJava3Db extends Applet {

public BranchGroup createSceneGraph() {


// Crea la raz del rbol
BranchGroup objRoot = new BranchGroup();

// El objeto rotate contiene la matriz de transformacin


Transform3D rotate = new Transform3D();
Transform3D tempRotate = new Transform3D();

rotate.rotX(Math.PI/4.0d);
tempRotate.rotY(Math.PI/5.0d);
rotate.mul(tempRotate);

TransformGroup objRotate = new TransformGroup(rotate);

objRoot.addChild(objRotate);
objRotate.addChild(new ColorCube(0.4));

// Compila la escena grfica


objRoot.compile();
return objRoot;
} // Fin del mtodo CreateSceneGraph que crea la escena

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
// Crea una escena simple relacionada con el universo virtual
public HelloJava3Db() {
setLayout(new BorderLayout());
GraphicsConfiguration config = SimpleUniverse.getPreferredConfiguration();

Canvas3D canvas3D = new Canvas3D(config);


add("Center", canvas3D);

BranchGroup scene = createSceneGraph();

SimpleUniverse simpleU = new SimpleUniverse(canvas3D);

simpleU.getViewingPlatform().setNominalViewingTransform();

simpleU.addBranchGraph(scene);
} // Fin del constructor HelloJava3Db

public static void main(String[] args) {


Frame frame = new MainFrame(new HelloJava3Db(), 256, 256);
} // Fin del mtodo main
} // Fin de la clase HelloJava3Db

En la Figura 87 se puede ver el escenario grfico creado en HelloJava3Db.java. La


rama de vista grfica es la misma producida en HelloJava3Da, que est construida
por un SimpleUniverse y representada por una gran estrella. La rama de contenido
grfico ahora incluye un TransformGroup en el camino del escenario grfico hacia
el objeto ColorCube. En la Figura 88 se puede observar el resultado de la
ejecucin.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 87 Escenario grfico para varias


transformaciones

Figura 88 Ejecucin de HelloJava3Db con


rotacin en X e Y

44.2 Capacidades y Rendimiento


El escenario grfico construido por un programa Java 3D podra usarse
directamente para renderizar. Sin embargo, la representacin no es muy eficiente.
La flexibilidad construida dentro de cada objeto escenario grfico (que no se van a
discutir en este tutorial) crean un representacin sub-optima del universo virtual.
Para mejorar el rendimiento de la renderizacin se usa una representacin ms
eficiente del universo virtual.
Java 3D tiene una representacin interna para una universo virtual y los mtodos
para hacer la conversin. Hay dos formas para hacer que el sistema Java 3D haga
la conversin de la representacin interna. Una forma es compilar todas las ramas
grficas. La otra forma es insertar una rama grfica en un universo virtual para
darle vida.
Compilar Contenidos
El objeto BranchGroup tiene un mtodo compilador. Llamando a este mtodo se
convierte la rama grfica completa que hay debajo del BranchGroup a la
representacin interna de Java 3D de la rama grfica. Adems de la conversin, la
representacin interna podra optimizarse de una o varias maneras.
Las posibles optimizaciones no se especifican en el API Java 3D. Sin embargo, se
puede ganar en eficiencia de varias formas. Una de las posibles optimizaciones es
combinar TransformGroups con caminos de escenario grfico. Por ejemplo, si un

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

escenario grfico tiene dos objetos TransformGroup en una relacion padre-hijo


pueden ser representados por un objeto TransformGroup. Otra posibilidad es
combinar objetos Shape3D que tienen una relacin esttica fsica. Estos tipos de
optimizaciones se hacen posibles cuando las capacidades no se configuran.
La Figura 89 presenta una representacin conceptual de la conversin a una
representacin ms eficiente. El escenario grfico del lado izquierdo es compilado y
transformado en la representacin interna mostrada en el lado derecho. La figura
slo representa el concepto de representacin interna, no como Java 3D realmente
lo hace.

Figura 89 Representacin conceptual del proceso de compilar un escenario grfico

Capacidades
Una vez que una rama grfica empieza a vivir o es compilada el sistema de
renderizado Java 3D la convierte a una representacin interna ms eficiente. El
efecto ms importante de esta conversin es la mejora del rendimiento de
renderizado.
Pero tambin tiene otros efectos, uno de ellos es fijar el valor de transformaciones y
otros objetos en el escenario grfico. A menos que especificamente se le
proporcionen al programa, este no tendr la capacidad de cambiar los valores de
los objetos del escenario grfico una vez que estn vivos.
Hay casos en que un programa necesita la capacidad de cambiar estos valores
despus de que estn vivos. Por ejemplo, cambiar el valor de un objeto
TransformGroup crea animaciones. Para que esto suceda, la transforamcin debe

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

poder cambiar despus de estar viva. La lista de parmetros a los que se puede
acceder, y de que forma, se llama capacidades del objeto.
Cada SceneGraphObject tiene un conjunto de bits de capacidad. Los valores de
estos bits determinan que capacidades existen para el objeto despus de
compilarlo o de darle vida. El conjunto de capacidades vara con la clase.
SceneGraphObject es la superclase de casi cualquier clase usada para crear un
escenario grfico, incluyendo Group, Leaf, y NodeComponent.
A continuacin se presenta la lista parcial de mtodos de SceneGraphObject.
void clearCapability(int bit)

Borra el bit de capacidad especificado.

boolean getCapability(int bit) Recupera el bit de capcidad especificado.


void setCapability(int bit)

Configura el bit de capacidad especificado.

Como ejemplo, para poder leer el valor de la transformacin representada por un


objeto TransformGroup, esta capacidad debe activarse antes de compilarlo o darle
vida. De forma similar, para poder cambiar el valor de la transformacin en un
objeto TransformGroup, su capacidad de escribir transformacin debe configurarse
antes de compilarlo o darle vida. Intentar hacer un cambio en un objeto vivo o
compilado para el que la propiedad adecuada no se ha configurado resultar en
una excepcin.
En la siguiente seccin, las animaciones se crean usando una transformacin de
rotacin que vara con el tiempo. Para que esto sea posible, el objeto
TransformGroup debe tener su capacidad ALLOW_TRANSFORM_WRITE
activada antes de que sea compilado o se le de vida.
A continuacin se presenta la lista parcial de capacidades de TransformGroup. Las
dos capacidades listadas aqu son las nicas definidas por TransformGroup. ste
hereda varias capacidades de sus clases ancestros: Group y Node. La
configuracin de capacidades se puede seleccionar, eliminar o recuperar usando
los mtodos definidos en SceneGraphObject.
ALLOW_TRANSFORM_READ Especifica que el nodo TransformGroup permite
acceder a la informacin de transformacin de su objeto.
ALLOW_TRANSFORM_WRITE Especifica que el nodo TransformGroup permite
escribir la informacin de transformacin de su objeto.
Las capacidades tambin controlan el acceso a otros aspectos de un objeto
TransformGroup. Los objetos TransformGroup heredan configuracin de

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

capacidades de sus clases ancestros: Group y Node. En el siguiente bloque de


referencia se pueden ver ver algunas de esas capacidades.
Lista Parcial de Capacidades de Group: TransformGroup hereda varios bits de
capacidades de sus clases ancestros.
ALLOW_CHILDREN_EXTEND Permite que se puedan aadir hijos al nodo Group
despus de que est compilado o vivo.
ALLOW_CHILDREN_READ
Permite que se puedan leer las referencias a los
hijos del nodo Group despus de que est compilado o vivo.
ALLOW_CHILDREN_WRITE
Permite que se puedan escribir las referencias a
los hijos del nodo Group despus de que est compilado o vivo.

Leccin 45 Aadir Comportamiento de Animacin


En Java 3D, Behavior es una clase para especificar animaciones o interacciones
con objetos visuales. El comportamiento puede cambiar virtualmente cualquier
atributo de un objeto visual. Un programador puede usar varios comportamientos
predefinidos o especificar un comportamiento personalizado. Una vez que se ha
especificado un comportamiento para un objeto visual, el sistema Java 3D actualiza
automticamente la posicin, la orientacin, el color, u otros atributos del objeto
visual.
La distincin entre animacin e interaccin es si el comportamiento es
activado en respuesta al paso del tiempo o en respuesta a actividades del
usuario, respectivamente.
Cada objeto visual del universo virtual puede tener su propio comportamiento
predefinido. De hecho, un objeto visual puede tener varios comportamientos. Para
especificar un comportamiento para un objeto visual, el programador crea objetos
que especifiquen el comportamiento, aade el objeto visual al escenario grfico y
hace las referencias apropiadas entre los objetos del escenario grfico y los objetos
Behavior.
En un universo virtual con muchos comportamientos, se necesita una significante
potencia de clculo para calcular los comportamientos. Como tanto el renderizador
como el comportamiento usan el mismo procesador, es posible que la potencia de
clculo que necesita el comportamiento degrade el rendimiento del renderizado.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Java 3D permite al programador manejar este problema especificando un lmite


espacial para que el comportamiento tenga lugar. Este lmite se llama regin
programada. Un comportamiento no est activo a menos que el volumen de
activacin de ViewPlatform interseccione con una regin progamada del
Behavior. En otras palabras, si nadie en el bosque ve el rbol caer, ste no cae. La
caracterstica de regin programada hace ms eficiente a Java 3D en el manejo de
universos virtuales con muchos comportamientos.
Un Interpolator es uno de las muchas clases de comportamientos predefinidos en
el paquete corazn de Java 3D. Basado en una funcin de tiempo, el objeto
Interpolator manipula los parmetros de un objeto del escenario grfico. Por
ejemplo, para el RotationInterpolator, manipula la rotacin especificada por un
TransformGroup para afectar la rotacin de los objetos visuales que son
ancestros de TransformGroup.
La siguiente lista enumera los pasos que se requieren para especificar una
animacin con un objeto Interpolator. Los cinco pasos forman una receta para
crear un comportamiento de animacin con interpolacin:
1.
2.
3.
4.
5.

Crear un TransformGroup fuente. Selecciona la capacidad


ALLOW_TRANSFORM_WRITE.
Crear un objeto Alpha (funcin de tiempo en Java 3D). Especifica los
parmetros de tiempo para el alpha.
Crear el objeto Interpolator. Tiene referencias con los objetos Alpha y
TransformGroup. Personalizar los parmetros del comportamiento.
Especificar la regin programada. Configurar la regin programada para
el comportamiento.
Hacer el comportamiento como hijo del TransformGroup

45.1 Ejemplo de Comportamiento: HelloJava3Dc


El fragmento de cdigo de la Figura 90 muestra un ejemplo completo del uso de
las clases interpoladoras para crear una animacin. La animacin creada con este
cdigo es una rotacin contina con un tiempo de rotacin total de 4 segundos.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Figura 90 Cdigo para la creacin de la escena con comportamiento RotationInterpolator

El paso 1 de la receta es crear el objeto TransformGroup para modificarlo durante


la ejecucin. El objeto TransformGroup fuente de un interpolador debe tener
activada la capacidad de escritura. El objeto TransformGroup llamado objSpin se
crea en la lnea 25. La capacidad de escritura de objSpin se selecciona en la lnea
26.
El paso 2 es crear un objeto Alpha para dirigir la interpolacin. Los dos parmetros
especificados en la lnea 34 del fragmento de cdigo son el nmero de
interacciones del bucle y el tiempo de un ciclo. El valor de "-1" especifica un bucle
contnuo. El tiempo se especifica en milisegundos por lo que el valor de 4000
significa 4 segundos. Por lo tanto, el comportamiento es rotar cada cuatro
segundos.
El paso 3 de la receta es crear el objeto Interpolator. El objeto
RotationInterpolator se crea en la lnea 36. El interpolador debe tener referencias
a la transformacin fuente y al objeto alpha. Esto se consigue en el constructor. En
este ejemplo se usa el comportamiento por defecto del RotationInterpolator para
hacer una rotacin completa sobre el eje y.
El paso 4 es especificar una regin programada. Se usa un objeto
BoundingSphere con sus valores por defecto. El objeto BoundingSphere se crea
en la lnea 40. La esfera se configura como los lmites del comportamiento en la
lnea 41.
El paso final, el 5, hace del comportamiento un hijo del TransformGroup. Esto se
consigue en la lnea 42.
Este fragmento de cdigo se usa con otros fragmentos anteriores para crear el
programa de ejemplo HelloJava3Dc.java. Al ejecutar la aplicacin veremos como

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

se renderiza el ColorCube con un comportamiento de rotacin cada cuatro


segundos.

Figura 91 Escenario grfico incluyendo


comportamiento

El programa HelloJava3Dc crea el


escenario grfico de la Figura 91. El objeto
rotation es tanto hijo del TransformGroup
como una referencia a l. Aunque esta
relacin parece violar las restricciones de
bucles dentro del escenaio grfico, no lo
hace. Recuerda que los arcos de
referencia (flecha punteada) no son parte
del escenario grfico. La lnea punteada
desde
el
Behavior
hacia
el
TransformGroup es esta referencia.

La ejecucin del ejemplo HelloJava3Dc proporciona la siguiente ventana grfica:

Figura 92 Ejecucin del ejemplo HelloJava3Dc.java

45.2 Clases que intervienen para programar el comportamiento de animacin


Una accin de comportamiento puede ser cambiar la localizacin
(PositionInterpolator), la orientacin (RotationInterpolator), el tamao
(ScaleInterpolator), el color (ColorInterpolator), o la transpariencia
(TransparencyInterpolator) de un objeto visual. Como se mencion antes, los
Interpolators son clases de comportamiento predefinidas. Todos los
comportamientos mencionados son posibles sin usar un Interpolator; sin embargo,

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

los interpolators hacen mucho ms sencilla la craccin de comportamientos. Las


clases Interpolators existen para proporcionar otras acciones, incluyendo
combinaciones de estas acciones.
Clase RotationInterpolator
Esta clase se usa para especificar un comportamiento de rotacin de un objeto
visual o de un grupo de objetos visuales. Un objeto RotationIterpolator cambia un
objeto TransformGroup a una rotacin especififca en repuesta a un valor de un
objeto Alpha. Como el valor de este objeto cambia cada vez, la rotacin tambin
cambia. Un objeto RotationInterpolator es flexible en la especificacin del eje de
rotacin, el ngulo de inicio y el ngulo final.
Para rotaciones constantes sencillas, el objeto RotationInterpolator tiene el
siguiente constructor que puede usarse para eso:
RotationInterpolator(Alpha alpha, TransformGroup target) Este constructor usa
valores por defecto de algunos parmetros del interpolador para construir una
rotacin completa sobre el eje y, usando el TransformGroup especificado. Los
parmetros son:
alpha: la funcin de variacin de tiempo para referencia.
target: el objeto TransformGroup a modificar.
El objeto TransformGroup de un interpolador debe tener la capacidad de escritura
activada.
Mapear una accin en el tiempo se hace usando un objeto Alpha. La especificacin
de este objeto puede ser compleja.

Clase Alpha
Los objetos de la clase Alpha se usan para crear una funcin que vara en el
tiempo. La clase Alpha produce un valor entre cero y uno, inclusives. El valor que
produce depende de la hora y de los parmetros del objeto Alpha. Los objetos
Alpha se usan comunmente con un comportamiento Interpolator para proporcionar
animaciones de objetos visuales.
Alpha tiene diez parmetos, haciendo la programacin tremendamente flexible. Sin
entrar en detalles de cada parmetro, saber que un ejemplar de Alpha puede
combinarse fcilmente con un comportamiento para proporcionar rotaciones

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

sencillas, movimientos de pndulo, y eventos de una vez, como la apertura de


puertas o el lanzamiento de cohetes.
La clase Alpha proporciona objetos para convertir la hora en un valor alpha (un
valor entre 0 y 1). El objeto Alpha es efectivamente una funcin de tiempo que
genera valores alpha entre cero y uno. La funcin "f(t)" y las caractersticas del
objeto Alpha estn determinadas por parmetros definidos por el usuario:
Algunos constructores para el objeto Alpha son:
Alpha()
Bucle continuo con un periodo de un segundo.
Alpha(int loopCount, long increasingAlphaDuration)
Este constructor toma slo loopCount e increasingAlphaDuration como parmetros
y asigna los valores por defecto a todos los dems parmetros, resultando un
objeto Alpha que produce valores desde cero a uno crecientes. Esto se repite el
nmero de veces especificado por loopCount. Si loopCount es -1, el objeto alpha
se repite indefinidamente. El tiempo que tarde en ir desde cero hasta uno est
especificando en el segundo parmetro usando una escala de milisegundos.
Los parmetros:
loopCount: nmero de veces que se ejecuta este objeto alpha; un valor de -1
especifica un bucle indefinido.
increasingAlphaDuration: tiempo en milisegundos que tarda el objeto alpha en ir de
cero a uno.

Regin Progamada
Como se mencion anteriormente, cada comportamiento tiene unos lmites
programados.
Estos
lmites
se
configuran
usando
el
mtodo
setSchedulingBounds de la clase Behavior.
Hay varias formas de especificar una regin programada, la ms sencilla es crear
un objeto BoundingSphere. Otras opciones incluyen BoundingBox y
BoundingPolytope.
La sintaxis del mtodo setShedulingBounds se presenta a continuacin:
void setSchedulingBounds(Bounds region)

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Selecciona la regin programada del Behavior a unos lmites especificados por el


parmetro region.

Clase BoundingSphere
Especificar un lmite esfrico se consigue especificando un punto central y un rdio
para la esfera. El uso normal de este tipo de lmites es usar el centro a (0, 0, 0).
Entonces el radio se selecciona lo suficientemente grande como para contener el
objeto visual, incluyendo todas las posibles localizaciones del objeto.
Algunos de los constructores de BoundingSphere son:
BoundingSphere() Este constructor crea una lmite esfrico centrado en el origen
(0, 0, 0) con un radio de 1.
BoundingSphere(Point3d center, double radius) Construye e inicializa un
BoundingSphere usando el punto central y el rdio especificados.

45.3 Ejemplo de combinacin de Transformacin y Comportamiento:


HelloJava3Dd
Como se puede suponer, es posible combinar comportamientos con las
transformaciones de rotacin de los ejemplos anteriores. HelloJava3Dd.java hace
esto. En la rama de contenido grfico, hay objetos llamados objRotate y objSpin,
que distinguen entre la rotacin esttica y el comportamiento de rotacin (bucle
continuo) del objeto Cube respectivamente. El cdigo completo de la aplicacin
que permite dibujar la escena se presenta a continuacin.
/*

@(#)HelloJava3Dd.java 1.1 00/09/22 13:55

* Copyright (c) 1996-2000 Sun Microsystems, Inc. All Rights Reserved.


* Este ejemplo presenta la animacin continua de un cubo rotado
*/

import java.applet.Applet;
import java.awt.BorderLayout;
import java.awt.Frame;
import java.awt.event.*;
import java.awt.GraphicsConfiguration;
import com.sun.j3d.utils.applet.MainFrame;

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica
import com.sun.j3d.utils.geometry.ColorCube;
import com.sun.j3d.utils.universe.*;
import javax.media.j3d.*;
import javax.vecmath.*;

public class HelloJava3Dd extends Applet {

public BranchGroup createSceneGraph() {


// Crea la raiz de la escena
BranchGroup objRoot = new BranchGroup();

// Estas son las lneas que permiten la rotacin


// combinada en los ejes X e Z.
Transform3D rotate = new Transform3D();
Transform3D tempRotate = new Transform3D();

rotate.rotX(Math.PI/4.0d);
tempRotate.rotZ(Math.PI/5.0d);
rotate.mul(tempRotate);

TransformGroup objRotate = new TransformGroup(rotate);

// Estas son las lneas que permiten el Behavior o


// animacin de rotacin continua, observada en HelloJava3Dc
TransformGroup objSpin = new TransformGroup();
objSpin.setCapability(TransformGroup.ALLOW_TRANSFORM_WRITE);

objRoot.addChild(objRotate);
objRotate.addChild(objSpin);

// Crea el ColorCube y lo agrega a la escena


objSpin.addChild(new ColorCube(0.4));

// Crea el objeto Behavior para desarrollar la animacin deseada


// que consiste en un rotacin continua sobre el eje Y cada 4 sg
Transform3D yAxis = new Transform3D();
Alpha rotationAlpha = new Alpha(-1, 4000);

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

RotationInterpolator rotator =
new RotationInterpolator(rotationAlpha,
objSpin, yAxis,
0.0f, (float)
Math.PI*2.0f);

// Se especifica el rea activa de la escena como una Esfera


BoundingSphere bounds = new BoundingSphere();
rotator.setSchedulingBounds(bounds);
objSpin.addChild(rotator);

return objRoot;
} // Fin del mtodo CreateSceneGraph

public HelloJava3Dd() {
setLayout(new BorderLayout());
GraphicsConfiguration config = SimpleUniverse.getPreferredConfiguration();

Canvas3D canvas3D = new Canvas3D(config);


add("Center", canvas3D);

BranchGroup scene = createSceneGraph();


scene.compile();

SimpleUniverse simpleU = new SimpleUniverse(canvas3D);

simpleU.getViewingPlatform().setNominalViewingTransform();

simpleU.addBranchGraph(scene);
} // Fin del constructor de HelloJava3Dd

public static void main(String[] args) {


Frame frame = new MainFrame(new HelloJava3Dd(), 256, 256);
} // Fin del mtodo main
} // Fin de la clase HelloJava3Dd

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

La representacin grfica de la escena y la ventana generada se muestran en las


siguientes figuras:

Figura 93 Escena grfica que combina


transformacin y comportamiento

Figura 94 Ejecucin del ejemplo


HelloJava3Dd.java

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

Fuentes documentales unidad 3


ALLIMANT, Frank. Archivo de ayuda construido a partir de la documentacin del
J2SE. [En lnea] http://www.confluent.fr/javadoc/indexe.html. Fecha de consulta:
Enero de 2006.
CREATIVE COMMONS. Definicin de
Alpha Blending.
[En lnea]
http://grafics.pina.be/definicio.php?id=21 Fecha de consulta: Enero de 2006.
FOLEY, James D.; VAN DAM, Andries; FEINER, Steven K. y HUGHES, John F.
Computer graphics: principles and practice, Addison Wesley, 1996.
FROUFE,
Agustn.
Tutorial
de
Java.
[En
lnea]
http://www.itapizaco.edu.mx/paginas/JavaTut/froufe/introduccion/indice2.html#quinc
e. Fecha de consulta: Noviembre de 2005.
JAVA EN CASTELLANO. Grficos con Java 2D. Traduccin del Tutorial de Sun
Microsystems realizada por Juan Antonio Palos (ozito) [En lnea]
http://www.programacion.com/java/tutorial/2d/1/. Fecha de consulta: Noviembre de
2005.
MANZANEDO, Miguel Angel et al. Gua rpida de aprendizaje del lenguaje Java.
[En lnea] http://pisuerga.inf.ubu.es/lsi/Invest/Java/Tuto.Oct98/index.htm. Fecha de
consulta: Noviembre de 2005.
OVERCLOCKERS. CL.
Definicin del trmino Alpha Blending. [En lnea]
http://www.overclockers.cl/modules.php?name=enciclopedia&ver=4
Fecha
de
consulta: Enero de 2006.
PLANETALIA.COM. Curso para la programacion de un juego de marcianitos en
Java. [En lnea] http://www.planetalia.com/cursos/Java-Invaders/JAVA-INVADERS00.clase. Fecha de consulta: Diciembre de 2005.
PLANETALIA.COM.
Videojuegos
programados
en
Java.
[En
lnea]
http://www.planetalia-exitos.com/videojuegos.jsp. Fecha de consulta: Diciembre de
2005.
PROGRAMACIN EN CASTELLANO. Curso de programacion Java en 3D.
Traduccin del curso de Sun Microsystems realizada por Juan Antonio Palos (ozito)
[En lnea] http://www.programacion.com/tutorial/3d/1/. Fecha de consulta:
Noviembre de 2005.

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD


Escuela de Ciencias Bsicas, Tecnologa e Ingeniera
Ingeniera de Sistemas
Curso Computacin Grfica

SUN MICROSYSTEMS: Sitio oficial para descargas y documentacin de Java. [En


lnea]
http://java.sun.com/products/java-media/3D/downloads/index.html
y
http://java.sun.com/products/java-media/3d Fecha de consulta: Diciembre de 2005.
WIKIPEDIA. Definicin de API. [En lnea] http://es.wikipedia.org/wiki/API . Fecha de
consulta: Enero de 2006.

Das könnte Ihnen auch gefallen