じょりじょり日記

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

JavaScriptチャレンジ Processing vol1

最近Processing始めてみたました。
まだ何かを作れる段階じゃないのですが、なかなか面白いです。
公式サイトのExamplesを理解するために、それぞれの例に対してコメントを振って自分の理解が正しいのか確認していきます。

本日はこれです。

f:id:zyoryzyory:20170902000343p:plain
ProcessingではmouseXでマウスのX軸上の情報を取得できるのです!!すごい!!

 //https://processing.org/examples/mouse1d.html
void setup() {
  //描画範囲の設定
  size(640, 360);
  
  //outlineを消す
  noStroke();
  
  //物体の高さに応じてRGBを均等に変更していく
  //RGBが均等に変われば白〜黒の間になる
  colorMode(RGB, height, height, height);
  
  //rectの描画開始位置を中央にする
  rectMode(CENTER);
}

void draw() {
  //なぜ0.0で設定しているんだろう?
  //background(0);との違いは目視できず…。
  background(0.0);
  
  //mouseXを0〜widthではなく0〜heightに変更している
  //map(target, currentValue1, currenValue2, targetValue1, targetValue2);
  float r1 = map(mouseX, 0, width, 0, height);
  float r2 = height-r1;
  
  //r1塗るよー!
  fill(r1);
  //半分のwidthとmouseXの高さを÷2、高さ÷2、後ろ2つはmouseXによって直接動く値
  rect(width/2 + r1/2, height/2, r1, r1);
  
  //こっちも同じか!
  fill(r2);
  rect(width/2 - r2/2, height/2, r2, r2);
}