P5.JSでのデータ可視化を探る

Sep 15, 2025

操作方法

（イメージクレジット：ネットマガジン）

P5.jsは、有名なデスクトップクリエイティブコーディング環境処理の最新のJavaScript実装です。それは多くの電力と処理の使いやすさがかかり、それをあなたのブラウザに入れます。それはあなたがキャンバスを描くのを助けますが、あなたのWebページと統合するのに役立ち、あなたの「スケッチ」がDOMに応答して操作することを可能にします。

p5.js. アニメーションの頭痛をたくさん取り除きます データ可視化 Web上で、2つの簡単な機能を使用してアニメーションで起動して実行するのがスーパーシンプルになります。 セットアップ（） そして ドロー（） 。

しかし、あなた自身の関数を作成し、それを多くのコミュニティ作成されたライブラリの多くと共に拡張することで、この単純さが制限されていると仮定しないでください。

より多くのWebデザインツールとアドバイスについては、華麗なリストを参照してください。 ウェブホスティング プロバイダと必ず完璧を選択してください ウェブサイトビルダー そして クラウドストレージ 。

クリエイティブコーディングに入る6つの方法

アニメーションをドライブするためにデータを使用するのはなぜですか？

設計とアニメーションの「システム」の作成は、異なるデータをフィードできる規則、パラメータ、および変数範囲のセットを定義することを意味します。システムのパラメータと入力されたデータを入力する能力は、体系的なアプローチの一貫性を持つ無限の出力バリエーションを作成できます。

異なるデータは、完全に多様な視覚出力を作成することができ、急速な動きの大きいデータはオーディオです。それは私たちが私たちのアニメーションで使うつもりです。

データ駆動VSデータビジュアライゼーション

Explore data visualisation with p5.js: Example — P5.JSができることの例として。ここでは、その理由は、オーディオデータによって素晴らしくドッティティの取り決めに歪んできました（イメージクレジット：ネットマガジン）

データ駆動型アニメーションはデータの可視化ですか？はいといいえ。あなたのアニメーションは、ビジュアライゼーションのようにデータの視覚的表現になりますが、その目的は従来の視覚化のそれとは異なります。データの視覚化は、ビューアにデータへの洞察を与えるために使用されるため、グラフィックはデータの通信のサービスにあります。

ただし、興味深くテクスチャのグラフィカルなバリエーションを生成することを可能にするためのクリエイティブなシードとしてデータを使用します。したがって、データはグラフィックのサービスにあります。もちろん、1つの規律は相互接続されており、もう一方の規模で相互受粉されていますが、データを使用するときにあなた自身の意図を認識するのが良いです。

私たちは何を作るつもりですか？

Explore data visualisation with p5.js: Concentric arcs — オーディオ振幅によってスケーリングされたスクリーンの中心から出てくる同心円の円弧（イメージクレジット：ネットマガジン）

P5.JSは、サウンドファイルの分析から（MP3のように）、データへの迅速かつ簡単にアクセスできます。私たちは使うでしょう P5.FFT. オーディオ内で異なる周波数（ベースとトレブル）を分析し、その周波数の「エネルギー」または振幅を視覚化します。

それが再生されるようにサウンドの「形」を見ることができるようにするために、サウンドの現在の振幅を表示したいが、データポイントの「バッファ」をキャプチャしたいだけです。これにより、値の移動履歴を表示できます。

データポイントを表示するには、画面の中央から外縁まで一連の同心円状の円弧を作成します。円弧の長さはデータの振幅を表します。線量や色などのデータには、他のビジュアルエンコーディングも使用します。

私たちは何を学びますか？

コードを操作する、カバーします。

新しいP5スケッチを設定します
音声の積みと分析
サイズ、形状、色のような視覚的要素へのデータ値のマッピング
クラスを使用して描画し、アニメーションとデータの状態を維持し、コードを再利用できます。

ファイルはどこにありますか？

アニメーションのファイルはホストされていますオープンプロセッシング、他の人のスケッチを共有し、発見して発見するための素晴らしいプラットフォーム。あなたがコーディングするのは素晴らしい場所です。

オーディオデータを使用するように、スケッチにドラッグするにはMP3ファイルが必要です。 OpenProcessingで新しいスケッチを設定します。これはあなたのスケッチがオーディオをロードしたら、データを取得し、単純な「データ形状」を描画した方法です。

そしてこれが完成したスケッチがどのように見えるかです。

あるいは、あなたはそれを使うこともできます P5.JSオンライン編集者それともあなた自身のプロジェクトにライブラリを含めるだけですダウンロードまたはCDNを介して。

01.新しいスケッチを開始します

Explore data visualisation with p5.js: OpenProcessing — はじめに無料のオープンプロセッシングアカウントを設定します（イメージクレジット：マイクブロンドビジル）

無料のOpenProcessingアカウントを取得し、プロフィールページから[スケッチの作成]をクリックします。これにより、P5.jsの組み込み関数の2つを含む最も基本的なスケッチを作成します。

セットアップ（） - これは一度だけ実行され、新しいキャンバスを設定するために使用されます
ドロー（） - ここであなたが毎週のフレームを実行したいコードを入れる場所です

あなたはそれに気付くでしょう バックグラウンド（） セットアップに1回呼び出されます。これにより画面がクリアされるので、フレームごとに画面をクリアしたい場合は、その開始時にこれを含めます。 ドロー（） 関数も。

あなたが見つけることができるいくつかの例を使って、ここにいくつかのコードを使って遊びをしてください P5.JSサイトで。

Book your tickets to Generate CSS now to save £50 — £50を節約するためにCSSを生成するためのチケットを予約する（イメージクレジット：getty /未来）

02.オーディオデータを使用して最初のスケッチを作成します

Explore data visualisation with p5.js: First sketch — 最初のオープン処理スケッチで基本設定（）と描画（）関数を作成する（イメージクレジット：マイクブロンドビジル）

私のものに行きます例スタータースケッチの例。

Playボタンを押すと、キャンバスにMP3ファイルを削除するように求めるテキストがいくつか表示されます。アップロードを終了するために数秒待ってから、キャンバスをクリックして再生を開始します。あなたのマウスに従って、あなたのマウスに従って楕円が表示されます。これは、アップロードした音楽の中の低スケーリングと色の変化です。

コードの多くはコメントされていますが、いくつかの重要な要素を見てみましょう。

スケッチの始めに、前に セットアップ（） 、グローバルな変数をいくつか作成しました。

以内に セットアップ（） 私たちにはいくつかの重要な行があります。

colorMode(HSB,360,100,100);

カラーモード（） rGBとHSBのようなさまざまな色のスペース内で動作するようにP5.JSを設定できます。また、チャンネルをナビゲートするために使用するスケールを設定できます。ここでは、デフォルト設定ではなくPhotoshopからより慣れている可能性がある値にHSB範囲を設定しました（0から255）。

canvas.drop(gotFile);

このスーパー有用なp5.js関数を使用すると、キャンバス上のファイルドロップイベントを聴くことができます。ファイルドロップイベントを受けると、電話をかけます gotfile（） 正しいタイプであるかどうかを確認して、サウンドの分析を開始します。

soundFile = new p5.SoundFile(file.data);

ここで私たちはドロップされたファイルデータを SoundFile. 。サウンドファイルがある場合は、次のコードを使用します。

initsound（） 新しいFFTインスタンスを設定するには（サウンドを分析するため）
AnalysSound（） フレームごとの音のブロックを分析するには
getNewSoundDataValue（） 使うために FFT.GetEnergy（） サウンドの現在の振幅を教えてください。これは、0から255から0から1のデフォルト範囲から変換されます。

ヒント：データをスケール、速度、色などの視覚的なパラメータにマッピングするときに、データを0から1の範囲に変換するのは役に立ちます。

draw（）関数を見てみましょう。この行は、低音周波数の現在の振幅（0から1の間）を要求し、それを変数に割り当てます mydataval 。

var myDataVal = getNewSoundDataValue(“bass”)

Explore data visualisation with p5.js: Audio reactive ellipse — 数ステップでは、オーディオデータで駆動されるスケールと色でオーディオの反応性楕円を作成できます。（イメージクレジット：マイクブロンドビジル）

私たちは私たちの習慣を呼び出します getdatahsbcolor（） データ値を別々に色相、彩度、明るさにマッピングし、カラーを返します。データが高いほど、色が色相スペクトルを横切って移動し、より明るく、色がより飽和します。

var myDataColor = getDataHSBColor(myDataVal);

私達が私達の楕円を描くことができる前に私達は私達のデータ値によって200（px）を乗算することによってそれにサイズを与える必要があります。それで、値が高いほど、楕円が大きくなります。

var myEllipseSize = 200 * myDataVal;

03. PaintBrushとしてオーディオデータを使用してください

Explore data visualisation with p5.js: Paint with audio data — 1行のコードだけを変更してください - Background（）コールを削除し、オーディオデータでペイントできます。（イメージクレジット：マイクブロンドビジル）

楽しい楽しみのために、コメントアウトしてください バックグラウンド（） に電話をする ドロー（） 機能とあなたはあなたのサウンドの反応性楕円を使って塗ることができます！

05あなたのスケッチを完了してください

Explore data visualisation with p5.js: Final sketch — これが完成したスケッチです（イメージクレジット：マイクブロンドビジル）

1つの周波数の1データ楕円を描画することは素晴らしいですが、今度はベースと高音の両方に一連のデータアークを作成します。また、サウンドの形状を見てもらうのを助けるために以前の値のバッファを描きます。

訪問スケッチのこの完成バージョンそれを実行してからMP3をドロップします。

画面の中央から出てくる一連の円弧が表示されます。水平円弧は低音の視覚化であり、垂直方向のものはMP3の高音を選ぶ。

コードを見て、データを最後のスケッチと同じであるため、セットアップ、ロード、分析、および取得の多くが表示されますので、無視できます。ここではかなりのコードがありますので、以前と同じように、いくつかのキーポイントを選びましょう。

アークを直接描画する代わりに ドロー（） 、実際にカスタムクラスを作成しています。

radialarc {}クラス 個々のアークのデータ値を保持してアークを描画します
radialarcs {}クラス 「RadialARC」インスタンスのコレクションを管理します

各クラス定義には、いくつかのキー値を設定し、またクラスの動作を変更できるようにするパラメータを渡してコンストラクタがあります。今すぐ見てみましょう。

radialArc {}クラス：

これは単一のデータ値を保持して対称アークを描画するクラスです。

setValue（） そして getValue（） ARCの内外でデータを取得し、データの更新としてアークの配列を介してデータをプッシュすることを可能にします。 redrawfromdata（） ARCを再計算して再描画するために呼び出されます。

drawarc（） Handy P5.js関数を呼び出すところです アーク（） 。 アーク（） 三角法を自分でするよりも速いですが、私たちは、アークの位置、サイズ、そして最確に、始点と終了角度のような数の値をそれに渡す必要があります。

その角度は「ラジアン」では程度ではなく測定されます。ラジアンは程度のようなものですが、異なるスケールで：360°は2 x PIラジアンと同じです。 P5.jsには有用な組み込み定数があります ピーピー 、 ハーフポイント そして QUARTER_PI 等

radialarcs {}クラス：

これは私たちの配列を作成する管理クラスです。 RadialArc {} クラスとそれぞれの出入りしてアークを呼び出すことで、それらを最新の状態に保ちます。 redrawfromdata（） 関数。

初期化する RadialARCS（） 高音と低音のためのクラス、見て セットアップ（） 。あなたは私たちが2つを創造していることを見ることができます RadialARCS（） インスタンスと私たちのカスタムパラメータを渡します。

これらのパラメータは次のとおりです。アークの数、内側および最も外側のアークのサイズ、開始角、最大ラインの重み、および色の色相範囲。これらのカスタムクラスを作成することで、コードを再利用することを可能にしますが、各インスタンスはこれらのパラメータを渡すことによって個別に個人を作成できます。

ARCオブジェクトが初期化されると、すべてのフレームが呼び出されます。 UpdaterAdialARCS（） そして drawradialarcs（） メインP5内 ドロー（） 機能。アニメーションの更新と移動方法です。

06.それをさらに踏んだ

Explore data visualisation with p5.js: Completed sketch — 完成したスケッチ、オーディオファイルのベースと高音を視覚化する（イメージクレジット：マイクブロンドビジル）

私たちはここで多くのコードをカバーしましたが、基本的に私たちがデータを取っている方法を見ることができて、サイズ、位置、長さ、体重、色のような視覚的要素に適用してください。

さらに進むには、円弧、グループ、角度の数で遊びます。色の範囲を変更し、さまざまな形を描画するための新しいクラスを作成します。

この例では、絶えず流れるデータを使用し、高速フレームレートと組み合わせることで、アニメーションの錯覚を作成します。しかし、すべてのデータがそのようなものではなく、よりゆっくり更新できます。データが遅くなるには、それらの現在とそのターゲット寸法の間のシェイプのアニメーションを「Tweening」でスムーズなアニメーションを作成できます。

あなたの次のデータ駆動型アニメーションで頑張ってください！

この記事はもともと発行320に発行されました ネット Webデザイナーや開発者向けの世界で最も売れている雑誌。 問題320を購入する ここで ここで購読する 。

関連記事：

CSSを使用してSVGにアニメーションを追加する方法
データのデザインに革命を変更するために設定されたデータトレンド
12素晴らしいCSSアニメーションリソース

P5.JSでのデータ可視化を探る

アニメーションをドライブするためにデータを使用するのはなぜですか？

データ駆動VSデータビジュアライゼーション

私たちは何を作るつもりですか？

私たちは何を学びますか？

ファイルはどこにありますか？

01.新しいスケッチを開始します

02.オーディオデータを使用して最初のスケッチを作成します

03. PaintBrushとしてオーディオデータを使用してください

05あなたのスケッチを完了してください

radialArc {}クラス：

radialarcs {}クラス：

06.それをさらに踏んだ

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

アートのコントラストの力を描く

ChiaroScuro Art：ステップバイステップガイド

あなたがPhotoshopでできることを知らなかった10のこと

リモートチームのマスターバージョン管理

アニメーション蒸気テキスト効果を作成する

あなた自身のキャンバスボードを作る方法

オイルのブラシストロークを改善する

デザインとコンテンツスプリントを実行することを学ぶ

カテゴリ