原点からの距離を表し,動径と呼ばれます。軸の正の向きと一致させるのが慣例)から反時計周りに測った角度を表し,偏角と呼ばれます。y)が分かる、ということです。上記サンプルでは、次のコードがこれに当たります。sin(theta);rを目先の行先までの距離と考えると、1フレーム後の移動先が角度と距離から計算できます。この場合rは1フレーム当たりの移動距離、つまりスピードと考えることができます。y)位置に円を描くと、円がその角度の方向に移動するアニメーションが作成できます。10);}アークタンジェントマウスを動かすと、目が見ている方向が変わります。atan2()関数は、目からカーソルへの角度を算出します。e3.display();}線形補間マウスを移動させると、白丸が少し遅れてマウスに追随します。アニメーションを描画するフレームとフレームの間で、円は、lerp()関数を使って、現在位置からカーソルに向かってその時点の距離の一部(0.05)だけ移動します。これは、lerp()だけによるイージング効果と言えます。lerp()は、特定の増分で2つの数値間の数値を計算する。0.0は最初の点に等しく、0.1は最初の点に非常に近い。ここではamtに0.05を指定しているので、マウス位置までの距離の5%分、毎フレーム、移動する。50);}解説lerp()関数の働きを次の簡単な例で見てみましょう。特定の増分で2つの数値間の数値を計算する。amtパラメータは、2つの値を補間する量。0.0は最初の点に等しく、0.1は最初の点に非常に近い。0.5は2つの値のちょうど中間で、1.0は2つめの点に等しくなる。amt値が1.0より大きいか0.0未満の場合には、与えられた2つの数値の比率で計算される。lerp()関数は、直線パスに沿ったモーションの作成や点線の描画に便利。数値ダブルランダム2つのrandom()呼び出しとpoint()関数を使用すると、不規則なのこぎり状の線が作成できます。オリジナルはイラ・グリーンバーグ。}}解説このサンプルのポイントは次のforループにあります。5)で2回処理されます。5)は、-5から5未満までのランダムな浮動小数点数をrandに足します。これがsteps(300)回繰り返されます。これによりrandは次第に大きくそして小さくなると予想できます。5)のrandの値を、iを横軸にグラフにした一例です。randはこのように、0を中心として扇型状に正と負を激しく変化する値になるものと予想できます。randはランダムな値なので、すべてがこうなるわけではありませんが、この正と負の激しい変化が”のこぎり状”(ギザギザ)の結果をもたらすのだと思われます。ランダム次のイメージの基本はランダムな数値によるものです。プログラムがロードされるたびに結果は変わります。}}1Dノイズ1Dのパーリンノイズを使って位置を決めます。見た目であるが、同時に細部のスケール感が一定である。このため制御が容易であり、各種スケールのパーリンノイズを数式に入力することで多彩なテクスチャを表現できる。パーリンノイズによるテクスチャは、CGIで自然な外観を物に与えるためによく使われる。自然にあるものは単純そうに見えて実は複雑で、しかし全体として調和がとれているように見えます。石の表面をコンピュータで再現しようと、ただランダムに模様をこしらえてもそれらしく見えません。パーリンノイズはこれの解決に利用できる計算方法です。上記はパーリンノイズで変化するのがX軸方向のみの一次元でのサンプルです。width)の例です。左は右と比べ、はるかに滑らかに変化しているのが分かります。上がり方や下がり方、山のでき方に一定のパターンはないように見えます(たとえばサイン波などは一定のパターンそのものです)。この変化を利用すると、たとえば小さな虫が左右に移動する自然な動きが再現できる、というわけです。指定された座標でパーリンノイズ値を返す。パーリンノイズは、標準的なrandom()関数より順序が自然で、調和のとれた数値の連続を生み出すランダムシーケンスジェネレーター。1980年代にケン・パーリンによって考案され、以来、手続き型テクスチャ、自然なモーションや形状、地形を作成するグラフィックアプリケーションで使用されている。random()関数との大きな違いは、座標の各ペアが1つの固定された準ランダムな値(プログラムの存続する間のみ固定される。noiseSeed()関数を参照)に対応する無限のn次元空間に、パーリンノイズが定義されているということにある。p5.jsでは、与えられた座標の数に応じて、1D、2D、3Dのノイズが計算できる。結果の値はつねに0.0から1.0になる。ノイズ値は、上記サンプルで示すように、ノイズ空間を通してアニメーションできる。2次元と3次元はまた時間として解釈できる。実際のノイズは、この関数の周波数の使用方法の点で、音声信号の構造と似ている。パーリンノイズは、物理の音響学の概念と同様、複数のオクターブに渡って計算され、加算されて最終結果となる。得られた結果の特性を調整する別の方法に、入力座標の拡大縮小がある。この関数は無限空間で動作するので、問題になるのは座標の値ではなく、座標間の距離(たとえば、ループ内でnoise()を使用するときなど)。一般的には、座標間の距離が小さいほど、結果のノイズシーケンスは滑らかになる。0.005から0.03の刻み値がほとんどのアプリケーションにとって最適だが、用途によって異なる。数値:指定された座標でのパーリンノイズ値(0と1の間)ノイズの波パーリンノイズを使って、波のようなパターンを生成します。endShape(CLOSE);}2Dノイズ異なるパラメータで2Dノイズを作成します。350);}解説このサンプルはコンピュータの負担が大きいので、マウスの移動による描画結果の変化をともなわない次のコードで見ていきます。0.5);を呼び出した結果です。ここで行っているのは、基本的にキャンバスの全ピクセルに対する点の描画です。点を描画する前には、stroke()関数を使って、点のグレーの度合いを設定しています。このときstroke()関数に渡しているのが、noise()関数が作成したノイズ値です。ノイズ値に255を掛けると255より小さな値になるので、グレー値として使用できます。y)に対してnoise()関数を適用する前、noiseDetail()関数を呼び出しています。この関数には、オクターブ数(作成するノイズの波の数)と減衰要因となる数値を指定します。noiseScaleはnoise()関数に渡すxとyに掛ける変数です。下図はその例で、左は0.1、右は0.5のnoiseScaleを使用しています。noiseDetail()関数はp5.jsのリファレンスに次のように書かれています。noiseDetail()説明パーリンノイズ関数が生成する詳細な特性とレベルを調整する。物理の音響学と同様に、ノイズも複数のオクターブに渡って計算される。低いオクターブほど出力信号に大きく影響するので、ノイズの全体的な強さを決めることになる。これに対し、高いオクターブは、きめ細やかなノイズシーケンスの詳細を作り出す。デフォルトで、ノイズは4オクターブに渡って計算され、最初のオクターブが50%の強度からスタートし、以降のオクターブは前のオクターブの半分の影響を受ける。この減衰(falloff)量は、関数パラメータを追加することで変更できる。0.75の減衰要因は、各オクターブが、前のより低いオクターブの75%の影響(25%の減)を受けることを意味する。値は0.0から1.0の間であればどんな値でも有効だが、0.5より大きな値は、noise()関数が返す1.0より大きくなるかも知れない点に注意が必要。これらのパラメータを変更することで、noise()関数が作成する信号は、非常に特殊な要求や特性を満たすよう調整することができる。パーリンノイズは複数のノイズの波を合成して作成される。noise()関数ではデフォルトで、4つの波が使用される。ノイズの波の周波数は2のべき乗で増加する。周波数が2倍高い音は1オクターブ上の音なので、ここからノイズの波はオクターブと呼ばれている。noiseDetail()の第1引数に指定するのは、このオクターブの数。波は上位に行くほど、振幅が小さくなる。これはnoiseDetail()の第2引数に指定する減衰要因が作用する。小さいほどなだらかな、きつくないノイズになる。ノイズのなだらかさはオクターブの数でも調整できる。円のランダムな弦を重ねて描きます。弦は半透明でそれが重なり合うので、影付きの球体の錯覚が生まれます。Bhatiaが寄せたサンプル。ypos2);}白い背景に、筋の入った円が浮かび上がり、この筋が模様になって円全体が濃くなっていきます。解説これは、半透明の線を時間の経過とともに重ねるというアイデアと、その線を円の弦にする、というアイデアが秀逸なサンプルで、プログラムの仕組みそのものは難しいものではありません。弦とは、下図の点Aと点Bを結んだ線を言います。弦は、円周上の2点と、その2点と円の中心を結んでできる角度(中心角)が分かれば、引くことができます。JavaScript」を参照)。400のキャンバスに半径200の円を描いて、その円周上のランダムな2点を求め、弦を描きます。ypos2);}サンプルでは、randomChord()関数でこれと同様のことを行い、draw()関数で始終呼び出しているだけです。マッピングmap()関数を使うと、任意の数値を取って、それを、今作業中のプロジェクトにより便利な新しい数値にスケーリングすることができます。マウス位置の数値を使って、シェイプのサイズやカラーの制御に使用します。次のサンプルでは、マウスのx座標(0と360の間の数値)が、円のカラーとサイズを決める新しい数値にスケーリングしています。0から640までのmouseX値を、0と175の範囲にマッピング(対応付け)する。0から640までのmouseX値を、40と300の範囲にマッピングする。JavaScript」で述べています。map()関数は簡単に言うと、aとbの間で変化する数値(変数)は、cとdの間に置き換えるといくつに相当するか、を計算して返します。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。WAAPIに関する注意WAAPIを利用するにはブラウザに特別な設定が必要です。ブラウザの実験的な機能を有効化する方法に書いているので、必ずお読みください。楕円(円)、円弧を描く。APIやTensorFlow.jsについて調べたことを書いています。freebiescafe.com。