p5.js プログラミングガイド サンプルプログラム

松田晃一、由谷哲夫、椎野綾菜 著

このページでは初版（2015年発行）のサンプルプログラムを紹介しています。改訂版（2021年発行）のサンプルプログラムについては当該書籍に記載のURLを参照してください。

サンプルプログラムは章ごとに構成されています。詳しくは、第1章のサンプルプログラムの動かし方を参照してください。ネットで公開されているサンプルプログラムは、ここをクリックしてください。本書で参照しているリンク一覧ここをクリックしてください。

［2015-12-1追加］p5jsSamples.zip（約112MB）：本ページおよび本ページ以下の階層のリンク先を含むZIPファイルです。サンプルファイルを一括してダウンロードしたい場合にご利用ください。

第2章 p5.jsとJavaScript入門

1. DrawFunction: 「こんにちは」が動く
2. ClickedText: クリックした場所にテキストを表示

第3章 2Dグラフィックス

1. DrawLine: 線を引く
2. Rect: 2つの長方形の描画
3. DrawEllipseRect: 円と長方形の描画
4. DrawClione: クリオネの描画
5. BeginShape: 多角形の描画
6. StrokeWeight: 線の太さ
7. StrokeFill: 輪郭と塗りつぶし
8. NoStroke: 輪郭無し
9. HalfTransparency: 半透明
10. HSB: HSBカラーモード
11. StrokeCap: 線の端点形状
12. StrokeJoin: 線の結合形状
13. TextSizeLeading: フォントサイズと行間
14. TextFont: フォントの変更
15. LoadFont: オープンフォント(フォントファイルが必要)
16. MovingRect: 長方形のアニメーション
17. FrameRate: フレームレートの変更
18. NoLoop: draw関数を停止
19. Redraw: draw関数を再開
20. Translate: 平行移動
21. Rotate: 回転
22. RotatingTriangle: 三角形の回転
23. Scale: スケーリング
24. PushPop: 描画属性のプッシュポップ
25. DrawClioneFunction: 関数
26. CanvasParent: HTML内の指定

第4章 マウス、キーボードを扱う

1. ClickedText: クリックするとテキストを描画
2. MouseDragged: ドラッグで線を描画
3. MouseDraw: マウスで描画
4. MouseWheel: マウスホィール
5. WinMouseXY: WinMouseXとYの場所
6. MouseCursor: マウスカーソルの変更
7. KeyTyped: キー入力
8. KeyPressed: キー入力

第5章 スマホを扱う

1. TouchedTexts: タッチするとテキストを表示
2. TouchMoved: タッチして動かすと線を描画
3. TouchDraw: タッチで描画
4. Orientation: スマホの傾き
5. DeviceMoved: ボールを転がす
6. DeviceShaken: スマホを振る

第6章 UI部品

1. Button: 押しボタン
2. ButtonLabel: ボタンのラベルの変更
3. SimpleDraw: 描画ツール
4. ButtonInput: 入力フィールド
5. Slider: スライダ
6. DropDown: ドロップダウンメニュー
7. CheckBox: チェックボックス
8. FileInput: ファイル入力
9. Drop: ファイルのドロップ

第7章 画像を扱う

1. CreateImg: 画像の表示
2. CreateMovingImg: 画像を動かす
3. CreateImgCanvas: 画像の描画領域への表示
4. ShowImage: 画像の表示
5. MovingImage: 画像を動かす
6. FilterImage: 画像のフィルタ処理
7. ShowPixel: ピクセル値の表示
8. ClickedPixel: クリックされたピクセル値の表示
9. OverridePixels: ピクセルの上書き
10. ModifiedPixels: ピクセルの変更
11. InvertPixels: ピクセル値の反転
12. InvertAll: 全ピクセル値の反転
13. InvertPixelArray: pixels配列を使う

第8章 動画を扱う

1. PlayVideo: 動画を再生する
2. PlayPauseVideo: 動画を再生・停止する
3. InvertVideo: 動画の色を反転する
4. InvertVideoPixelArray: 動画の色を反転する(pixel配列版)
5. DropVideo: 動画ファイルをドロップする
6. HelloCamera: カメラ画像を表示する
7. PlayPauseCamera: カメラ画像のプレイストップ
8. InvertCamera: カメラの画像を反転表示する
9. InvertCameraPixelArray: カメラの画像を反転表示する(pixel配列版)

第9章 オブジェクト

1. DrawLine: オブジェクトを使った線の描画
2. DrawArc: オブジェクトを使った円弧の描画
3. DrawShape: オブジェクトを使った図形の生成
4. NewRect: new演算子
5. ClioneObject: オブジェクトベースのClione
6. MoveClione: メソッド
7. InheritClione: 継承

第10章 サウンドを扱う

ここのプログラムはChromeで実行してください。
1. Play: 楽曲ファイルの再生
2. PlayControl: 再生、停止、一時停止
3. PlayControl: 再生、停止、一時停止（多重再生なし）
4. MicInput: マイク入力
5. Record: 録音する
6. ShowWaveFromMic: 波形表示(マイク)
7. ShowWaveFromFile: 波形表示(ファイル)
8. ShowSpectrum: スペクトル表示
9. FilterLowPass: ローパスフィルタ
10. FilterBandPass: バンドパスフィルタ
11. Oscillator: オシレータ
12. OscillatorFFT: オシレータとFFT
13. FMSynthesizer: シンセサイザ
14. FMSynthesizer2: シンセサイザ(エンベロープ付き)

第11章 DOMを扱う

1. HelloDOM: DIV要素の追加
2. AddAttribute: 属性の追加
3. Attribute: attribute関数
4. HelloDOM2: 子要素、親要素の追加
5. Select: DIV要素の選択
6. PhotoSearch: Web APIの利用

第12章 音声合成、認識

1. Speak: 音声合成
2. SpeakJapanese: 日本語の発話
3. SpeechVolume: 音量の調整
4. SpeakItarian: イタリア語風に話す
5. ListVoices: 音声リスト
6. SpeakRandom: ランダムに音声を選ぶ
7. SpeakLong: 長い文章の発話
8. SpeechRec: 音声認識
9. ContRec: 連続音声認識
10. MoveBySpeech: 音声認識で丸を動かす

第13章 2Dゲームを作成する

1. DrawSprites: スプライトの表示
2. DrawImageSprite: 画像付きスプライト
3. AnimatedSprite: アニメーション付きスプライト
4. TwoSprites: 2つのスプライト
5. TwoDifferents: 異なるスプライト
6. ChangeAnimation: アニメーションの変更
7. ClickedSprites: スプライトのクリック
8. MovingSprites: スプライトが上から下に移動
9. MovingSpritesRepeat: MovingSpritesを繰り返す
10. KeyMouse: キーやマウスの操作
11. Collider: コライダー
12. Bounce: スプライトの跳ね返り
13. OverlapCallback: スプライトの重なり
14. 4Walls: 4方向の壁
15. WrapUp: 再び上から表示する
16. Group: グループ

第14章 後書きにかえて

1. LEDoN: LEDのオンオフ
2. CDS: 光センサー
3. Sphere: 球の表示
4. Box: 立方体の表示
5. BoxXYZ: 立方体の回転