じょりじょり日記

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

JavaScriptチャレンジ Processing vol2

小さなことからコツコツと時間を見つけてやっていきますよ〜!
今回のコードでinverseのところの理解で詰まったのですが、変数を直接数字に置き換えると納得いくことが多いですね。
しかしなぜ+10しているんですかね・・・。

f:id:zyoryzyory:20170902235017p:plain

//https://processing.org/examples/mouse2d.html
//プログラムの肝となる所にコメントを振っていきますよ!

void setup() {
  size(640, 360); 
  noStroke();
  //ここらへんはいいとして・・・
  rectMode(CENTER);
}

void draw() {
  background(51); 
  //こ・・・ここからだな。
  
  fill(255, 204);
  //mouseXの座標をrectMode(CENTER)で描画位置を中央にしつつ
  //高さは垂直中央寄せにしていて
  //mouseYを2で割っているのはmouseが下までいっても全体の半分の四角形成したいから。
  //ただし+10している意味がわからない。
  rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);
  
  fill(255, 204);
  //反転させたいのでwidth,heightから現在の位置を引けばいいのはわかる!
  int inverseX = width-mouseX;
  int inverseY = height-mouseY;
  //ただし+10はなぜ・・・以下略
  rect(inverseX, height/2, (inverseY/2)+10, (inverseY/2)+10);
}