UNI – I Semestre Programación Gráfica

UNIVERSIDAD NACIONAL DE INGENIERÍA

FACULTAD DE ELECTROTECNIA Y COMPUTACIÓN (FEC)

PROGRAMACIÓN GRÁFICA

CONTROL DE VERSIÓN
NOMBRE COMPLETO FECHA DESCRIPCIÓN DEL CAMBIO
Marvin Lira Chamorro Abril, 2014 Versión Original
Glenda Barrios Aguirre Abril, 2015 Actualización de Contenido

UNIDAD I: INTRODUCCIÓN A LA GRÁFICA POR COMPUTADORA ..................................................................... 2

I.1 La Gráfica por computadora .................................................................................................. 2
I.2. El paquete Gráfico ............................................................................................................ 3
1.2.1. El Diseño del paquete gráfico ....................................................................................... 3
I.3. El Sistema Gráfico ............................................................................................................. 4
1.4. El modelo del programador ............................................................................................. 4
I.5. Áreas de Desarrollo de las Aplicaciones Gráficas ............................................................ 4

Profesora: Glenda Barrios Aguirre 1

UNI – I Semestre Programación Gráfica

UNIDAD I: INTRODUCCIÓN A LA GRÁFICA POR COMPUTADORA

En esta unidad se presenta una introducción a la gráfica por computadora. Después de dar una
reseña histórica, se describen las características básicas del dispositivo gráfico y se termina por
mencionar algunas áreas de aplicación de la gráfica por computadora.

I.1 La Gráfica por computadora

La gráfica por computadora se define como la creación, almacenamiento, manipulación y
despliegue de imágenes a través de computadora.

Los gráficos pueden tener distintos propósitos que van desde simples representaciones gráficas
hasta aplicaciones complejas, por ejemplo, las que tienen como propósito transmisión de
información de objetos, procesos, o sistemas, siendo el gráfico la representación visual del
modelo que está almacenado en la computadora.

Un modelo se define como una representación gráfica de las características mas importantes de
un objeto, por ejemplo, el simple LOGO de una empresa representa los Principios y Valores de la
empresa a quien pertenece.

Otra definición de la gráfica por computadora es: la creación, almacenamiento y manipulación de

modelos de objetos y sus imágenes por medio de una computadora.

Un ramo relacionado a la gráfica por computadora es el procesamiento de imágenes, aquí

tenemos un proceso inverso porque en lugar de producir una imagen, partimos de ella para
modificarla y obtener información de ella.

Otro aspecto importante en los gráficos por computadora es la interacción. Un programa que
solamente grafica, como es el caso de la función Seno(x) es un ejemplo de grafico totalmente
pasivo, hoy en día casi todo programa gráfico exige la interactividad. La gráfica interactiva
permite establecer una comunicación entre el programa gráfico y el usuario, el programa al recibir
señales del usuario, modifica la imagen, y el usuario al ver el cambio decide que acciٕón realizar,
repitiéndose el proceso hasta donde el programa y el usuario decidan.

Profesora: Glenda Barrios Aguirre 2

UNI – I Semestre Programación Gráfica

I.2. El paquete Gráfico

Es la herramienta de software sobre la cual se desarrolla una aplicación gráfica que según
su nivel de complejidad se cataloga como sistema.

Las herramientas de este tipo son por lo general de propósito general.

Representación Gráfica  C++, AutoCad, ArcView, VRML, 3Ds Max
Representación de SGBD  SQL Server, Oracle, SQLittle

1.2.1. El Diseño del paquete gráfico

Las cualidades deseables que se buscan en el diseño de un paquete gráfico son:

1. Simplicidad: Cualquier cosa difícil de explicar probablemente será difícil de entender.

Cabe señalar que el propósito del paquete no es dar acceso a toda función del dispositivo
gráfico, sino crear un “dispositivo virtual”, una interfaz en software al hardware gráfico
que presente un modelo más sencillo. Entonces, las funciones más complejas no tienen
que ser desechadas si pueden ser escondida detrás de una interfaz más comprensible.

2. Funcionalidad: La funcionalidad tiene que ver con le rango de operaciones que el paquete
realiza. La meta es proporcionar un conjunto de funciones que satisfaga la mayoría de las
aplicaciones, permitiendo la fácil realización de aplicaciones gráficas sin tener que escribir
rutinas para operaciones gráficas básicas o programar directamente el hardware.

3. Ortogonalidad: Capacidad de hacer un amplio rango de operaciones con un mínimo de

funciones. La separación de los atributos (color, patrones) de los primitivos gráficos
(puntos, lineas) es un ejemplo.

4. Consistencia: Debe adoptar y obedecer algunas convenciones acerca de funciones

comunes, por ejemplo. Es decir, la estandarización.

5. Robustez: El sistema debe soportar su uso con un mínimo de quejas. Los errores triviales
deberían ser corregidos sin avisos del sistema. Cuando el error es grave, el sistema debería
de avisar de la manera más útil posible.

6. Rapidez: La rapidez de un sistema gráfico está frecuentemente limitada por factores tales
como el sistema operativo o el dispositivo gráfico. Si el sistema va a implementarse en
distintos ambientes, el diseñador puede minimizar el impacto de estos factores evitando
funciones que requieren una respuesta muy rápida o hardware muy especializado.

7. Economía: Un sistema gráfico que es demasiado grande o lento, será difícil de usar. El
sistema gráfico debe mantenerse pequeño y rápido para que la adición de gráficas a
cualquier aplicación tenga un costo mínimo.

Profesora: Glenda Barrios Aguirre 3

UNI – I Semestre Programación Gráfica
8. Generalidad: El paquete gráfico debe fomentar la portabilidad de las aplicaciones gráficas.
Debe proporcionar las funciones que representen las operaciones gráficas más generales
sin hacerlas depender de las características idiosincrásicas de un dispositivo específico.

I.3. El Sistema Gráfico

Es la aplicación desarrollada por el programador.

1.4. El modelo del programador

El paquete gráfico proporciona al programador de aplicación una interfaz más entendible y
conveniente que el propio dispositivo. Esta interfaz, llamada “modelo del programador”, crea un
dispositivo virtual para el programador al esconder muchos de los detalles del manejo del
dispositivo real. Las dos áreas más importantes en este sentido son el sistema de coordenadas y
el esquema de colores.

Los paquetes frecuentemente proporcionan una clase de coordenadas más flexible que el sistema
de coordenadas del hardware, llamadas coordenadas físicas (CF). El tratamiento más conveniente
es permitir que el usuario defina su propio sistema de coordenadas, llamada coordenadas
mundiales (CM), y el paquete maneje de manera transparente (es decir, el programa de aplicación
no tiene que saberlo) el mapeo de la imagen a la pantalla. Esto da independencia a las
coordenadas físicas, que no solamente tiene mal ubicado el origen y usa unidades que no son las
más adecuadas, sino que varía entre distintos dispositivos y modos de operación. Sin embargo,
esta flexibilidad se consigue a costo del control sobre la imagen final. Por ejemplo, es difícil
anticipar si dos puntos cercanos en coordenadas mundiales serán mapeados a un solo píxel, a dos
píxeles contiguos o a dos píxeles separados, ya que esto depende de la conversión de
coordenadas.

Otra técnica que da mayor flexibilidad al uso de coordenadas es usar lo relativo, en este caso las
coordenadas se interpretan mediante distancias relativas a una posición determinada, llamada la
posición actual o puntero gráfico, y a veces marcada con un cursor visible. Las coordenadas

I.5. Áreas de Desarrollo de las Aplicaciones Gráficas

De acuerdo al uso de las Aplicaciones Gráficas podemos encontrar las siguientes áreas de
desarrollo:
1. Diseño Asistido por Computadora
2. Entornos de Realidad Virtual
3. Visualización de Datos
4. Arte por Computadora
5. Entretenimiento
6. Procesamiento de Imágenes
7. Educación y Capacitación

Profesora: Glenda Barrios Aguirre 4

UNI – I Semestre Programación Gráfica
I.5.1. Diseño Asistido por Computadora
Uno de los mayores usos de los gráficos por computadora se encuentra en los procesos de diseño,
particularmente en arquitectura e ingeniería, aunque ahora muchos productos se diseñan por
computadora. Generalmente se conocen como (CAD, Computer Aided Design, diseño asistido por
computadora) o CADD (Computer Aided Drafting and Design). Estos métodos se emplean
rutinariamente en el diseño de edificios, automóviles, aeronaves, barcos, naves espaciales,
computadoras, telas, electrodomésticos y muchos otros productos.
En algunas aplicaciones de diseño, los objetos se visualizan primero en su modelo alámbrico
mostrando su forma general y sus características internas. El modelo alámbrico permite a los
diseñadores ver rápidamente los efectos de los ajustes interactivos que se hacen en las formas
sin esperar a que la superficie completa de los objetos esté completamente generada.

Figura No.1.1. Diseño Asistido por Computadora mediante herramientas GIS para mostrar zonas
sísmicas de Nicaragua

Profesora: Glenda Barrios Aguirre 5

UNI – I Semestre Programación Gráfica

Figura No.1.2. Modelo alámbrico con código de colores de un automóvil

Figura No.1.3. Presentaciones realistas tridimensionales de diseños de edificios, (a) Una

perspectiva a nivel de calle del proyecto de un centro de negocios. (b) Visualización
arquitectónica de un atrio creado para una animación por computadora por Marialine Prieur,
Lyon, Francia. (Cortesia de Thomson Digital image. Ine)

Profesora: Glenda Barrios Aguirre 6

UNI – I Semestre Programación Gráfica

Figura No.1.4. Presentaciones realistas de diseños de ingeniería. (Cortesía de (a) Intergraph

Corporation (b) Evans & Sutherland.)

Figura No.1.5. Un esquema de CAD para describir el control numérico del mecanizado de una
pieza. La superficie de la pieza está en un tono de gris y las trayectorias de la herramienta en
otro. (Cortesía de Los Alamos National Laboratory.)

Profesora: Glenda Barrios Aguirre 7

UNI – I Semestre Programación Gráfica
I.5.2. Entornos de Realidad Virtual
Otra de las aplicaciones de los gráficos por computadora los encontramos en los entornos de
realidad virtual, estos le permiten al usuario interactuar con los objetos en una escena
tridimensional. Se requieren dispositivos de hardware especializados que proporcionan efectos
de visión tridimensional y permiten al usuario tomar los objetos de la escena. Dentro de las
principales aplicaciones que ofrecen está en la educación, con estas es posible hacer
capacitaciones mediante entornos virtuales a operadores de de equipo pesado.

En la siguiente figura se ilustra como se capacita a un operador de tractor mediante la

manipulación de controles de un sistema de inmersión de Realidad Virtual con visión
estereoscópica.

Figura No.1.6. Prácticas con un tractor en un entorno de realidad virtual.

Figura No.1.7. Vista del tractor en un monitor estándar (Cortesía de National Center for
Supercomputing Applications.

Profesora: Glenda Barrios Aguirre 8

UNI – I Semestre Programación Gráfica
Con los sistemas de realidad virtual, tanto los diseñadores como los demás pueden moverse
alrededor e interactuar con los objetos de diferentes maneras. Los diseños arquitectónicos
pueden examinarse mediante un casco simulado a través de habitaciones o alrededor de los
exteriores del edificio para poder apreciar mejor el efecto global de un diseño particular.
Mediante un guante especial, podemos, incluso agarrar objetos en una escena y girarlos o
moverlos de un sitio a otro.

Figura No.1.8. Entornos de Realidad Virtual para tratar las Fobias, le permiten al usuario
enfrentar los escenarios cara a cara, mediante un programa de inmersión por computadora, un
terapeuta y un paciente.

Profesora: Glenda Barrios Aguirre 9

UNI – I Semestre Programación Gráfica

Figura No.1.9. En las siguientes figuras se muestran al astronauta Jeffrey Hoffman utilizando un
sistema de Realidad Virtual de la NASA como mecanismo de aprendizaje de las naves.

Figura No.1.10. Aprendizaje de un hueso en particular. No sólo aprenderán qué es, sino también
sabrán identificar donde está ubicado y cómo se encuentra colocado.

Profesora: Glenda Barrios Aguirre 10

UNI – I Semestre Programación Gráfica

I.5.3. Visualización de Datos

Este tipo de aplicaciones gráficas aplican donde es necesario representar grandes conjuntos de
datos o procesos de naturaleza científica, de ingeniería o de medicina. Generalmente, esto se
conoce como visualización científica. Y el término visualización de negocios se usa para conjuntos
de datos relacionados con el comercio, la industria y otras áreas no científicas. Generalmente
investigadores, analistas y demás necesitan tratar con grandes cantidades de información que les
permitan estudiar el comportamiento de procesos de elevada complejidad. Algunos ejemplos los
encontramos en las simulaciones numéricas por computadora que procesan información
generada por las cámaras de un satélite, las cuales acumulan archivos de datos más rápido de lo
que pueden ser interpretados. Rastrear estos grandes conjuntos de números para determinar
tendencias y relaciones es un proceso tedioso y totalmente inefectivo. Sin embargo, si los datos
se convierten a un formato gráfico, las tendencias y relaciones aparecen inmediatamente.

Figura No.1.11. Para producir esta función tridimensional se utilizaron efectos de iluminación y
técnicas de representación de superficies. (Cortesía de Wolfram Research Inc.. el creador de
Mathematica)

Profesora: Glenda Barrios Aguirre 11

UNI – I Semestre Programación Gráfica

Figura No.1.12. En los mapas de clasificación donde se procesa la información satelital para
clasificar el terreno, por ejemplo, vegetación natural, cultivos, zonas urbanas, afloramientos
rocosos, ríos, etc. Esta imagen pertenece a Shanghai China.

Figura No.1.13. Visualización de información comercial mediante la herramienta gráfica

Tableau, la cual muestra distintas vistas de los datos en una misma pantalla.

Profesora: Glenda Barrios Aguirre 12

UNI – I Semestre Programación Gráfica

I.5.4. Arte por Computadora

Los métodos gráficos por computadora se utilizan de forma generalizada en aplicaciones de bellas
artes y de uso comercial. Los artistas utilizan una variedad de métodos computacionales
incluyendo hardware de propósitos especiales, programas artísticos de brocha de pintar,
paquetes de CAD, software de edición electrónica que agregan animaciones.

Las principales aplicaciones de este tipo de programas están orientadas a la elaboración de

representaciones gráficas de Obras de Arte, Pintura, entre otros.

Una característica importante en este tipo de herramientas es que deben permitir la edición de
los gráficos, ya que es de mucha importancia el nivel de precisión en el cual se muestre cada rasgo
de la obra real.

El Arte Digital es una disciplina de las artes plásticas. Comprende obras en las que los elementos
digitales son imprescindibles, tanto en el proceso de producción como el de exhibición. Las obras
de éste arte se manifiestan mediante soportes digitales tecnológicamente avanzados. Es un
concepto bastante debatido en los círculos artísticos. Es rechazado por algunos que lo ven más
como una habilidad técnica que como una manifestación artística. Esta actitud de rechazo
proviene del desconocimiento del arte computarizado. En estos casos el artista sería el
programador, el cual expresa sensaciones, ideas, realiza búsquedas personales, visiones en forma
gráfica y las expresa usando el computador como herramienta; del mismo modo que durante
siglos se ha usado el lienzo, la pared o la piedra.

Figura No.1.14 Representación de la Figura No.1.15 Orillas del Río expuesta en el

MONALISA museo de bellas artes de Argentina y elaborado
De Leonardo DaVinci en 1452. por Alfred Sisley 66 x 9 en Oleo sobre tela.

Profesora: Glenda Barrios Aguirre 13

UNI – I Semestre Programación Gráfica

Figura No.1.17. Pintura digitaliza por Thomas Herbrich

La siguiente figura muestra una pintura lograda mediante un sistema de dibujo inalámbrico y
pluma sensible a la presión. En esta pintura se simula las pinceladas dadas por Van Gogh.

Figura No.1.16. Cuadro parecido a un Van Gogh creado por la artista gráfica Elizabeth Rourke con
una pluma inalámbrica sensible a la presión. Cortesía de Wacom Technology Corporation

Profesora: Glenda Barrios Aguirre 14

UNI – I Semestre Programación Gráfica

Figura No.1.17. Página promocional de CLARO Nicaragua, haciendo uso de las herramientas
gráficas para su diseño.

Profesora: Glenda Barrios Aguirre 15

UNI – I Semestre Programación Gráfica
Figura No.1.18. Logos promocionales de empresas comerciales o del Gobierno de Nicaragua.

Profesora: Glenda Barrios Aguirre 16

UNI – I Semestre Programación Gráfica
I.5.5. Entretenimiento
Los ejemplos de esta área de aplicación las encontramos en la producción de películas, videos
musicales, juegos por computadora o dispositivos móviles, y programas de televisión. Algunas
despliegan solamente imágenes y otras combinan los objetos con los actores para producir
escenas en vivo a través de animaciones.

También se emplean métodos de gráficos por computadora para simular actores humanos.
Utilizando archivos de los rasgos faciales de un actor y un programa de animación para generar
secuencias de película que contengan réplicas generadas por computadora de esa persona. En el
hipotético caso de que el actor enferme o se accidente durante el rodaje, estos métodos de
simulación se pueden utilizar para sustituirlo en las subsiguientes escenas. Los vídeos musicales
utilizan los gráficos por computadora de diversas formas. Se pueden combinar objetos gráficos
con acción real, o emplearse gráficos y técnicas de procesamiento de imágenes para transformar
una persona en un objeto o viceversa.

Figura No.1.19. Juegos por computadora para dispositivos móviles o Web. Mario Bross, Angry
Birds y Lego Batman DC Superhéroes.

Profesora: Glenda Barrios Aguirre 17

UNI – I Semestre Programación Gráfica

Figura No.1.20. Películas animadas como Los Caballeros del Zodiaco, o Dragon Boll Z.

Figura No.1.21. Ejemplos de morfismo en el vídeo de David Byrne She is mad”¨.

Profesora: Glenda Barrios Aguirre 18

UNI – I Semestre Programación Gráfica
I.5.6. Procesamiento de imágenes

La modificación o interpretación de imágenes es conocida como procesamiento de imágenes.

Aunque los métodos empleados en los gráficos por computadora y el procesado de imágenes se
solapan, las dos áreas están dedicadas a operaciones diferentes. En los gráficos por computadora,
la computadora se utiliza para crear una imagen, en cambio, el procesamiento de imágenes
trabaja la imagen producida en formato digital. Por lo general, antes de procesar una imagen o
una fotografía, primero se almacena en un archivo de imagen, luego, se aplican los métodos
digitales de reorganización de las partes de la imagen, para resaltar separaciones de color, o
mejorar la calidad del sombreado. Estas técnicas se usan de manera amplia en las aplicaciones de
arte comercial que impliquen el retoque y reestructuración de secciones de fotografías y obras
artísticas. También se utilizan técnicas similares para analizar las fotografías de la tierra tomadas
por un satélite y las grabaciones de distribuciones de estrellas en las galaxias hechas por un
telescopio.

Las aplicaciones médicas también hacen uso de las técnicas de procesamiento de imágenes para
el realce de tomografías y simulaciones en operaciones quirúrgicas. La tomografía es un tipo de
fotografía de rayos X que permite mostrar vistas de secciones transversales de sistemas
fisiológicos.

Las aplicaciones principales del procesamiento de imágenes están dirigidas al mejoramiento de

la calidad de la imagen y la percepción que el usuario tendrá a través de la información visual.
Ejemplo de ello es la Robótica y los programas de aplicación gráfica de la criminalística.

Figura No.1.22 Procesamiento de Imágenes mediante huellas digitales.

Profesora: Glenda Barrios Aguirre 19

UNI – I Semestre Programación Gráfica

Figura No.1.23. Una fotografía borrosa de una placa de matrícula de automóvil que se
transforma en legible tras la aplicación de técnicas de procesamiento de imágenes. (Cortesía de
Los Alamos National Labora/ory.)

Figura No. 1.24. Imagen de un par estereoscópico mostrando los huesos de una mano humana,
renderizado por [Yoon, D. E. Thompson y W. N. Waggcnspack. Jr. LSU, de un conjunto de datos
obtenidos a partir de tomogralìas CT por Rehabilitaron Research, GWLNIIDC. Estas imágenes
muestran un posible camino para la reconstrucción quirúrgica de un tendón. (Cortesia de
IMRLAB, Meelumical Engineering,
Universidad del Estado de Louisiana.)

Profesora: Glenda Barrios Aguirre 20

UNI – I Semestre Programación Gráfica

I.5.7. Educación y capacitación

Los modelos de sistemas físicos, financieros, políticos, sociales, económicos, psicológicos,
tendencias de la población y equipamiento, son la contraparte que permiten mediante medios
gráficos y computarizados orientar el aprendizaje y educación sobre el área. Aquí las gráficas
aparecen como instrumentos de ayuda educativa

Las principal aplicación de esta área es la simulación; éste tipo de sistemas permiten el estudio
del comportamiento de ciertos fenómenos ó situaciones de la vida real y encontramos sus
aplicaciones en simuladores de vuelo, cursos de manejo de conducir, simulaciones de navegación,
operaciones del cuerpo humano, entre otras.

En algunos casos estas aplicaciones necesitan equipos especiales de hardware. Tal es el caso de
los simuladores de navegación, aérea y de maquinaria pesada.

Figura No.1.25. Simulador de vuelo de Google con modelos de cabina para el SR22 y dos Jets para
usar con el F16.

Profesora: Glenda Barrios Aguirre 21

UNI – I Semestre Programación Gráfica

Figura No.1.26. Aplicaciones Web para simulaciones de cirugías plásticas.

Figura No.1.27. Simulador para manejo de maquinaria pesada. Este brinda además la ventaja
de registrar todos los movimientos del operador desde el inicio hasta el final.

Profesora: Glenda Barrios Aguirre 22

UNI – I Semestre Programación Gráfica

I.6. Bibliografía
Gráficos por computadora con OpenGL
DONALD HKARN; M. PAULINE BAKF.R
Pearson Educación S.A., Madrid. 2006

Profesora: Glenda Barrios Aguirre 23