入力値の範囲を制限する方法を書きます。前回は、数値の入力のみでした。今回からは、それ以外の入力(スライダー、プルダウンメニュー)について書きます。値の範囲の制限と合わせて確認してください。なお、この記事はドットインストールというプログラミン…

パラメータを調整できるように入力フォームを作ります。数値を入力して値を指定できるようになります。これができると、インタラクティブに値を変更できるようになります。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考…

パラメータ調整用のライブラリであるTweakpanをp5.jsと組み合わせて使います。パラメータの値の変更が、即座に反映されるので、作業の効率化になります。今回は、Tweakpaneの導入までの内容を記します。なお、この記事はドットインストールというプログラミ…

p5.jsで生成されるcanvasタグを任意の場所に表示させる方法について書きます。デフォルトのままでは都合が悪いので、コードを少し変更します。まずは、デフォルトの挿入位置を確認します。その後、対応コードを記述します。 canvasタグのデフォルトの挿入位…

p5.jsで描画したものを画像ファイルにしたかったので、その方法を調べました。静止画とgifアニメーションにできることが分かりました。ただ、gifアニは元のアニメーションと全く同じ速さで動いているわけではなさそうなので、そこだけ注意です。 saveCanvas(…

p5.jsでは、DOMに要素を追加することができます。例えば、スライダー、ボタン、セレクトボックス、チェックボックス、ラジオボタンなどを作り、配置することができます。それらを操作して、図形の値を変更することができます。なお、この記事はドットインス…

三角関数を使うと円周上に図形を描画することができます。三角関数の理解を深められれば、より複雑な軌道を描くアニメーションができると思います。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 sic(),co…

乱数を使うとランダムな数字を生成することができます。色々と試すと面白いことができて、表現の幅が広がると思います。乱数を使ったサンプルコードを掲載します。私も色々な値を乱数にして、試してみようと思います。なお、この記事はドットインストールと…