a-12 反応(2) 追跡

---

a-12 反応(2) 追跡

draw() setuo()を覚えたので、次はマウスの位置を追跡し描画するプログラム

void setup(){
  size(480,120);
  fill(255,255,0,50);//RGBA
  noStroke();
}
void draw(){
  ellipse(mouseX,mouseY,10,10);
}

mouseX変数はx座標、mouseY変数はy座標を保持する。

ウィンドウ上をマウスが移動すると円が描画される。

---

void setup(){
  size(480,120);
  fill(255,255,0);//RGB
  noStroke();
}
void draw(){
  background(0);
  ellipse(mouseX,mouseY,10,10);
}

background()関数はウィンドウをクリアにする。draw()の中では他の関数より前に置かないと描いた図形が消えるので、このプログラムだと常にマウスがある場所にしか図形は描画されない。

---

void setup(){
  size(480,120);
  strokeWeight(5);
  stroke(255,255,0,50);//RGBA
  }

void draw(){
  line(mouseX,mouseY,pmouseX,pmouseY);
}

pmouseX変数とpmouseY変数はひとつ前のフレームのマウス位置を記憶する。mouseXやmouseYと同様にdraw()が実行される度に値が更新されるので、切れ目のない線を描く事ができる

---

void setup(){
  size(480,120);
  stroke(255,255,0,50);//RGBA
  }

void draw(){
  float weight=dist(mouseX,mouseY,pmouseX,pmouseY);
  strokeWeight(weight);
  line(mouseX,mouseY,pmouseX,pmouseY);
  }

pmouseXとpmouseYはスピード計算にも使う。フレームの更新時間が一定なので現在のマウス位置と１フレーム前のマウス位置からの移動距離＝スピード

dist()を使って得た値をstrokeWeight()に渡す事でスピードを線の太さとして描画することができる。

---

float x;
float easing=0.01;//スピード
float diameter=12;

void setup(){
  size(480,120);
}

void draw(){
  float targetX=mouseX;
  x+=(targetX-x)*easing;//現在地と目的地の差を計算してからeasing変数に掛ける
  ellipse(x,40,diameter,diameter);
  println(targetX+":"+x);
  }

easingで反応スピードを調整する。x+=で始まる１行が大事。現在地と目的地の差を計算してそこにeasing変数を掛けてxに加えることで目的地に到達する。

---

float easing=0.05;

void setup(){
  size(480,120);
  stroke(255,255,0,50);//RGBA
}

void draw(){
  float targetX=mouseX;
  x+=(targetX-x)*easing;
  float targetY=mouseY;
  y+=(targetY-y)*easing;
  float weight=dist(x,y,px,py);
  strokeWeight(weight);
  line(x,y,px,py);
  py=y;
  px=x;
}

dist()をstrokeWeight()に渡しスピードを線の太さに変えて描画する際にもeasingをつかうと、より滑らかな線になる