Interactividad

Ejemplos

-Crear copia de un dibujo con clic del ratón

https://es.khanacademy.org/computer-programming/derivado-de-crear-copias-de-un-dibujo-con-un-clic/4563729941331968

-Probar de hacer este ejercicio

Hacer clic en un icono, para que active el script de la función que copia esa forma. y aplicarla al lienzo con clic del mouse. (otra posibilidad es aplicarla a unas coordenadas precisas, que el programa debería pedir.)

Acciones activadas desde el Mouse

El dibujo sigue al ratón en los ejes X e Y

strokeWeight(3);

stroke(57, 0, 214);

fill(0, 210, 247);

draw = function() {

background(255, 255, 255);

ellipse(mouseX, mouseY, 30, 30);

};

El dibujo sigue al ratón solo en un eje

strokeWeight(3);

stroke(57, 0, 214);

fill(0, 210, 247);

draw = function() {

background(255, 255, 255);

ellipse(mouseX, 200, 30, 30);

};

Invirtiendo los valores de X e Y del ratón

strokeWeight(3);

stroke(57, 0, 214);

fill(0, 210, 247);

draw = function() {

background(255, 255, 255);

ellipse(mouseY, mouseX, 30, 30);

};

Si quitamos el fondo el mouse dibuja en el lienzo

// mouseX and mouseY

strokeWeight(3);

stroke(57, 0, 214);

fill(0, 210, 247);

draw = function() {

ellipse(mouseX, mouseY, 30, 30);

};

Podemos aplicar mouse x e y a diferentes parámetros del dibujo

Ejemplo modificando todos los parámetros con el mouse

stroke(mouseX,mouseY, mouseX);

fill(mouseX,mouseY,mouseY, mouseY);

draw = function() {

background(mouseX, mouseY, mouseX, mouseY);

strokeWeight(mouseY/10);

fill(mouseX,mouseY,mouseX, mouseY);

ellipse(mouseY, mouseX, mouseY, mouseX);

strokeWeight(mouseX/10);

fill(mouseY,mouseX,mouseY, mouseX);

rect(mouseX, mouseY, mouseX, mouseY);

line(mouseX,mouseX,mouseY, mouseY);

};

ver online

Figuras fantasmas

Ver online: http://studio.processingtogether.com/sp/pad/iframe/fdc6cJ3InK/latest?a=true&autostart=0&fullscreen=true

Ratón

mouseX, mouseY

Coordenadas actuales del ratón

pmouseX, pmouseY

Coordenadas pasadas del ratón

mouseButton

Qué botón es presionado

mouseIsPressed

Si el mouse está siendo presionado

mouseClicked = function() { };

Se llama cuando se hace clic con el ratón

mousePressed = function() { };

Se llama cuando se presiona el ratón

mouseReleased = function() { };

Se llama cuando se suelta el ratón

mouseMoved = function() { };

Se llama cuando se mueve el ratón

mouseDragged = function() { };

Se llama cuando se arrastra el ratón

mouseOver = function() { };

Se llama cuando se mueve el ratón sobre el lienzo

mouseOut = function() { };

Se llama cuando se mueve el ratón fuera del lienzo