カテゴリー: p5.js サンプル解説

描画 生成的描画プログラム。 (注：入門的な「ハローp5」カテゴリに含まれてはいますが、内容は上級者向けです) sketch.js // すべてのパス let paths = []; // 今描いているかどうか let […]

続きを読む

保存されたJSONの読み込み Bubbleクラスを作成し、JSONファイルからのデータを使って、複数の泡(バブル)をインスタンス化し、結果を画面に表示します。Webブラウザがファイルを保存する場所はブラウザによって異なる […]

続きを読む

時計 現在の時刻は、second()やminute()、hour()関数で読み取ることができます。このサンプルでは、 sin()とcos()値を使って、時計の針の位置を設定しています。 let cx, cy; // 時計 […]

続きを読む

タイポグラフィ(Typography)とは、Webデザインにおいては、「文字を情報として読みやすく伝えやすく、美しく並べる技術」を言うようです(参考：「伝わるサイトは文字のデザインに理由あり。タイポグラフィの基本」)。 […]

続きを読む

移動 translate()関数を使用すると、キャンバス内のどこにでもオブジェクトを移動させることができます。１つめのパラメータはX軸のオフセットを設定し、２つめのパラメータはY軸のオフセットを設定します。このサンプルは […]

続きを読む

連続線 マウスのクリック&ドラッグで線が描けます。 function setup() { createCanvas(710, 400); background(102); // 線の色は最初白 stroke(‘ […]

続きを読む

斜面に対する反射 processing.org/examplesからの、David Blitzによる”Reflection 1“サンプルの移植版。式(R = 2N(N・L)-L)にもとづく。Rは反 […]

続きを読む

オブジェクト Jitterクラスを作成し、オブジェクトをインスタンス化すると、画面をもぞもぞ動きます。Casey Reas、Ben Fry共著による「Processingをはじめよう 第2版」からの出典。 sketch. […]

続きを読む

インタラクションとは、「インタラクションの用語説明」ページに、次のように説明されています。 インタラクションとは英語の「 inter（相互に）」と「action（作用）」を合成したもので、その基本は「人間が何かアクション […]

続きを読む

p5.jsサンプルの「Simulate」項の解説として、このページでは、「ソフトボディ」、「煙のパーティクル」、「ブラウン運動」、「ばねのチェーン」、「雪の華(スノーフレーク)」、「ペンローズ・タイル」、「再帰的に枝分か […]

続きを読む

p5.jsサンプルの「Simulate」項の解説として、このページでは、「力」、「パーティクルシステム」、「群れ行動」、「ウルフラム セル・オートマトン」、「ライフゲーム」、「複数のパーティクルシステム」、「スピログラフ […]

続きを読む

インクリメントとデクリメント “a++”と記述することは、”a = a + 1″と同じです。”a–“と記述することは、”a […]

続きを読む

カラーモデル p5.jsではRGBカラーモデルがデフォルトなので、fill()やstroke()、background()関数などでは、0から255までの数値でRGB値を指定します。しかしカラーモデルは、colorMod […]

続きを読む

以降のサンプルをローカルで実行するには、画像ファイルと、動作するローカルサーバーが必要です。 とはいえ、Visual Studio Codeとその機能拡張「Liver Server」を使用すると、簡単に簡易的なローカルサ […]

続きを読む

繰り返し for構造を使った繰り返し。同じ形状を反復する図形の描画に利用できます。次の例では、分かりやすいように、p5.jsのサンプルコードを少し書き換えています。 // このプログラムを通して、 矩形の開始位置として […]

続きを読む

配列 配列はデータのリストです。配列に含まれるそれぞれのデータは、配列内での位置を表すインデックス番号によって識別されます。配列はゼロベースです(0から数え始める)。これは、配列の最初の要素は[0]として、２つめの要素は […]

続きを読む

変数 変数は値の保持に使用されます。次のサンプルでは、変数の値を変更して、その構成に影響を与えています。 function setup() { createCanvas(720, 400); background(0); […]

続きを読む

点と線 点と線は基本的なジオメトリ(形状)の描画に使用できます。次のサンプルの変数dの値を変更すると、形状を拡大縮小することができます。４つの変数は、dの値にもとづいて位置を設定します。 function setup() […]

続きを読む

座標 画面に描画されたシェイプすべて、座標として指定された位置を持ちます。すべての座標は、原点からの距離としてピクセル単位で計測したものです。原点[0、0]はウィンドウの左上の座標であり、右下の座標は[width-1、h […]

続きを読む

本カテゴリーでは、p5.jsサイトのExamplesページで公開されているp5.jsのサンプルを見ていきます。

続きを読む