Unidad 2

Universidad Nacional Abierta y a Distancia – UNAD
Vicerrectoría Académica y de Investigación - VIACI

Escuela: Escuela De Ciencias Básicas Tecnología E Ingeniería Programa: Ingeniería de Sistemas
Curso: Computación Gráfica Código: 299210
COMPUTACION GRAFICA
UNIDAD 2 – ALGORITMOS BÁSICOS DE DIBUJO EN 2 DIMENSIONES
Material adaptado Red de Tutores del curso Computación Gráfica.
UNAD 2017
CAPÍTULO 4 REQUERIMIENTOS DE SOFTWARE
Este capítulo presenta las herramientas necesarias para la construcción y ejecución de

programas en el lenguaje de programación JAVA, los requerimientos mínimos de hardware
y software para su correcto funcionamiento y los comandos básicos para su
implementación.
Lección 16 JDK
El JDK (Java Development Kit) comprende todas las herramientas necesarias para la
programación en JAVA, a continuación, se presenta una relación de sus principales
componentes:
 Java: Gestor de aplicaciones Java. Esta herramienta es el intérprete de los archivos

de clase generados por el javac (compilador).
 Javac: Compilador de aplicaciones Java, convierte el código fuente en bytecode de
Java.
 Appletviewer: Esta herramienta es empleada para ejecutar y depurar aplicaciones
Java sin necesidad de un navegador web.
 Javadoc: Generador de documentación, genera automáticamente la documentación
del código fuente desarrollado a partir de los comentarios insertados en cada
archivo.
 Jar: Archivador, permite empaquetar en un único archivo JAR las librerías de clase
empleadas en un programa desarrollado.
16.1 Instalación de la herramienta
Para realizar la instalación del JDK de JAVA es necesario descargarlo desde la página
http://www.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 1 Descarga del Instalador JDK
Tomado de: http://www.oracle.com/technetwork/java/javase/downloads/index.html
Lección 17 Estructura básica de un programa en JAVA
El desarrollo de un programa en JAVA requiere los siguientes componentes básicos en su

estructura:
import java.awt.*; // Declaración de librerías de clase a emplear

//package prueba; // Declaración del paquete contenedor
public class nclase { // Declaración de la clase (nombre de la clase)
public nclase() { // Declaración del constructor de la clase
System.out.print("Texto a mostrar"); // Instrucciones (solo muestra un texto en pantalla)
} // Fin del constructor
public static void main(String[] args) { // Declaración del método principal
nclase prueba = new nclase(); // Creación de una instancia de la clase
} // Fin del método principal
} // Fin de la clase
Algunos apuntes para programar en Java:
 El lenguaje de programación Java es fuertemente tipado por lo cual debe prestarse

mucha atención a los nombres de librerías, clases, comandos etc. (distinguiendo
mayúsculas y minúsculas).
 Al documentar el código fuente se suelen emplear comentarios, estos se pueden

emplear de la siguiente manera:
o Comentarios de una sola línea: // comentario
o Comentarios de más de una línea: /* comentarios… */
o Comentarios de documentación: /** comentarios… */
 Una sentencia es una instrucción que se le da al programa para realizar una tarea
específica, toda sentencia debe finalizar con “;” ej. import java.awt.*;
 Un identificador es el nombre que identifica a una clase, una variable, un método o
una función, estos siguen las siguientes reglas:
o Debe iniciar con una letra, el carácter 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 números.
Lección 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-numéricos 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: Tamaño 8 bits. Valores desde -27 hasta 27 -1 (-128 a 127)
 short: Tamaño 16 bits. Valores desde -215 hasta 215-1 (-32768 a 32767)
 int: Tamaño 32 bits. Valores desde -231 hasta 231-1 (-2147483648 a 2147483647)
 long: Tamaño 64 bits. Valores desde -263 hasta 263-1 (-9223372036854775808 a
9223372036854775807)
 float: Tamaño 32 bits. Números en coma flotante de simple precisión. Estándar
IEEE 754-1985 (de 1.40239846e–45f a 3.40282347e+38f)
 double: Tamaño 64 bits. Números en coma flotante de doble precisión. Estándar
IEEE 754-1985. (de 4.94065645841246544e–324d a
1.7976931348623157e+308d.)
Sin embargo, los tipos de datos mayormente empleados en la programación básica con
JAVA son boolean, int y double.
18.2. Caracteres
En Java los caracteres no están 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 más utilizadas.
 \r: Retorno de carro (hace que se mueva el cursor a la primera posición de una
línea)
 \t: Tabulador horizontal (genera un espacio de separación entre caracteres)
 \n: Nueva línea (indica el final de una línea de texto y el paso a la siguiente).
 \\: 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 combinación de cifras
precedida por el signo más + (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) según 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 ejecución del programa. Ej. final
int VAR1=256;
Lección 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 continuación, se presentan algunas de los IDE para JAVA más populares:
IntelliJ IDEA: Considerado uno de los mejores entornos de desarrollo, posee soporte para
multiples lenguajes de programación.
Figura 2 Entorno del IDE intelliJ IDEA
Tomado de: http://pxhst.co/avaxhome/6a/a4/001fa46a_medium.png
Las siguientes son algunas de sus principales características:
 Asistencia inteligente de codificación

 Generación de código
 Estilo de código
 Documentación de código
 Navegación y búsqueda
 Análisis de código sobre la marcha
 Propiedades del editor de archivos
 Diseñador de GUI Swing

 Diagramación de clases UML
Eclipse: Entorno de desarrollo integrado de código abierto multiplataforma, el entorno de

desarrollo integrado (IDE) de Eclipse emplea módulos (plug-in) para proporcionar toda su
funcionalidad al frente de la plataforma de cliente enriquecido, a diferencia de otros
entornos monolíticos donde las funcionalidades están 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 técnicas avanzadas de refactorización y análisis de código.
Figura 3 Entorno del IDE Eclipse
Tomado de: https://natalibesa.files.wordpress.com/2013/01/eclipse_3-6_helios.jpg
Las siguientes son algunas de sus principales características:
 Editor de texto con resaltado de sintaxis

 Compilación es en tiempo real

 Control de versiones con CVS
 Integración con Ant
 Asistentes (wizards) para creación de proyectos
Netbeans: NetBeans es un proyecto de código 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 código abierto NetBeans en junio de
2000 y continúa 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 módulos. Un módulo es un archivo Java
que contiene clases de java escritas para interactuar con las APIs de NetBeans y un archivo
especial (manifest file) que lo identifica como módulo. Las aplicaciones construidas a partir
de módulos pueden ser extendidas agregándole nuevos módulos. Debido a que los módulos
pueden ser desarrollados independientemente, las aplicaciones basadas en la plataforma
NetBeans pueden ser extendidas fácilmente por otros desarrolladores de software.
Figura 4 Entorno del IDE Netbeans
Tomado de: http://holamundoandroid.webcindario.com/Imagenes/errores.jpg

Modularidad. Todas las funciones del IDE son provistas por módulos. Cada módulo provee
una función bien definida, tales como el soporte de Java, edición, o soporte para el sistema
de control de versiones. NetBeans contiene todos los módulos necesarios para el desarrollo
de aplicaciones Java en una sola descarga, permitiéndole al usuario comenzar a trabajar
inmediatamente.
JCreator: JCreator es una herramienta de desarrollo para JAVA. Es rápido, eficiente y

confiable. Es la herramienta perfecta para los programadores de todos los niveles
Figura 5 Entorno del IDE JCreator
Tomado de: http://www.cs.cornell.edu/courses/cs211/2006sp/IDEs/jcreator.html
Figura 6 Pestañas y resaltado de sintaxis en JCreator

JCreator posee una amplia gama de funcionalidades, tales como:
 Gestión de proyectos
 Plantillas de proyecto
 Finalización de código
 interfaz de depuración
 Editor con resaltado de sintaxis
 Asistentes
 Interfaz de usuario totalmente personalizable
Con JCreator es posible compilar o ejecutar directamente el programa Java sin necesidad
de activar el documento principal. JCreator identifica automáticamente el archivo con el
método principal o el archivo html cargador del applet de Java.
Para el desarrollo de las actividades prácticas del presente curso se recomienda el empleo
de JCreator (versión LE).
Para realizar la instalación del JCreator es necesario descargarlo desde la página

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 7 Descarga del Instalador de JCreator
Tomado de: http://www.jcreator.org/download.htm

Lección 20 Compilación y ejecución
Empleando el IDE JCreator se tiene acceso a las herramientas de compilación y ejecución

de un programa en JAVA, a continuación, se presenta la ubicación de dichas herramientas
en el entorno del IDE:
20.1 Compilación
Al emplear la herramienta de compilación, JCreator hace el llamado al compilador de JAVA

ejecutando el programa javac.exe.
Figura 8 Acceso a la herramienta de ejecución en JCreator
En caso de presentarse errores durante la compilación, el recuadro de la derecha

presentará el mensaje de error generado indicando el número de fila correspondiente. Si
el programa es compilado efectivamente, el recuadro enunciará “Process completed”.
20.2 Ejecución
Una vez compilado el programa en JAVA, se genera un nuevo archivo en el directorio

original con la extensión .class, el cual puede ser interpretado ejecutando el programa
java.exe.
Figura 9 Acceso a la herramienta de ejecución en JCreator
Los mensajes de salida producidos por la ejecución del programa serán visualizados en el
recuadro de la derecha (General output).
CAPÍTULO 5 ALGORITMOS BÁSICOS
En este capítulo se revisan los fundamentos geométricos y matemáticos a partir de los

cuales se generan los algoritmos que dibujan primitivas gráficas como líneas,
circunferencias y arcos. Para su desarrollo se utilizó el capítulo correspondiente del texto
de Claudio Delrieux y se complementa con la codificación en Java de los algoritmos.
Es muy difícil escoger un conjunto de primitivas gráficas que sea adecuado para la
representación de todo tipo de entidades gráficas. Sin embargo, el siguiente subconjunto
resulta suficiente en la práctica:
 Puntos: Se especifican a partir de su localización y color. Su discretización 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 práctica las
circunferencias o círculos se adoptan como primitivas. Se especifican con la posición
de su centro y su radio.
 Polígonos: Son indispensables para representar entidades sólidas. Se representan
a partir de la secuencia de puntos que determina la poligonal de su perímetro.
Lección 21 Especificación de una discretización
En el momento de escoger un método de discretización para una primitiva gráfica, 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 especificación más obvia, aunque no es fácil describirla en términos

formales. Normalmente se espera que un segmento de recta tenga una “apariencia recta”
más allá de que se hallan escogido los pixels matemáticamente más adecuados. Tampoco
debe tener discontinuidades. Debe pasar por la discretización del primer y último punto
del segmento. Debe ser uniforme, etc.
Simetría e invariancia geométrica: Esta especificación se refiere a que un método de

discretización debe producir resultados equivalentes si se modifican algunas propiedades
geométricas de la primitiva que se está discretizando. Por ejemplo, la discretización de un
segmento no debe variar si dicho segmento se traslada a otra localización en el espacio, o
si es rotado, etc.
Simplicidad y velocidad de cómputo: Como los métodos tradicionales de discretización

de primitivas se desarrollaron hace tres décadas, en momentos en que las posibilidades
del hardware y software eran muy limitadas, los resultados eran muy sensibles al uso de
memoria u operaciones aritméticas complejas. Por lo tanto, los métodos tienden a no
depender de estructuras complejas y a ser directamente implementables en hardware
específico de baja complejidad.
21.1 Métodos de discretización
Dada una primitiva gráfica a discretizar, debemos encontrar los pixeles que la representen
de la manera más correcta posible. Para ello, lo más adecuado es caracterizar
matemáticamente a dicha primitiva, de modo que su discretización pueda efectuarse en
forma sencilla. Entre los diversos métodos que pueden plantearse destacamos los dos
siguientes:
Evaluar su ecuación diferencial a diferencias finitas: Este método, denominado DDA

(discrete diference analyzer) consiste en plantear la ecuación diferencial de la primitiva a
discretizar, y luego evaluar dicha expresión a intervalos adecuados.
Análisis del error: Estos métodos fueron desarrollados por Bressenham y se basan en
analizar, dado un pixel que pertenece a la discretización de la primitiva, cuál es el próximo
pixel que minimiza una determinada expresión que evalúa el error que comete la
discretización.
Lección 22 Segmentos de recta
El análisis de los métodos de discretización de rectas parte de considerar el

comportamiento esperado en determinados casos particulares. Dichos casos surgen de
suposiciones específicas que simplifican el problema, pero que al mismo tiempo se pueden
generalizar a todos los demás casos por medio de simetrías. 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.
Esto equivale a trabajar en el “octavo” del espacio de pantalla sombreado en la siguiente

figura, donde el origen es el pixel que corresponde a la discretización del punto (x0;y0) y
la zona sombreada a los lugares donde puede ubicarse el punto (x1;y1 ).
Figura 10 Espacio designado para caracterizar la discretización de rectas
Tomado de: http://4.bp.blogspot.com/-26uTWj6B1jA/UGoQl5suE9I/AAAAAAAAABs/k4OeGRlO-

Rk/s1600/linea.jpg
22.1 Segmentos de recta DDA
Como ya se mencionó, los métodos DDA evalúan la ecuación diferencial de la primitiva a

intervalos finitos. En el caso particular de los segmentos de recta, la ecuación diferencial
es:
El método busca encontrar una secuencia de n + 1 puntos tales que (x0;y0) = (x0;y0);
(x1;y1); … (xn;yn) = (x1;y1). La discretización de cada uno de ellos son los pixeles de la
discretización del segmento. Esta propiedad, si bien es trivial, es de gran importancia
porque determina que la discretización 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 más eficiente.
Dada la ecuación diferencial y un incremento finito arbitrario , podemos pasar de

un pixel dado de la secuencia al siguiente por medio de la expresión
 determina la “frecuencia” de muestreo del segmento. Un valor muy pequeño determina

que muchas muestras producirán puntos que serán discretizados al mismo pixel. Por el
contrario, un valor muy grande determinaría que el segmento aparezca “punteado” en vez
de ser continuo como corresponde. Un valor práctico es elegir Δx = 1 y por lo tanto n =
Δx, es decir, la discretización tiene tantos pixeles como longitud tiene el segmento en la
variable que más varía (más uno, dado que la secuencia tiene n + 1 puntos). Al mismo
tiempo es fácil ver que
En la siguente figura es posible ver el resultado de discretizar un segmento particular por

el método DDA. Observese que los puntos extremos (x0; y0) a (x1;y1) son en efecto
puntos y por lo tanto están ubicados en cualquier lugar dentro del pixel que corresponde
a su discretización.
Figura 11 Discretización de un segmento de recta con DDA
Tomado de: http://4.bp.blogspot.com/-XFfcvMgQDxA/UjpT--

I5CxI/AAAAAAAAAOY/o26ChdudaXQ/s1600/dda.jpg
Un algoritmo sencillo escrito en lenguaje Java que computa la discretización de un

segmento de recta por el método DDA se muestra en la siguiente figura. Obsérvese que
se computan las variables en punto flotante, y que además se requiere una división en
punto flotante que corresponde al cálculo de m.
Un pequeño paréntesis para explicar algunas sentencias que pueden causar dudas:
1. Sobre el parámetro Graphics g (línea 26), corresponde al contexto gráfico de la

ventana (algo así como un lienzo) sobre el cual se dibuja.
2. La llamada al método setColor (línea 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 parámetros r, g, b. Esta
llamada al método setColor permite modificar el color del “lápiz” que dibuja sobre
el contexto gráfico.
Figura 12 Codificación en Java del algoritmo DDA de dibujo de líneas
Tomado de: Autoría propia
3. Java no tiene una sentencia básica para dibujar puntos (pixeles), en este caso se
utiliza la sentencia g.drawRect (línea 35) para dibujar un rectángulo con un ancho
y alto de 0, que en su ejecución se traduce a pintar un único pixel ubicado en el
punto enviado como parámetro.
4. En la misma sentencia g.drawRect (línea 35) se utiliza el “casting” a enteros para
lograr la discretización de las coordenadas flotantes.
La ejecución del algoritmo daría como resultado algo similar a lo mostrado en la siguiente
figura para 3 líneas diferentes.
Para poder discretizar un segmento de recta en

cualquiera de las posibilidades es necesario considerar
las simetrías que se aplican. Si por ejemplo no se
cumple que Δy = (y1 - y0) ≥ 0, entonces hay que
considerar pendientes negativas (simetría A), caso que
el algoritmo de la Figura anterior realiza
automáticamente.
En cambio, si Δx = (x1 - x0 ) ≥ 0, entonces es

necesario decrementar a x en el ciclo e iterar mientras
Figura 13 Ejecución del algoritmo DDA en Java no sea menor que x1 (simetría B).
Por último, si no se cumple que Δx ≥ Δy, entonces es necesario intercambiar los roles de
las variables x e y (simetría C). Cualquier combinación de situaciones se puede resolver
con combinaciones de simetrías (ver figura siguiente).
Figura 14 Simetrías 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 además se requiere una división en punto flotante para
computar la pendiente. El mérito del algoritmo que vamos a presentar consiste en que
todas las operaciones se realizan en aritmética entera por medio de operaciones sencillas,
y por lo tanto, su ejecución es más rápida y económica, y es de fácil implementación con
hardware específico.
El punto de partida del análisis es el siguiente. Si la discretización de los puntos extremos

del segmento debe pertenecer a la discretización 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.
Luego, si p es un pixel que pertenece

a la discretización del segmento,
entonces en las condiciones
particulares mencionadas, el próximo
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”)
Figura 15 Si p pertenece a la discretización el próximo punto será E o D como se muestra en la Figura 15.
La decisión de ir hacia el paso E o D se toma en función del error que se comete en cada
caso. En este algoritmo se considera que el error es la distancia entre el
centro del pixel elegido y el segmento de recta, medida en dirección 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 16).
Figura 16 Error al desplazarse en E Figura 17 Elección del próximo pixel
Tomado de: Autoría propia Tomado de: Autoría propia
En general, si en p el error es e, la actualización del error es:
• Paso a E : e = e + m
• Paso a D : e = e + m –1
Por lo tanto, la elección del paso E o D depende de que el valor absoluto de e+m sea o no
menor que el valor absoluto de e+m-1. Expresado de otra manera, sea e el error en un
determinado pixel. Si e +m> 0.5 entonces el segmento de recta pasa más cerca del pixel
D, y si no, pasa más cerca del pixel E (ver Figura 17).
Una de las economías de cómputo del método proviene de poder evaluar el error
preguntando por cero. Es fácil 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 economía proviene de realizar
manipulaciones algebraicas para efectuar un cómputo equivalente, pero en aritmética
entera. Como se evalúa el error por cero, multiplicar el error por una constante no afecta
el resultado. Por lo tanto, multiplicamos el error por 2Δx. A partir de dicho cambio, se
constatan las siguientes igualdades:
• Paso a E: e = e+2Δy
• Paso a D: e = e+2(Δy-Δx)
De esta manera todas las operaciones se efectúan en aritmética entera, con su

correspondiente agilización del tiempo de procesamiento.
Figura 18 Algoritmo de Bressenham para segmentos de recta
La implementación del algoritmo de Bressenham para segmentos de recta se muestra en

la Figura 46. Teniendo en cuenta que los productos por 2 en aritmética entera se efectúan
con un desplazamiento a izquierda, es posible observar que el mismo utiliza operaciones
elementales e implementables con hardware específico muy sencillo.
Lección 23 Discretización de circunferencias
Como en el caso de los segmentos de recta, en la discretización de circunferencias o

círculos es posible trabajar un sólo segmento de la circunferencia y se obtienen las demás
por simetría. Igualmente se dispone de algoritmos DDA y de Bressenham para el dibujo
de circunferencias. En este aparte se mostrará una adaptación del algoritmo DDA a partir
de la ecuación de la circunferencia, tomado de la página 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
Estas ecuaciones serán las que ocuparemos para calcular cada punto (x,y) del círculo,
donde el r será obviamente el radio de círculo y  será el ángulo que forma el radio con la
parte positiva del eje x. En forma gráfica sería así:
Figura 19 Circunferencia con coordenadas polares
El ángulo deberá estar en radianes ya que las funciones de seno y coseno que incluye Java,
trabajan con los ángulos en radianes. La fórmula para transformar grados a radianes es la
𝑔𝑟𝑎𝑑𝑜𝑠∗ 𝜋
siguiente: 𝑟𝑎𝑑𝑖𝑎𝑛𝑒𝑠 = 180
Entonces para dibujar el círculo de un radio determinado, solamente tenemos que hacer
un ciclo desde 0 hasta 360, pero con incrementos pequeños, calcular cada punto con las
ecuaciones en coordenadas polares e ir dibujando cada punto. El ciclo en vez de ir de 0 a
360 (ángulos en grados) irá de 0 a 6.28 (360*3.14/180=6.28) ya que el ángulo debe estar
en radianes.
Como dijimos el ciclo de 0 a 6.28 debe hacerse con incrementos pequeños, no contando
de uno en uno, ya que, para un círculo de radio muy grande, podrían aparecer huecos
entre un punto y el siguiente, por lo tanto, tenemos que usar un incremento fraccionario.
El valor 0.005 produce buenos resultados. Dibujar el círculo punto a punto es una tarea un
poco lenta, debido a que se debe calcular en cada punto el seno y el coseno del ángulo, y
estas funcionas son muy lentas. Para solucionar esto se pueden crear tablas predefinidas
o pre-calculadas. En la siguiente figura se muestra el código en Java que permitiría dibujar
el círculo en una ventana.
Figura 20 Código en Java para el dibujo de circunferencias
Nótese que al calcular las coordenadas

x e y, estamos sumándoles las
coordenadas cx e cy. Esto se hace para
trasladar el centro del círculo a
cualquier punto que queramos. De esta
forma, para dibujar un círculo
solamente es necesario especificar las
coordenadas del centro (cx, cy), el
radio, el color del círculo y el contexto
gráfico.
Figura 21 Resultado de la ejecución del algoritmo dibujo de

circunferencias

Lección 24 Dibujo de polígonos
Se considera un polígono una figura cerrada, formada a partir de varias líneas. Para la
discretización de polígonos se considerarán 2 tipos de polígonos: los irregulares y los
regulares, en concordancia con lo mostrado por Steven R Davidson en su curso de gráficos
disponible en internet.
24.1 Polígonos irregulares
La graficación de polígonos irregulares se realiza a partir de un conjunto de puntos que se

unen secuencialmente, el polígono se cierra al unir el primer y último puntos. A
continuación, se muestra el código Java que dibujaría un polígono irregular a partir de un
vector de elementos de tipo Punto y el correspondiente número de puntos.
Figura 22 Código en java para el dibujo de polígonos
Cabe recordar que, en Java, al igual que en

C, el índice de los vectores inicia en 0. Por
tanto, la primera línea se dibuja desde el
primer punto (índice 0) hasta el segundo
punto (índice 1), continúa del segundo al
tercero (índice 2) y así sucesivamente,
hasta dibujar la línea del penúltimo punto
(índice N-2) hasta el último punto del
vector (índice N-1). Al finalizar el ciclo,
dibuja la línea de cierre del polígono entre
Figura 23 Resultado de la ejecución del algoritmo de dibujo de el último punto (índice N-1) y el primero
Polígonos
(índice 0).
Como se podrá deducir del código el objeto Punto incluye las coordenadas x e y de un
punto en el plano cartesiano.
24.2 Polígonos regulares
Un polígono regular se compone de aristas/lados de igual longitud. Esto implica que el

ángulo entre cada arista contigua es el mismo. Si trazamos un segmento del centro a un
vértice y otro segmento del centro a otro vértice contiguo, entonces el ángulo entre estos
dos segmentos es un divisor de 2π = 360°. En otras palabras, cada ángulo mencionado es
inversamente proporcional a la cantidad de lados del polígono regular. Podemos usar la
siguiente fórmula:
• α = 2π / N, donde α es el ángulo, y N es la cantidad de lados
Crearemos polígonos regulares en base a una circunferencia que circunscribe nuestro

polígono regular. Esto implica, que el centro de la circunferencia coincide con el centro
geométrico de cualquier polígono regular. Para esto, necesitamos usar algunas funciones
trigonométricas, junto con el ángulo ya calculado. El paso principal es averiguar la
coordenada del siguiente vértice de nuestro polígono. Usaremos las siguientes fórmulas:
• 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 geométrico de la circunferencia y
del polígono.
Al agregar el centro a nuestra fórmula, conseguimos mover el centro geométrico del origen
(0,0) al que nosotros deseemos. En la siguiente figura se muestra el código que generaría
los polígonos regulares.
Figura 24 Código en java para dibujar polígonos regulares

Los parámetros de entra para el método especifican el número de lados del polígono (N),
el punto centro de la circunferencia (centro), el radio de la circunferencia (radio), el
contexto gráfico (g) y el color.
Observe que es necesario hacer un proceso

de conversión a entero del dato resultante
en la multiplicación del coseno del ángulo
por el radio (líneas 46 y 47), ya que las
coordenadas de los puntos se deben
expresar como datos enteros. Los datos así
calculados se utilizan en la conformación de
cada vértice del polígono (línea 48).
Finalmente, una vez obtenidas las
coordenadas de todos los vértices del
polígono se realiza la llamada al proceso de
Figura 25 Resultado de la ejecución del algoritmo para dibujar
dibujarPolígonos explicado en la sección polígonos regulares
anterior (línea 50).
Lección 25 Llenado de áreas
Si bien existen diversos métodos, aquí presentaremos el más económico y difundido, que
se basa en encontrar la intersección de todos los lados del polígono con cada línea de
barrido (a y constante), por lo que el método se denomina conversión scan del polígono.
Este método es de gran importancia porque se generaliza a una clase de algoritmos
denominados scan-line para resolver determinados problemas de iluminación y sombreado
en tres dimensiones.
Todo polígono plano puede descomponerse en triángulos. Por lo tanto, el triángulo será la
base del análisis de la conversión scan de polígonos en general. Para computarla es
necesario dimensionar dos arreglos auxiliares de enteros minx, maxx que para cada línea
de barrido almacenarán el menor y mayor x respectivamente.
Figura 26 Dibujo scan de un polígono
Tomado de: http://sergioabrilcampuzano.blogspot.com.co/2012/09/algoritmos-graficos.html
1. Inicializar minx a infinito y maxx a menos infinito.

2. Discretizar cada arista del triángulo (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 línea de minx[y] a maxx[y].
CAPÍTULO 6 TRANSFORMACIONES
Naturalmente, así como se desean dibujar gráficos, también se desea moverlos, rotarlos,
cambiar su tamaño, etc. En esta sección se presentan los principales fundamentos
matemáticos que subyacen al proceso de transformación de los gráficos en dos
dimensiones, a partir de lo mostrado por el euitmt WWW team de la Universidad de Oviedo.
Se espera que el estudiante en su proceso de profundización realice los algoritmos que
permitan hacer estas transformaciones.
Una de las mayores virtudes de los gráficos generados por ordenador es la facilidad con se
pueden realizar algunas modificaciones sobre las imágenes. Un gerente puede cambiar la
escala de las gráficas de un informe. Un arquitecto puede ver un edificio desde distintos
puntos de vista. Un cartógrafo puede cambiar la escala de un mapa. Un animador puede
modificar la posición de un personaje. Estos cambios son fáciles de realizar porque la
imagen gráfica ha sido codificada en forma de números y almacenada en el interior del
ordenador. Los números son susceptibles a las operaciones matemáticas denominadas
transformaciones.
Las transformaciones permiten alterar de una forma uniforme toda la imagen. Es un hecho
que a veces es más fácil modificar toda la imagen que una porción de ella. Esto supone un
complemento muy útil para las técnicas de dibujo manual, donde es normalmente más
fácil modificar una pequeña porción del dibujo que crear un dibujo completamente nuevo.
Es esta sección se verán transformaciones geométricas como el cambio de escala, la

traslación y la rotación, como se expresan de una forma sencilla mediante multiplicaciones
de matrices y se introducirán las coordenadas homogéneas con el fin de tratar de una
manera uniforme las transformaciones y como anticipo de las transformaciones producidas
por la perspectiva en los modelos tridimensionales.
Lección 26 Breve repaso sobre matrices
Las imágenes gráficas que se han generado están compuestas por un conjunto de
segmentos que están representados por las coordenadas de sus extremos. Algunos
cambios en la imagen pueden ser fácilmente realizados mediante la aplicación de algunas
operaciones matemáticas sobre estas coordenadas. Antes de ver algunas de las posibles
transformaciones, es necesario repasar algunas de las herramientas matemáticas que se
necesitarán, como la multiplicación de matrices
Para nuestro propósito, consideraremos que una matriz es un conjunto n- dimensional de

números, 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.
La operación matricial que más se empleará será la multiplicación de matrices. La

multiplicación de matrices es algo más complicada que la simple multiplicación de dos
números; 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 número de columnas de la primera matriz A es igual al número 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 multiplicación de números, la multiplicación de matrices no
es conmutativa, es decir, aunque podemos multiplicar A por B no podemos multiplicar B
por A, porque B tiene sólo dos columnas que no se corresponden con las tres filas de A.
Cuando multiplicamos dos matrices se obtiene como resultado otra matriz. Este matriz
producto tendrá el mismo número de filas que la primera de las matrices que se multiplican
y el mismo número de columnas que la segunda, es decir, a partir del ejemplo, la
multiplicación de la matriz A3x3 con la matriz B3x2 da como resultado la matriz C3x2.
Los elementos del matriz producto C se expresan en función de los elementos de las
matrices A por B mediante la siguiente fórmula:
En nuestro caso particular de C = A B

La multiplicación de matrices es una operación asociativa. Esto significa que, si tenemos

varias matrices para multiplicar a la vez, no importa cuales multipliquemos primero. De
forma matemática: A(BC) = (AB) C
Esta es una propiedad muy útil ya que permitirá combinas varias transformaciones gráficas
en una sola transformación, produciendo como resultado unos cálculos más eficientes.
Existe un conjunto de matrices que cuando multiplican a otra matriz, la reproducen. Por
esta razón reciben el nombre de matrices identidad. Son matrices cuadradas (tienen el
mismo número de columnas y de filas) con todos los elementos 0 excepto los elementos
de la diagonal principal, que valen todos 1. Por ejemplo
De forma matemática A = AI
Lección 27 Cambios de escala
¿Cómo se aplica todo esto a los gráficos? Bueno, 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 aplicación entre el punto original P1 y el nuevo punto P2. Si
suponemos la imagen compuesta por los vértices de un polígono. ¿Qué pasará si
transformamos cada uno de los puntos mediante una multiplicación por una matriz T y
dibujamos el resultado? ¿Qué aspecto tendrá esta nueva imagen? La respuesta, 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 líneas
horizontales serán dos veces más 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.
antes de la transformación después de la transformación
En general, las transformaciones de la forma
Cambian el tamaño y la proporción 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.
Lección 28 Rotación
La siguiente transformación gráfica que vamos a ver es la rotación. Para introducir esta
transformación recordaremos brevemente algunos conceptos trigonométricos. Sea un
punto p1=(x1, y1) y lo giramos alrededor del origen un ángulo  para pasar a una nueva
posición p2=(x2, y2). Queremos encontrar la transformación que convierte (x1, y1) en
(x2, y2). Pero, antes de comprobar si alguna transformación es la adecuada, debemos
saber primero que (x2, y2) debe escribirse en función de (x1, y1) y . Para esto es
necesario recordar las razones trigonométricas de seno y coseno.
A la vista de esta figura sabemos que
Es importante señalar que cuando la longitud del segmento es la unidad
También emplearemos las siguientes relaciones trigonométricas para determinar cómo gira
un punto:
Ahora estamos listos ya para determinar la rotación 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 análoga:
Dando
A la vista de estas ecuaciones podemos imaginar una matriz que relacione las coordenadas
del punto original y del punto girado:
Así la matriz de transformación para una rotación en sentido contrario a las agujas del reloj
de ángulo alrededor del origen es:
Para una rotación en el sentido de las agujas del reloj, basta sustituir en la expresión
anterior el valor del ángulo por -□. Así nos queda
Lección 29 Coordenadas homogéneas y traslación
Supongamos que necesitamos realizar un giro alrededor de un punto que no es el origen.

Si fuésemos capaces de trasladar toda la imagen de un punto a otro de la pantalla,
podríamos realizar este giro moviendo primero la imagen hasta que el centro de rotación
coincida con el origen, luego realizamos la rotación y, por último, devolvemos la imagen a
su posición original.
Desplazar la imagen recibe el nombre de traslación. 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 una imagen (Tx, Ty), cada punto (x1, y1) se convierte
en uno nuevo (x2, y2) donde:
Desafortunadamente, esta forma de describir la traslación no hace uso de matrices, por lo

tanto, no podría ser combinada con las otras transformaciones mediante una simple
multiplicación de matrices.
Tal combinación sería deseable; por ejemplo, hemos visto que la rotación alrededor de un
punto que no sea el origen puede realizarse mediante una traslación, una rotación u otra
traslación. Sería deseable combinar estas tres transformaciones en una sola
transformación 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
método recibe el nombre de coordenadas homogéneas. En estas coordenadas, los puntos
están 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 fácilmente
dividiendo los dos primeros números 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 homogéneas 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 rotación en sentido anti-horario

Se convierte, usando coordenadas homogéneas, en:
Si aplicamos esta matriz a un punto (xw, yw, w) obtenemos
Para dar el punto correctamente rotado
La matriz de transformación para una traslación Tx, Ty en coordenadas homogéneas es:
Para comprobar que esto es así apliquemos la matriz a un punto genérico
Que nos da el punto trasladado
Lección 30 Rotación alrededor de un punto
Determinemos ahora la matriz de transformación para la rotación en sentido antihorario

alrededor del punto (xC, yC).
Haremos esta transformación en tres pasos. Primero trasladaremos el punto (xC, yC) al
origen, luego haremos la rotación alrededor del origen y, por último, devolveremos el
centro de rotación a su posición original.
La traslación que desplaza al punto (xC, yC) al origen es

La rotación es
Y la traslación que devuelve al centro de rotación a su posición es
Para transformar un punto podemos realizar la siguiente multiplicación:
Pero, teniendo en cuenta la propiedad asociativa de la multiplicación de matrices, podemos

multiplicar todas las transformaciones primero para obtener la matriz global de
transformación.
Cabe destacar que esta matriz se puede formar también mediante una rotación inicial de
ángulo  y una traslación definida por los valores contenidos en la tercera fila
30.1 Otras transformaciones
Las tres transformaciones de cambio de escala, rotación y traslación son las más útiles y
las más usadas. Son también posibles otras transformaciones. Dado que una matriz 2x2
cualquiera
Puede convertirse en una matriz 3x3 en coordenadas homogéneas como
Algunas de estas transformaciones como matrices 2x2:
-1 0
0 1 Reflexión respecto al eje y
1 0
0 -1 Reflexión respecto al eje x
-1 0
0 -1 Reflexión respecto al origen
0 1
1 0 Reflexión respecto a la recta y=x
0 -1
-1 0 Reflexión respecto a la recta y=-x
1 α
0 1 Deformación en el eje y
1 0
b 1 Deformación en el eje x
Las primeras tres reflexiones son simples cambios de escala, pero con factores negativos.
Las simetrías 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 más fácil aplicar la matriz resultante.
De igual forma se pueden construir transformaciones de cambio de escala y rotación a

partir de las deformaciones
Referencias Bibliográficas
con Clase.net. (2009). Graficos con Clase. Obtenido de http://graficos.conclase.net/curso/index.php
Departamento de Ciencia de la Computacion e Inteligencia Artificial. (2010). Introducción a OpenGL. Obtenido

de https://eva.fing.edu.uy/pluginfile.php/89013/mod_resource/content/2/Cap%C3%ADtulo_3.pdf
Lipa, J. (2011). Graficación por Computadora. Obtenido de

https://sites.google.com/site/grafcomputacional/home
Universidad de Oviedo. (1999). Dibujo Asistido por Computador. Obtenido de

http://www.mieres.uniovi.es/egi/dao/apuntes/
Universidad Nacional del Sur - Departamento de Ingeniería eléctrica. (2011). Cosas que pueden ser útiles.
Obtenido de http://www-2.dc.uba.ar/materias/cgr/util.htm

Unidad 2

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Unidad 2

Caricato da

Copyright:

Formati disponibili

Universidad Nacional Abierta y a Distancia – UNAD

Vicerrectoría Académica y de Investigación - VIACI

UNIDAD 2 – ALGORITMOS BÁSICOS DE DIBUJO EN 2 DIMENSIONES

Material adaptado Red de Tutores del curso Computación Gráfica.

CAPÍTULO 4 REQUERIMIENTOS DE SOFTWARE

Este capítulo presenta las herramientas necesarias para la construcción y ejecución de

 Java: Gestor de aplicaciones Java. Esta herramienta es el intérprete de los archivos

16.1 Instalación de la herramienta

Figura 1 Descarga del Instalador JDK

Tomado de: http://www.oracle.com/technetwork/java/javase/downloads/index.html

Lección 17 Estructura básica de un programa en JAVA

El desarrollo de un programa en JAVA requiere los siguientes componentes básicos en su

import java.awt.*; // Declaración de librerías de clase a emplear

Algunos apuntes para programar en Java:

 El lenguaje de programación Java es fuertemente tipado por lo cual debe prestarse

 Al documentar el código fuente se suelen emplear comentarios, estos se pueden

Lección 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.

Un tipo especial de caracteres comprenden la secuencia de escape, empleados para

Lección 19 IDE para JAVA

El JDK (Java Development Kit) de Java presentado previamente no contiene un IDE

A continuación, se presentan algunas de los IDE para JAVA más populares:

Figura 2 Entorno del IDE intelliJ IDEA

Tomado de: http://pxhst.co/avaxhome/6a/a4/001fa46a_medium.png

Las siguientes son algunas de sus principales características:

 Asistencia inteligente de codificación

 Diseñador de GUI Swing

Eclipse: Entorno de desarrollo integrado de código abierto multiplataforma, el entorno de

Figura 3 Entorno del IDE Eclipse

Tomado de: https://natalibesa.files.wordpress.com/2013/01/eclipse_3-6_helios.jpg

Las siguientes son algunas de sus principales características:

 Editor de texto con resaltado de sintaxis

 Compilación es en tiempo real

La plataforma NetBeans permite que las aplicaciones sean desarrolladas a partir de un

Figura 4 Entorno del IDE Netbeans

Tomado de: http://holamundoandroid.webcindario.com/Imagenes/errores.jpg

JCreator: JCreator es una herramienta de desarrollo para JAVA. Es rápido, eficiente y

Figura 5 Entorno del IDE JCreator

Tomado de: http://www.cs.cornell.edu/courses/cs211/2006sp/IDEs/jcreator.html

Figura 6 Pestañas y resaltado de sintaxis en JCreator

Tomado de: http://www.cs.cornell.edu/courses/cs211/2006sp/IDEs/jcreator.html

JCreator posee una amplia gama de funcionalidades, tales como:

Para realizar la instalación del JCreator es necesario descargarlo desde la página

Figura 7 Descarga del Instalador de JCreator

Tomado de: http://www.jcreator.org/download.htm

Lección 20 Compilación y ejecución

Empleando el IDE JCreator se tiene acceso a las herramientas de compilación y ejecución

Al emplear la herramienta de compilación, JCreator hace el llamado al compilador de JAVA

Figura 8 Acceso a la herramienta de ejecución en JCreator

Tomado de: http://www.cs.cornell.edu/courses/cs211/2006sp/IDEs/jcreator.html

En caso de presentarse errores durante la compilación, el recuadro de la derecha

Una vez compilado el programa en JAVA, se genera un nuevo archivo en el directorio

Figura 9 Acceso a la herramienta de ejecución en JCreator

Tomado de: http://www.cs.cornell.edu/courses/cs211/2006sp/IDEs/jcreator.html

CAPÍTULO 5 ALGORITMOS BÁSICOS

En este capítulo se revisan los fundamentos geométricos y matemáticos a partir de los

 Puntos: Se especifican a partir de su localización y color. Su discretización es

Lección 21 Especificación de una discretización

En el momento de escoger un método de discretización para una primitiva gráfica, es

Apariencia: Es la especificación más obvia, aunque no es fácil describirla en términos

Simetría e invariancia geométrica: Esta especificación se refiere a que un método de