PDF de programación - 8 - Vistas & sonidos

Capítulo 8

8

Vistas & Sonidos

No hagan música para una audiencia vasta y desconocida o para el mercado o el rating, ni
siquiera para algo tan tangible como el dinero. Aunque sea crucial ganarse la vida, esa no
debería ser la inspiración. Háganlo por ustedes mismos.
-Billy Joel

Página anterior: Be My Valentine
Arte Fractal por Sven Geier (www.sgeier.net)

Mencionamos anteriormente que la noción de computación en estos días se
extiende mucho más allá de los simples cálculos numéricos. Escribir programas de
control de robots es computación, al igual que hacer proyecciones acerca de la
población mundial. Utilizando dispositivos como los iPods, pueden disfrutar música,
videos y shows de radio y de televisión. La manipulación de sonido e imagen
también pertenece al reino de la computación y en este capítulo les introduciremos
el tema. Ya han visto cómo, usando el robot, pueden tomar fotos de varias escenas.
También pueden tomar fotos similares de su cámara digital. Usando las técnicas
computacionales básicas que han aprendido hasta ahora, verán en este capítulo
cómo pueden realizar computación sobre formas y sonidos. Aprenderán a crear
imágenes usando computación. Las imágenes que crearán pueden ser utilizadas
para visualizar datos e incluso para fines estéticos para explorar sus facetas
creativas. También presentaremos algunos fundamentos del sonido y de la música y
les mostraremos cómo también pueden llevar a cabo formas similares de
computación utilizando la música.
Vistas: Dibujar
Si han usado una computadora durante cualquier cantidad de tiempo, deben haber
usado algún tipo de aplicación para dibujar. Usando una típica aplicación de dibujo,
pueden dibujar varias formas, colorearlas, etc. También pueden crear dibujos
usando los comandos de dibujo provistos en el módulo de la librería Myro. Para

127

Capítuo 8

dibujar cualquier cosa, primero deben tener un lugar donde dibujarlo: un bastidor o
una ventana. Pueden crear esa ventana usando el comando:

myCanvas = GraphWin()
Si han ingresado el comando de arriba en el IDLE,
inmediatamente verán emerger una pequeña ventana gris
(ver imagen abajo a la derecha). Esta ventana les servirá
como el bastidor para crear dibujos. Por defecto, la
ventana creada por el comando GraphWin es de 200
píxeles de alto y 200 píxeles de ancho y su nombre es

Una ventana de

gráficos

“Graphics Window”. No es una forma muy inspiradora para comenzar, pero el
comando GraphWin tiene algunas otras variaciones. Primero, para cerrar la pantalla,
pueden usar el comando:

Mi obra maestra

200x300

myCanvas.close()
Para crear una ventana de gráficos de cualquier tamaño y
con un nombre especificado por ustedes, pueden usar el
comando de abajo:

myCanvas = GraphWin(“Mi obra maestra”, 200, 300)
El comando de arriba crea una ventana llamada “Mi obra
maestra” que tendrá 200 píxeles de ancho y 300 de
altura (ver imagen a la derecha). Pueden cambiar el color
de fondo de un gráfico como se muestra abajo:

myCanvas.setBackground(“white”)

128

Vistas & Sonidos

Pueden nombrar cualquiera de los colores en el comando de arriba, desde los
colores comunes como “rojo”, “azul”, “gris”, “amarillo”, o colores más exóticos,
desde “AntiqueWhite” (blanco antiguo) hasta “LavenderBlush” (toque de lavanda) o
“WhiteSmoke” (humo blanco). Los colores se pueden crear de muchas maneras como
veremos abajo. Varios miles de nombres de colores han sido pre-asignados
(Google: lista de nombres de colores) y pueden ser usados en el comando de
arriba.

Ahora que saben cómo crear una paleta (y hacerla desaparecer) e incluso cómo
determinar un color de fondo, es hora de ver qué se puede dibujar dentro de ella.

Pueden crear y dibujar todo tipo de objetos geométricos: puntos, líneas, círculos,
rectángulos, e incluso textos e imágenes. Dependiendo del tipo de objeto que
deseen dibujar, primero deben crearlo y luego dibujarlo. Sin embargo, antes de
hacer esto, también deben conocer el sistema de coordenadas de la ventana de
gráficos.

En una ventana de gráficos con un ancho W y una altura H (por ejemplo. 200x300
píxeles), el píxel (0, 0) está en la esquina derecha superior y el píxel (199, 299)
estará en la esquina derecha inferior. Es decir, las coordenadas-x aumentan a
medida que van hacia la derecha y las coordenadas-y aumentan a medida que van
hacia la izquierda.

El objeto más simple que pueden crear es un punto. Esto se hace de la siguiente
manera:

p = Point(100, 50)
Es decir, p es un objeto que es un Punto cuya coordenada-x está en 100 y cuya
coordenada-y está en 50. Esto sólo crea un objeto Punto. Para dibujarlo, deben
enunciar el comando:

p.draw(myCanvas)
La sintaxis del comando de arriba puede parecer un poco extraña al principio. Lo
vieron brevemente cuando presentamos las listas en el Capítulo 5 pero no lo
desarrollamos. Definitivamente es diferente a lo que han visto hasta ahora. Pero si
piensan acerca de los objetos que han visto hasta el momento: números, strings,
etc., la mayoría tienen operaciones estándares definidas (como +, *, /, etc.). Pero al
pensar en objetos geométricos, no hay notaciones estándares. Los lenguajes de
programación como Python proveen facilidades para modelar cualquier tipo de
objetos y la sintaxis que usamos acá es la sintaxis estándar que puede ser aplicada
a todo tipo de objetos. La forma general del comando enunciado para un objeto es:

<objecto>.<funcion>(<parametros>)
Por lo tanto, en el ejemplo de arriba, <objecto> es el nombre p que anteriormente
fue definido para ser un objeto Point, <funcion> es dibujar, y <parametros> es
myCanvas. La función draw requiere a la ventana de gráficos como parámetro. Es
decir que le están pidiendo al punto representado por p que sea dibujado en la

129

Capítuo 8

ventana especificada como su parámetro. Los objetos Point tienen otras funciones
disponibles:

>>> p.getX()
100
>>> p.getY()
50
Es decir, dado un objeto Point, pueden obtener sus coordenadas x- e y-. Los objetos
se crean usando sus constructores como el constructor Point(x, y) de arriba.
Usaremos muchos constructores en esta sección para crear los objetos gráficos. Un
objeto línea puede ser creado de manera similar a los objetos puntos. Una línea
requiere que se especifiquen los dos puntos
extremos. Por lo tanto una línea de (0, 0) a (100, 200)
puede ser creada como:

L = Line(Point(0,0), Point(100,200))
Y pueden dibujar la línea usando el mismo comando
de dibujo de arriba:

L.draw(myCanvas)
El dibujo de la derecha muestra los dos objetos que
hemos creado y dibujado hasta el momento. Con
respecto a Point, pueden obtener los valores de los
puntos extremos de una línea:

>>> inicio = L.getP1()
>>> inicio.getX
0
>>> fin = L.getP2()
>>> fin.getY()
200
Aquí hay un pequeño loop de Python que puede ser usado para crear y dibujar
varias líneas:

for n in range(0, 200, 5):
L=Line(Point(n,25),Point(100,100))
L.draw(myCanvas)

En el loop de arriba (los resultados se muestran a la derecha), el valor de n
comienza en 0 y aumenta de a 5 después de cada iteración hasta llegar a 200 sin
incluirlo 200 (por ej. 195). Para cada valor de n se crea un objeto Line (línea) nuevo
con las coordenadas de inicio (n, 25) y el punto final en (100, 100).

Realizar la siguiente actividad: Prueben todos los comandos introducidos hasta
el momento. Luego observen los efectos producidos por el loop de arriba.
Modifiquen el incremento de 5 en el loop de arriba a diferentes valores (1, 3, etc.) y
observen el efecto. Luego, prueben el siguiente loop:

for n in range(0, 200, 5):
L = Line(Point(n, 25), Point(100, 100))

130

Vistas & Sonidos

L.draw(myCanvas)
wait(0.3)
L.undraw()
La función de undraw (desdibujar) hace exactamente lo que implica el nombre. En el
loop de arriba, para cada valor que toma n, se crea una línea (como se observa
arriba), se dibuja, y luego, después de una espera de 0.3 segundos, se borra.
Nuevamente, modifiquen el valor del incremento y observen el efecto. Prueben
también modificar la cantidad de tiempo en el comando wait.

También pueden dibujar varias formas geométricas: círculos, rectángulos, óvalos y
polígonos. Para dibujar un círculo (o cualquier forma geométrica), primero deben
crearla y después dibujarla:

C = Circle(centerPoint, radius)
c.draw(myCanvas)
centerPoint es un objeto Point y su radio está especificado en píxeles. Por lo tanto,
para dibujar un círculo centrado en (100, 150) con un radio de 30, pueden usar los
siguientes comandos:

C = Circle(Point(100, 150), 30)
c.draw(myCanvas)
Los rectángulos y los óvalos se dibujan de modo similar (ver detalles al final del
capítulo). Todos los objetos geométricos tienen muchas funciones en común. Por
ejemplo, pueden obtener el punto central de un círculo, un rectángulo o un óvalo
utilizando el comando:

centerPoint = C.getCenter()
De manera predeterminada, todos los objetos se dibujan en negro. Hay varias
formas de modificar o especificar los colores de los objetos. Para cada objeto
pueden especificar n color para su contorno así como un color de relleno. Por
ejemplo, para dibujar un círculo centrado en (100, 150), radio 30, contorno color
rojo, y relleno color amarillo:

C = Circle(Point(100, 150), 30)
C.draw(myCanvas)
C.setOutline(“red”)
C.setFill(“yellow”)
Por cierto, setFill (determinar relleno) y setOutline (determinar contorno) tienen el
mismo efecto en los objetos Point y Line (dado que no hay lugar para rellenar con
ningún color). Además, la línea o el contorno dibujado es siempre se un píxel de
ancho. Pueden modificar este ancho usando el comando

setWidth(<pixels>):
C.setWidth(5)
El comando de arriba modifica el ancho del contorno del círculo a 5 píxeles.

131

Capítuo 8

Realizar la siguiente actividad: Prueben todos los comandos introducidos aquí.
Además, miren al final del capítulo para ver detalles sobre cómo dibujar otras
formas.

Anteriormente mencionamos que varios colores tienen nombres asignad