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:
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/
¿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
