This page is a collection of legacy examples from the old p5.js website.
These examples are no longer available on the current p5.js website, but they are still available in the p5.js website legacy repository.
Source code is available on GitHub p5.js website legacy.
All examples are licensed under CC BY-NC-SA 4.0.
Contents
Play Slideshow
Comments and Statements / 文とコメント
Structure
Coordinates / 座標
StructureDrawing
Width and Height / 幅と高さ
StructureData
Setup and Draw / SetupとDraw
Structure
No Loop / No Loop
Structure
Loop / Loop
StructureInteraction
Redraw / Redraw
StructureInteraction
Functions / 関数
Structure
Recursion / 再帰
StructureMath
Create Graphics / グラフィックスの作成
StructureRendering
Points and Lines / 点と線
FormDrawing
Shape Primitives / 形状の基本
FormDrawing
Pie Chart / 円グラフ
FormData
Regular Polygon / 正多角形
FormMath
Star / 星
FormDrawing
Triangle Strip / トライアングルストリップ
Form3D
Bezier / ベジェ曲線
FormMath
3D Primitives / 3Dプリミティブ
Form3D
Trig Wheels and Pie Chart / 三角関数のホイールと円グラフ
FormDataColor
Variables / 変数
Data
True and False / TrueとFalse
DataControl
Variable Scope / 変数のスコープ
Data
Numbers / 数値
Data
Array / 配列
ArraysData
Array 2D / 2次元配列
ArraysImage
Array Objects / オブジェクトの配列
ArraysObjects
Walk Over 2dArray / 2次元配列の走査
ArraysControl
Iteration / 反復
ControlDrawing
Embedded Iteration / 埋め込まれた反復
ControlDrawing
Conditionals 1 / 条件分岐 1
ControlLogic
Conditionals 2 / 条件分岐 2
ControlLogic
Logical Operators / 論理演算子
ControlLogic
Logical Operators 2 / 論理演算子 2
ControlInteraction
Conditional Shapes / 条件付き形状
ControlInteraction
Load and Display Image / 画像の読み込みと表示
Image
Background Image / 背景画像
Image
Transparency / 透明度
ImageColor
Alpha Mask / アルファマスク
Image
Create Image / 画像の作成
ImageDrawing
Pointillism / 点描画
ImageDrawing
Blur / ぼかし
ImageProcessing
Edge Detection / エッジ検出
ImageProcessing
Brightness / 明るさ
ImageColor
Convolution / 畳み込み
ImageProcessing
Copy() method / Copy() メソッド
Image
Pixel Array / ピクセル配列
Image ProcessingInteraction
Histogram / ヒストグラム
Image ProcessingData
Hue / 色相
Color
Saturation / 彩度
Color
Brightness / 明度
Color
Color Wheel / カラーホイール
Color
Color Variables / 色の変数
ColorData
Relativity / 相対性
Color
Linear Gradient / 線形グラデーション
ColorDrawing
Radial Gradient / 放射状グラデーション
ColorDrawing
Lerp Color / Lerp Color
Color
Increment Decrement / インクリメントとデクリメント
Math
Operator Precedence / 演算子の優先順位
Math
Distance 1D / 距離 1D
MathInteraction
Distance 2D / 距離 2D
MathInteraction
Sine / サイン
Math
Sine Cosine / サインとコサイン
Math
Sine Wave / 正弦波
Math
Additive Wave / 加算波
Math
PolarToCartesian / 極座標から直交座標へ
Math
Arctangent / アークタンジェント
MathInteraction
Linear Interpolation / 線形補間
MathInteraction
Double Random / ダブルランダム
Math
Random / ランダム
Math
Noise1D / 1Dノイズ
Math
Noise Wave / ノイズウェーブ
Math
Noise2D / 2Dノイズ
Math
Noise3D / 3Dノイズ
Math3D
Random Chords / ランダムコード
MathGenerative
Random Gaussian / ランダムガウス
MathData
Map / マップ
Math
Graphing 2D Equations / 2D方程式のグラフ化
MathVisualisation
Parametric Equations / 媒介変数表示
Math
Trigonometry and Particles / 三角関数とパーティクル
MathSimulation
Forces / 力
SimulatePhysics
Particle System / パーティクルシステム
SimulatePhysics
Flocking / 群れ
SimulateAI
Wolfram CA / Wolfram CA
SimulateMath
Game of Life / ライフゲーム
SimulateMath
Multiple Particle Systems / 複数のパーティクルシステム
SimulatePhysics
Spirograph / スピログラフ
SimulateDrawing
L-Systems / L-System
SimulateMath
Spring / バネ（Spring）
SimulatePhysics
Springs / 複数のバネ
SimulatePhysics
Soft Body / ソフトボディ
SimulatePhysics
SmokeParticles / 煙のパーティクルシステム
SimulatePhysics
Brownian Motion / ブラウン運動
SimulateMath
Chain / チェーン
SimulatePhysics
Snowflakes / 雪の結晶
SimulatePhysics
Penrose Tiles / ペンローズ・タイル
SimulateMath
Recursive Tree / 再帰的な木
SimulateMath
The Mandelbrot Set / マンデルブロ集合
SimulateMath
Koch Curve / コッホ曲線
SimulateMath
Bubble Sort / バブルソート
SimulateAlgorithm
Stepping Feet Illusion / ステッピング・フィート錯視
SimulateIllusion
Particles / 粒子（Particles）
SimulatePhysics
Quicksort / クイックソート
SimulateAlgorithm
Tickle / くすぐり
InteractionTypography
Weight Line / ウェイトライン
InteractionDrawing
Follow 1 / 追跡 1
InteractionMath
Follow 2 / 追跡 2
InteractionMath
Follow 3 / 追跡 3
InteractionMath
Snake game / ヘビゲーム
InteractionGame
Wavemaker / ウェーブメーカー
InteractionMath
Reach 1 / リーチ 1
InteractionMath
Reach 2 / リーチ 2
InteractionMath
Reach 3 / リーチ 3
InteractionMath
Arduino sensor data via WebJack / Arduino センサー
InteractionHardware
Kaleidoscope / 万華鏡
InteractionDrawing
Objects / オブジェクト
ObjectsClass
Multiple Objects / 複数のオブジェクト
ObjectsClass
Array of Objects / オブジェクトの配列
ObjectsArrays
Objects 2 / オブジェクト（オプション引数）
ObjectsClass
Inheritance / 継承
ObjectsOOP
Composite Objects / 複合オブジェクト
ObjectsOOP
Car Instances / 車のインスタンス
ObjectsClass
Directional / 指向性ライト
Lights3D
Mixture / 混合
Lights3D
Non Orthogonal Reflection / 非直交反射
MotionPhysics
Linear / 直線運動
MotionDrawing
Bounce / バウンス
MotionPhysics
Bouncy Bubbles / 弾むバブル
MotionPhysics
Morph / モーフ
MotionForm
Moving On Curves / 曲線上の移動
MotionMath
Circle Collision / 円の衝突
MotionPhysics
Instantiation / インスタンス化
Instance ModeStructure
Instance Container / インスタンスコンテナ
Instance ModeDOM
Input and Button / 入力とボタン
DOMInteraction
Slider / スライダー
DOMInteraction
Modifying the DOM / DOMの変更
DOMHTML
Video / ビデオ
DOMVideo
Video Canvas / ビデオキャンバス
DOMVideo
Video Pixels / ビデオピクセル
DOMVideoProcessing
Video Capture / ビデオキャプチャ
DOMVideo
Drop / ドロップ
DOMInteraction
DOM Form Elements / DOMフォーム要素
DOMUI
Continuous Lines / 連続線
DrawingInteraction
Patterns / パターン
DrawingInteraction
Pulses / パルス
DrawingGenerative
Translate / 移動（Translate）
TransformMath
Scale / スケーリング（Scale）
TransformMath
Rotate / 回転（Rotate）
TransformMath
Arm / アーム
TransformRobot
Letters / 文字
TypographyText
Words / 単語
TypographyText
Text Rotation / テキストの回転
TypographyTransform
Geometries / ジオメトリ
3DForm
Sine Cosine in 3D / 3Dでのサイン・コサイン
3DMath
Multiple Lights / 複数のライト
3DLights
Materials / マテリアル
3DRendering
Textures / テクスチャ
3DImage
Ray Casting / レイキャスティング
3DInteraction
Orbit Control / オービットコントロール
3DInteraction
Basic Shader / 基本シェーダー
3DShader
Shader as a Texture / テクスチャとしてのシェーダー
3DShader
Passing Shader Uniforms / シェーダーへのユニフォームの受け渡し
3DShader
Shader Using Webcam / ウェブカメラを使用したシェーダー
3DShaderVideo
Blur using Framebuffer Depth / フレームバッファによるぼかし
3DShaderRendering
Simple Feedback / 単純なフィードバック
3DShader
Clock / 時計
InputTime
Constrain / コンストレイン（制約）
InputMath
Easing / イージング
InputMotion
Keyboard / キーボード
InputInteraction
Milliseconds / ミリ秒
InputTime
Mouse 1D / マウス 1D
InputInteraction
Mouse 2D / マウス 2D
InputInteraction
Mouse Functions / マウス関数
InputInteraction
Mouse Signals / マウス信号
InputData
Mouse Press / マウスプレス
InputInteraction
Rollover / ロールオーバー
InputInteraction
Storing Input / 入力の保存
InputData
Load Saved JSON / 保存されたJSONの読み込み
DataJSON
Load Saved Table / 保存されたテーブルの読み込み
DataCSV
Load and Play Sound / サウンドの読み込みと再生
SoundMedia
Preload SoundFile / サウンドファイルのプリロード
SoundStructure
soundFormats / サウンドフォーマット
SoundCompatibility
Play Mode / 再生モード
SoundInteraction
Pan Sound / サウンドのパン
SoundInteraction
Sound Effect / 効果音
SoundInteraction
Playback Rate / 再生速度
SoundInteraction
Measuring Amplitude / 振幅の測定
SoundAnalysis
Noise Drum Envelope / ノイズドラムエンベロープ
SoundSynthesis
Note Envelope / ノートエンベロープ
SoundSynthesis
Oscillator Frequency / オシレーター周波数
SoundVisualization
Mic Input / マイク入力
SoundInput
Frequency Spectrum / 周波数スペクトル
SoundVisualization
Mic Threshold / マイクしきい値
SoundInteraction
Filter LowPass / ローパスフィルタ
SoundProcessing
Filter BandPass / バンドパスフィルタ
SoundProcessing
Delay / ディレイ
SoundEffects
Reverb / リバーブ
SoundEffects
Convolution Reverb / コンボリューションリバーブ
SoundEffects
Record Save Audio / オーディオの録音と保存
SoundUtility
Frequency Modulation / 周波数変調（FM）
SoundSynthesis
Amplitude Modulation / 振幅変調（AM）
SoundSynthesis
Acceleration Ball Bounce / 加速度ボールバウンス
MobilePhysics
Simple Draw / シンプルドロー
MobileDrawing
Acceleration Color / 加速度カラー
MobileSensors
Shake Ball Bounce / シェイクボールバウンス
MobileSensors
Tilted 3D Box / 傾いた3Dボックス
Mobile3D
Simple Shapes / 単純な図形
Hello P5Drawing
Interactivity 1 / インタラクティビティ 1
Hello P5Interaction
Interactivity 2 / インタラクティビティ 2
Hello P5Interaction
Animation / アニメーション
Hello P5Animation
Flocking / 群れ（Flocking）
Hello P5Simulation
Weather / 天気
Hello P5Data
Drawing / ドローイング
Hello P5Art
Song / ソング
Hello P5Sound
Groups
Structure / 構造
Structure Examples of p5.js website legacy
10 works
Form / 形状
Form Examples of p5.js website legacy
9 works
Data / データ
Data Examples of p5.js website legacy
4 works
Arrays / 配列
Arrays Examples of p5.js website legacy
4 works
Control / 制御
Control Examples of p5.js website legacy
7 works
Image / 画像
Image Examples of p5.js website legacy
11 works
Image Processing / 画像処理
Image Processing Examples of p5.js website legacy
2 works
Color / 色
Color Examples of p5.js website legacy
9 works
Math / 数学
Math Examples of p5.js website legacy
23 works
Simulate / シミュレーション
Simulate Examples of p5.js website legacy
23 works
Interaction / インタラクション
Interaction Examples of p5.js website legacy
12 works
Objects / オブジェクト
Objects Examples of p5.js website legacy
7 works
Lights / ライト
Lights Examples of p5.js website legacy
2 works
Motion / 動き
Motion Examples of p5.js website legacy
7 works
Instance Mode / インスタンスモード
Instance Mode Examples of p5.js website legacy
2 works
Dom / DOM
Dom Examples of p5.js website legacy
9 works
Drawing / 描画
Drawing Examples of p5.js website legacy
3 works
Transform / 変形
Transform Examples of p5.js website legacy
4 works
Typography / タイポグラフィ
Typography Examples of p5.js website legacy
3 works
3D / 3D
3D Examples of p5.js website legacy
13 works
Input / 入力
Input Examples of p5.js website legacy
12 works
Advanced Data / 高度なデータ
Advanced Data Examples of p5.js website legacy
2 works
Sound / サウンド
Sound Examples of p5.js website legacy
22 works
Mobile / モバイル
Mobile Examples of p5.js website legacy
5 works
Hello P5 / Hello P5
Hello P5 Examples of p5.js website legacy
8 works
License
Source code is available on GitHub p5.js website legacy.
All examples are licensed under CC BY-NC-SA 4.0.