Рисунок должен следовать за курсором мыши

Здравствуйте, у меня есть следующий скрипт, но я хочу, чтобы палец с ногтем следовал за курсором мыши. Любой совет?

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);
}


Палец — это то, что должно следовать за курсором мыши, а не за эллипсом. Чего я достиг до сих пор, так это сделать рисунок и создать эллипс, который следует за курсором мыши, но палец должен следовать за ним.

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
Как вычислять биты и понимать побитовые операторы в Java - объяснение с примерами
Как вычислять биты и понимать побитовые операторы в Java - объяснение с примерами
В компьютерном программировании биты играют важнейшую роль в представлении и манипулировании данными на двоичном уровне. Побитовые операции...
Поднятие тревоги для долго выполняющихся методов в Spring Boot
Поднятие тревоги для долго выполняющихся методов в Spring Boot
Приходилось ли вам сталкиваться с требованиями, в которых вас могли попросить поднять тревогу или выдать ошибку, когда метод Java занимает больше...
Полный курс Java для разработчиков веб-сайтов и приложений
Полный курс Java для разработчиков веб-сайтов и приложений
Получите сертификат Java Web и Application Developer, используя наш курс.
0
0
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать функцию translate() (связанную с PushMatrix() и PopMatrix())

Таким образом, вы можете изменить исходную точку (0;0) вашего холста и поместить его на курсор.
PushMatrix() сохраняет текущее исходное местоположение, а PopMatrix() восстанавливает его.

Вот ваш код


    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);
    }

Другие вопросы по теме