knagaiscale()関数はキャンバスの座標を引きのばしたり縮めたりします。スケール(縮尺比)の変化に合わせて、座標が伸縮するので、キャンバスの描画物すべてのサイズが大きくなったり小さくなったりします。スケールの量は小数点付きのパーセントで記述します。scale()のパラメータ1.5は150%に相当し、3は300%に相当します。次のコードの変数scaleValにスケール値を指定すると、scale()関数の効果を目で確認することができます。グリッドを描画する前にscale()を実行しているので、グリッドも伸縮します。0)に関してX軸方向にSx倍、Y軸方向にSy倍する計算は次の行列の掛け算で行います。行列の扱いが得意なTensorFlow.jsライブラリを使って、計算してみます。変数SxとSyにスケール処理したい数値を代入します。result[0][1]);}scale()関数を使ったときと同様の結果が得られました。頂点を伸縮させることでシェイプのサイズを拡大または縮小する。対象物はつねに、座標システムに相対的な原点から伸縮する。スケール値は小数点付きパーセンテージとして指定する。関数呼び出しscale(2.0)はシェイプのサイズを200%大きくする。変換は累積的に作用する。その後に発生するすべてのものに適用され、関数への以降の呼び出しによって効果が蓄積される。scale(2.0)を呼び出しその後scale(1.5)を呼び出すことは、scale(3.0)と同じ。draw()内でscale()を呼び出すと、変換は、次のループが始まるときにリセットされるzパラメータはWEBGLモードが有効な場合のみ。この関数は、push()とpop()関数の使用によってさらに制御することができる。[z])scale(scales)スケーリングscale()関数は、rotate()と同様、変換を原点から実行します。60.0)はマウスが右へ行くほど大きく、左へ行くほど小さくなるので、描かれる矩形のサイズもそれに比例します。このとき矩形は左上隅が原点と重なった状態で拡大縮小します。0)に置いて描画します。30)を呼び出す方が簡単です。線の太さを維持するscale()関数による拡大は線の太さ(ストロークの重み)にも影響するので、シェイプが大きくなると線も太くなります。線の太さを一定にしたい場合には、希望するストロークの重みを実数値で割ります。30);}p5.jsのScaleサンプル解説p5.jsの「Scale」ページにはscale()関数のサンプルコードが公開されています。このサンプルをブラウザで実行すると、白と黒の矩形が左右に移動し、大きくなったり小さくなったりします。見ると、白の方が左右への移動量が多く、拡大率も大きいことが分かります。何より、2つの矩形は同じことをずっと繰り返します。変数aとs移動はtranslate()に、拡大縮小はscale()に行わせるのは想像できますが、ずっと同じことを継続して行わせるには、そういう数値をずっと与える必要があります。aとsはそういう数値の作成に関係する変数です。aもsも最初、0に初期化されています。setup()とdraw()関数の外で作成されているので、setup()の中からも、draw()の中からもアクセスできます。0.0;draw()内でaはほんの少しずつ大きくなっています。sはこのaのコサイン値の2倍になります。aは少しずつ大きくなる。2;コサインと聞くと、いきなり頭の中が真っ白になるかもしれません。いうときは具体化してみるのがよい方法です。具体化とは、たとえば具体的な数値を割り当てて、それらが結果にどのように影響するかを観察する、というようなことです。視覚化も理解に役立ちます。plotly.jsというライブラリでaとsを視覚化すると、次のようになります。aは欲しいsを生み出すためにcos()に与えるネタです。微量ずつ大きくすることで、得られるsの変化も微量になります。sは2を掛けてはいますが、要するにaのコサイン値です。2はsを倍にする働きを持ちます。sは、2から始まり滑らかに-2まで小さくなる。0までは正数で、その後は負数-2を境に滑らかに2まで大きくなる。0までは負数で、その後は正数を1周期として、ずっと繰り返します。このsをscale()に適用すると、滑らかな拡大縮小を延々繰り返すアニメーションが作成できます。黒の矩形sの変化が分かったので、黒の矩形を描画してみます。aは少しずつ大きくなる。0)として描画しています。これらを記述したdraw()関数は1秒間に60回呼び出され、sは微小に変化するので、キャンバスには矩形が滑らかに拡大縮小をつづけるアニメーションが描かれます。次は白の矩形の描画です。拡大縮小の効果も2倍になる。sはコサインによって正負両方の値になるので、左右を往復する動きになる。2)をそのセンターとして描画されることになります。この累積は拡大縮小でも同様で、白い矩形にはscale(s)が2回適用され、結果として、白い矩形は黒い矩形よりも多く移動し、大きく拡大されることになります。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。WAAPIに関する注意WAAPIを利用するにはブラウザに特別な設定が必要です。ブラウザの実験的な機能を有効化する方法に書いているので、必ずお読みください。楕円(円)、円弧を描く。APIやTensorFlow.jsについて調べたことを書いています。freebiescafe.com。