processing/p5.js

これは何？

主な機能

• 01スケッチをすばやく書けるシンプルなsetup()とdraw()の構成。
• 02図形、テキスト、画像を扱える2D描画ツール一式。
• 03音と映像を組み合わせた作品、インタラクティブ作品、ジェネラティブ作品に対応。
• 04充実したリファレンスドキュメント、チュートリアル、視覚的なサンプル。
• 05ローカルへのインストールなしでコーディングできるブラウザベースのWebエディタ。
• 06コミュニティ製ライブラリによる機能拡張。

ユースケース

• 視覚的なフィードバックを通じて、学生にプログラミングの基礎を教える。
• Web向けのインタラクティブアートやジェネラティブビジュアルを制作する。
• ブラウザ上でインタラクティブなデザインやアニメーションのプロトタイプを作る。
• p5.soundライブラリと組み合わせて、音に反応するビジュアライゼーションを制作する。

クイックスタート

1. 1

   p5.js Web Editorを開けば、何もインストールせずにコーディングを始められます

2. 2

   p5.jsのウェブサイトにある「Get Started」チュートリアルに沿って進めましょう

使う前に知っておきたいこと

• !主にボランティアによってメンテナンスされているため、issueへの返信に時間がかかる場合があります。
• !LGPL-2.1でライセンスされています。弱いコピーレフトライセンスのため、使用前に条件を確認してください。

収録されている特集

トピック

よくある質問

p5.js とは？

p5.jsは、Web上でのクリエイティブコーディングや描画、インタラクティブ／ジェネラティブなグラフィックス制作に使える、無料のオープンソースJavaScriptライブラリです。 p5.jsは、アーティストやデザイナー、教育者、初心者がブラウザ上で直接、描画やアニメーション、インタラクティブなグラフィックスの制作を行える、クリエイティブコーディング向けのJavaScriptライブラリです。setup()とdraw()を使う構成により、数行のコードですぐに始められ、Processingの基本理念を受け継いでいます。

p5.js は無料で使えますか？ライセンスは？

p5.js は LGPL-2.1 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

p5.js は今もメンテナンスされていますか？

活発にメンテナンス中。p5.js の最終コミットは 2026年11月5日 です。

p5.js は何に使えますか？

視覚的なフィードバックを通じて、学生にプログラミングの基礎を教える。 Web向けのインタラクティブアートやジェネラティブビジュアルを制作する。 ブラウザ上でインタラクティブなデザインやアニメーションのプロトタイプを作る。 p5.soundライブラリと組み合わせて、音に反応するビジュアライゼーションを制作する。

p5.js のインストール方法は？

p5.js Web Editorを開けば、何もインストールせずにコーディングを始められます p5.jsのウェブサイトにある「Get Started」チュートリアルに沿って進めましょう

p5.js はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/processing/p5.js