じょりじょり日記

JavaScript100サイトチャレンジを記録するブログです。

JavaScriptチャレンジ Processing vol5

今日のやつは難しかったです。
ほとんど理解できていません(゚ロ゚; 三 ;゚ロ゚)
昨日もeasingに悩まされましたが、、、これは一度深く調べる必要がありそうですね。
がんばります。

f:id:zyoryzyory:20170905231456p:plain

//https://processing.org/examples/constrain.html

float mx;
float my;
float easing = 0.05;

//円の半径
int radius = 24;
int edge = 100;
int inner = edge + radius;

void setup() {
  size(640, 360);
  noStroke(); 
  
  //円の中心から描画
  ellipseMode(RADIUS);

  //rectの1,2の引数を左側、3,4の引数を右側の位置で描画
  rectMode(CORNERS);
}

void draw() { 
  background(51);
 
  //mxって変数宣言だけしかされてないけど一体どこから…?!
  //absでどちらにせよ正の値になるから常に実行されるという解釈でいいのだろうか
  //あいまいだ…。
  //mouseの位置をellipseが追従するシステムなのくらいしかわからない。。
  
  //試しにこの条件分岐を削除して、中身だけの状態にしてみた所しっかり機能する。
  //条件はよくわからないが、大事なのは中身かな
  
  if (abs(mouseX - mx) > 0.1) {
    //mx と -mxで相殺で
    //mx = mouseX * easing; が成り立つと思ったがうまくいかない
    //…どうしてボールを追いかけてくれるんだろう\(^o^)/
    mx = mx + (mouseX - mx) * easing;
  }
  if (abs(mouseY - my) > 0.1) {
    my = my + (mouseY- my) * easing;
  }
  
  //mxのmin=124 max=516をmxに設定
  mx = constrain(mx, inner, width - inner);
  my = constrain(my, inner, height - inner);
  
  //rectModeがCORNERSで100, 100の地点から描画
  //width-edge, height-edgeとすることで上下左右に均等に余白を取れるのか
  fill(76);
  rect(edge, edge, width-edge, height-edge);
  
  //このmx, myについてはまだ理解がダメだ…。
  fill(255);
  ellipse(mx, my, radius, radius);
}