Processing desde Cero: Capitulo 3 – Interacción

Por fin empieza lo bueno, aqui me dedicare a trabajar en lo que todos desean, empezar a hacer cosas visualmente atractivas.

Para empezar debemos de explorar varias funciones

mouseX

mouseY

pmouseX

pmouseY

void mousePressed(){

}

void keyPressed(){

}

En base a estas funciones empezamos a programar.

primero usemos mouseX(); y mouseY();

estas funciones sirven para actuar donde este el cursor, el perfecto ejemplo es con este codigo:

// Ejemplo:

void setup(){

size(800,500); // aqui estoy definiendo el area de mi programa

background(255); // el fondo se mi programa sera blanco

}

void draw(){

ellipse(mouseX, mouseY, 20, 40);

/*
mouseX y mouseY se encargan de dicir que dibuje donde pase el mouse, y mi elipse tendra 20 pixeles de ancho y 40 de alto
*/

}

https://www.openprocessing.org/sketch/416380/embed/

y por ende se pueden hacer cosas como esta:

bolitas ejemplo

pero bueno esto es muy basico, ahora empecemos con algo mejor:

void setup() {
size(600, 500);

}

void draw() {
fill(240,20);
rect(0,0,width,height);
stroke(random(255),random(255),random(255));
strokeWeight(abs(pmouseX – mouseX));
line(pmouseX, pmouseY, mouseX, mouseY);
}

aqui esta el codigo en linea:

https://www.openprocessing.org/sketch/417283/embed/

ejemplo cap 3

¿como se ha realizado esto?

vamos por partes:

Toda la magia sucede en el draw:

void draw() {

/*
Primero que nada dibujamos un rectangulo con una transparencia
de esta manera el fondo siempre borrara automaticamente
*/
fill(240,20); // relleno blanco con 20 de trasparencia
rect(0,0,width,height); //rectangulo de fondo

//la linea tendra un color random
stroke(random(255),random(255),random(255));

/*
aqui viene lo interesante:
abs(); es una funcion que determina valores absolutos, esto significa que no importa si un valor es negativo o positivo, el resultado siempre sera positivo

strokeWeight(abs(pmouseX – mouseX));
lo que le estoy diciendo al programa aqui es:
el ancho  “strokeWeight();” de la linea sea igual a la resta de donde estaba el mouse en el frame anterior “pmouseX” menos el sitio actual del mouse “mouseX”
entonces si en un frame avanzamos 10 pixeles, el ancho sera de 10 pixeles
porque con la funcion “abs” -10 ó 10 siguen siendo 10 (positivo)

abs hace esto en general, por poner ejemplos al azar:

-5 ó 5 = 5
-30 ó 30 = 30
-18 ó18 = 18
… etcetera.
*/

strokeWeight(abs(pmouseX – mouseX));

/*
dibuja una que empiece donde estaba el mouse en el frame anterior hasta donde este el mouse en el frame actual
*/
line(pmouseX, pmouseY, mouseX, mouseY);

Y el cuadrado tambien se ve afectado por esta condicional
}

finalmente lo mas simple del mundo:

void setup() {
size(500, 500);
background(255);
}

// cada vez que presione el mouse dibuja una bola blanca
void mousePressed() {
stroke(0);
fill(175);
rectMode(CENTER);
rect(mouseX, mouseY, 16, 16);
}

//cada vez que presione una tecla dibuja un fondo negro
void keyPressed() {
background(255);
}

dejo el codigo aqui:

https://www.openprocessing.org/sketch/417288/embed/

referencias:

https://processing.org/reference/mouseX.html

https://processing.org/reference/pmouseX.html

https://processing.org/reference/mousePressed_.html

https://processing.org/reference/keyPressed_.html

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s