Arrastrar elementos con el ratón

draganddrop
Vamos a introducir un poquito de interactividad con el ratón. Dibujaremos tres circunferencias que podremos mover haciendo clic con el ratón sobre ellas. Para evaluar si el cursor está o no sobre cada circunferencia usaremos la función dist(), que calcula la distancia entre dos puntos, indicados por sus coordenadas. Al hacer depender las de uno de ellos de la posición del cursor, estaremos calculando constantemente la distancia entre este y el centro de cada circunferencia. Una función if() hará que se ejecute una acción cuando esa distancia sea menor al radio de la circunferencia.

Lo detallaré en los comentarios.

  1. //Tres circunferencias arrastrables (drag and drop) unidas por líneas
  2.  
  3. //variables para la primera circunferencia: coord. del centro y tamaño
  4. int x = 100;
  5. int y = 100;
  6. int sz = 100;
  7. //variables para la segunda
  8. int x1 = 400;
  9. int y1 = 100;
  10. int sz1 = 50;
  11. //variables para la tercera
  12. int x2 = 250;
  13. int y2 = 400;
  14. int sz2 = 75;
  15. //variable para el color del fondo
  16. color bgcolor;
  17.  
  18. void setup(){
  19.   size(500,500);
  20.   //definiendo y aplicando el color de fondo
  21.   bgcolor = #CC0000;
  22.   background(bgcolor);
  23. }
  24.  
  25. void draw(){
  26.   //reiniciar el fondo a cada repetición
  27.   background(bgcolor);
  28.  
  29.   //líneas que unen las circ.
  30.   stroke(#FFFFFF);
  31.   line(x,y, x1,y1);
  32.   line(x1,y1, x2,y2);
  33.   line(x2,y2, x,y);
  34.  
  35.   //primera circ.
  36.   //si la distancia entre el ratón y el centro es menor que la mitad del radio...
  37.   if (dist(x,y,  mouseX,mouseY) < sz/2){
  38.     //el cursor se convierte en mano
  39.     cursor(HAND);
  40.     //cambia el color
  41.     fill(#FA8A00);
  42.     //si además hacemos clic
  43.     if (mousePressed){
  44.       //el centro de la circ. se mueve a la posición del cursor
  45.       x = mouseX;
  46.       y = mouseY;
  47.       //y la línea se hace más gruesa
  48.       strokeWeight(5);
  49.     //en caso contrario
  50.     } else {
  51.       //volver al grueso original
  52.       strokeWeight(2);
  53.     }
  54.     //color de la circ. con el cursor encima
  55.     fill(#FA8A00);
  56.     stroke(#FFFFFF);
  57.   //si el cursor está fuera de la circ.  
  58.   } else {
  59.     //deshacemos los cambios en el cursor y el contorno
  60.     cursor (ARROW);
  61.     noStroke();
  62.     fill(#FFFFFF);
  63.   }
  64.   //y dibujamos la circunferencia
  65.   ellipse(x, y, sz, sz);
  66.  
  67.   //segunda circ.
  68.   if (dist(x1,y1,  mouseX,mouseY) < sz/2){
  69.     cursor(HAND);
  70.     fill(#FA8A00);
  71.     if (mousePressed){
  72.       x1 = mouseX;
  73.       y1 = mouseY;
  74.       strokeWeight(5);
  75.     } else {
  76.       strokeWeight(2);
  77.     }
  78.  
  79.     fill(#FA8A00);
  80.     stroke(#FFFFFF);
  81.  
  82.   } else {
  83.     cursor (ARROW);
  84.     noStroke();
  85.     fill(#FFFFFF);
  86.   }
  87.   ellipse(x1, y1, sz1, sz1);
  88.  
  89.   //tercera circ.
  90.   if (dist(x2,y2,  mouseX,mouseY) < sz/2){
  91.     cursor(HAND);
  92.     fill(#FA8A00);
  93.     if (mousePressed){
  94.       x2 = mouseX;
  95.       y2 = mouseY;
  96.       strokeWeight(5);
  97.     } else {
  98.       strokeWeight(2);
  99.     }
  100.  
  101.     fill(#FA8A00);
  102.     stroke(#FFFFFF);
  103.  
  104.   } else {
  105.     cursor (ARROW);
  106.     noStroke();
  107.     fill(#FFFFFF);
  108.   }
  109.   ellipse(x2, y2, sz2, sz2);
  110. }

Leave a Comment.