新しい関数

ドドドッと新しい関数が出てきました。なぞっているだけだとそのまま流せちゃいそうなので、ひとつひとつ噛み砕きながらおさらいしようと思います。

mouseX, Y
マウスのX座標とY座標　簡単！
例えば、図形を書いた時に指定してあげるとマウスの動きについてくるものが表示される

pmouseX,Y

pmouseX変数とpmouseY変数は、１つ前のフレームにおけるマウス位置を記憶しています。mouseXやmouseYと同様にdraw()が実行されるたびに値が更新されます。

ほう。どういうこっちゃ。

前のフレームのが残っている。例えばline()だと最初の地点と次の地点で線が引ける。理解！

pmouseXとpmouseYはマウスのスピード計算にも使えます。

なんだって！

こういうのが大事。○○ができるツールは使い方次第で別の結果を編み出せる。こういったものを組み合わせて、組み合わせていろいろ編み出すのが必要だから、まずは基礎を叩き込まねば！
文章だけではいまいち理解できないのでやっぱり図で描こう。

速さがわかる理屈はわかった。ではこれをどのようにして使うのか。その時の関数がdist()

dist(x1, y1, x2, y2) 　２点間の距離を求めるもの

ではこういうのを作ってみよう。
マウスに従って四角がついてくる。その四角は早く動かすと大きくなる。

前半は普通に四角を描くだけ。

void setup(){
size(800, 600);
}
void draw(){
background(255);
rect(mouseX, mouseY, 20, 20);

dist()を変数として使います。速さなのでSpeedのsにしておこう。

void setup(){
size(800, 600);
}

void draw(){
background(255);
float s = dist(mouseX, mouseY, pmouseX, pmouseY);
//距離がsの中に入る。sの値が大きい＝差が大きい＝早く動いた

rect(mouseX, mouseY, 20+s, 20+s);
}

早く動かすと、『ドゥワンっ、ドゥワンっ』となります。
でもこれだとマウスについてくるのが速すぎる。そこでイージングを使います。
反応を遅らせて滑らかな動きを作るテクニックらしいです。

easing 
よくわからないのでまずは本の中の例文通り作ってみます。

float x;
float easing = 0.01;
void setup(){
 size(220, 120);
}
void draw(){
 background(150);
 float targetX = mouseX;
 x += (targetX - x) * easing;
 ellipse(x, 40, 12, 12);
 println(targetX +":" + x);
}

イージングは現在地と目的地を示す２つの値を使います。

x += (targetX - x) * easing;

ここの部分のことを言っているんだろうけど、これが何を表しているのかがわからない。加算代入！これが掴みづらい。一度わかりやすく書いてみよう。

x = x + (targetX - x) * easing;

xに（目的地の差）に0.01を掛けたものを足して　xに代入

うん。書いてもよくわからなった。わからないけどやってみよう。さっきの『ドゥワンっ、ドゥワンっ』していたものを少し滑らかにしてみよう。

float x;//変数xを宣言
float y;//変数yを宣言
float easing = 0.01;//変数easingを0.01とする

void setup(){
size(800, 600);
}

void draw(){
background(255);
rectMode(CENTER);
float targetX = mouseX;//変数targetXをmouseXとする
float targetY = mouseY;//変数targetYをmouseYとする
x+=(targetX-x)*easing;//xに目的地とxの差にeasingをかけたものを足して代入
y+=(targetY-y)*easing;//yに目的地とxの差にeasingをかけたものを足して代入

float s = dist(mouseX, mouseY, pmouseX, pmouseY);
//変数　s はマウスの移動距離（速度）とする
rect(x, y, 20+s, 20+s);
//中心がx、yにあり大きさは20+速度の大きさになる四角を描画
}

なんか思っていたのと違うような気がしましたが、いったんスムーズについてこれるのでイージングに関しては成功したようです。
この、大きくなる『ドゥワンっ、ドゥワンっ』もスムーズにしたい。
rect(x, y, 20+s, 20+s)
たぶんこの式に細工をするか、何らかの形で大きさを制御しなきゃいけない。
じゃあこれは次の宿題にしよう。
『ドゥワンっ、ドゥワンっ』→『ドゥワーン、ドゥワーン』にする。

map(a, b, c, d, e)

aを範囲b-cから別の範囲d-eへ変換する
これはわかりやすい。例えば横幅の端から端までの値を別なもの、色の０から255に変換すると範囲内で色が変わるものを作れる。

|| 論理和
英語のor , A or B にあたるもの。A　または　B

&&論理積
英語だとand, A and B。A かつ B
ウィキペディアのベン図がわかりやすい。