・本書の内容についてのご意見、ご質問は、お名前、ご連絡先を明記のうえ、小社出版部宛文書（郵送または E-mail）でお送りください。
・電話によるお問い合わせはお受けできません。
・本書の解説範囲を越える内容のご質問や、本書の内容と無関係なご質問にはお答えできません。
・匿名のフリーメールアドレスからのお問い合わせには返信しかねます。
本書で取り上げられているシステム名／製品名は、一般に開発各社の登録商標／商品名です。本書では、™ および ® マークは明記していません。本書に掲載されている団体／商品に対して、その商標権を侵害する意図は一切ありません。本書で紹介している URL や各サイトの内容は変更される場合があります。

まえがき

光っているのは閉じた時間的曲線のあるトポロジーと、ないトポロジーを隔てる境界面。コンノ・カラバエフ・チェン真空が閉じた時間的曲線上のエネルギー発散を打ち消しているんです。
「私立時計ヶ丘高校タイムトラベル部」（小谷太郎著、中京出版）
p5.js は、
「スケッチブックに絵を描くようにプログラムを作成できるようにする」ことを目指して開発され、デザイナ、アーティストなど普段プログラミングに慣れていない人たちが手軽に、Web 上でビジュアルメディアの作成が行えるよう設計されたプログラミングシステムです。このため、初めてプログラミングを勉強する人にも扱いやすく、学校などでのプログラミング教育にも使われています。2013 年からはじまった p5.js もついに 1.0 版がリリースされました。
本書は、そのような p5.js を用いたプログラミングの入門書です。プログラミングを学びたい初心者から、プログラムでいろいろなアプリケーションを作りたい方などが、楽しく、一人でも学べる点を意識し、エラーやトラブルに関しても説明しています。本書を読まれることでスマートフォンや PC で動くアプリケーションを作成できるようになるだけでなく、プログラミングの基礎、p5.js が提供している面白い機能——図形を描画する機能、マウス・キーボードを使ったインタラクティブなプログラムの作成機能、センサー、画像・動画・サウンドの表示・再生・制御機能、人工知能の活用・作成機能など——が一通り学べ、使えるようになります。

zzyxyxyβα

2D グラフィックス（第 3 章） マウス、キーボード（第 4 章）

画像（第 7 章）

動画（第 8 章）

スマホ（第 5 章）

UI 部品（第 6 章）

サウンド（第 9 章）

人工知能（第 10 章）

iiiγz

p5.js で作成したプログラムは、他のプログラミング言語で作成したプログラムとは異なり、Web ブラウザで実行することができるので、簡単にインターネットで公開することができます。
みなさんの作成されたプログラムを、ホームページや SNS にはったり、LINE で送ったりすることでインターネットを介してたくさんの人に見てもらったり、使ってもらうことができるのです。
こ の よ う な p5.js は、 技 術 的 に は、Web ペ ー ジ を 作 成 す る の に 必 要 な HTML5 と CSS、JavaScript をベースにした新しい Web ページ作成用のライブラリであり、アプリケーション作成環境（プログラミング環境）を提供するものです。JavaScript は現在世界で最も幅広く利用されているプログラミング言語であり、Web ブラウザで使用できるプログラミング言語です。
p5.js を用いることで、Web アプリケーションや Web ページ作成に必要な HTML5 や CSS のことは知らなくても、アプリケーションを構築することができます。ブラウザごとに微妙に異なる方言のある HTML5、CSS、JavaScript を用いたプログラミングにちょっと食傷ぎみの方には朗報でしょう。p5.js がこのような方言を隠蔽し、すべてのブラウザで共通に使えるライブラリを提供してくれるため、みなさんはプログラミングそのものに集中することができます。ぜひ、p5.js でプログラミングの楽しさを味わってください。
本書を読まれると Processing を使われたことのある方は、p5.js のプログラミングスタイル方法や提供されている専用のエディタが Processing のと似ていることに気づかれると思います。p5.js
は、Processing を今日の Web テクノロジで再デザインされた新しい JavaScript ライブラリなのです。このため Processing よりも機能が充実しています。
最後に、本書の執筆を通して見つかった p5.js のバグなどに関しては GitHub などを通じて報告し、修正されました。p5.js コミュニティに感謝します。ありがとうございました。また、本書の執筆の機会をいただけた株式会社カットシステムの石塚勝敏さん、編集を担当頂いた武井智裕さんに大変感謝します。それでは p5.js の世界をお楽しみください。
ついに 16 年ですか。けります三島にて
2021 年 10 月吉日
松田 晃一

iv

目

次

目次
前書き................................................................................................................................................iii

第 1 章 p5.js って何？……1
1.1

p5.js と Processing........................................................................................................2

1.3

サンプルプログラムを実行する..........................................................................................4

1.2

1.4

1.5

p5.js が提供する機能.........................................................................................................3

プログラムの開発方法.........................................................................................................5p5.jsWeb エディタを用いる............................................................................................6
1.5.1 最初のプログラムを実行してみる...........................................................................................................................7
1.5.2 エディタの機能................................................................................................................................................................91.5.3 p5.js が提供するサンプルプログラムを実行する.......................................................................................... 10
1.5.4 プログラムの入力とエディタの挙動................................................................................................................... 12
1.5.5 保存.................................................................................................................................................................................... 16
1.5.6 共有.................................................................................................................................................................................... 19
1.5.7 ダウンロード.................................................................................................................................................................. 21
1.5.8 エディタの設定............................................................................................................................................................. 21

1.6他のエディタで開発する.................................................................................................. 22

1.8

本書を読む上での注意...................................................................................................... 26

1.7

1.9

本書のサンプルプログラムの使い方............................................................................... 25

まとめ................................................................................................................................ 26

第 2 章 p5.js 入門……27
2.1

プログラム作成の準備...................................................................................................... 27

2.3

プログラムの処理の流れ.................................................................................................. 29

2.2

2.4

2.5

プログラムの書き方......................................................................................................... 28

扱えるデータ（数値、文字列、論理値）......................................................................... 33

変数................................................................................................................................... 34
2.5.1 変数を定義し、使う.................................................................................................................................................... 34
2.5.2 変数名のつけ方............................................................................................................................................................. 37

2.6

コメント（注釈）.............................................................................................................. 37v

2.7演算子................................................................................................................................ 38
2.7.1 算術演算子...................................................................................................................................................................... 39
2.7.2 特殊な算術演算子........................................................................................................................................................ 40
2.7.3 文字列演算子.................................................................................................................................................................. 412.8

条件分岐............................................................................................................................ 42
2.8.1 if 文..................................................................................................................................................................................... 42
2.8.2 else 文、elseif 文.......................................................................................................................................................... 43
2.8.3 switch 文.......................................................................................................................................................................... 44

2.9

比較、論理演算子............................................................................................................. 46
2.9.1 比較演算子...................................................................................................................................................................... 46
2.9.2 論理演算子...................................................................................................................................................................... 47
2.9.3 論理値................................................................................................................................................................................ 49

2.10

繰り返し............................................................................................................................ 50
2.10.1 while 文.......................................................................................................................................................................... 50
2.10.2 for 文............................................................................................................................................................................... 52
2.10.3 2 重 for 文..................................................................................................................................................................... 55
2.10.4 break 文と continue 文........................................................................................................................................... 56

2.11配列................................................................................................................................... 56
2.11.1 定義方法........................................................................................................................................................................ 57
2.11.2 使い方............................................................................................................................................................................. 58
2.11.3 配列の要素数............................................................................................................................................................... 59
2.11.4 2 次元配列.................................................................................................................................................................... 60
2.11.5 break 文と continue 文........................................................................................................................................... 61

2.12関数................................................................................................................................... 62
2.12.1 最も簡単な関数の定義............................................................................................................................................ 63
2.12.2 引数を使用する.......................................................................................................................................................... 65
2.12.3 戻り値を使用する..................................................................................................................................................... 67

2.13

グローバル変数とローカル変数....................................................................................... 69
2.13.1 どの変数がグローバルで、ローカルか？....................................................................................................... 70
2.13.2 振る舞いの違い.......................................................................................................................................................... 71

2.142.15

オブジェクト.................................................................................................................... 72

システム関数とシステム変数.......................................................................................... 75
2.15.1 draw 関数...................................................................................................................................................................... 76
2.15.2 システム変数............................................................................................................................................................... 77
2.15.3 setup 関数..................................................................................................................................................................... 78
2.15.4 最初から入力されているプログラム................................................................................................................ 79
2.15.5 その他のシステム関数とシステム変数........................................................................................................... 79

2.16

間違いの見つけ方............................................................................................................. 80
2.16.1 エラーメッセージ..................................................................................................................................................... 80
2.16.2 print を使った方法................................................................................................................................................... 84

2.17
2.18vip5.js のプログラムで注意する点................................................................................... 86

まとめ................................................................................................................................ 87

目 次

第 3 章 2 次元グラフィックスを扱う……89
3.1

座標系................................................................................................................................ 90

3.3

図形を描画する................................................................................................................. 94

3.2

描画領域............................................................................................................................ 91
3.3.1 描画関数の使用方法.................................................................................................................................................... 95
3.3.2 円弧の描画...................................................................................................................................................................... 96
3.3.3 頂点を指定した描画.................................................................................................................................................... 98

3.4

描画属性..........................................................................................................................100
3.4.1 線の幅と色、塗りつぶしの色.............................................................................................................................. 100
3.4.2 色の指定方法............................................................................................................................................................... 103
3.4.3 長方形と円の描画モード....................................................................................................................................... 106
3.4.4 線の描画モード.......................................................................................................................................................... 107

3.5

文字を描画する...............................................................................................................108
3.5.1 色、サイズ、行間の幅を変更する..................................................................................................................... 109
3.5.2 フォントを設定する................................................................................................................................................. 110

3.6

アニメーション...............................................................................................................111
3.6.1 フレームレートを変更する................................................................................................................................... 113
3.6.2 描画ループを止める、再開する......................................................................................................................... 113

3.7

図形を移動、回転、拡大・縮小する.............................................................................115
3.7.1 平行移動........................................................................................................................................................................ 115
3.7.2 回転................................................................................................................................................................................. 117
3.7.3 拡大・縮小................................................................................................................................................................... 121

3.8

まとめ..............................................................................................................................123

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

マウス操作を扱う...........................................................................................................125
4.1.1 システム関数、システム変数.............................................................................................................................. 126
4.1.2 マウスドラッグで円を描画する......................................................................................................................... 128
4.1.3 線がつながるように描画する.............................................................................................................................. 128
4.1.4 マウスホイールで円を上下させる..................................................................................................................... 129
4.1.5 マウスカーソルを変更する................................................................................................................................... 130

4.2

キー操作を扱う...............................................................................................................131
4.2.1 システム関数、システム変数.............................................................................................................................. 131
4.2.2 入力したキーを表示する....................................................................................................................................... 132
4.2.3 矢印キーを使用する................................................................................................................................................. 133

4.3

まとめ..............................................................................................................................134vii

第 5 章 スマートフォンを扱う……135
5.1

タッチパネル操作を扱う................................................................................................135
5.1.1 システム関数、システム変数.............................................................................................................................. 136
5.1.2 タッチで円を描画する............................................................................................................................................ 139
5.1.3 画面一杯に表示する................................................................................................................................................. 139
5.1.4 マルチタッチを扱う................................................................................................................................................. 140

5.2

スマートフォンの動きを扱う........................................................................................143
5.2.1 スマートフォンの座標系....................................................................................................................................... 143
5.2.2 システム関数、システム変数.............................................................................................................................. 144
5.2.3 縦向きか横向きかをチェックする..................................................................................................................... 145
5.2.4 ボールを転がす.......................................................................................................................................................... 146
5.2.5 スマートフォンを振る............................................................................................................................................ 148

5.3

まとめ..............................................................................................................................149

第 6 章 UI 部品を扱う……151
6.1

ボタン..............................................................................................................................151

6.3

スライダー......................................................................................................................157

6.2

6.4

6.5

6.6
6.7

6.8

6.9

6.10

入力フィールド...............................................................................................................155

ドロップダウンメニュー................................................................................................159

チェックボックス...........................................................................................................161
ラジオボタン..................................................................................................................163

ファイル選択ボタン.......................................................................................................165

ドラッグ＆ドロップ.......................................................................................................168

無名関数..........................................................................................................................169

まとめ..............................................................................................................................171

第 7 章 画像を扱う……173
7.1

7.2

画像をアップロードする................................................................................................173

画像ファイルを読み込み、表示する.............................................................................176
7.2.1 画像をアニメーションで動かす......................................................................................................................... 180
7.2.2 画像にフィルタをかける....................................................................................................................................... 181

7.3

ピクセルって何？...........................................................................................................184
7.3.1 画像は何からできているか？.............................................................................................................................. 184
7.3.2 ピクセルの色を調べる............................................................................................................................................ 186
7.3.3 コンピュータで色をどう表現するか？........................................................................................................... 187

7.4

viii

ピクセルを取り出し、色を調べる.................................................................................188

目 次

7.4.1 ピクセル値を取り出す............................................................................................................................................ 188
7.4.2 クリックしたピクセルの値を表示する........................................................................................................... 191

7.5

ピクセルの色を変える....................................................................................................192

7.7

画像の色を反転する.......................................................................................................195

7.6

ピクセルの色に応じて色を変える.................................................................................1947.7.1 画像全体の色を反転する....................................................................................................................................... 197
7.7.2 ピクセルの値を直接操作する.............................................................................................................................. 199

7.8

その他の画像の表示方法................................................................................................201
7.8.1 画像をアニメーションで動かす......................................................................................................................... 202
7.8.2 描画領域に描画する................................................................................................................................................. 203

7.9

まとめ..............................................................................................................................204

第 8 章 動画を扱う……205
8.1

動画ファイルの読み込みと再生.....................................................................................206

8.3

動画の色を反転する.......................................................................................................210

8.2

マウスクリックで動画を再生、停止する......................................................................209
8.3.1 filter 関数を用いる.................................................................................................................................................... 211
8.3.2 ピクセルを直接変更する....................................................................................................................................... 212

8.4

8.5

ドラッグ & ドロップでビデオを再生する....................................................................213

カメラの映像を表示する................................................................................................215
8.5.1 ブラウザによるカメラ使用許可の確認........................................................................................................... 215
8.5.2 マウスクリックでカメラを制御する................................................................................................................ 217

8.6

カメラからの映像の色を反転する.................................................................................218
8.6.1 filter 関数を用いる.................................................................................................................................................... 219
8.6.2 ピクセルを直接操作する....................................................................................................................................... 219

8.7

まとめ..............................................................................................................................220

第 9 章 サウンドを扱う……221
9.1

サウンドを読み込み、再生する.....................................................................................221
9.1.1 再生、停止を制御する............................................................................................................................................ 223
9.1.2 再生速度、音量、再生位置などを制御する.................................................................................................. 224
9.1.3 音量を可視化する..................................................................................................................................................... 226
9.1.4 再生モード................................................................................................................................................................... 228

9.2

マイクを扱う..................................................................................................................230
9.2.1 マイクの音量を可視化する................................................................................................................................... 230
9.2.2 音声の録音と保存..................................................................................................................................................... 232

9.3

9.4音の生成..........................................................................................................................235

まとめ..............................................................................................................................237ix

第 10 章 人工知能を扱う……239
10.1

ml5.js でできること......................................................................................................240

10.3

準備.................................................................................................................................242

10.2

10.4

機械学習とモデル...........................................................................................................241

画像分類..........................................................................................................................243
10.4.1 プログラムの処理の流れ.................................................................................................................................... 244
10.4.2 カメラ画像を処理する......................................................................................................................................... 246

10.5

姿勢推定..........................................................................................................................248
10.5.1 プログラムの処理の流れ.................................................................................................................................... 248
10.5.2 推論結果のデータ構造......................................................................................................................................... 250
10.5.3 推定結果を可視化する......................................................................................................................................... 253
10.5.4 カメラ画像を処理する......................................................................................................................................... 255

10.610.7

物体検出..........................................................................................................................256

図形を分類するモデルを作成する.................................................................................258
10.7.1 機械学習するプログラム.................................................................................................................................... 259
10.7.2 作成したモデルを利用する................................................................................................................................ 262
10.7.3 カメラ画像を処理する......................................................................................................................................... 264

10.8

まとめ..............................................................................................................................266

付 録……267
付録 A

カラーモード................................................................................................................267

付録 C

描画属性、座標変換の保存と復元..............................................................................273

付録 B

OpenType フォントを用いる...................................................................................271
C.1 push、pop 関数とサンプルプログラム............................................................................................................... 273
C.2 座標変換を保存する.................................................................................................................................................... 274
C.3 push、pop 関数を多段に使用する........................................................................................................................ 276

付録 D
付録 E

HTML 内の描画領域の表示場所の指定.....................................................................278

Processing から p5.js への書き換え......................................................................280

索  引............................................................................................................................................282

x

第1章

p5.js って何？

第1章

p5.js って何？

p5.js は、「ブラウザ」上で動くアプリケーションやそれを含む Web ページを開発するための新しいプログラミングライブラリです。図 1.1 に、p5.js で作成された Web ページの例を示します。このページは、図形が動き、マウスドラッグで棒が出現し、丸い（https://otoro.net/planks/）
キャラクターの進行を妨げます。文字をクリックすると別のページが表示されます。

付録

図1.1●p5.jsで作成されたWebページ

1

1

p5.js って何？

これまで、このような Web ページは、HTML5 と CSS、JavaScript を組み合わせて作られていました。しかしながら、このようなページを HTML5、CSS、JavaScript を使って開発するのはそれぞれの知識が必要で大変でした。このため、簡易に作成できるようにするさまざまなライブラリが提供されてきました。例えば、Web ページの作成を容易にする jQuery や 2 次元ゲームを簡易に作成できる phina.js、3 次元グラフィックスを簡易に扱う Three.js などです。
p5.js は、それらと同じ JavaScript ライブラリの一種で、これまでの HTML5、CSS、JavaScriptによるプログラミング環境の上に「新しい」層を提供し、それより下の HTML、CSS を隠蔽し、それらの知識がなくても先ほどのような Web ページの作成ができます。

p5.js で作成された Web ページ、Web アプリ
p5.js ライブラリ
HTML5CSSJavaScript

Web ブラウザ（Chrome、Firefox、Edge など）

図1.2●p5.jsとそのプログラムの位置づけ

1.1 p5.js と Processing
p5.js はデザイナやアーティスト向けに開発されたプログラミング言語／環境である Processing（プロセッシング）をベースに開発されています。Processing は、メディアアートやビジュアルデザインの作成などが簡単に行える開発環境です。デザイナやアーティストという普段プログラミングとはなじみが少ない方向けに開発されているため、その扱いやすさから、最近ではプログラミングの入門用の言語としても幅広く使われています。

2

1.2

p5.js が提供する機能

123456
図1.3●Processingのホームページ

7

p5.js は、Processing の「プログラミングになじみが少ない人でもプログラミングができるよう8にする」というスタイルを踏襲しつつ、JavaScript で開発できるようにしたもので、作成したプログラムをブラウザ上で実行、簡単にネットで公開できます。このため、p5.js は今日の Web テク

9ノロジーを背景に Processing 以上の機能拡張がされています。p5.js のカバーする範囲は非常に広く、HTML5 と JavaScript が可能にする機能のほとんどが扱えます。

10

1.2 p5.js が提供する機能
p5.js は、以下のような機能を提供しています。
（1） 2 次元図形の描画（2） テキストの表示や入力（3） ボタンやスライダー、ファイル選択ボタンなどの UI 部品の作成、配置（4） 画像の表示、動画再生や Web カメラからの画像や音声の取り込み（5） 音などの入力、再生、加工（6） 人工知能、音声合成、音声認識、2D ゲーム作成機能、Arduino との連携
付録

これらがどのような機能であるかはサンプルプログラムを動かして見るとわかりやすいでしょう。p5.js のホームページにはたくさんのサンプルプログラムが公開されています。

3

1

p5.js って何？

1.3 サンプルプログラムを実行する
p5.js のサンプルプログラムは、p5.js のホームページからたどっていけます。以下に p5.js のホームページ（https://p5js.org/）を示します。

図1.4●p5.jsのホームページ

ここで、ページの左に並んでいる「Home Editor Download …」という文字列の下のほうにExamples というのがあります。クリックすると以下のようなサンプルプログラムのページが表示されます。

図1.5●サンプルプログラムのページ

4

1.4

プログラムの開発方法

この中から好きなものをクリックしてみてください。例えば、以下は、「Load/Display Image（画1像の読み込みと表示）」という表示のサンプルプログラムをクリックした例です。これは、宇宙飛行士の画像を読み込んで表示するものです。実行結果が上半分に表示され、その下にサンプルプ

2ログラムが表示されています。

345678
図1.6●Load/Display Imageを実行した結果

9他にも興味があるものを実行してみるとどのようなことが可能になるのかわかるでしょう。

10

1.4 プログラムの開発方法
p5.js は、HTML5 と JavaScript をベースにしているため、プログラムを作成するのに特別な開発環境やエディタは必要ありません。テキストエディタとブラウザさえあればプログラムを作成できます。例えば、Windows では「メモ帳」でも大丈夫です。
p5.js ではブラウザ上で動く p5.js 用のエディタ（p5.js Web エディタ）が公開されており、これを使うと必要なものはブラウザだけになります。p5.js でプログラムを作成するには次の 2 つの方法があります。
（1） p5.js が提供する p5.js Web エディタを用いる
付録（2）（1）以外のエディタ（Visual Studio Code、Atom、Emacs など）を用いる
以下では、（1）、（2）の順で説明します。本質的には両方とも同じです。

51

p5.js って何？

1.5 p5.jsWeb エディタを用いる
p5.js Web エディタがどのようなものか見てみましょう。p5.js Web エディタは、Web ページ上で動くエディタであり、インストールの必要がありません。p5.js Web エディタを起動してみましょう。パソコンがネットワークに繋がっていることを確認して、先ほどの p5.js のホームページの左側のメニューの上から 2 つ目に表示されている Editor をクリックするか、https://editor.

p5js.org/ にアクセスしてみてください。p5.js Web エディタを起動すると図 1.7 のような画面が表示されます。これは Processing の開発環境とよく似ており、Processing でプログラム作成したことのある方なら、おなじみでしょう。

図1.7●p5.js Webエディタの画面

この p5.js web エディタは、次のような特徴を持っています。
● JavaScript、html、css の編集支援機能（構文のハイライト、括弧の自動挿入など）● プログラムの作成、保存、アップロード、共有機能● プログラムの実行機能（サーバを介して実行される）● メッセージの表示機能

これらの機能のおかげで、エディタを起動するだけで p5.js のプログラムの作成に必要なファイルが自動的に準備され、実行できる環境が整い、すぐにプログラミングを開始できます。これま

6

1.5

p5.jsWeb エディタを用いるでの HTML と JavaScript、CSS を用いたプログラムの開発環境とは異なり、HTML を意識したり、1HTML と JavaScript のプログラムの間を行ったり来たりする必要がほとんどなく、プログラム作成だけに集中できるようになっています。

2

1.5.1 最初のプログラムを実行してみる

3

p5.js Web エディタを起動すると最初に表示されるプログラムを実行してみましょう。すでに以4下のようなプログラムが入力されています。

51 function setup() {23 }createCanvas(400, 400);

64

75 function draw() {67 }background(220);89

このプログラムはそのまま実行できるものです。左上の横向き三角形▶（実行ボタン）をクリックしてみてください。以下のように右側に灰色の四角形が表示されます。

10

図1.8●プログラムの実行

付録

ここで、6 行目の 220 という数字を 0 に変更して実行してみましょう。今度は黒い四角形が表7

1p5.js って何？

示されます。

図1.9●background(0)に変えて実行した結果

このように、p5.js Web エディタでは左側のプログラムを変更したものを実行することですぐに右側の領域（プレビュー）で確認することができます。
今度は行を追加してみましょう。丸を描画するようにしてみます。6 行目の行末をクリックして、Enter キーを押してください。7 行目が用意されます。そこに以下を入力してください。
ellipse(56, 46, 55, 55);

入力していくと、開き括弧「(」を入力すると自動的に閉じ括弧「)」が入力されます。これは

p5.js Web エディタのプログラム作成支援機能の 1 つです。カーソルはちょうど括弧の間に表示されるので、そのまま、残りの「56, 46, 55, 55」を入力し、行末にセミコロン「;」を入力すればOK です。表示は以下のようになります。

図1.10●新しい行の追加

8

1.5

p5.jsWeb エディタを用いる

ellipse が青文字で表示されていない場合は、入力が間違っている可能性があります。確認して1ください。再度、実行ボタンを押してみます。今度は、丸が描画されます。

2345
図1.11●追加したプログラムの実行結果

6
7

1.5.2 エディタの機能

8

このような p5.js Web エディタの画面は大きく 5 つの部分からできています。

910

2
1345
図1.12●p5.js Webエディタの機能

それぞれの機能は次の通りです。
実行ボタン：プログラム（スケッチ）を実行するためのボタン②

停止ボタン：実行したプログラムを停止するためのボタン

付録

①9

1

p5.js って何？

③

プログラム編集領域：プログラムを入力、編集する④

プレビュー領域：実行ボタンを押した場合に、プログラムの実行結果を表示する⑤

コンソール：プログラムが出力したメッセージやエラーメッセージが表示される

まずは、これくらいがわかっていれば大丈夫です。メニューはその都度必要なものを説明していきます。まず、メニューが英語になっているので日本語にしましょう。メニューで「English」と表示されている部分をクリックし、「日本語」を選ぶと以下のようになります。

図1.13●日本語化された表示

1.5.3 p5.js が提供するサンプルプログラムを実行する
1.3 節ではホームページからサンプルプログラムを実行しましたが、p5.js Web エディタにはサンプルプログラムを呼び出して実行できる機能があります。ファイルメニューをクリックしてみてください。以下のように表示されます。

図1.14●サンプルプログラムへのメニュー10

1.5p5.jsWeb エディタを用いる

ここで、一番下の「サンプルを開く」を選ぶと次のようなサンプル名の一覧が表示されます。

1234567

図1.15●サンプルプログラムの一覧

8

1.3 節で実行した Image: Load and Display を実行してみましょう。左上の検索ボックスに「Image: Lo」くらいまで入力すると候補が 1 つになります。それをクリックすると以下のように9プログラムが表示されます。

10

図1.16●表示されたサンプルプログラム

付録

あとは、実行ボタンをクリックするだけです。先ほどと同じ画像が表示されます。

11

1

p5.js って何？

図1.17●実行されたサンプルプログラム

このように p5.js ではホームページからも、また、後で説明するようにエディタからも簡単にサンプルプログラムを表示することができます。プログラム作成中に、興味を持った機能がどのように作られているかをサンプルプログラムで簡単に調べたりすることができ、プログラム開発がしやすくなっています。

1.5.4 プログラムの入力とエディタの挙動
では、ここでプログラムを入力しながらエディタの挙動を説明しましょう。p5.js の機能については第 2 章以降で説明しますので、ここではサンプル通りに入力してみてください。プログラムの作成は、1.5.1 節でやってみたように、左側のプログラム編集領域 にプログラムを入力していくことで行います。新しく作成する場合は、ファイルメニューから「新規」を選択してください。
最初に見たように、以下のように表示されます。
リスト1.1●最初に表示されるsketch.js
1 function setup() {23 }createCanvas(400, 400);

4

5 function draw() {67 }12background(220);1.5

p5.jsWeb エディタを用いる

先ほどは図形を表示したので今度は文字列を表示してみましょう。6 行目の最後をクリックし1て Enter キーを入力すると 7 行目が用意されますので以下を入力してください。

2

リスト1.2●新しい行の入力…

35 function draw() {678 }background(220);

text("hello", 40, 50);45

ここではポイントがわかりやすいように 1 〜 4 行目までは省略してありますが、みなさんのプ

6ログラムからは削除しないでください。文字が太くなっている箇所は変更部分などをわかりやすくするためで、実際に太字で表示される訳ではありません。

7

リスト 1.2 を打ち込み終ったら実行ボタンをクリックしてプログラムを実行してみると以下のように「hello」という文字列が表示されます。

8910

図1.18●リスト1.2の実行結果

ここでプログラムの入力を間違えた場合にどうなるかを見てみましょう。7 行目を以下のように書き換えてください。最後の 50 がなくなっていることがわかります。
text("hello", 40);

詳しくは第 2 章で説明しますが、text は text("hello", 40, 50); のように 2 つの数字が必要
付録

なのでこれは間違いです。このまま実行してみましょう。今度は、以下のように、プレビュー領域には文字列は表示されず、代わりに、コンソールにメッセージが表示されます。

13

1

p5.js って何？

図1.19●エラーメッセージ

表示されているメッセージは以下で、エラー（間違い）が検出されたことを示します。
p5.js says: text() was expecting at least 3 arguments, but received only 2. (on line

7 in sketch.js [/sketch.js:7:3]). (http://p5js.org/reference/#/p5/text)「text()は少なくとも3つの引数を必要とするが、2つしかない(sketch.jsの7行目)」

残念ながらメッセージはすべて英語です。英文は平易ですが、わかりにくい場合はインターネットの翻訳サイトなどを利用するとよいでしょう（エラーに関しては 2.16.1 節参照）
。ここでは、40 の後に「, 50」を追加すると正常に実行できるようになります。

また、プログラムを入力しているとエディタが行番号を赤く表示することがあります。以下は、7 行目に「h="hello"」と入力したところですが、文の後ろにセミコロン「;」がないので間違いであることを示しています。該当箇所に赤い波線も表示されていることがわかります。

図1.20●赤い行番号の表示と該当箇所の波線

14