p5.js
p5.jsは、3Dモデルを表示することができます。preload()内で予め3Dモデルを読み込みます。その後、setup()やdraw()内で適宜処理します。preload()内では、3Dモデルの他に画像や音楽、動画、JSONデータなどが読み込めます。 3Dモデルの読み込みと表示:preload…
p5.jsの全体像について書きました。合わせて当ブログで紹介した入門記事をまとめました。今後の展望として、p5.jsを勉強した後に何を勉強したら良いのかを挙げてみました。参考程度にどうぞ。 p5.jsの全体像 p5.jsの入門記事のまとめ 基本 応用 今後の展望 p…
p5.jsは、画像を表示することができます。画像などのデータは、予めpreload()内で読み込みます。その後、setup()やdraw()内で処理します。preload()内では、画像の他に音楽や動画、モデリングデータ、JSONデータなどが読み込めます。 画像の読み込みと表示:p…
「カメラの軌道制御」と「デバッグモード」の方法について書きます。カメラを操作できるようになると様々な方向から3D空間を見ることができます。モデルを配置して、様々な方向から見てみると面白いです。デバッグモードは、開発中に表示位置や方向を確認す…
円を追いかける円のアニメーションについて書きます。まずは、小さなプログラムから作っていきます。次に円の数を増やして、配列の扱い方を見ていきます。おまけとして、プログラムをオブジェクト指向的な書き方に書き換えてみます。 作成手順 マウスを追い…
p5.jsで生成されるcanvasタグを任意の場所に表示させる方法について書きます。デフォルトのままでは都合が悪いので、コードを少し変更します。まずは、デフォルトの挿入位置を確認します。その後、対応コードを記述します。 canvasタグのデフォルトの挿入位…
p5.jsで描画したものを画像ファイルにしたかったので、その方法を調べました。静止画とgifアニメーションにできることが分かりました。ただ、gifアニは元のアニメーションと全く同じ速さで動いているわけではなさそうなので、そこだけ注意です。 saveCanvas(…
p5.jsでは、DOMに要素を追加することができます。例えば、スライダー、ボタン、セレクトボックス、チェックボックス、ラジオボタンなどを作り、配置することができます。それらを操作して、図形の値を変更することができます。なお、この記事はドットインス…
三角関数を使うと円周上に図形を描画することができます。三角関数の理解を深められれば、より複雑な軌道を描くアニメーションができると思います。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 sic(),co…
乱数を使うとランダムな数字を生成することができます。色々と試すと面白いことができて、表現の幅が広がると思います。乱数を使ったサンプルコードを掲載します。私も色々な値を乱数にして、試してみようと思います。なお、この記事はドットインストールと…
キー入力を取得して、インタラクティブなものを作ります。キーの状態によって処理を変更したり、キーが押されたときの処理の書き方を見ていきます。キー入力を取得できると、キーによる操作ができるようになります。なお、この記事はドットインストールとい…
マウスの座標を取得して、インタラクティブなものを作ります。マウスの状態によって処理を変更したり、クリックされたときの処理の書き方を見ていきます。マウスの座標を取得できると動きのあるものが作れるようになるので、楽しくなると思います。なお、こ…
図形の変形について書きます。図形のパラメータを変更するのではなく、座標空間を変更して変形させます。移動、回転、拡大、縮小などが使えるようになると表現の幅が広がります。おまけで回転するアニメーションのサンプルコードを書きました。なお、この記…
テキストの描画について書きます。いくつか設定できるものがあります。テキストは、fill()とstroke()で文字の色と境界線の色を指定できます。それぞれの設定の詳細については、p5.jsのリファレンスで確認してください。なお、この記事はドットインストールと…
図形の塗りと線の設定について書きます。まず、初期値を確認します。その後、塗りと線の設定をします。また、設定を無効化できることを確認します。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 塗りと線…
ellipse()で楕円、line()で直線を描画します。パラメータの数はいくつなのか、パラメータにはどんな値を指定するのかを確認します。おまけで円のアニメーションのサンプルコードを書きました。なお、この記事はドットインストールというプログラミング学習サ…
定義済み変数を利用して図形を描きます。rectMode()は、長方形のパラメータの解釈の方法を変更して、描画する位置を変更する関数です。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 定義済み変数のwidth…
色の指定方法は複数あるので、それぞれ見ていきます。色はグレースケール、RGB、HSBで指定します。色の指定と合わせて、不透明度も指定できます。他にCSSの記法でも指定できます。その時に応じた指定の仕方を使えると良いです。なお、この記事はドットインス…
今回は、四角形をアニメーションさせてみます。draw()に再描画の内容を記述するので、その書き方をご紹介します。また、background()を記述する位置を変えるとどのような変化があるのかを見ていきます。 四角形をアニメーションさせる background()の記述位…
この記事では、「p5.jsの基本的な書き方」と「描画できる図形の種類」について書いています。まず、p5.jsの書き方を知り、基本形に慣れていきます。その上で図形を描きます。それから徐々にコードを変更して、色々と試していくことをおススメします。なお、…
JavaScriptでビジュアルコーディングをします。そのため、p5.jsを使います。p5.jsは、ProcessingをJavaScriptに移植したものです。今回は、その導入記事です。簡単なサンプルコードも書いていきます。 下準備 Get Started まとめ 下準備 p5.jsをダウンロード…
