Está en la página 1de 43

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
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

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.
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

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).
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

 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.
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

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.
....
� C1 W1ktionary • !), !§)
ti-
android ) wiktionary )
��������-.
LookupActivity }
.....

1,1 PrOJf'Ct /Llbrary/android sdk-mac_ 0-1� e WordWidget.java � LookupActivity.java � -�S_m�l-_W-k l�p-�.¡a� _•_��[jg=c-w��g�e_t�w_r_d�x�m_�-...,�

1..... [����r�j�c_
-
-
�J '¡i
if (query != null) {
n
o
3

" T �res
• �anlm
I> t::;i drawable fi
Pu:h our requl'sted 'iOrd -c tne ti tle bar
publishProgress(query);
String wikiText = ExtendedWikiHelper .getPageContent(9.!!_ery, true);
,;;,gnmMrif:#M#MDIU§tlttMlt#lffifh!ffffii@tittJI II
1
• e.,1ayou1 }
} catch (ApiException e) {
[&! about.xml
Log.e(TAG, "Probleni 11aking w:iktionaa request", e);
[j¡) lookup.xml } catch (ParseException e) {
[&l widget_message.xml Log.e(TAG, "Problea uking w!ktionao; request", e);
[jg widget_word.xml
• C.menu if (parsedText = nult) {
• Ülvalues parsedText = getString(R. string. eepty_result);
I> c:Jxml
.,. Osrc return parsedText¡
T í:l'lcom.example.android.wiktionary
@'il ExtendedWikiHelper
lf> 'il LookupAaivity '*"·.-*I
@()vernde
<&) 'il SimpleWiklHelper protected void onProgressUpdate{String ... args) {
@'il WordWídget String searchWord = args [0[;

J
setEntryTit le(searchWord);
[il AndroidManifest.xml
!JIWíktionary.iml

Debug C1 Wiktio ary O·!..


----====---==::::::;===----=:
a Logcat t:CI 1 •a ,;g � 'o O • l;¡
Debugger
E"l Console t. CI


la! Variables 7" CI �1
� Frames ?" CI +¡ 1:1 I> 51 this = (com.example.android.wiktionary.LookupAaivitySLookupTask@830007844944) @
, + [ • "<11> Asyn... :
J

, ¡;;¡ .e, Q doln8ackgroundO 294 . I> i§ args • Uava.lang.String[1]@830007846328)

,;; .,. El query = "'idea·


@l V � dolnBackgroundQ:264, is®
7"1'
I> i!lvalue = (char[4]@830007783256)
�call0 185. AsyncTaskS

.
[i!] hashCode = 3227383
�innerRun0.306, suture
[ffloffset • O
� runo 138. FutureTask
·�
i!I � runWorkero 1088. Thr
[i}coum • 4
t:l
�,;.; '2:lrunO 581, ThreadPoolE
g parsedText
.. el wikíText""'
= null
•• • English•"' \n<dtv class= \·sister-wiki
,¡¡. � �runo 1019. Thread QJ

[jí s. O.bug j � §: a Android Logcat

TODO

Condition 'query !• null' is always 'true,'


290:23 MacRoman

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
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

 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.

· --
Cd-1 lowr« �tc:tor
fik
!;', • • � • SQl'ch
0firl..ptit 1!1'9tT�."
m
• ai.,.,
,¡, -1ndow
4 ont1'i � i, • • <;, •

.
...,¡ 1 •
� °'-'tJ,ne ... .._,�ble .. 8"'.tc,o � c.,,cul
• �J�, • !stc • f1!ttl�.Ad.'tllfd>Jjl)JIYIHS,U • �,-Qt •
----------------------.::Kt•1t
- c,o.)awa.:wc.wb,l•P•·t.n.paoc•: ,.,.
. .0 0 1 s� -�

· - [/ l �
!. p.t,d.aqe

' • ,""4rt. j•"•·��.,or..�epuor:.:


--
.:ltt�.Mt."'ftpp,¡i:
JI .......

" • !.t'A cceul'lo:. •r.4 -•,�" �:�• 1.at:.,nu, trcc.1


J}ls,i.o.Wt'IIC.oMtolJw.1.
O
Ci1
• ttue. eeee eet ree cor All J5PX tllea. <e: I>
• :,¡.,1ecl •• 4et•uh. tu �•11·u 'iillt.hó,.;t. coau"11e:. <br />
ª ....
,
IJ!I!•..".".'..
•1-•'t • l•'! l!i""'
''l�j-1..1
t.t} tw'louf(t'Kt,,old)f'fJ•.¡• 1t

lt.lu,r ¡¡¡ ..

. 1i!I""'"'

'5 «rtrols

u.,-.tl•11••Y
·o
-
, ·�IIÑti;,,s
\)JW�rolJ•v•lll

,.,
U pobltc ctu, P�
e e¡ .....

,.
7 4 pnv•t4 •Wt.la tln•l 1.0W•r J�r -

Loqver.vrU,oglJ'l'.rCP�.al••••:
'76 pabUa 1t.•uc tt-J St.rlftf1 DIIJ»Cciledl'� • '"Dup.1.t.cllocll•qe•r

"
' 18
,t
pro�i..d S.rrJ•t.0,•C..t. CG!:'lt.tw.t.:
pr-ot.et.od iut09 cbuS.t:
to

 Editor de texto con resaltado de sintaxis


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

 Diseñador de GUI Swing


 Diagramación de clases UML
IJ
Strla¡;i prot�t.ed
fl.ltPat.:h:
..
ú) titff'.. lff9 12

il) °'"°'n1"•J•Q u
f !
82

...
hc lcC,,S.rvl•t/lMrl»,t. �-NfJHt.; f!l JMs
l)Ol)
htrJ•.... 110!

, P'Qbl ac •tt,,S.rvl•tbq,,t.MN rupo�H:

19 pw)Ua 1/Ctp.Ses•'º" ICIJlODJ


a;"'
••
,: 11 �· H. �o I ltltl .. J.:n tJ.tt.r.[1'1,4&"')" (OOM''fU•t1o:ri •ot"4" ID,
8, .....,,
¡¡,¡.
a.11os, ...,1"eos,,....11

--
41'\ .-.nhl ,� , ....,_.. ,..._,...v,,,,.,u,t.l<"l"IT'1:
llJRt�'-''-'..,... Cl,l�O U)

5/1l/10S:A7 ....

ft.Ml:the ......... �,...,.�iSl
N&!t ...,-. 4.ll'ldo edd ,1t1�L:t et.,_.
'1a11os1,� ,,_.""fd 1b,--,.!m N41t...,._�s1nt.iritó,ii.
1.103
0
.a/la/1012' l'M
110,

...
• 1101

1 1100 "1'110 11 10 J.M •W.I� fN\�d\,t�-f'(f�fltffl(}-p¡;blKtobtuUtdiAJSP)Ccorrtro_

e� "' S/1/lOt'".S!N.t. Mnl•IH•wy ,..,,...,.�ff#.""41tllM ....�llo·fi4;tlC

e 197 1/7/IOt.Sl� ·'"'�t.....,..


Mtd·IK•hlm MU1ns��'-'tM'f1t.Ne•,1t,et ftl'MW'ltf'lfflle
10/20/09 &S9 MA •mtcllOftl'V �tMN1kOprlt1ns
t.96 briot�,.CMWfMotlOft..bt•fl t,y,•dl.0.9
1WJ/Ott'.o6J.M •nv..,1-,.wy

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


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

 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.
- - - - - - - ---- - --------------------- - - - -------- -

e HolaMundo - NetBeans ID[ 6.8 [J(g]�


File Edit View Navigate Source Refactor Run Debug Profile Team Toots Window Help

�<_d_f= l_c_o_f_g_> �v= 1} °a � !O..•I Search ((tri+!)

[a •
:Pr•.. :services Start Page x
e, MainActivity.java x �--------------------------�(.!_•_�E)=�(g)=,

�·
13 C1 HolaMundo
Él
/•• Called when the act1v1ty is f1rst created. •/
17 El
Source Packages
t- �Bt.1ainActivity.java
L ��.java

19 -
@Override
public void onCreate(Bundle icicle) {
Test Packages 20 super.onCreate(icicle);
Resources 21 // ToDo add your GUI 1nitialization code here
Libraries 22
Test Libraries (J. TextView tv = nee TextView(this);
C1 AndroidManifest.xml 24 tv.setText( "¡Hola Hundo Andro1d1 ");
25 setContentView(tv);
: onCreate - Navigator •o x 26
27
Members View v
28
13· &l MainActivity : : Activity
29
- O onCreate(Bundle icicle)
V
� x !Tasks
: Output - HolaMundo (-res-compile)

C1> ínit:
deps-jar:

1
Created dir: C:\Docu.m.ents and Settings\Compaq_Propietario\Mis docu.m.entos\NetBeansProjects\Hola
� BUILD SUCCBSSFUL (total time: l second)

< >
20 l 32 !NS
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
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

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


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

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


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

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

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


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

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

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.
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

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
memoria y software eran
u operaciones muy limitadas,
aritméticas los Por
complejas. resultados eran
lo tanto, losmuy sensibles
métodos al uso
tienden a de
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.
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

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 discretzació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
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

 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 Discretzació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
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

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 Codifcació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).
Tomado de: Autoría propia
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

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 discretzar segmentos de recta

Tomado de: Autoría propia

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.
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
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 discretzación el próximo punto será E o D como se muestra en la Figura 15.
Tomado de: Autoría propia

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

Tomado de: Autoría propia

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.
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

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

Tomado de: Autoría propia

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

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
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

Lección 23 Discretización de circunferencias


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
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

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

Tomado de: Autoría propia

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

Tomado de: Autoría propia


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

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

Tomado de: Autoría propia

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
Figura 23 Resultado de la ejecución del algoritmo de dibujo de del polígono entre el último punto (índice
Polígonos
N-1) y el primero (índice 0).
Tomado de: Autoría propia

Como se podrá deducir del código el objeto Punto incluye las coordenadas x e y de un

punto en el plano cartesiano.


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

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

Tomado de: Autoría propia


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

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
Figura 25 Resultado de la ejecución del algoritmo para
de dibujarPolígonos explicado en la sección dibujar polígonos regulares
anterior (línea 50).
Tomado de: Autoría propia

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.
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

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].
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

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

números, por ejemplo:


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

CAPÍTULO 6 TRANSFORMACIONES

Para nuestro propósito, consideraremos que una matriz es un conjunto n- dimensional de

números, por ejemplo:


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

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


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

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
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

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.
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

Cada una de las nuevas coordenadas x tiene el doble de valor que las antiguas. Las líneas
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

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:


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

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.
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

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


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

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
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

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 α
Deformación en el eje y
0 1

1 0
Deformación en el eje x
b 1

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.
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

Referencias Bibliográficas

con Clase.net. (2009). Grafcos 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). Grafcació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 útles.
Obtenido de http://www-2.dc.uba.ar/materias/cgr/util.htm