Processing

Processing http://127.0.0.1:51235/temp_print_dirs/eXeTempPrint...
Processing
Programando con Processing
Comenzamos el estudio de la programación de sistemas informáticos. Todas las aplicaciones que se utilizan a diario
han sido elaboradas mediante programación. Hay muchos lenguajes de programación: Fortran, Cóbol, C++, Java,
VisualBasic, Python, etc que quizá te suenen. Nosotros vamos a introducirnos en el mundo de la programación
utilizando un lenguaje denominado Processing.
Los lenguajes de programación no sólo se aplican y utilizan en la ciencia y la ingeniería, sino que también se usan en
arte, diseño, etc.
Pueden ser de interés para empezar a programar los tutoriales de Khan Academy.
La web de referencia es Processing.org, de donde se puede descargar processing así como encontrar muchos
tutoriales y ejemplos.
Para ejemplos de diseño artístico con processing puede visitarse la web de Casey Reas http://reas.com/
1 de 94 11/01/15 15:03
Conceptos
Antes de realizar proyectos sencillos con processing veremos algunos conceptos básicos sobre código, pantallas,
píxeles, líneas, variables y las instrucciones Setup and Draw.
2 de 94 11/01/15 15:03
Código
En este tema vas a hacer una serpiente roja interactiva, un reloj con post-it y un juego inspirado en Newton. Aprenderás
lo básico de programación así como algo de la teoría detrás de los gráficos en las pantallas. Esta segunda parte es
importante debido a que, aunque este curso trate sobre programación, el objetivo es siempre crear algo útil y divertido.
Para hacer uso de la pantalla en tus proyectos, es bueno saber cómo funciona. Cuando esta lección esté terminada,
estaremos encantados de ver qué otros juegos o proyectos interactivos serás capaz de crear.
3 de 94 11/01/15 15:03
Processing
Processing
Los códigos de programación son comandos comprensibles para los humanos. El código se transforma en los
programas que los computadores entienden. Los computadores sólo entienden en realidad ceros y unos, por lo que se
necesita una manera de traducir nuestro código humano al código de los computadores. Este es el motivo por el que
escribimos el código en un editor de texto con propiedades especiales. Este editor es el software de desarrollo llamado
Entorno de Desarrollo Integrado, abreviado por sus siglas del inglés IDE (Integrated Development Environment), el cual
es capaz de traducir el código al lenguaje máquina. Cuando el IDE transforma nuestro código al lenguaje máquina, es
lo que se llama compilar.
4 de 94 11/01/15 15:03
Cada ordenador, smartphone, servidor de internet, ascensor, horno – actualmente cualquier dispositivo con inteligencia
digital – tiene diferentes capacidades y por lo tanto requiere de un lenguaje máquina algo diferente al resto. Existe un
lenguaje de programación llamado Java que, una vez compilado, es capaz de utilizarse fácilmente en diferentes
dispositivos. Hay muchas maneras diferentes de programar en Java, pero nosotros nos centraremos en utilizar
Processing.
Processing es código abierto y software libre, esto significa que se puede descargar de Internet, instalarlo sin coste
alguno, y modificar su código. Processing funciona en cualquier tipo de ordenador de sobremesa o portátil en los
sistemas operativos: Windows, Mac OSX y Linux.
El IDE de Processing es muy sencillo, hay una barra de herramientas que puedes utilizar para:
Poner en marcha un programa
Detener un programa
Crear un nuevo programa
Abrir un programa
Almacenar el programa en el disco duro del ordenador
Exportar el programa
Processing crea programas que se ejecutan directamente dentro de tu ordenador. También puedes exportarlos y
enviarlos a los ordenadores de otras personas. Los programas, una vez exportados en código máquina, se llaman
aplicaciones. Puedes exportar el mismo programa para que se ejecute en un ordenador, en un teléfono, o en un sitio
web.
Para hacer tus propios programas, lo único que necesitas saber es cómo utilizar un teclado y cómo funciona la pantalla
del ordenador. Esto te será útil cuando escribas tus propios programas interactivos.
5 de 94 11/01/15 15:03
Pantallas y pixeles
Pantallas y pixels
Las pantallas se utilizan para representar imágenes. Esas imágenes pueden ser dinámicas, como en las películas, o
estáticas, como en las fotografías. Se puede incluir texto, como en los documentos, o solo gráficos. La mayoría de las
veces, las imágenes en la pantalla son una mezcla de muchas cosas; incluyen animaciones, textos, estadísticas, etc.
Pixels – Resolución
Las pantallas están hechas de puntos que llamamos pixels. Por lo general, cuantos más pixels tenga una pantalla,
mejor será. Expresamos la calidad de la pantalla en función de su cantidad de pixels, esa cantidad es lo que llamamos
resolución. Normalmente, hablamos de una pantalla en función de su anchura y altura. Por ejemplo, muchos
proyectores tienen una resolución de 1024×768 pixels. Esto significa que tiene 1024 pixels de ancho y 768 pixels de
alto.
Colores
Cada píxel se puede iluminar de muchos colores diferentes. Una vez más, de cuantos más colores se pueda pintar el
píxel, mejor será la pantalla. Los colores en la pantalla del ordenador se expresan como una combinación de tres
componentes de color diferentes: rojo (R), verde (G) y azul (B). Cualquier color que representes en una pantalla, se
puede hacer mezclando los componentes RGB en diferentes cantidades.
La cantidad de color para cada componente se expresa con un número entre 0 y 255. 0 representa el valor mínimo de
un color, por ejemplo, si tiene 0 del componente rojo, significa que ese color no contiene rojo, sin embargo, si tiene 255
del componente rojo, significa que está saturado de color rojo.
Si las coordenadas son 255,255,255 – los píxels producirán blanco. Si los valores R,G,B son 0,0,0 – los píxels
mostrarán negro. Si gradualmente cambias los valores R,G,B en la misma proporción desde 255,255,255 a 0,0,0, verás
que el color cambia de blanco a negro.
La siguiente imagen muestra cómo el color de un píxel se funde de blanco a negro y cómo cambian los valores de R,
G, y B:
6 de 94 11/01/15 15:03
Coordenadas
Puedes escribir programas que cambien los pixels de la pantalla. Puedes incluso cambiar un solo pixel. La acción de
acceso a un solo pixel en la pantalla es lo que llamamos direccionar un pixel. La ubicación de un pixel se determina
mediante coordenadas.
Cada pixel tiene 2 coordenadas:
La coordenada horizontal es la que llamamos coordenada X (anchura, o en inglés width).

La coordenada vertical, es la que llamamos coordenada Y (altura, o en inglés height).
Si recuerdas lo que aprendiste en clase de matemáticas y física, puedes dibujar gráficos, puntos, líneas y curvas
usando sus coordenadas. Esta misma idea se aplica a la pantalla del ordenador, la única diferencia, es que el
llamado origen de coordenadas de la pantalla del ordenador es la esquina superior izquierda.
7 de 94 11/01/15 15:03
8 de 94 11/01/15 15:03
Línea
Línea
La mejor manera de aprender acerca de la programación es escribiendo tus propios programas. Vamos a empezar por
hacer el programa lo más corto posible usando Processing. Será un programa para dibujar una línea. Esto te va a
ayudar a entender cómo funciona.
Abre el IDE y haz click en el icono para crear un nuevo programa, esto te mostrará un nuevo programa vacío.
Escribe el siguiente código:
1 line(0, 0, 100, 100);
Ejecuta el programa apretando el botón ejecutar: , que es el primero en la barra de herramientas. Esto es lo que
deberías ver ahora por pantalla:
Sólo utilizamos un único comando aquí:
line(x1, y1, x2, y2):Dibuja una línea desde la coordenada x1,y1 hasta la x2,y2. En este ejemplo, desde 0,0 –
esquina superior izquierda, hasta 100,100 – esquina inferior derecha. Esto es debido a que la ventana es 100
por 100 píxels.
Lo que también necesitas saber es:
Debes terminar cada línea de código con un puto y coma, ‘;‘. Si te olvidas, el código no podrá ser compilado ni
ejecutado.
Por defecto, las ventanas de Processing son de 100×100 píxels con un fondo gris. El color por defecto para
dibujar es el negro. Pero por supuesto, todo esto se puede cambiar.
Vamos a escribir un programa que dibuje dos líneas de diferentes colores sobre un fondo blanco:
1 background(255);
2 line(0, 0, 100, 100);
3 stroke(0, 0, 255);
4 line(0, 100, 100, 0);
Los nuevos comandos utilizados aquí son:
background(gray): Establece el color de fondo desde 0 – negro, hasta 255 – blanco. También puedes
utilizar background(red, green, blue)para establecer el color que tú quieras.
9 de 94 11/01/15 15:03
stroke(red, green, blue): Establece el color de la línea. Cada valor de color puede ser desde 0 hasta 255. En
este caso, la línea es de color azul puesto que red=0, green=0 y blue=255.
Cuando ejecutes el programa, lo que deberías ver por pantalla es:
Tus programas se ejecutarán siempre de arriba a abajo línea por línea. Este programa empieza estableciendo el color
de fondo en blanco. Luego dibuja la línea negra igual que en el ejemplo anterior, desde la coordenada 0,0 hasta la
100,100. En tercer lugar, establece el color de línea a azul, justo antes de dibujar esta segunda línea desde la
coordenada 0,100 – esquina inferior izquierda, hasta la 100,0 – esquina superior derecha.
No olvides guardar tu programa en el disco duro o en una memoria USB si quieres llevártelo a casa.
¡Sigue experimentando!
Añade más líneas de diferentes colores y cambia el color de fondo.
Cambia el orden del programa. ¿Qué ocurre si, por ejemplo, cambias el color de fondo al final?
10 de 94 11/01/15 15:03
Variables
Variables
Las variables son algo que usas todo el tiempo en programación. Son como un contenedor para diferentes tipos de
datos. Para cada variable, necesitas especificar qué tipo de datos contendrán, cuál es el nombre de la variable y qué
valor se le asigna.
Piensa en ellas como en botes. Digamos que tienes dos botes, uno para galletas y otro para palabras, estos son los
tipos de datos. Ahora hay que darles un nombre a cada bote; cookieJar (bote de galletas) y jarOfWord (bote de
palabras). Ahora tú decides que poner en cada bote. En el cookieJar pones una galleta de doble cocholate y en el
jarOfWord decides poner “Arduino”. Ahora cada bote tiene un valor.
Puedes cambiar el contenido de los botes, su valor, en cualquier momento, pero siempre y cuando sea del mismo tipo.
Por ejemplo, puedes cambiar la galleta de doble chocolate por una oreo y “Arduino” por “spaceinvader”.
Para hacerlo más claro, vamos a escribir un programa utilizando variables. Escribiremos un programa que dibuje, de
nuevo, dos líneas, pero esta vez utilizaremos estas variables:
int value1 = 0;
11 de 94 11/01/15 15:03
int value2 = 100;

line(value1, value1, value2, value2);
line(value1, value2, value2, value1);
Nuevos comandos:
int variableName = value: Crea una variable del tipo integer, un número entero. Puedes llamarla con cualquier
nombre de tu elección, pero para hacerlo más sencillo para tu futuro yo (quien probablemente leerá el código en
el futuro y querrá entender lo que hizo en el pasado) asegúrate que el nombre va acorde con el contexto en el
que se usa la variable. value es el valor que decides darle al contenido de tu variable.
Lo que hace el programa es dibujar una linea desde la coordenada (0,0) hast la (100,100) y luego dibuja una segunda
linea desde la coordenada (0,100) hasta la (100,0). Puesto que value1 contiene el valor 0, en cualuier lugar del código
donde escribamos value1 significará 0. Esto significa que si quieres cambiar la cruz que hemos dibujado, basta con
cambiar el valor de la variable en lugar de cambiar el valor en los ocho lugares diferentes dentro de line(). Pruébalo tu
mismo y verás.
Tipos de datos
Los tipos de datos más comunes que utilizarás son los siguientes:
int: Número entero, p.ej., 2, 99 o 532.

float: Número decimal, p.ej., 2.76, 8.211 o 900.3.
boolean: Puede ser verdadero o falso.
char: Un caracter, p.ej. ‘r’, ‘2’ o ‘%’.
String: Una secuencia de carateres, p.ej. “hola”, “¡Me encanta programar!” o “&%!@¤”.
Processing incluye algunas variables de sistema para hacerlas más accesibles dentro de tus programas. Un ejemplo
es width y height. Estas variables devuelven la anchura (width) y altura (height) de la ventana de tu programa. Éste es
un pequeño ejemplo:
size(400, 200);
ellipse(width/2, height/2, width, height);
Comandos nuevos:
size(width, height): Establece el tamaño de la ventana en píxels.

ellipse(x, y, x diameter, y diameter): dibuja un elipse centrado en las coordenadas x e y. El tamaño se
establece con x diameter ey diameter. Cuando estos dos parámetros son iguales, el resultado es un círculo.
width: la anchura de la ventana de programa.

height: la altura de la ventana de programa.
12 de 94 11/01/15 15:03
Este programa empieza estableciendo el tamaño de ventana. Luego dibuja la elipse en el medio de la ventana. No
importa el tamaño de la venta, el elipse la llenará siempre por completo. Intenta cambiar el tamaño de la ventana.
13 de 94 11/01/15 15:03
Setup and Draw
Setup y draw
Los tipos de programas que hemos hecho hasta ahora son los llamados programas estáticos. Esto significa que nunca
cambian. Se ejecutan una única vez y cuando llegan a la última línea de código, se paran. Si queremos que un
programa sea interactivo, tenemos que habilitar la entrada de datos continuamente mientras el programa se ejecuta.
Esto sólo es posible si la ejecución es continua.
Con Processing, puedes crear programas que se ejecuten continuamente utilizando la función draw(). Esta función
repetirá el bloque de código una y otra vez hasta que el programa se pare. Sin embargo, no todo el código escrito
necesita ser repetido continuamente. Para el código que sólo necesita ser ejecutado una única vez, debes usar la
función llamada setup().
Vamos a escribir de nuevo un programa que dibuje una línea, pero esta vez utilizando las nuevas funciones:
void setup() {
size(300, 300);
}
void draw() {
line(0 ,0, width, height);
}
Nuevos comandos:
setup(): El código dentro de las llaves se ejecuta una única vez cuando el programa empieza. Sólo necesitamos
establecer el tamaño de la ventana una vez, al principio del programa.
draw(): El código entre llaves se ejecuta una y otra vez. Se ejecuta línea por línea, de arriba a abajo hasta la
última línea, donde vuelve a empezar desde el principio.
Este programa establece el tamaño de ventana a 300 x 300 pixels y luego dibuja una línea sobre toda la ventana una y
otra vez. En este momento, todavía no se puede apreciar que esto esta pasando una y otra vez, así que vamos a
escribir otro programa para hacerlo más visible.
14 de 94 11/01/15 15:03
void setup() {
size(300,300);
}
void draw() {
line(0, 0, mouseX, mouseY);
}
Nuevos comandos:
mouseX: La coordenada X del puntero del ratón.

mouseY: La coordenada Y del puntero del ratón.
Este programa te permite interactuar con la pantalla mientras mueves el ratón, como muestra la siguiente imagen. Esto
es porque cada vez que el código dentro de draw() se ejecuta, una nueva línea se dibuja. El segundo punto de la línea
cambia dependiendo de la posición del puntero del ratón.
Como puedes ver, se deja un rastro de líneas por donde vas moviendo el ratón. Esto es porque cada línea dibujada no
es eliminada ni se dibuja nada más por encima. ¿Qué crees que ocurrirá cuando ejecutes el siguiente programa?
void setup() {
size(300,300);
}
15 de 94 11/01/15 15:03
void draw() {
background(255);
line(0, 0, mouseX, mouseY);
}
Hemos añadido una línea de código al principio de draw(), esto sirve para establecer el color de fondo a blanco. Como
puedes ver, este programa solo muestra una línea todo el tiempo. Esto se debe a que, como hemos explicado antes, el
código dentro de draw() se ejecuta una y otra vez, línea por línea de arriba a abajo. Por tanto, la primera cosa que pasa
cada vez que draw() se ejecuta es que se crea el fondo blanco, sobre escribiendo todo lo anterior. Después una nueva
línea es dibujada, y luego el fondo se vuelve a poner en blanco… Eso se repetirá una y otra vez por siempre.
16 de 94 11/01/15 15:03
Proyectos
17 de 94 11/01/15 15:03
Serpiente Roja
Serpiente roja
En este miniproyecto vas a aprender a programar un objeto que se mueve en la pantalla, pero que además deja el
trazado del movimiento del ratón. Iremos escribiendo el código paso por paso, añadiendo nuevas funcionalidades en
cada uno.
18 de 94 11/01/15 15:03
Dibuja un círculo
Dibuja un círculo
Empezaremos dibujando un círculo rojo.
/*
* Red Snake (Serpiente Roja)
*
* Programa para crear una serpiente roja moviendose por la pantalla
*
* Paso 1:
* - crea un programa en una ventana de 400x400 pixels
* - dibuja un circulo rojo de 30 pixels de diametro
* - haz que el dibujo no tenga borde, usa el comando 'noStroke()'
*
* (c) 2013 D. Cuartielles, Arduino Verkstad, Suecia
*/
void setup() {
size(400, 400);
}
void draw() {
noStroke(); // Dibuja formas sin 'borde'
fill(255, 0, 0); // Haz que las figuras sean de color rojo
ellipse(100, 100, 30, 30); // Circulo de 30 pixels de diametro
}
Nuevos comandos:
noStroke(): Este comando es usado para no dibujar el contorno de las siguientes figuras.
fill(red, green, blue): Establece el color utilizado para rellenar las siguientes figuras. En este ejemplo rellenará
el círculo de color rojo.
Veamos los otros comandos utilizados:
size(ancho, alto): establece el tamaño de la ventana del programa en píxels.

ellipse(x, y, diametroX, diametroY): dibuja un elipse con centro en x,y. El tamaño se establece
con diametroX y diametroY. Cuando estos dos parámetros son iguales, el resultado es un círculo.
19 de 94 11/01/15 15:03
Lo que el programa hace es primero establecer el tamaño de la ventana a 400 x 400 píxels. Nosotros decidimos no
utilizar contornos y utilizar el color rojo para el relleno. Por último, dibuja un círculo en las coordenadas 100,100 con un
diámetro de 30 píxels.
20 de 94 11/01/15 15:03
Haz que el círculo se mueva
Haz que el círculo se mueva
En este paso haremos que el círculo se mueva con el ratón, dejando un rastro en la pantalla.
/*
*
*
* Paso 2:
* - haz que el circulo se mueva en funcion de las coordenadas del
* raton (usa 'mouseX' y 'mouseY')
*
*/
void setup() {
size(400, 400);
}
void draw() {
noStroke();
fill(255, 0, 0);
ellipse(mouseX, mouseY, 30, 30); // Circulo de en función de las coordenadas del ratón
}
21 de 94 11/01/15 15:03
Todo lo que hemos hecho aquí ha sido reemplazar las coordenadas de la elipse con mouseX y mouseY. Esto hace que el
círculo siempre siga al puntero del ratón. Al no redibujar el fondo de la pantalla, hacemos que el círculo deje su trazo.
22 de 94 11/01/15 15:03
Serpiente roja paso 2 by tecnologiapedromercedes, via OpenProcessing.
23 de 94 11/01/15 15:03
Cambia gradualmente el color
Cambia gradualmente el color
Queremos ahora que el color cambie durante el programa, y para hacerlo es más conveniente utilizar una variable para
el color en lugar de un número constante. Simplemente declara la variable rojo con la que modificar el valor del color.
/*
*
*
* Paso 3:
* - almacena la intesidad de rojo en una variable
*
* (veras como este programa no cambia en nada frente al Paso 2)
*
*/
int rojo = 255;
void setup() {
size(400, 400);
}
void draw() {
noStroke();
fill(rojo, 0, 0);
ellipse(mouseX, mouseY, 30, 30); // Circulo de en funcion de las coordenadas del raton
}
Fíjate que esto no causará ningún cambio en la aplicación, como puedes ver en la siguiente imagen.
24 de 94 11/01/15 15:03
25 de 94 11/01/15 15:03
Cambia gradualmente el color II
Cambia gradualmente el color II
Ahora vamos a cambiar el color. El cambio de color dependiendo del tiempo puede hacerse de diferentes
maneras. El color puede cambiar entre 0 y 255 (negro y rojo respectivamente). El siguiente ejemplo muestra
cómo reducir la cantidad de rojo en cada instante que se ejecuta draw().
/*
* Red Snake
*
* Program to create a red snake moving through the screen
*
* Step 4:
* - chage the level or red with the time
*
* (c) 2013 D. Cuartielles, Arduino Verkstad, Sweden
*/
int rojo = 255;
void setup() {
size(400, 400);
}
void draw() {
rojo = rojo - 1; // Make the red a little darker
if (rojo < 0) rojo = 255; // Once it reaches black, make it light red again
noStroke();
fill(rojo,0,0);
ellipse(mouseX, mouseY, 30, 30);
}
Nuevos comandos:
if( test ){ statements }: Comprueba si test es cierto. En este ejemplo, si rojo es menor que 0. Si es así,
los statements entre llaves son ejecutados. En este ejemplo, establece red a 255 de nuevo. Si por el
contrario, test es falso, el programa procede a ejecutar el código después de las llaves. Utilizando
declaraciones “if” te permite decir al programa que código ejecutar.
26 de 94 11/01/15 15:03
Al principio de este programa red es 255, pero cada vez que draw() se ejecuta, red se reduce en una unidad.
Esto hace que el color del círculo se haga más y más negro en cada iteración. Cuando red ha descendido
mucho, tal que es menor que 0, se reinicia a 255. Este es el motivo por el que el color cambia de repente de
negro a rojo.
27 de 94 11/01/15 15:03
28 de 94 11/01/15 15:03
Usa la función sin()
Usa la función sin()
Para cambiar los colores más gradualmente, utilizaremos una función sinusoidal que oscile continuamente entre negro
y rojo.
/*
*
*
* Paso 5:
* - cambia la intensidad del rojo en funcion del tiempo
* - para un mejor efecto visual y evitar que el rojo cambie
* de forma brusca, utiliza una funcion matematica (por ejemplo
* el seno 'sin()')
* - necesitaras una variable para contar el paso del tiempo
* - el '20' en la ecuacion de calculo del rojo determina cada cuanto
* se repite un color
*
* Nota: la funcion 'sin()' devuelve un numero decimal ('float' o en coma flotante)
* y por eso hay que emplear la funcion 'int()' para poder asignarla a la
* variable que almacena el color rojo
*
*/
int rojo = 255;

int tiempo = 0;
void setup() {
size(400, 400);
}
void draw() {
tiempo = tiempo + 1; // Incrementa el tiempo en una unidad
rojo = int(128 * (1 + sin(tiempo * 2 * PI / frameRate / 20))); // Cambia el rojo, repite el color cada
noStroke();
fill(rojo, 0, 0);
ellipse(mouseX, mouseY, 30, 30);
}
Nuevos comandos:
29 de 94 11/01/15 15:03
sin( angle ): Esta función se utiliza para calcular el seno de un ángulo. En nuestro caso, no tiene nada que ver
con ángulos pero, ¿te acuerdas de la gráfica del seno de la clase de matemáticas? Bien, esa gráfica es el por
qué es útil para nosotros. Siempre que quieras crear una oscilación suave y continua de un movimiento o, en
este caso, un cambio de color, sin() es muy práctico de usar.
PI: Esto es una variable constante que contiene el valor del número pi.
frameRate: Esto es otra variable que te da el framerate (frecuencia de ejecución) del programa.
En este ejemplo, puedes ver como el color cambia gradualmente de forma continua. Esto se debe a que el color se
establece por una función senoidal dependiendo de la frecuencia de ejecución del sketch (framerate) y la
variable time que cuenta las veces que draw() se ha ejecutado.
30 de 94 11/01/15 15:03
31 de 94 11/01/15 15:03
Cambiando de forma
Cambiando de forma
El siguiente paso es cambiar la forma de la serpiente. Esto se consigue fácilmente cambiando el tamaño del círculo,
utilizando también una función senoidal.
/*
*
*
* Paso 6:
* - cambia el tamaño del circulo en funcion del tiempo
* - al igual que antes, necesitaras crear una variable
* para almacenar el valor del tamaño
* - puedes usar la misma funcion que para el color, pero
* cambiando la frecuencia
* - para mejor efecto visual, añade transparencia al color
*
*/
int rojo = 255;

int tiempo = 0;
int diametro = 50;
void setup() {
size(400, 400);
}
void draw() {
tiempo = tiempo + 1;
rojo = int(128 * (1 + sin(tiempo * 2 * PI / frameRate / 20)));
diametro = int(50 * (1 + sin( tiempo * 2 * PI / frameRate / 5))); // Modifica el diametro del circulo co
noStroke();
fill(rojo, 0, 0, 50); // Añade un 50% de transparencia al color
ellipse(mouseX, mouseY, diametro, diametro);
}
Nuevos comandos:
fill(red, green, blue, alpha): Hemos añadido un cuarto parámetro alpha a la función fill(). Esto establece la
transparencia del color y su rango va de 0 a 255.
32 de 94 11/01/15 15:03
Lo que hemos hecho en este último paso es reemplazar el tamaño de la elipse con una nueva variable, diameter. El
tamaño se recalcula con una función senoidal cada vez que draw() se ejecuta.
33 de 94 11/01/15 15:03
34 de 94 11/01/15 15:03
Sigue experimentando
La modificación más sencilla que puedes hacer es cambiar el color de la serpiente. Puede ser tan fácil como
mover la variable red al segundo o tercer parámetro de la función fill().
Puedes también añadir otras variables para cambiar los otros parámetros del color de forma independiente.
35 de 94 11/01/15 15:03
Resultado Final
Serpiente Roja by tecnologiapedromercedes, via OpenProcessing.
Serpiente Roja by tecnologiapedromercedes, via

OpenProcessing.
36 de 94 11/01/15 15:03
Reloj de Post-it
Reloj de Post-it
En este miniproyecto vas a crear un reloj donde los números estarán hechos a partir de fotografías de notas adhesivas
o Post-it. Para ello, aprenderás a utilizar imágenes en tus programas y almacenarlas en arrays (explicado luego). De
nuevo, iremos avanzando paso por paso.
37 de 94 11/01/15 15:03
Inserta una imagen en tu programa
Inserta una imagen en tu programa
En primer lugar, vamos a aprender a crear un programa capaz de mostrar una imagen. En Processing hay un tipo de
variable (también conocido como clase) llamada PImage. Las variables de este tipo de datos almacenan una imagen que
podrás cargar de un fichero usando la función loadImage().
Descarga la foto aquí
/**
* Post-it Clock (Reloj de Post-it)
*
* El objetivo de este proyecto es crear un reloj usando imagenes para
* representar los numeros.
*
* Paso 1:
* - crea un programa que muestre una imagen
* - para cargar la imagen en tu programa, selecciona una imagen y arrastrala
* sobre el IDE, asi se almacenara en una carpeta accesible a tu programa
* - puedes comprobar que se ha creado una carpeta 'data' dentro de la carpeta
* de tu programa, abre la carpeta desde el menu 'Sketch --> Show Sketch Folder'
* - las imagenes:
* + son variables del tipo 'PImage'
* + se muestran con la funcion 'imgage()'
* + se cargan con 'loadImage()'
*
* Nota: antes de introducir una imagen, asegurate de que no es demasiado grande,
* reducela de tamaño a 400x400 o similar para que encaje en tu pantalla
*
*/
PImage im;
void setup() {
size(400, 400); // Hacemos el programa del tamaño de la imagen
im = loadImage("foto.jpg"); // Nombre de la imagen
}
void draw() {
image(im, 0, 0); // Para mostrar la imagen en la pantalla, coordenadas 0, 0
}
38 de 94 11/01/15 15:03
Nuevos comandos:
PImage: Un tipo de datos que puede contener una imagen.

loadImage(image file): Carga la imagen image file localizada dentro del directorio actual del sketch. image
file debe escribirse exactamente igual que con el nombre del fichero. Mira más abajo cómo colocar la imagen
en la carpeta correcta.
image(imageName, x, y): Muestra la PImage imageName en las coordenadas x, y. La esquina superior izquierda es el
eje de coordenadas.
39 de 94 11/01/15 15:03
Añadir imágenes
Añadir imágenes
Para que el programa tenga acceso a la imagen, debes arrastrar el fichero de la imagen en el IDE de
Processing, como muestra la siguiente captura:
La imagen se almacena en una subcarpeta del programa llamada data. Esta captura de pantalla muestra la
estructura de los ficheros donde puedes encontrar el archivo de la imagen. También puedes encontrarlo
abriendo la carpeta desde el menú ‘Sketch –> Mostrar carpeta del Sketch’.
40 de 94 11/01/15 15:03
Cuando ejecutes el programa, la imagen de abajo es lo que deberias ver, un collage con cuatro Post-its como
imagen de fondo para tu ventana de programa:
41 de 94 11/01/15 15:03
En este programa vamos a crear una variable Pimage llamada im. En setup() almacenamos una imagen
llamada foto.jpg en nuestra variable, utilizando loadImage(). En draw() mostramos la imagen usando imagen().
Puesto que nuestra ventana de programa se establece al mismo tamaño que la imagen, dicha imagen encajará
perfectamente con la ventana. Puedes cambiar la imagen con cualquier otra que hayas hecho tu mismo o
descargado de Internet. Asegúrate de que el tamaño de ventana y de la imagen sean iguales para que el
programa tenga una buena apariencia.
42 de 94 11/01/15 15:03
Mostrando dos imágenes
Mostrando dos imágenes
Para poner dos imágenes una al lado de la otra, debes declarar una variable con distinto nombre pero del mismo
tipo PImage y cargar la segunda imagen en el programa. Deberás ajustar las coordenadas de esta segunda imagen.
Descarga las fotos foto.jpg y foto2.jpg
/**
*
*
* Paso 2:
* - modifica el programa para que muestre dos imagenes
* - necesitaras dos variables, una para cada imagen
* - la funcion 'imgage()' usa coordenadas, muestra las imagenes una junto a otra
* - incluye la segunda imagen en el progama arrastrandola sobre el IDE
*
* Nota: si tus imagenes son de 400x400, necesitaras un programa de 800x400 pixels
*
*/
PImage im;
PImage im2;
void setup() {
size(800, 400); // Hacemos el programa dos veces el tamaño de la imagen en ancho
im = loadImage("foto.jpg");
im2 = loadImage("foto2.jpg"); // Nombre de la segunda imagen
}
void draw() {
image(im, 0, 0);
image(im2, 400, 0); // Para mostrar la segunda imagen en la pantalla, coordenadas 400, 0
}
43 de 94 11/01/15 15:03
Simplemente hemos añadido otra PImage llamada im2. Esta imagen es del mismo tamaño que la primera, por lo que la
ventana debe ser el doble de grande en el eje x para que quepan las dos imágenes.
44 de 94 11/01/15 15:03
Arrays
Arrays
Cuando trabajamos con muchas imágenes podemos utilizar algo llamado arrays que permiten un acceso más fácil a
ellas. Un array es como una caja con muchos compartimentos. Cada compartimento puede tener diferentes objetos y
se pueden encontrar referenciando dicho compartimento.
Por ejemplo, un array llamado CajaDeFruta tiene 3 compartimentos y puede contener 3 objetos. El compartimento 1
tiene un plátano, el compartimento 2 tiene una fresa y el compartimento 3 tiene una cereza. Si quieres encontrar la
cereza, mirarás en el compartimento 3 de la CajaDeFruta. El orden de los arrays siempre empieza en 0, por lo que
CajaDeFruta[0] contiene el plátano, CajaDeFruta[1] contiene la fresa y CajaDeFruta[2] la cereza.
Los arrays pueden ser de un cierto tipo como entero o int o una cadena como String. El máximo número de variables
que pueden almacenar debe ser declarado con el array – 3 en el ejemplo de arriba. El siguiente programa, que es una
modificación del anterior, muestra como usar un array del tipo PImage para almacenar dos imágenes.
/**
*
*
* Paso 3:
* - modifica el programa para que use arrays
* - los arrays:
* + son variables que pueden almacenar mas de un dato
* + tienen un solo nombre, por ejemplo 'img'
* + los datos se distinguen porque "van numerados", es lo que llamamos "indexados"
* + el primer dato es el 0, el segundo el 1, el tercero el 2 ...
* + un dato se pide con el nombre del array seguido del numero entre
* cochetes 'img[3]'
* + se declaran usando el tipo de variable con corchetes (mira el codigo)
* + al declararlos hay que decir cuantos datos van a contener
*
* Nota: este programa hace lo mismo que el anterior, solo que de forma mas eficiente
*
*/
Nuevos comandos:
La declaración de las imágenes es un poco diferente: PImage im[] = new PImage[2], esto significa que declaramos
un array del tipo PImage con dos bloques (o compartimentos) de datos.
Cuando mostramos y cargamos las imágenes, usamos img[0], para la primera posición del array, y img[1], para
45 de 94 11/01/15 15:03
la segunda.
A pesar de que el programa ha sido modificado, no hay ninguna diferencia en el resultado.
46 de 94 11/01/15 15:03
Usando dos arrays
Usando dos Arrays
Para en adelante simplificar la asignación de las variables imagen, el truco es almacenar los nombres de todas las
imágenes en un array de strings (cadenas de texto). Aquí un ejemplo:
/**
*
*
* Paso 4:
* - modifica el programa de modo que los nombres de imagenes se almacenen
* en un array, de este modo tendras dos arrays, uno para los nombres de
* imagenes y otro para las imagenes
* - toma ventaja del hecho de que se puede hacer un array declarando sus
* contenidos entre llaves '{dato, dato2 ...}' con los datos separados por comas
* - en el programa ejemplo, "foto.jpg" es la posicion 0 del array,
* "foto2.jpg" es la 1
*
* Nota: este programa hace lo mismo que el anterior
*
*/
PImage im[] = new PImage[2];

String imFile[] = {"foto.jpg", "foto2.jpg"}; // Array de nombres de fichero
void setup() {
size(800, 400);
im[0] = loadImage(imFile[0]); // Primer fichero a la funcion 'loadImage()'
im[1] = loadImage(imFile[1]); // Segundo fichero
}
void draw() {
image(im[0], 0, 0);
image(im[1], 400, 0);
}
Como podrás observar cuando ejecutes este programa, el resultado es el mismo que para los otros. La gran pregunta
es, ¿Por qué utilizar esto para hacer lo mismo? Y la respuesta es simple: lo hace mucho más fácil para seguir
trabajando desde aquí. Si necesitas cambiar algo, por ejemplo, sólo lo tendrás que hacerlo en un único lugar y no
buscar por todo el programa. Cuando añadas más imágenes y para programas muy complejos, esto es importante.
47 de 94 11/01/15 15:03
48 de 94 11/01/15 15:03
El bucle for()
El bucle for()
En este paso aumentaremos el número de imágenes que se muestran de 2 a 4. Todavía utilizaremos los 2 arrays de los
pasos anteriores, pero para hacer el código más eficiente incluso, introduciremos una cosa nueva: el bucle for(). Esta
es una de las funciones más prácticas y usadas en programación. Hace exactamente lo que parece, iterar, al igual
que draw(). Veamos un ejemplo para seguir explicando como funciona.
Descarga las imágenes banana.jpg, peninsula.jpg, postit.jpg y tortilla.jpg
/**
*
*
* Paso 5:
* - añade mas imagenes a tu programa (aqui te pasamos un par mas)
* - recuerda que tienes que arrastrarlas sobre el IDE o copiarlas directamente
* en la carpeta 'data' de tu programa
* - usa el bucle 'for()' para cargar todas tus imagenes en el array de forma
* mas eficiente
* - el bucle 'for()':
* + se usa en programacion para ejecutar acciones que se repiten varias veces
* + es util para recorrer arrays
* + tiene tres parametros separados por ';' (punto y coma)
* + for( inicializacion; comprobacion; incremento )
*
* Nota: busca mas informacion sobre for en la referencia de Processing
*
*/
PImage im[] = new PImage[4]; // Haz tu array mas grande para que le quepan 4 imagenes
String imFile[] = {"postit.jpg", "peninsula.jpg", "tortilla.jpg", "banana.jpg"};
void setup() {
size(800, 800); // Haz tu programa mas grande para acomodar todas las imagenes
for (int i = 0; i < 4; i = i + 1) {
im[i] = loadImage(imFile[i]); // Carga la imagen segun el contador 'i'
}
}
void draw() {
image(im[0], 0, 0); // Muestra las imagenes
image(im[1], 400, 0);
image(im[2], 0, 400);
image(im[3], 400, 400);
49 de 94 11/01/15 15:03
Nuevos comandos:
for(initiator; test; update){ statements }:

Esta función permite repetir una pieza de código tantas veces como
necesites. La primera cosa que sucede dentro del for() es la inicialización, initiator. En este ejemplo esta
declaración es un entero, i. Luego comprueba si test es verdadero o falso, tal y como hicimos con el if en el
proyecto anterior, ¿recuerdas?. En este ejemplo test comprueba si i es menor que 4. Si así es, el código entre
llaves se ejecutará. A continuación, lo que ocurre es el update, en este caso se trata de incrementar i una
unidad. Después, test se comprueba de nuevo y si nuevamente es cierto, se repite lo anterior. Puesto que
siempre actualizamos añadiendo 1 a i, en algún momento i será igual que 4, lo que significa que test será falsa
(4 no es menor que 4). En ese momento, se abandonará el bucle.
Aquí está el resultado:
Lo que hemos hecho es crear dos arrays con 4 posiciones cada uno. Uno para las imágenes y otro para el nombre de
las mismas. En setup() establecemos el tamaño de la ventana para que quepan las 4 imágenes. A continuación,
utilizamos el bucle for() para que cargue las imágenes.
El bucle se ejecuta 4 veces, tantas como imágenes queremos cargar. Esto se establece en el test con la
condición i<4 y en el update escribiendo i=i+1. La mejor parte de esto es que podemos usar la variable i para acceder a
las posiciones de nuestros arrays. Por tanto, la primera vez que entramos en el for, i es igual a 0, lo que significa que
cargamos la imagen imFile[0] (“postit.jpg”) y la guardamos en im[0]. La siguiente vez, i es 1, etc. De esta manera, no
tenemos que asignar todas las imágenes una por una con variables separadas, simplemente dejamos al
bucle for() hacer todo el trabajo. Con esto conseguimos un código más compacto.
50 de 94 11/01/15 15:03
51 de 94 11/01/15 15:03
Múltiples imágenes
Múltiples imágenes
Puesto que el objetivo de este programa es crear un reloj, el siguiente paso es utilizar diferentes imágenes que
representen los números y usarlas en nuestro programa. Para tu conveniencia, te damos una serie de imágenes
hechas con notas de Post-It.
Descarga las imágenes que representan los números: 0, 1, 2, 3, 4, 5, 6, 7, 8 y 9
/**
*
*
* Paso 6:
* - crea imagenes que representen numeros (por si acaso, aqui tienes unas
* hechas con post-it)
* - modifica el programa para que muestre todos los numeros del 0 al 9
* - puedes usar 'for()' para mostrar las imagenes
* - este programa te servira como base para cualquier programa donde quieras
* representar numeros, si por ejemplo quieres mostrar el 5 en la pantalla,
* solo tienes que invocar 'image(img[5], coorX, coorY)'
*
* Nota: como quieres mostrar todos los numeros, tendras que hacer imagenes mas
* pequeñas, por ejemplo de 70 pixels de ancho
*
*/
PImage im[] = new PImage[10]; // Array para 10 imagenes

String imFile[] = {"0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg
void setup() {
size(700, 95); // 10 imagenes de 70 pixels de ancho y 95 de alto
for (int i = 0; i < 10; i = i + 1) {
im[i] = loadImage(imFile[i]);
}
}
void draw() {
for (int i = 0; i < 10; i = i + 1) {
image(im[i], 70 * i, 0); // Muestra las imagenes en secuencia
}
}
52 de 94 11/01/15 15:03
No hemos introducido ningún comando nuevo aquí. Lo que hemos hecho ha sido crear 10 posiciones en cada array.
Hemos establecido el tamaño de ventana a 700×95 para que quepan las 10 imágenes de 70×95. Tenemos un
bucle for() que itera 10 veces para cargar cada una de las imágenes, y otro bucle for en draw. Este bucle itera diez
veces y simplemente se usa para mostrar las imágenes. Puesto que las imágenes son de 70 píxels de ancho, podemos
establecer la coordenada x para cada imagen como 70*i.
53 de 94 11/01/15 15:03
El tiempo
El Tiempo
En este paso te enseñaremos como mostrar el tiempo. Ya has aprendido como acceder a diferentes variables del
sistema con Processing. Por ejemplo, ya hemos usado mouseX, mouseY y frameRate. Hay variables que podemos utilizar
para obtener el tiempo actual; hour (), minute () y second (). Empecemos con cómo mostrar el tiempo por sólo las
horas:
/**
*
*
* Paso 7:
* - toma la hora del ordenador y representala con las imagenes
* - la hora del sistema se obtiene con la funcion 'hour()'
* - ten en cuenta que la hora tiene dos digitos y por lo tanto
* tienes que buscar la forma de separarlos
*
*/

void setup() {
size(140, 95); // 2 digitos de 70 pixels de ancho y 95 de alto
for (int i = 0; i < 10; i = i + 1) {
}
}
void draw() {
int h = hour(); // Toma la hora del reloj del ordenador y almacenalo en una variable
int h_dec = int(h / 10); // Extrae el digito de mayor peso de la hora (decenas)
int h_uni = h - h_dec * 10; // Extrae el digito de menor peso de la hora (unidades)
image(im[h_dec], 0, 0); // Muestra el digito de las decenas

image(im[h_uni], 70, 0); // Muestra el digito de las unidades
}
Nuevos comandos:
hour(): Devuelve la hora actual como un número de 0 a 23.
54 de 94 11/01/15 15:03
int(data): Convierte data a un entero. P.ej. int(2.545) devuelve 2,int(233.9999) devuelve 233 etc.
La primera cosa que se hace en draw() es almacenar el número de horas en la variable h. Ahora este número tiene dos
dígitos pero nuestras imágenes sólo contienen uno, por lo que tendremos que calcular qué dígitos mostrar. El primer
dígito se almacena en h_dec y se calcula como hour (), minute () and second (). El segundo dígito se almacena
en h_uni y se calcula como h - h_dec * 10.
Digamos que la hora actual son las 14. Esto significa que h es igual a 14, h_dec es 1 y h_uni vale 4. Estas variables
ahora pueden ser usadas para decidir qué imagen mostrar.
55 de 94 11/01/15 15:03
El reloj final
El reloj final
Este es el último paso del proyecto. En este paso vamos a añadir los minutos y los segundos a nuestro reloj utilizando
el mismo método que en el paso anterior con las horas.
/**
*
*
* Paso 8:
* - añade los minutos y los segundos a tu reloj
* - los minutos del sistema se obtienen con la funcion 'minute()'
* - los segundos se obtienen con la funcion 'seconds()'
*
*/

void setup() {
size(140, 285); // 6 digitos en tres filas y dos columnas
for (int i = 0; i < 10; i = i + 1) {
}
}
void draw() {
int h = hour();
int h_dec = int(h / 10);
int h_uni = h - h_dec * 10;
image(im[h_dec], 0, 0);
image(im[h_uni], 70, 0);
int m = minute(); // Toma los minutos del reloj del ordenador y almacenalos en una variable
int m_dec = int(m / 10); // Extrae el digito de mayor peso de los minutos (decenas)
int m_uni = m - m_dec * 10; // Extrae el digito de menor peso de los minutos (unidades)
image(im[m_dec], 0, 95); // Muestra el digito de las decenas

image(im[m_uni], 70, 95); // Muestra el digito de las unidades
int s = second(); // Toma los segundos del reloj del ordenador y almacenalos en una variable
int s_dec = int(s / 10); // Extrae el digito de mayor peso de los segundos (decenas)
int s_uni = s - s_dec * 10; // Extrae el digito de menor peso de los segundos (unidades)
56 de 94 11/01/15 15:03
image(im[s_dec], 0, 190); // Muestra el digito de las decenas

image(im[s_uni], 70, 190); // Muestra el digito de las unidades
}
Nuevos comandos:
minute(): devuelve los minutos actuales como un valor de 0 a 59.

second(): devuelve los segundos actuales como un valor entre 0 y 59.
Declaramos las variables para los minutos y segundos y calculamos los dígitos a mostrar de la misma manera que en el
paso anterior.
57 de 94 11/01/15 15:03
Usando las mismas variables de sistema, crea un temporizador para la cocina, por ejemplo un reloj que cuente
hacia atrás con imágenes.
58 de 94 11/01/15 15:03
Caza la manzana
Objetivos
Caza la manzana
En este mini proyecto programarás un juego de ordenador. El objetivo de este ejercicio es llevar la programación
un poco más lejos y crear un pequeño videojuego donde nuestro aguerrido héroe, el famoso científico Newton,
intenta no perder la oportunidad de que la manzana le caiga en la cabeza.
Vamos a crear, paso a paso, un programa en el que Newton coleccione puntos durante medio minuto, al recibir
tantos manzanazos en la cabeza como sea posible.
59 de 94 11/01/15 15:03
Crea una manzana y un científico
Crea una manzana y un científico
Crea la pantalla del juego. Las manzanas, por ahora, serán círculos que caen del cielo, mientras que Newton será un
cuadrado al fondo de la pantalla.
/*
* Catch the Apple (Caza la Manzana)
*
* Creacion de un videojuego con Processing. El objetivo de este ejercicio es
* llevar la programacion un poco mas lejos y crear un pequeño videojuego donde
* nuestro aguerrido heroe, el famoso cientifico Newton, intenta no perder la
* oportunidad de que la manzana le caiga en la cabeza.
*
* Nota: si no conoces el mito de Newton y la manzana, te recomiendo que lo busques
* en la enciclopedia, internet, o similar
*
* Paso 1:
* - crea la pantalla del juego, las manzanas, por ahora, seran circulos que caen del
* cielo, mientras que Newton sera un cuadrado
*
*/
void setup() {
size(400, 400); // Haz la pantalla de un tamaño medio
}
void draw() {
ellipse(15, 15, 20, 20); // Dibuja una manzana en lo alto de la pantalla
rect(width / 2, height - 25, 20, 20); // Dibuja a Newton al fondo de la pantalla
}
Nuevos comandos:
rect(x, y, width, height): Dibuja un rectángulo. x e y establecen la posición de la esquina superior

izquierda, width y height establecen el tamaño.
60 de 94 11/01/15 15:03
De momento, Newton no se puede mover del centro de la ventana para coger la manzana, que está situada a su
izquierda.
61 de 94 11/01/15 15:03
Toma el control de Newton con el teclado
Toma el control de Newton con el teclado
Haz que Newton (el cuadrado) se mueva con las flechas del teclado. Para acceder al teclado desde Processing,
considera lo siguiente: cada tecla del teclado tiene un keyCode. El keyCode es el valor o símbolo que representa una tecla
específica. keyCode es una variable de sistema interna que puede ser usada para detectar qué tecla ha sido pulsada.
Para ver que tecla ha sido apretada, vamos a usar una función llamada keyPressed(). Veremos que también
necesitamos una variable para guardar las coordenadas del eje X (horizontal) del cuadrado, de forma que lo podamos
ajustar cada vez que una tecla sea pulsada.
/*
*
*
* Paso 2:
* - haz que Newton (el cuadrado) se mueva con las flechas del teclado
* - el teclado se llama 'keyboard' en ingles, y las teclas 'keys'
* - cada tecla tiene un 'keyCode', es el valor o codigo del simbolo que representa
* - para ver que tecla se presiono, crea una funcion llamada 'keyPressed()'
* - para mover el cuadro necesitaras una variable para almacenar su coordenada
* en el eje X (horizontal)
*
*/
int nX = 0;
void setup() {
size(400, 400); // Haz la pantalla de un tamaño medio
}
void draw() {
background(200); // Limpia la pantalla
ellipse(15, 15, 20, 20);
rect(nX, height - 25, 20, 20); // Dibuja a Newton con coordenada X variable
}
void keyPressed() {
// Si se presiono la tecla derecha, incrementa las coordenadas en 3 unidades
if (keyCode == RIGHT) {
nX = nX + 3;
}
// Si se presiono la tecla inzquierda, decrementa las coordenadas en 3 unidades
62 de 94 11/01/15 15:03
if (keyCode == LEFT) {
nX = nX - 3;
}
}
Nuevos comandos:
keyPressed():esta función se llama cada vez que una tecla es pulsada. Esto significa que cualquier código escrito
dentro de esta función será ejecutado al pulsar una tecla.
keyCode: devuelve el valor de la tecla que has pulsado.
La variable nX se usa para establecer la posición x de Newton. Cada vez que se pulsa el cursor derecho, nX se
incrementa con 3 y cada vez que se pulsa el cursor izquiero, nX se decrementa en 3. Ahora ya puedes mover el
cuadrado por la pantalla de izquierda a derecha, pero ten cuidado, porque puede salirse de los límites de la pantalla.
63 de 94 11/01/15 15:03
Limita los movimientos del cuadrado
Limita los movimientos del cuadrado
Limita el movimiento de Newton dentro de la ventana. Para esto vas a usar las funciones condicionales ‘ if-else‘, con
las que comprobarás que la coordenada X esté siempre dentro de la ventana del programa. Es decir, tendrá que ser
mayor que 0 y menor que la anchura de la ventana o width.
/*
*
*
* Paso 3:
* - limita el movimiento de Newton dentro de la ventana
* - para esto vas a usar las funciones condicionales 'if-else'
* - comprobaras que la coordenada nX esta siempre dentro de la
* ventana del programa, es decir, habra de ser mayor que 0 y
* menor que la anchura de la ventana o 'width'
*
*/
int nX = 0;
void setup() {
size(400, 400);
}
void draw() {
background(200);
ellipse(15, 15, 20, 20);
rect(nX, height - 25, 20, 20);
}
void keyPressed() {
// Incrementa las coordenadas en 3 unidades
nX = nX + 3;
}
// Decrementa las coordenadas en 3 unidades
nX = nX - 3;
}
// Limita el valor de la coordenada X
if (nX < 0) {
64 de 94 11/01/15 15:03
nX = 0;
}
if (nX > width - 20) { // Por la derecha tienes que tener en cuenta el tamaño del cuadrado
nX = width - 20;
}
}
En este caso, no hay una gran diferencia en lo que se verá en la pantalla del programa, con la excepción de que el
cuadrado ya no se saldrá de los límites.
65 de 94 11/01/15 15:03
Manzanas que caen
Manzanas que caen
Modifica el programa para hacer que la manzana (círculo) caiga de lo alto de la pantalla. Para esto, necesitarás una
variable que contenga la coordenada Y del círculo y, cuando la manzana toque el suelo, que aparezca otra arriba.
/*
*
*
* Paso 4:
* - modifica el programa para hacer que la manzana caiga
* - necesitaras una variable para contener la coordenada Y de la manzana
* - cuando la manzana toque el suelo, deberas volver a "colgarla" del arbol
*
*/
int nX = 0;
int mY = 0; // Coordenada Y de la manzana
void setup() {
size(400, 400);
}
void draw() {
background(200);
mY = mY + 1; // Incrementa la coordenada de la manzana

if (mY > height) {
mY = 15; // Si la manzana llega al suelo, ponla arriba de nuevo
}
ellipse(15, mY, 20, 20); // Cambia la coordenada Y para que sea la variable
}
void keyPressed() {
nX = nX + 3;
}
nX = nX - 3;
66 de 94 11/01/15 15:03
}
if (nX < 0) {
nX = 0;
}
if (nX > width - 20) {
nX = width - 20;
}
}
Hemos creado una variable mY para almacenar la coordenada Y de la manzana. Cada vez que draw() se ejecuta, mY se
incrementa en 1, haciendo que la manzana vaya acercándose al suelo de la ventana. Una vez que la manzana llega al
suelo, es decir, mY es mayor que height, debe reaparecer mágicamente en lo alto de la ventana.
67 de 94 11/01/15 15:03
Un poco de azar
Un poco de azar
Hasta ahora, las manzanas siempre salen de la misma posición en lo alto de la pantalla, así es bastante predecible.
Para cambiar la X de origen y que cada vez salga de un sitio distinto del árbol, haremos uso de una función
llamada random() que permite generar números aleatorios. Necesitarás una nueva variable para almacenar la posición
en X de la manzana. Ten en cuenta que la coordenada habrá que cambiarla solo cuando la manzana llegue al suelo,
porque si no cambiará aleatoriamente durante su caída.
/*
*
*
* Paso 5:
* - la manzana cae siempre del mismo sitio, cambia su coordenada X de origen para
* que cada vez salga de un sitio distinto del arbol
* - la funcion que te da un numero aleatorio se llama 'random()' y te devuelve un
* un numero entre 0 y el parametro que especifiques entre los parentesis
* - necesitaras una nueva variable para almacenar la posicion en X de la manzana
* - la coordenada habra que cambiarla solo cuando la manzana llegue al suelo
*
*/
int nX = 0;
int mY = 0;
int mX = 15; // Coordenada X de la manzana
void setup() {
size(400, 400);
}
void draw() {
background(200);
mY = mY + 1;
if (mY > height) {
mY = 15;
mX = int(random(width - 20)); // Inicializa la coordenada X de forma aleatoria
}
ellipse(mX, mY, 20, 20); // Añade la coordenada X para el movimiento del circulo
}
68 de 94 11/01/15 15:03
void keyPressed() {
nX = nX + 3;
}
nX = nX - 3;
}
if (nX < 0) {
nX = 0;
}
nX = width - 20;
}
}
Nuevos comandos:
random(high):genera un número aleatorio entre 0 y el número high. Puedes también usar random(low,high) para
generar un número entre low y high.
Con este cambio en el programa, podrás ver que las manzanas salen desde cualquier punto en lo alto de la pantalla.
69 de 94 11/01/15 15:03
70 de 94 11/01/15 15:03
Detección de colisión
Detección de colisión
Detecta que la manzana aterriza en la cabeza de Newton para poder contar puntos; la acción de detectar que dos
objetos se chocan en la pantalla se llama detección de colisión. Utiliza las funciones condicionales if-else para ver si el
círculo está sobre el cuadrado y, de ser así, cambia el color del cuadro a rojo. Para hacer el programa más sencillo,
crearemos una variable que almacene las coordenadas Y del cuadrado, y así poder hacer las comparaciones de un
modo más sencillo.
/*
*
*
* Paso 6:
* - detecta que la manzana aterriza en la cabeza de Newton para poder contar
* puntos; la accion de detectar que dos objetos se encuentran en la pantalla
* se llama "deteccion de colision"
* - emplea las funciones condicionales 'if-else' para ver si el circulo
* esta sobre el cuadrado, de ser asi, cambia el color del cuadro a rojo
* - para hacer el programa mas sencillo, crea una variable para almacenar las
* coordenadas en Y del cuadrado
*
*/
int nX = 0;
int nY = 0; // Coordenada Y de la posicion del cuadrado
int mY = 0;
int mX = 15;
void setup() {
size(400, 400);
nY = height - 25; // Inicializa la coordenada Y del cuadrado al fondo de la pantalla
}
void draw() {
background(200);
mY = mY + 1;
if (mY > height) {
mY = 15;
mX = int(random(width - 20));
}
71 de 94 11/01/15 15:03
fill(255); // Por defecto pinta los objetos en blanco
// Deteccion de la colision
if (mY + 10 > nY && mY - 10 < nY + 20) { // Detecta si el circulo esta a la altura del cuadrado
if (mX + 10 > nX && mX - 10 < nX + 20) { // Detecta si el circulo esta sobre el cuadrado
fill(255, 0, 0); // Cambia el color de relleno a rojo
}
}
// Lineas para comprender la deteccion de colision

// borra el comentario para poder ver estas lineas
//line(0,mY-10,width,mY-10);
//line(mX-10,0,mX-10,height);
//line(0,mY+10,width,mY+10);
//line(mX+10,0,mX+10,height);
ellipse(mX, mY, 20, 20);

rect(nX, nY, 20, 20); // Incluye la variable para controlar la coordenada Y
}
void keyPressed() {
nX = nX + 3;
}
nX = nX - 3;
}
if (nX < 0) {
nX = 0;
}
nX = width - 20;
}
}
Nuevos comandos:
if(test && test) {statements}: esto se utiliza cuando varias comprobaciones deben ser realizadas en un
único if(). En este ejemplo, comprobamos si mY+10 > nY y si mY-10 < nY+20. Si estas dos comprobaciones son
ciertas simultáneamente, ejecutamos el código entre llaves.
La detección de colisión consiste en dos if(), el primero comprueba si el círculo está a la misma altura que el
cuadrado. Si es así, el segundo if() comprueba si el círculo está arriba del cuadrado. De ser así, el fill() colorea el
círculo en rojo. Una colisión debe ser similar a esto:
72 de 94 11/01/15 15:03
Por otra parte, si activas las siguientes líneas en el programa:
// lines of code to understand how collision works

// erase the comment in order to see the code
line(0,mY-10,width,mY-10);
line(mX-10,0,mX-10,height);
line(0,mY+10,width,mY+10);
line(mX+10,0,mX+10,height);
Verás una serie de líneas en la pantalla enmarcando el movimiento de la manzana. Puedes emplearlas para ver cómo
funciona la detección de colisión.
73 de 94 11/01/15 15:03
74 de 94 11/01/15 15:03
¡Más rápido!
Más rápido
¿No quieres que las manzanas caigan más rápido? Modifica la velocidad de las manzanas para hacer el juego algo
más interesante. Para ello, crea una variable float para que mV almacene la velocidad de caída de la manzana. Puedes
cambiar la velocidad modificando el valor de mV. Al mismo tiempo, para poder controlar mejor el movimiento de la
manzana en el eje Y, vamos a modificar el tipo de variable de mY para que sea float. ¿Recuerdas float de la sección de
variables? Una variable con datos del tipo float puede almacenar números decimales.
/*
*
*
* Paso 7:
* - modifica la forma en la que caen las manzanas para que caigan con mayor velocidad
* - introduce una variable para almacenar la velocidad de caida de la manzana
* - declara esa variable 'mV' como un numero en coma flotante
* - puedes cambiar la velocidad con solo cambiar el valor de esa variable
* - para poder controlar mejor el movimiento en el eje Y de la manzana, modifica el tipo
* de variable de 'mY' para que sea 'float'
*
*/
int nX = 0;
int nY = 0;
float mY = 0; // Modifica el tipo de la variable mY a float
int mX = 15;
float mV = 3; // Velocidad de caida de las manzanas
void setup() {
size(400, 400);
nY = height - 25;
}
void draw() {
background(200);
// Movimiento de la manzana
mY = mY + mV; // Introduce la velocidad en forma de incremento
if (mY > height) {
mY = 15;
75 de 94 11/01/15 15:03
fill(255);
if (mY + 10 > nY && mY - 10 < nY + 20) {
if (mX + 10 > nX && mX - 10 < nX + 20) {
fill(255, 0, 0);
}
}

rect(nX, nY, 20, 20);
}
void keyPressed() {
nX = nX + 3;
}
nX = nX - 3;
}
if (nX < 0) {
nX = 0;
}
nX = width - 20;
}
}
En lugar de incrementar mY en uno, vamos a incrementarlo con mV. A parte de la velocidad, nada ha cambiado en el
programa, por lo que sólo hay una pequeña diferencia entre este y el programa anterior.
76 de 94 11/01/15 15:03
A Newton le gusta la gravedad. Dale más.
A Newton le gusta la gravedad, dale más
Modifica la caída de las manzanas para que responda a la aceleración de la gravedad. De este modo, las manzanas
irán cada vez más rápido cuanto más tiempo lleven cayendo. Como sabes, la velocidad se calcula a partir de la
aceleración, y del mismo modo, la posición a partir de la velocidad. Para hacer estas operaciones de la forma más
sencilla posible, introduce una variable en coma flotante (float) que represente la aceleración.
/*
*
*
* Paso 8:
* - modifica la caida de las manzanas para que responda a la aceleracion
* de la gravedad
* - como sabes, la velocidad se calcula desde la aceleracion, y la posicion
* desde la velocidad
* - introduce una variable que represente la aceleracion, hazla de tipo 'float'
*
*/
int nX = 0;
int nY = 0;
float mY = 0;
int mX = 15;
float mV = 0; // La velocidad inicial de las manzanas es cero
float mA = 0.05; // Aceleracion de caida de la manzana (0.98 seria demasiado)
void setup() {
size(400, 400);
nY = height - 25;
}
void draw() {
background(200);
mV = mV + mA; // Calcula la velocidad instantanea en funcion de la aceleracion
mY = mY + mV; // Calcula la posicion en funcion de la velocidad
if (mY > height) {
mY = 15;
77 de 94 11/01/15 15:03
mV = 0; // Al comenzar a caer, las manzanas empiezan con velocidad cero

}
fill(255);
if (mY + 10 > nY && mY - 10 < nY + 20) {
if (mX + 10 > nX && mX - 10 < nX + 20) {
fill(255, 0, 0);
}
}

rect(nX, nY, 20, 20);
}
void keyPressed() {
nX = nX + 3;
}
nX = nX - 3;
}
if (nX < 0) {
nX = 0;
}
nX = width - 20;
}
}
Cada vez que incrementes mY incrementaremos también mV un poco. De esta manera, la velocidad será un poco más
grande cada vez. Aparte de la aceleración, nada ha cambiado en el programa, por lo que sólo hay una pequeña
diferencia entre este programa y el anterior.
78 de 94 11/01/15 15:03
Cuenta los puntos
Cuenta los puntos
Implementa un contador que muestre cuántas manzanas golpearon a Newton. Para mostrar el texto, puedes utilizar la
función text(). Además, necesitarás un contador para anotar los puntos.
Nota: como empiezas a tener muchas variables en tu programa, es recomendable que añadas comentarios para
recordar qué hace cada una.
/*
*
*
* Paso 9:
* - implementa un contador que muestre cuantas manzanas cogio Newton
* - la funcion 'text()' te permite poner texto en el programa
* - ademas necesitaras un contador para poner los puntos
* - empiezas a tener muchas variables en tu programa, es considerado buena
* practica el poner comentarios para explicar cada una
*
*/
int nX = 0; // Coordenada X, Newton

int nY = 0; // Coordenada Y, Newton
float mY = 0; // Coordenada Y, manzanas
int mX = 15; // Coordenada X, manzanas
float mV = 0; // Velocidad Y, manzanas
float mA = 0.05; // Aceleracion Y, manzanas
int p = 0; // Puntos conseguidos
void setup() {
size(400, 400);
nY = height - 25;
}
void draw() {
background(200);
mV = mV + mA;
mY = mY + mV;
if (mY > height) {
mY = 15;
79 de 94 11/01/15 15:03
mV = 0;
}
fill(255);
if (mY + 10 > nY && mY - 10 < nY + 20) {
if (mX + 10 > nX && mX - 10 < nX + 20) {
fill(255, 0, 0);
// Si hay colision, incrementa un punto
p = p + 1;
}
}

rect(nX, nY, 20, 20);
// Muestra los puntos en pantalla

fill(0); // Color del texto
text("Manzanazos: " + p, 3 * width / 4, 20); // Texto a la derecha de la pantalla
}
void keyPressed() {
nX = nX + 3;
}
nX = nX - 3;
}
if (nX < 0) {
nX = 0;
}
nX = width - 20;
}
}
Nuevos comandos:
text(text, x, y): escribe un texto en la pantalla en las coordenadas x e y.
Hemos declarado una nueva variable p que se incrementa en una unidad cada vez que se detecta una colisión. La
última cosa que hacemos en draw() es mostrar el contador de los puntos en la esquina superior derecha.
80 de 94 11/01/15 15:03
81 de 94 11/01/15 15:03
Uoops, error.
Uoops, error
Te habrás dado cuenta que tu programa ahora mismo está contabilizando puntos de más. Cada vez que la manzana
cae sobre la cabeza de Newton… eh… cuando el círculo toca el cuadrado, tu contador sube más o menos 5 puntos.
Para corregir esto tienes un par de opciones:
Vuelve a lanzar la manzana en cuanto se detecte colisión.

Deja de contar cuando haya colisión, hasta que se lance una nueva manzana.
Para evitar cualquiera de estas dos posibilidades, necesitas una variable de tipo boolean donde almacenar el estado de
la manzana. ¿Recuerdas qué era una variable boolean? Podemos usar esta variable para decirle al programa si contar
puntos o no.
/*
*
*
* Paso 10:
* - los puntos se estan contabilizando extra, corrigelo
* - esto lo podras conseguir de dos formas:
* + volviendo a lanzar la manzana en cuanto se detecte colision, o
* + dejando de contar una vez hay colision y hasta que se lance una
* nueva manzana
* - en cualquier caso, necesitas una variable de tipo 'boolean' que
* almacenara el estado de poder contar o no puntos, la tendras que
* reiniciar a 'true' cada vez que se lance la manzana de nuevo
*
*/

boolean pCount = true; // Almacena si se pueden contar puntos o no
void setup() {
size(400, 400);
nY = height - 25;
82 de 94 11/01/15 15:03
void draw() {
background(200);
mV = mV + mA;
mY = mY + mV;
if (mY > height) {
mY = 15;
mV = 0;
pCount = true; // Al lanzar una nueva manzana, se podran volver a contar puntos
}
fill(255);
if (mY + 10 > nY && mY - 10 < nY + 20) {
if (mX + 10 > nX && mX - 10 < nX + 20) {
fill(255, 0, 0);
if (pCount) p = p + 1;
pCount = false; // En cualquier caso, cada vez que se entre
// aqui, ya no se pueden contar puntos
}
}

rect(nX, nY, 20, 20);

fill(0); // Color del texto
text("Manzanazos: " + p, 3 * width / 4, 20); // Texto a la derecha de la pantalla
}
void keyPressed() {
nX = nX + 3;
}
nX = nX - 3;
}
if (nX < 0) {
nX = 0;
}
nX = width - 20;
}
}
83 de 94 11/01/15 15:03
Nuevos comandos:
if( boolean ): comprueba si boolean es true. Puedes también comprobar si es falso escribiendo if( !boolean ).
Ahora prueba el programa para ver cómo cuenta un único punto por manzana. Esto es porque sólo añadimos puntos
cuando la variable boolean pCount es true y cambia a false justo después de contar el punto. Cuando la manzana es
relanzada, pCount se vuelve a poner en true.
84 de 94 11/01/15 15:03
Y el tiempo empieza
Y el tiempo empieza
El objetivo del juego es recibir tantas manzanas como sea posible en un periodo de tiempo determinado. Para poder
contabilizar esto, sólo necesitamos un contador de tiempo, que también se muestre en la pantalla, para que los
jugadores sepan cuándo ha terminado la partida. La duración óptima del juego es de medio minuto, si es demasiado
corto, no habrá forma de conseguir puntos mientras que, si es demasiado largo, se hará aburrido. Para medir el tiempo,
puedes usar una función llamada millis() que contabiliza los milisegundos que han pasado desde la última vez que se
le llamó. De este modo puedes ver si han pasado 30000 milisegundos (30 segundos) para terminar el juego. Para
almacenar el tiempo, necesitas una variable de tipo long. La función noLoop() le dirá a tu programa que termine una vez
hayas llegado al final del mismo. Finalmente, usa text() para mostrar el tiempo que queda en la pantalla.
/*
*
*
* Paso 11:
* - añade un contador de tiempo para limitar la duracion del juego
* - una duracion optima del juego es de medio minuto, hay una funcion, llamada
* 'millis()' que contabiliza los milisegundos que han pasado desde
* la ultima vez que se la llamo. De ese modo puedes ver si han pasado
* 30000 milisegundos (30 segundos) para terminar el juego
* - para almacenar el tiempo, necesitas una variable de tipo 'long'
* - termina el juego con la funcion 'noLoop()'
* - usa 'text()' para mostrar el tiempo que queda en la pantalla
*
*/

long t = 0; // Almacena el tiempo
void setup() {
size(400, 400);
nY = height - 25;
t = millis(); // Inicializa la variable de tiempo
85 de 94 11/01/15 15:03
void draw() {
background(200);
mV = mV + mA;
mY = mY + mV;
if (mY > height) {
mY = 15;
mV = 0;
}
fill(255);
if (mY + 10 > nY && mY - 10 < nY + 20) {
if (mX + 10 > nX && mX - 10 < nX + 20) {
fill(255, 0, 0);
}
}

rect(nX, nY, 20, 20);
// Contabilizacion del tiempo

float timer = (millis() - t) / 1000; // Cuenta cuanto tiempo ha pasado en segundos
// Fin del juego (GAME OVER)

if (timer >= 30) { // Si el tiempo alcanza 30000 es el fin del juego
noLoop();
}
// Muestra el tiempo en la pantalla

fill(0);
text("Tiempo: " + (30 - timer), 10, 20);

fill(0);
text("Manzanazos: " + p, 3 * width / 4, 20);
}
void keyPressed() {
nX = nX + 3;
86 de 94 11/01/15 15:03
}
nX = nX - 3;
}
if (nX < 0) {
nX = 0;
}
nX = width - 20;
}
}
Nuevos comandos:
long: este es un tipo de datos para números enteros largos. Es conveniente usarlos cuando manejamos
variables temporales, porque estos datos pueden ser muy grandes. ¿Recuerdas cómo explicamos que una
variables es un contenedor de datos? Bien, se puede decir que long es un contenedor más grande que int.
Un int se queda sin espacio antes que un long.
noLoop(): detiene la ejecución continua dentro de draw. Para volver a ejecutar el programa tendrás que llamar
a loop().
La variable de tiempo t se inicializa en el setup(). Puesto que millis()cuenta la cantidad de milisegundos que el
programa se ha ejecutado, t tomará un valor cercano a 0. Digamos que, para hacerlo más fácil, es igual a 0. Después
de haber dibujado a Newton y la manzana, creamos una nueva variable llamada timer que calcula cuanto tiempo ha
pasado. Esto se hace con (millis()-t)/1000. Cuando han pasado 10 segundos, este cálculo sería: (10000-0)/1000.
Si timer es mayor que 30, llamamos a noLoop() para parar el programa. Pero puesto que timer no es mayor que 30,
utiliza text()para mostrar cuanto tiempo queda.
El juego con contador de tiempo se verá como sigue:
87 de 94 11/01/15 15:03
88 de 94 11/01/15 15:03
Añade imágenes al juego
Añade imágenes al juego
Incluye imágenes para la manzana, el fondo y Newton. Las puedes crear tú, buscarlas en Internet, o usar las que te
pasamos. Es importante que las imágenes sean de tipo PNG si quieres que haya transparencia entre las imágenes y el
fondo. Ten en cuenta que, al cambiar las formas por imágenes, las proporciones también cambian, por lo que tendrás
que hacer encajar esos valores en la parte del programa dedicado a la detección de colisiones.
/*
*
*
* Paso 12:
* - incluye imagenes para la manzana, el fondo y Newton
* - puedes hacer las imagenes tu mismo, buscarlas de internet,
* o usar las que te pasamos
* - es importante que las imagenes sean de tipo PNG si quieres
* que haya transparencia entre las imagenes y el fondo
* - ten en cuenta que, al cambiar las formas por imagenes, las proporciones
* tambien cambian, tendras que hacer encajar esos valores en tu diseño
*
*/
String[] imFiles = {"fondo.png", "manzana.png", "newton1.png", "newton2.png"};

PImage[] im = new PImage[4];

long t = 0; // Almacena el tiempo
void setup() {
size(400, 400);
nY = height - 135;
t = millis();
// Carga las imagenes
89 de 94 11/01/15 15:03
for(int i = 0; i < 4; i = i + 1) {
im[i] = loadImage(imFiles[i]);
}
}
void draw() {
background(200);
image(im[0], 0, 0, width, height); // Imagen de fondo
mV = mV + mA;
mY = mY + mV;
if (mY > height) {
mY = 15;
mV = 0;
}
fill(255);
if (mY + 50 > nY && mY < nY + 135) {
if (mX + 40 > nX && mX < nX + 128) {
fill(255, 0, 0);
}
}
image(im[1], mX, mY); // Manzana

if(pCount) {
image(im[2], nX, nY); // Newton buscando manzanas
} else {
image(im[3], nX, nY); // Newton alcanzo una manzana
}
// Contabilizacion del tiempo

float timer = (millis() - t) / 1000;
// Fin del juego (GAME OVER)

if (timer >= 30) {
noLoop();
}
// Muestra el tiempo en la pantalla

fill(0);
textSize(20); // Incrementa el tamaño de la fuente de texto
text("Tiempo: " + (30 - timer), 10, 25);
90 de 94 11/01/15 15:03
fill(0);
textSize(20);
text("Manzanazos: " + p, 3 * width / 5, 25);
}
void keyPressed() {
nX = nX + 3;
}
nX = nX - 3;
}
if (nX < 0) {
nX = 0;
}
nX = width - 20;
}
}
Para cargar las imágenes utilizamos el mismo método que en los proyectos anteriores, utilizando arrays. En lugar de
cambiar el color de las formas cuando una colisión sea detectada, utilizamos el boolean pCount para decidir qué imagen
de Newton mostrar.
El resultado final del juego se ve como sigue:
91 de 94 11/01/15 15:03
92 de 94 11/01/15 15:03
Para mejorar este juego puedes hacer varias cosas:
Haz tus propias imágenes.

Crea una pantalla de inicio y que se pase al juego una vez se presione un botón.
Crea una pantalla final que muestre el resultado una vez se haya terminado el tiempo.
Haz posible reiniciar el juego cuando el tiempo haya terminado. No te olvides de reiniciar todas las variables
necesarias.
Usa superpoderes científicos, haz que Newton se pueda mover con aceleración y no solo a velocidad constante.
93 de 94 11/01/15 15:03
Obra publicada con Licencia Creative Commons Reconocimiento No comercial Compartir igual 3.0
94 de 94 11/01/15 15:03

Processing

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Processing

Cargado por

Copyright:

Formatos disponibles

Processing http://127.0.0.1:51235/temp_print_dirs/eXeTempPrint...

Programando con Processing

Poner en marcha un programa

Crear un nuevo programa

Almacenar el programa en el disco duro del ordenador

Cada pixel tiene 2 coordenadas:

La coordenada horizontal es la que llamamos coordenada X (anchura, o en inglés width).

1 line(0, 0, 100, 100);

Sólo utilizamos un único comando aquí:

Lo que también necesitas saber es:

Cuando ejecutes el programa, lo que deberías ver por pantalla es:

int value2 = 100;

int: Número entero, p.ej., 2, 99 o 532.

size(width, height): Establece el tamaño de la ventana en píxels.

width: la anchura de la ventana de programa.

Setup and Draw

mouseX: La coordenada X del puntero del ratón.

Empezaremos dibujando un círculo rojo.

Veamos los otros comandos utilizados:

size(ancho, alto): establece el tamaño de la ventana del programa en píxels.

Haz que el círculo se mueva

Haz que el círculo se mueva

Serpiente roja paso 2 by tecnologiapedromercedes, via OpenProcessing.

Cambia gradualmente el color

Cambia gradualmente el color

int rojo = 255;

Cambia gradualmente el color II

Cambia gradualmente el color II

int rojo = 255;

Serpiente roja paso 4 by tecnologiapedromercedes, via OpenProcessing.

Usa la función sin()

Usa la función sin()

int rojo = 255;

Serpiente roja paso 5 by tecnologiapedromercedes, via OpenProcessing.

int rojo = 255;

Serpiente roja paso 6 by tecnologiapedromercedes, via OpenProcessing.

Serpiente Roja by tecnologiapedromercedes, via OpenProcessing.

Serpiente Roja by tecnologiapedromercedes, via

Inserta una imagen en tu programa

Inserta una imagen en tu programa

Descarga la foto aquí

PImage: Un tipo de datos que puede contener una imagen.

Mostrando dos imágenes

Mostrando dos imágenes

Descarga las fotos foto.jpg y foto2.jpg

A pesar de que el programa ha sido modificado, no hay ninguna diferencia en el resultado.

Usando dos arrays

Usando dos Arrays

PImage im[] = new PImage[2];

Descarga las imágenes banana.jpg, peninsula.jpg, postit.jpg y tortilla.jpg

for(initiator; test; update){ statements }:

Aquí está el resultado:

Descarga las imágenes que representan los números: 0, 1, 2, 3, 4, 5, 6, 7, 8 y 9

PImage im[] = new PImage[10]; // Array para 10 imagenes

PImage im[] = new PImage[10]; // Array para 10 imagenes

image(im[h_dec], 0, 0); // Muestra el digito de las decenas

hour(): Devuelve la hora actual como un número de 0 a 23.

PImage im[] = new PImage[10]; // Array para 10 imagenes

image(im[m_dec], 0, 95); // Muestra el digito de las decenas

image(im[s_dec], 0, 190); // Muestra el digito de las decenas

minute(): devuelve los minutos actuales como un valor de 0 a 59.

Crea una manzana y un científico

Crea una manzana y un científico