bは1ずつ小さくなる。線の色は白から黒に変化する。bの数値や、ブーリアン型の変数directionの値を確認するために、p5.dom.jsライブラリを使って<span>を5つ作成し使用しています。bの関係性を見るには、このように画面上に表示した方が分かりやすくなります。JavaScript」で述べています。createSpan()関数についてはここで調べることができます。メモ上記サンプルのsetup()関数には、次の1行が記述されています。width);colorMode()はそのプログラムのカラーモードを変更する関数ですが、ここではデフォルトのRGBモードをそのまま継続しつつ、使用できるRGBAの最大値をwidth(=710)にしています。これによりfill()やstroke()関数などでwidth(=710)を指定すると、それが255として解釈されるようになります。これはmap()関数と同様の比の計算で調整されます。このプログラムでは、キャンバスの幅710一杯をつかって白から黒、黒から白に変化させたいので、255を710に対応させているわけです。解説インクリメントとは1ずつ加算することを言い、++で表されます(インクリメント演算子)。上記サンプルでは、a++という式によって、draw()関数が呼び出されるたびに変数aの値が1ずつ大きくなります。次のコードは、グローバル変数aを最初0に設定し、draw()関数でインクリメントして、それをline()関数の引数に使用することで、黒い横棒が右に伸びるアニメーションを作成する例です。0)なので、画面右端に縦線が描かれます。0)となり、前の線の1ピクセル右に線が描かれます。draw()内では、これまでの多くのサンプルのようにbackground()を呼び出していないので、前のフレームでの描画は残存します。したがってキャンバスには2本の黒い縦線が描かれることになります。0),...が実行されるので、結果として黒い横棒が右に伸びていくアニメーションになります。background()を呼び出していないので、前の描画はキャンバスに残存する。その結果、黒い横棒が右に伸びていくアニメーションになる。2);}ただしこのままではaはプログラムが実行されつづける限り1ずつ大きくなっていきます。上記サンプルではa++;の後、次のifステートメントを使って、aの値がキャンバスの幅よりも大きくなったら再度aを0に戻しています。!direction;の行です。変数directionは最初trueが代入されるブーリアン型の変数で、aの値がキャンバスの幅よりも大きくなったとき、変数の値が反転します。具体的に言うと、それまでの値がtrueだった場合にはfalseに、falseだった場合にはtrueに変わります。これは論理否定演算子(!)の働きによるものです。式が評価される順番を明示的に指定しない場合、式は演算子の優先順位にもとづいて評価されます。ステートメント”4+2*8′′は、まず2が8に掛けられ、その結果が4に足されます。これは、”*”が”+”よりも高い順位を持っているからです。プログラムを読むときの曖昧さを避けるには、”4+(2*8)”と記述することが推奨されます。評価の順番はコード内にかっこ(())を置くことでコントロールできます。演算子の優先順位は次のサンプル内に示しています。30が70に足された後、それ(100)よりiの現在値が大きいかどうかが評価される。{"に変えて確認してみる。70が先に計算され、その結果(100)がiとの大小比較に使用される。2というのはトリック。関係演算子は論理演算子より優先順位が高い。}}解説JavaScriptにおける演算子の優先順位はMDNの「演算子の優先順位」ページで詳しく読むことができます。一次元マウスを左右に動かすと、移動するシェイプのスピードと方向が制御できます。一次元での距離とは、同じ数直線上にある2点間の距離を言います。通常は大きい方から小さい方を引いて求めます。0)からのマウスの水平方向の距離を示します。変数」で述べています。上記サンプルでは、このmouseXを利用して4つの棒が左右に動くアニメーションを実現しています。このままでは動きが少し複雑なので、上の2つに限って見ていくことにします。次のコードでは、矩形の色を赤と黄色に変えています。関数を新たに作成し、変数名も区別変えていように変えています。細い棒と太い棒の移動量に変化を持たせる。棒は、マウスが端にあるときほど速く、中にあるときほど遅く移動することになる。drwaThinRed();}mouseXは次の行で出てきます。5.0;このサンプルでは、マウスがキャンバスセンター辺りにあるときは、棒の移動スピードを遅く、端の方にあるときは速くする必要があります。この変数mxはそのために使用されます。mxは次の条件を満たす変数だと想定できます。マウスがキャンバスセンターにあるときはゼロになるマウスがセンターから右に進むと大きくなり(正の数)、キャンバスの右端で最大になるマウスがセンターから左に進むと大きくなり(負の数)、キャンバスの左端で最大になるこれを、mxの最大値を140(=width/5)、最小値を-140(=-width/5)とすると、mouseXとの関係は下図のように表せます。この関係を方程式で解いてみます。140(=width/5)が見えてきます。つづく次の2行では、求めたmxを16と64で割って、細い赤の棒と太い黄色の棒の現在位置に足しています。同じ数値(mx)を小さな数と大きな数で割るので、小さな数で割った方が結果は大きくなります。細い赤の棒の方が速く移動する、ということになります。二次元マウスを動かすと、円の格子模様が見え隠れします。ここではマウスから各円までの距離を計測し、その距離に比例したサイズ(遠いほど大きい)を設定しています。二次元での距離とは、同じ平面上にある2点間の距離を言います。平面は横向きの水平方向(X軸)と、縦向きの垂直方向(Y軸)で表されます。2点間の距離はdist()関数で簡単に求めることができます。JavaScript」で述べています。次のコードは、ある点とマウスのある位置を線で結び、その距離を表示する簡単な例です。260)}前述した、円の格子模様が見え隠れするサンプルは、一見複雑に見えますが、行われていることは単純です。キャンバスの座標を20ピクセルごとに2重のforループでその時々の座標とマウス位置との距離を調べ、近い場合は小さな、遠い場合は大きな円を描いています。キャンバスの背景は黒で、円が小さい場合は、円と円との間の黒が見えます。逆に円が大きい場合は円と円が重なり、背景の黒は見えません。円の枠線は描かれないので、このとき背景は白に見えます。サインsin()関数を使って、円のサイズを滑らかに伸縮しています。習った三角関数のサインやコサインは値が滑らかに周期的に変化するので、繰り返すアニメーションによく利用されます。JavaScript」で述べています。次のコードは、plotly.jsのグラフ描画機能を使って、サインの波を描画します。plotly.jsについては「4:配列(Arrays)」で簡単に説明しています。角度に角速度を加える。draw()関数は毎秒60回呼び出されるので、speedは1秒間に60回加算されることになる。speed;}サインの値はこのように、0から始まり滑らかに増加して1になり、そこから滑らかに減って-1になり、そこから再び増加に転じます。波の高さはサインの値に数値を掛けることで高くできます。サイン値にたとえば6を掛けると、グラフは次のように変化します。次の例では、50を代入した変数amplitudeを用意し、これにサイン値に掛けたものを円の直径に指定して円を描いています。円の直径は0から50の間で滑らかに変化するので、円のサイズが滑らかに変化するアニメーションになります。楕円(円)、円弧を描く。