Hola compañeros del proyecto Tut, tut, tut
En esta sesión vamos a aprender a programar dibujos que cambien al mover el ratón de la computadora.
IIIIIIIIIIIIII Copien el siguiente programa, péguenlo en un archivo nuevo y den clic en run:
void setup(){
size(200,200);
noStroke();
}
void draw(){
if (mouseX < 100){
fill(255, 0, 0);
rect(0,0, 100, 200);
fill(0, 0, 255);
rect(101, 0, 100, 200);
}
if (mouseX > 99){
fill(0, 0, 255);
rect(0,0, 100, 200);
fill(255, 0, 0);
rect(101, 0, 100, 200);
}
} |
|
En el ejemplo anterior, coloca el ratón sobre el rectángulo azul y veras como se vuelve rojo, y el rectángulo rojo se vuelve azul.
Ahora vamos revisar lo que hace este programa:
void setup(){
size(200,200);
noStroke();
} |
Dentro de la función setup tenemos la función size que determina el tamaño de la ventana, y noStroke que determina que las figuras no tengan contorno.
void draw(){
if (mouseX < 100){
fill(255, 0, 0);
rect(0,0, 100, 200);
fill(0, 0, 255);
rect(101, 0, 100, 200);
}
if (mouseX > 99){
fill(0, 0, 255);
rect(0,0, 100, 200);
fill(255, 0, 0);
rect(101, 0, 100, 200);
}
} |
Dentro de la función draw tenemos dos estructuras if.
La primera ejecuta sus declaraciones si la variable mouseX es menor a 100. Esta variable es una variable hecha por Processing cuyo valor es la coordenada x en la que se encuentra el ratón.
Entonces si el ratón se encuentra en una coordenada cuyo valor en x es menor a 100:
if (mouseX < 100){
fill(255, 0, 0);
rect(0,0, 100, 200);
fill(0, 0, 255);
rect(101, 0, 100, 200);
} |
se dibuja un rectángulo de color rojo de 100 x 200 píxeles con su esquina superior izquierda en la coordenada 0, 0. Y también se dibuja un rectángulo de color azul del mismo tamaño que el anterior con su esquina superior izquierda en la coordenada 101, 0.
La segunda estructura if ejecuta sus declaraciones si la variable mouseX es mayor a 99.
Entonces si el ratón se encuentra en una coordenada cuyo valor en x es mayor a 99:
if (mouseX > 99){
fill(0, 0, 255);
rect(0,0, 100, 200);
fill(255, 0, 0);
rect(101, 0, 100, 200);
}
|
se dibuja un rectángulo de color azul de 100 x 200 píxeles con su esquina superior izquierda en la coordenada 0, 0. Y también se dibuja un rectángulo de color rojo del mismo tamaño que el anterior con su esquina superior izquierda en la coordenada 101, 0.
| |
adelante  |
|
|
|
