Interactividad básica

descargar

Los modos estático y dinámico

Los siguientes ejemplos muestran como trabajar con interactividad en Processing. Este lenguaje permite trabajar e dos modos de programación, uno estático y otro dinámico. En el primer modo se escriben las instrucciones en orden descendente pero sin una organización externa, mientras que en el segundo modo de programación el código se organiza en estructuras. Las dos estructuras principales con setup() y draw() (que en versiones anteriores de Processing se llamaba loop() ).

En el ejemplo que sigue, las instrucciones que se detallan se ejecutan de arriba a abajo, y el código se ejecuta una única vez, lo que hace que el algoritmo sirva para generar una ùnica imagen estática:

Ejemplo: Modo estático código fuente

int a;
a = 10;
size(150,150);
background(100);
a = (a+1) % 150;
rect(a,50,10,10);

Hecho en Processing

A diferencia de el anterior ejempo, en el siguiente, las instrucciones mismas instrucciones estan organizadas dentro de la estructura void setup(){ ... } y la estructura void draw(){ ... } . Las instrucciones que se encuentran en el setup() sólo se ejecutan una única vez al inicio del programa. Las instrucciones que se encuentran en el draw() se ejecutan 30 veces por segundo luego de la ejecución del setup(). Fuera de estas dos estructuras se pueden escribir declaraciones de variables u otras estructuras que luego veremos.

Ejemplo: Modo dinámico código fuente

int a;
void setup(){
a = 10;
size(150,150);
}
void draw(){
background(100);
a = (a+1) % 150;
rect(a,50,10,10);
}

Hecho en Processing

El uso del mouse

Para detectar la posición del mouse en la pantalla existen dos variables del sistema llamadas mouseX y mouseY. Estas variables representan la posición horizontal y vertical del mouse, respectivamente. No es necesario declarar estas variables dado que ya pertenecen al sistema. Con el simple hecho de referenciarlas, estas devuelven en cada momento los valores numéricos que expresan la posición del mouse. En los ejemplos siguientes se usan estas variables para dibujar un rectángulo en la posición del mouse:

Ejemplo: Siguiendo el mouse (dejando rastro) código fuente

int x,y;
void setup(){
background(230); //la diferencia esta en esta linea
size(200,200);
}
void draw(){
x=mouseX-25;
y=mouseY-25;
rect(x,y,50,50);
}

Hecho en Processing

Ejemplo: Siguiendo el mouse (sin rastro) código fuente

int x,y;
void setup(){
size(200,200);
}
void draw(){
background(230); //la diferencia esta en esta linea
x=mouseX-25;
y=mouseY-25;
rect(x,y,50,50);
}

Hecho en Processing

Otros ejemplos

Ejemplo: Redimensionando el rectángulo con el mouse código fuente

Hecho en Processing

Interactividad básica

Los modos estático y dinámico

El uso del mouse

Otros ejemplos

Ejemplo: Movimiento inverso código fuente

Ejemplo: Seguimientos y movimientos inverso código fuente

Ejemplo: Multiplicación código fuente

Ejemplo: División código fuente

Ejemplo: Controlando colores con el mouse código fuente