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

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

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

第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章 音声合成、認識

ここのプログラムはChromeで実行してください。
  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: 立方体の回転