processing/easingを利用してマウスに反応して動くようにしたい。

Question

processing でeasaing を利用して鳥をマウスに反応して動くようにしたいのですが、移動範囲が狭く、マウスを動かしても一定の距離で止まってしまいます。
原因と解決方法を知りたいです。よろしくお願いします。

float x=0;
float angle=0;
float easing=0.1;

void setup(){
  size(400,400);
}

void draw(){
  background(176, 204, 226);
  fill(160, 82, 45);
  noStroke();
  rect(55,250,50,150);
  fill(107,142,35);
  for(int i = 0; i<6; i++){
  ellipse(0 + 30*i,270,30,30);
  }
  for(int i = 0; i<5; i++){
  ellipse(20 + 30*i,250,30,30);
  }
  for(int i=0; i<4; i++){
  ellipse(35 + 30*i, 230, 30, 30);
  }
 for(int i=0; i<3; i++){
  ellipse(50 + 30*i, 210, 30, 30);
  }
  for(int i=0; i<2; i++){
  ellipse(65 + 30*i, 190, 30, 30);
  }
  ellipse(80, 170, 30, 30);
 
bird(50,0);
bird(0,-50)

}

void bird(int x, int y) {
int targetX=mouseX;
x += (targetX-x)* easing;
fill(255, 165, 0);
ellipse(350,80,50,50);
pushMatrix();
fill(255, 182, 193);
ellipse(x+50,y+200,20,20);
triangle(x+35,y+200,x+45,y+195,x+45,y+205);
arc(x+75,y+200,50,50,radians(0),radians(180));
arc(x+65,y+200,35,35,radians(300),radians(360));
popMatrix();

}
  

Answer 1

なるほど、大変わかりやすい回答ありがとうございます‼

Answer 2

processing でeasaing を利用して

こちらのような話ですね？
Easing / Examples / Processing.org

移動範囲が狭く、マウスを動かしても一定の距離で止まってしまいます。

提示コードはイージングになっていません。
なぜかというとfloat xとint xで名前がかぶっており、グローバル変数のfloat xを一切使用していません。
そのため「mouseXの値を1/10するだけ」のような意味になってしまっています。

int xに別の名前を付けて、translateするのがいいいでしょうかね。

float x;
float easing = 0.02;

void setup() {
  size(400, 400);
  noStroke();
}

void draw() {
  background(176, 204, 226);

  fill(255, 165, 0);
  circle(350, 80, 50);

  tree();

  bird(50, 0);
  bird(0, -50);
}

void tree() {
  fill(160, 82, 45);
  rect(55, 250, 50, 150);

  fill(107, 142, 35);
  for (int i = 0; i < 6; i++) {
    for (int j = 0; j <= i; j++) {
      circle(80 - 15 * i + 30 * j, 170 + i * 20, 30);
    }
  }
}

void bird(int offsetX, int offsetY) {
  float targetX = mouseX;
  x += (targetX - x) * easing;
  float y = 200;
  
  pushMatrix();
  translate(offsetX, offsetY);
  fill(255, 182, 193);
  circle(x + 50, y, 20);
  triangle(x + 35, y, x + 45, y - 5, x + 45, y + 5);
  arc(x + 75, y, 50, 50, radians(0), radians(180));
  arc(x + 65, y, 35, 35, radians(300), radians(360));
  popMatrix();
}