绘图应跟随鼠标 cursor

Question

Hello I have the following script, but I want the finger with the nail follows the mouse cursor. Any tip?

float x = 100;
float y = 100;

void setup() {
  size(360, 600);
}


void draw() {
  background(220, 220, 220);
  strokeWeight(1);
  
  fill(180, 180, 180);
  rect(20, 20, 320, 280);
  
  fill(200, 225, 150);
  square(60, 40, 240);
  
    fill(0);
  rect(60, 380, 40, 120); 
  rect(20, 422, 120, 35); 
  

  fill(200, 50, 255);
  circle(240, 440, 40); 
  circle(300, 440, 40); 
  
  
  fill(180, 180, 180);
  rect(120, 540, 40, 20);
  rect(195, 540, 40, 20);


  fill(150, 150, 150);
  circle(80, 440, 20);

  line(260, 540, 300, 580);
  line(280, 520, 320, 560);
  line(300, 500, 340, 540);
  
  fill(230, 220, 180);
  rect(140, 240, 80, 160, 40, 40, 0, 0);
  fill(255);
  rect(160, 240, 40, 40, 20, 20, 0, 0);
  
  float targetX = mouseX;
  float dx = targetX - x;
  x += dx;
  
  float targetY = mouseY;
  float dy = targetY - y;
  y += dy;
  
  ellipse(x, y, 20, 20);
}

The finger is what should follows the mouse cursor, instead of the elipse. What I achive so far is make the drawing and create an ellipse that follows the mouse cursor, but the finger is the one that should follows it.

Answer 1

You can use the translate() function (associated with PushMatrix() and PopMatrix() )

This way you can change the origin (0;0) of your canvas and put it on your cursor.
PushMatrix() saves the current origin location, and PopMatrix() restores it.

Here is your code

    float x = 100;
    float y = 100;

    void setup() {
      createCanvas(360, 600);
    }


    void draw() {
      background(220, 220, 220);
      strokeWeight(1);
      
      fill(180, 180, 180);
      rect(20, 20, 320, 280);
      
      fill(200, 225, 150);
      square(60, 40, 240);
      
      fill(0);
      rect(60, 380, 40, 120); 
      rect(20, 422, 120, 35); 
      

      fill(200, 50, 255);
      circle(240, 440, 40); 
      circle(300, 440, 40); 
      
      
      fill(180, 180, 180);
      rect(120, 540, 40, 20);
      rect(195, 540, 40, 20);


      fill(150, 150, 150);
      circle(80, 440, 20);

      line(260, 540, 300, 580);
      line(280, 520, 320, 560);
      line(300, 500, 340, 540);
      

      
      float targetX = mouseX;
      float dx = targetX - x;
      x += dx;
      
      float targetY = mouseY;
      float dy = targetY - y;
      y += dy;
      
      //save the current origin position
      pushMatrix();

      //moves the origin to your cursor location (-40 offset to center the  finger)
      translate(x-40,y);

      //Changed the position of the finger since it now starts at the cursor location (0;0)
      fill(230, 220, 180);
      rect(0, 0, 80, 160, 40, 40, 0, 0);
      fill(255);
      rect(20, 0, 40, 40, 20, 20, 0, 0);

      //Restore the saved origin location so next draw() iteration works well
      popMatrix();
      
      ellipse(x, y, 20, 20);
    }