https://shiroyuki2020.hatenablog.com/entry/p5js

p5.jsは、クリエイティブコーディングに最適なJavaScriptライブラリであり、そのリファレンスは多くの情報を提供しています。p5.jsのリファレンスから学べる内容と、個人的に深掘りした項目を紹介します。

p5.jsのリファレンスで学べる内容

p5.jsの公式リファレンスでは、インタラクティブで視覚的に魅力を感じる作品を作成するための多様な内容が掲載されています。以下のような幅広い内容を学ぶことができます。

Shape
- さまざまな形状（単純な線や円からカスタム形状まで）の図形を描画する方法
Color
- 色の作成、操作、適用
Typography
- テキスト、フォントの調整
Image
- 画像の読み込み、表示、操作
Transform
- 形状やオブジェクトの変換
Environment
- ブラウザ環境やキャンバスプロパティとの連携
3D
- カメラ、ライト、マテリアル、シェーダなど
Rendering
- さまざまなレンダリングモード
Math
- 数学関連（計算、ノイズ、ランダム、三角比、ベクトル）
IO
- 入出力操作、ファイルハンドリング、ネットワーク通信など
Events
- ユーザーインタラクションやシステムイベントのハンドリング
DOM
- HTML要素の操作
Data
- さまざまなデータ構造
Structure
- p5.jsスケッチの基本構造やプログラムフロー
Constants
- p5.jsで定義された定数
Foundation
- p5.jsの基礎となる概念や関数

注意点

p5.jsのリファレンスは英語で書かれている

英語が苦手でも問題ありません。AIを活用して翻訳することで、言語の問題は解決できます。

個人的に深掘りした項目

以下は、個人的に興味を持って深掘りした項目です。

beginGeometry()とendGeometry(), buildGeometry()の違い

これらの関数は、WebGLモードで複数の図形を組み合わせた複雑な形状を作成するために使用されます。

beginGeometry()とendGeometry()はセットで使い、buildGeometry()は単独で使います。この2つは記述法が微妙に違いますが、実行結果が同じになるので、最初は使い分けが分からなかったです。

違いを知るため深掘りしました。

Pixels配列

Pixels配列は、RGBA値が格納される1次元配列です。ピクセル1つに対して配列4要素分の情報（赤、緑、青、透明度）を持ちます。この配列を使うことで、画像をピクセル単位で操作できます。Pixels配列を使う場合、以下の2パターンのfor文によるアクセス方法があります。

// for文が1重の場合
for(let i = 0; i < pixels.length; i += 4){
  // pixels配列の値を更新する処理
}

// for文が2重の場合
for(let y = 0; y < height; y++){
  for(let x = 0; x < width; x++){
    let index = (y * width + x) * 4;
    // pixels配列の値を更新する処理
  }
}

フレームレートの移動平均

フレームレートの変動を滑らかにするために、レームレートの移動平均を計算する方法を学びました。

移動平均という言葉を初めて目にしたので調べたところ、株価チャートの分析で使われる〇日移動平均線と同じ概念だと分かりました。異なる分野でも数学の知識が応用されていることを再認識しました。

三角法（sin(), cos()）でグラフを描画する

三角法のsin()とcos()は、周期的な動きや波状のパターンを描画するのに最適です。sinとcosを使ったグラフを描画するために、三角関数を復習しました。三角関数を理解したことで、sinとconを使ったプログラムコードの理解が深まり、スムーズに実装できるようになりました。

JSONデータの構造

JSONは、今まで単純な構造しか把握していませんでした。JSONでデータを管理することを考えると複雑な構造の記述を知る必要がありました。そこで、ネスト（入れ子構造）を使ったJSONデータの記述方法について調べました。ネストを使うことで、より構造的なデータを表現できることを学びました。

まとめ

p5.jsのリファレンスは、初心者から経験豊富なクリエイティブコーダーまで作品作りの参考になります。基本的な形状描画から複雑な3D形状、ピクセル操作、データ視覚化まで、p5.jsはアイデアを実現するための幅広い情報を提供しています。興味のあるトピックを深く掘り下げ、異なる概念を組み合わせてユニークで魅力的な作品作りに挑戦してみてはいかがでしょうか。

ランキング参加中

プログラミング