PROCESSING

VARIABLES

 Una variable almacena un valor

en la memoria para que pueda
ser
usada
despus
en
el
programa.

 Una variable puede ser usada varias veces

dentro de un mismo programa.
Es fcil de cambiar el valor de una variable.
size(480, 120);
smooth();
int y = 60;
int d = 80;
ellipse(75, y, d, d); // Left
ellipse(175, y, d, d); // Middle
ellipse(275, y, d, d); // Right

Declarar Variables

Para crear una variable se determina el nombre, el tipo

de variable, y el valor de la variable.

int x;
x = 12;

int x = 12;

Tipos de variables

boolean.- El tipo de dato para esta variable es

true y false.
int.- nmeros enteros.
double.- nmeros con decimales (64 bits).
float.- nmeros con decimales (32 bits).
color.- almacena los valores de cualquier color ya
sea en formato RGB, Hexadecimal o escala de
grises:
color c = color(R, G, B);
color c = #FFFFFF;

Processing tiene una serie de variables especiales para

almacenar informacin sobre el programa mientras se
ejecuta.
Por ejemplo, la anchura y la altura de la ventana se
almacenan en las variables denominadas width y height.

size(480, 120);
smooth();
line(0, 0, width, height);
line(width, 0, 0, height);
ellipse(width/2, height/2, 60, 60);

CICLO for

El ciclo for hace posible

ejecutar una lnea de
cdigo ms de una vez.

for (init; test; update)

{
statements;
}

init
.Se
variable para
del ciclo for.

declara
una
usar dentro

test.evala el valor de
la variable.

update.- actualiza el valor

de la variable.

statements.- es el cdigo
que se repetir en cada
iteracin del ciclo.

for (int i = 20; i < 400; i += 60)

{
line(i, 40, i + 60, 80);
}

Cuando un ciclo for est incrustado dentro de otro

ciclo el nmero de repeticiones es multiplicado.

size(200, 200);
ellipseMode(CORNER);
for (int x = 0; x<=width; x+=40)
{
for (int y = 0; y<=height; y+=40)
{
ellipse(x, y, 40, 40);
}
}

Cuando un ciclo for est incrustado dentro de otro

ciclo el nmero de repeticiones es multiplicado.

size(200, 200);
ellipseMode(CORNER);
for (int x = 0; x<=width; x+=40)
{
ellipse(x, 0, 40, 40);
}
for (int y = 0; y<=height; y+=40)
{
ellipse(0, y, 40, 40);
}

ejercicio

ejercicio

setup() y draw()

La funcin draw() ejecuta continuamente las lneas de

cdigo contenidas en su bloque hasta que se detenga el
programa.

La funcin setup() ejecuta solo una vez el cdigo de su

bloque cuando inicia el programa.

Ahora que tenemos cdigo que se ejecuta continuamente,

podemos usar la posicin del mouse para mover elementos
en la pantalla.

La variable mouseX y mouseY almacenan la posicin del

mouse en la coordenada X y Y respectivamente.

Track the mouse

void setup()
{
size(480, 120);
background(204);
fill(0, 102);
smooth();
noStroke();
}
void draw()
{
ellipse(mouseX, mouseY, 9, 9);
}

Track the mouse

En este ejemplo, cada vez que se ejecuta el cdigo dentro del

bloque de draw(), se dibuja un nuevo crculo en la pantalla.

ejercicio

Hacer que una figura siga al mouse sin que deje rastro de sta
misma (que no se dibujen muchas figuras, pues)

Hay un lugar ms para escribir cdigo. Se pueden declarar

variables fuera de setup() y draw(). Si se crea una variable
dentro de setup(), no podr ser utilizada dentro de draw(), por
lo que se necesita colocarlas en otro lugar.

Estas variables se denominan variables globales, ya que pueden

se utilizadas en cualquier lugar del programa.

1.

Las variables deben ser declaradas fuera de setup() y draw().

2.

El cdigo escrito dentro de setup() se ejecuta una sola vez.

3.

El cdigo escrito dentro de draw() se ejecuta continuamente,

hasta que se finalice el programa.

ESTRUCTURA if

if

La
estructura
if
ejecuta las sentencias
dentro de su bloque
mientras la prueba sea
verdadera.

if (test)
{
statements;
}

if, else
if (test)
{
statements 1;
}
else
{
statements 2;
}

if, else if
if (test 1)
{
statements 1;
}
else if (test 2)
{
statements 2;
}

Ubicacin

Una estructura if puede ser utilizada con los valores de mouseX

y mouseY para determinar la posicin del cursor dentro de la
ventana.

Ubicacin
void setup()
{
size(400,400);
}
void draw()
{
background(255);
if(mouseX<=width/2)
{
background(255,0,0);
}
}

line(width/2, 0, width/2, height);

Click

Adems de la ubicacin del mouse, Processing tambin identifica

si se pulsa el botn del mouse o no.

La variable mousePressed es una variable de tipo boolean. Su

valor es true cuando el botn del mouse es presionado.

Click
void setup()
{
size(400,400);
}
void draw()
{
background(255);
fill(255);
if(mousePressed==true)
{
fill(255,0,0);
}
ellipse(width/2, height/2, 100, 100);
}

Ejercicio

Dibujar un cuadrado en el centro del sketch y hacer que cambie

de color cuando se presione el botn del mouse dentro de la
figura.