P5.JSでクリエイティブコードを探る

Sep 13, 2025

操作方法

一日を過ごす Brendan Dawes at ロンドンを生成します そしてどのように発見する データはDawesomeです 。この終日のワークショップで、彼は毎日私たちを囲み、処理とp5.jsを使って美しいものに変換するデータを説明する方法を説明します。 今予約する ！

p5.js. の力をもたらすように設計された図書館です処理ウェブへ。それはアーティスト、デザイナー、そして教育者をプログラミングの世界に紹介することを目的としています。

私たちの最初の「スケッチ」をダイビングして作成しましょう。私たちの目標は、単純なイメージをアニメーション星の分野に変換する描画ツールを構築することです。まず、いくつかのグローバルな変数を定義してお送りします セットアップ（） 関数。 P5の セットアップ（） スケッチがロードされると、初期化を処理するのに理想的な場所です。

必要なファイルをダウンロードしてくださいここに。

 varヒント画像、SkyImage、Stars = []。
関数setup（）{...}

私たちの内側に セットアップ 機能、キャンバスを作成し、マウスカーソルを非表示にしてください。デフォルトでは、P5は形状の周囲のアウトラインを追加します - この場合はストロークを無効にしたいです。

 CreateCanvas（800,500）。
nocursor（）;
NOSTROKE（）

The background image – this night sky scene provides the setting for our animation — 背景画像 - この夜の空シーンは私たちのアニメーションのための設定を提供します

次に、一対の画像をロードします。この場合、夜の空のシーンのような背景として役立ちます。もう1つは「ヒント」イメージになります - 私たちの最終デザインは私たちの最終デザインが基づいています。このアイデアは、私たちの背景のシーンのデザインを再作成するために、私たちのヒントイメージの中の黒ピクセルの上にほとんどの星を置くことです。 P5のテキストと描画ツールでこれらの画像を作成するのは簡単ですが、簡潔にするために静的資産を使用します。

 HintImage = LoadImage（ "// bit.ly/hintimage"）;
SkyImage = LoadImage（ "// bit.ly/skyimage"）;

The hint image, which dictates the positioning of our stars — 私たちの星の位置決めを決定するヒントイメージ

描画関数

それはそれです セットアップ（） ！もう1つの重要な機能 ドロー（） 。それは継続的なループで呼び出され、それはアニメーションに役立ち、そして時間の経過とともに要素を追加するのに役立ちます。

関数draw（）{...}

描画関数の中で、私たちの最初の仕事はキャンバスを私たちの背景イメージで満たすことです。 P5は自動的にキャンバスをクリアしません ドロー（） 呼び出し、それで私たちはこのフレームごとにこれをする必要があるか、いくつかの奇妙な蓄積効果を果たします。キャンバスにロードされた画像を配置するには、 画像（） 位置決めのための関数とy座標を与えます。

画像（SkyImage、0,0）;

次に、現在のマウスの場所をつかみ、それをP5.Vectorとして保存します。 createvector（） 。このオブジェクトには、スペース内のポイントに対処するための便利な機能が付属していますが、ほとんどそれをコンテナとして使用するだけです。

 var position = createvector（MouseX、Mousey）;

新しく保存されたマウスの位置を使用して、カーソルを描くことができます。描画色を設定します 塗りつぶし（） RGBの値と使用を渡すことによって 楕円（） マウスの場所に円を描く。

塗りつぶし（255,192,0）。
ellipse（Position.x、Position.y、8,8）;

マウスが押されている間に新しい星を描きたいだけなので、P5のチェックを確認します マウスで 進む前に。マウスが停止している場合は、次の星のために良い場所を計算する必要があります。カスタム関数を呼び出してください findpixel（） 後で定義します。

Discover the creative side of code with Brendan Dawes at Generate London — ロンドン生成時にBrendan Dawesでコードの創造的な側面を発見

ターゲットがあると、カスタムスターオブジェクトの新しいインスタンス（後述）を作成し、それをスターアレイの最後にプッシュします。 2,000台以上の星を終えたら、最も古いものを破棄します。

（マウスで）{
var target = findpixel（）;
var star =新しいスター（位置、ターゲット）。
スターズ（星）;
if（星。leght＆gt; 2000）Stars.Shift（）。

最後に、私たちの星の配列と電話をかけてループします 更新（） そして ドロー（） それぞれに。私たちは後でこれらの方法でダイビングします。

（74]（var i = 0; i \ l.length; i ++）{ 星[i] .update（）; 星[i]。draw（）;

ヘルパー機能

今 セットアップ（） そして ドロー（） 所定の位置にあります。ヘルパー機能とオブジェクトに取り組んでいます。まず、新しいスターごとに休憩位置を見つける機能を定義します。私たちがする必要があるのは私たちのヒントイメージでいくつかのランダムなピクセルを使うことだけです。 取得する（） 黒か白かどうかを確認するため。

どちらの場合もRGB値が一致するため、実際には赤い値を調べる必要があります。白いピクセルが見つかった場合は、デザインを攻撃しているため、返却します。そうでない場合は、最後にチェックされたピクセルを返し、それはランダムな星として役立ちます。

関数findpixel（）{
var x、y;
（var i = 0; i＆lt; i ++）の場合
X = Floor（ランダム（HintImage.width））。
y =床（ランダム（Hintimage.height））。

if（red（hintimage.get（x、y））＆lt; 255）
}
Return Createvector（x、y）;

最後に私たちのカスタムスターオブジェクトです。単純に、それぞれの星に関する情報を格納する再利用可能なコンテナが欲しい、またそれらを更新して描画するための手段を提供します。 JavaScriptは、伝統的な意味でクラスを作成する方法を提供しませんが、関数を定義して自分のニーズに応えることで同じ結果を得ることができます。

各スターには、いくつかのプロパティ（開始位置、最終位置、およびランダムに生成された直径）があります。これは、描画ループで作成されたすべての新しいスターについて呼び出される「コンストラクタ関数」で定義します。

関数スター（位置、ターゲット）{
これは位置=位置です。
this.target =ターゲット。
this.diameter =ランダム（1,5）。

次にANを追加します 更新（） P5.Vector'sを使用する方法を星にする方法 LERP（） スターの現在位置と目標位置の間の新しい位置を計算する。この場合、私たちはあらゆる描画のために残りの距離の4パーセントを動かしています。

私たちが空想を得たかったら、ここでいくつかの物理学をシミュレートすることもできますが、今のところ簡単に保管します。

 star.prototype.update = function（）{
Position = P5.Vector.rerp（
これは、
this.target、
0.04
）;

描画スターズ

最後に、星の ドロー（） 方法は実際にキャンバスに星を描画します。もう一度、私たちは使用しています 塗りつぶし（） そして 楕円（） 、私たちは呼び出していますが 塗りつぶし（） グレースケール値と透明度のためのアルファ値で。

Each frame, linear interpolation gives us a new point along the path between the current star position and its destination — 各フレーム、線形補間は、現在のスター位置とその目的地の間の経路に沿った新しいポイントを与えます

星をきらめきするために、アルファ値はP5のP5を使用して決定されます。 ノイズ（） 関数。これは指定された座標のPerlinノイズ値を返します。つまり、乱数の滑らかな流体シーケンスを取得します。 3番目のパラメータでは、空間値ではなく時間ベースの値を渡しているため、ノイズは時間の経過とともにアニメートされます。

 star.prototype.draw = function（）{
var alpha =ノイズ（
this.target.x、
this.target.y、
Millis（）/ 1000.0
）;

塗りつぶし（255、alpha * 255）。

楕円（
これはPosition.x、this.position.y、
this.diameter、this.diameter
）;

それは私たちの最初のスケッチのためのそれです！クリックしてドラッグして新しい星が表示され、ヒント画像に適合します。

次は何ですか？

ここから、P5.DOMアドオンを使用して変数を制御するためのいくつかのHTML要素を追加することも、ビジュアルにサウンドを追加することもできます。 P5.Sound. 。

私たちはP5.jsで可能なものの表面を傷つけただけで、途中で新しい機能を備えています。楽しむ！

Creative Sodingの創造面の詳細については、AT ロンドンを生成します ！ Brendan Dawes データを美しさのものに変えるには、処理とP5.JSの使用方法を教えてください。 彼のワークショップで ;彼はまた仕事の喜びについて話しているでしょう 紙、プラスチックおよびピクセル 。 あなたのチケットを予約してください ！

P5.JSでクリエイティブコードを探る

描画関数

ヘルパー機能

描画スターズ

次は何ですか？

操作方法 - 最も人気のある記事

犬を描く方法

ローズを描く方法：初心者と高度なヒント

超迅速なJavaScriptへの21ステップ

EXPOと原ネイティブのジャンプスタート

Adobe XDを使ってモバイルアプリをプロトタイプする方法

インクで有機テクスチャを作成する

ブレンダーで見事なタイルテクスチャを作成する

ベクターツールを使用する：Webデザイナーのアプローチ

カテゴリ