じょりじょり日記

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

JavaScriptチャレンジ Processing vol4

今日は立て続けに2つやってきました〜。
inputのカテゴリ全部終わらせたかったのですが、1つのmousesignalsでハマり時間を使ってしまいました。
全体的な理解度は67%ということでしょうか・・・。
きっと明日目が覚めたら、もっとスッキリしていると思うので、朝の自分に期待です…!


f:id:zyoryzyory:20170904231729p:plain

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

//int型の配列をそれぞれ宣言して用意する
int[] xvals;
int[] yvals;
int[] bvals;
void setup() 
{
  size(640, 360);
  //アンチエイリアス処理OFF
  noSmooth();
  //インスタンスをそれぞれ640個作って代入
  xvals = new int[width];
  yvals = new int[width];
  bvals = new int[width];
}

int arrayindex = 0;

void draw()
{
  background(102);
  
  //i=0でないのに違和感を感じつつ…
  for(int i = 1; i < width; i++) { 
    //index numberingを0から始めるために初期値をi=1にしていたのか!
    xvals[i-1] = xvals[i]; 
    yvals[i-1] = yvals[i];
    bvals[i-1] = bvals[i];
  } 
  //配列の末尾にmouseX, mouseYを代入 
  xvals[width-1] = mouseX; 
  yvals[width-1] = mouseY;
  
  if(mousePressed) {
    bvals[width-1] = 0;
  } else {
    bvals[width-1] = 255;
  }
  
  fill(255);
  noStroke();
  //2段目に白いrectangleを描写。
  //引数の意味は、一番左からheight1個分下にずれた所が始点で
  //資格の幅はwidth分、heightは全体の3分の1個。
  //+1の意味はわからない。1段目と2段目のpoint関数が呼ばれることで1pxずれるための対策…?
  rect(0, height/3, width, height/3+1);

  for(int i=1; i<width; i++) {
    //3段あるうちの上2つは点の連続描画だからpointで表現
    stroke(255);
    //xvals[width-1] = mouseX; で配列の末尾にmouseXの値をいれたのはわかるが
    //なぜxvals[i]/3でpointが動くのか説明できない…。
    point(i, xvals[i]/3);
    stroke(0);
    //2段目の上(height/3)からmouseYを3倍圧縮してpointを打つ!
    point(i, height/3+yvals[i]/3);
    stroke(255);
    //3段目、クリックしたら跳ねるような表現は
    //bvalsの末尾を0にすることで、lineのy2は2*height/3だけになるので垂直の線が引ける
    line(i, 2*height/3+bvals[i]/3, i, (2*height/3+bvals[i-1]/3));
  }
  //右側が常に配列の末尾で描画されていて、左側は履歴的なイメージ
}


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

float x;
float y;
//mouseを追いかけてくる速度
float easing = 0.05;

void setup() {
  size(640, 360); 
  noStroke();  
}

void draw() { 
  background(51);
  
  float targetX = mouseX;
  //xからmouseXまでの距離をdxで算出
  float dx = targetX - x;
  //ここで0.05掛けているから遅れてついてくる…?
  x += dx * easing;
  
  float targetY = mouseY;
  float dy = targetY - y;
  y += dy * easing;
  
  ellipse(x, y, 66, 66);
}