5_6:変換状態の保存と復元 p5.js JavaScript

変換の効果が以降の関数に影響しないように分離させることができます。push()関数は現在の座標システムのコピーを保存し、pop()関数は保存した座標システムを復元します。これらの関数は、あるシェイプにだけ特定の変換が必要 […]

続きを読む

5:移動、回転、拡大縮小 p5.js JavaScript

キャンバス上での描画物の位置取りと移動にはまた、キャンバスの座標システムを変更するというテクニックがあります。たとえばシェイプは右に50ピクセル移動することができますが、これは、座標の原点(0,0)を50ピクセル右に移動 […]

続きを読む

4_7:マッピング(対応付け) p5.js JavaScript

プログラミング用語として「マッピング」という単語が使われますが、これは日本語で言うと、「あれとこれを対応付ける」というような意味です。たとえば、キャンバスの幅が1920ピクセルあって、mouseXの値を、キャンバスの背景 […]

続きを読む

4_3:応答:イージングの導入 p5.js JavaScript

Webアニメーションでは、ある位置からある位置に移動するとき、目的地にすぐにではなく少し間をとってから到達したり、だんだん速くなったり(加速)、だんだん遅くなったり(減速)するものがよく見られます。これはイージングと呼ば […]

続きを読む