高等学校の教科情報の授業で使用しているテキストです。授業でのご使用であればご自由にお使いください。３〜４時間程度のコマ数を想定。 配列・関数・クラスの内容を追加したい。 ２年間使ってきたProcessing自作テキストをp5.js Web Editorに合わせて改定したものです。

1. ー 1 ー
1. プロローグ ～ まず動かそう ～
1-1 Let's Creative Coding! ～p5.js でプログラミングを学ぼう～
プログラミングは、産業分野、研究分野など、さまざまな分野でなくてはならないもの
になっていますが、芸術の世界でも、プログラミングを使うことでその可能性が広がって
きています。
ミュージシャンの舞台やインタラクティブなディジタルアートのイベントなどで、コン
ピュータが作り出した光の芸術を見たことがありませんか？それらの多くは、p5.js や
Processing、openFrameworks といった、視覚的で創造的なプログラミングに適した言
語やツールで作られています。中でも、p5.js の Web Editor は、操作がシンプルで実行
結果が視覚的にわかりやすく、ブラウザ上で手軽に動かすことができるので、プログラミ
ング学習に適しています。
また、IoT（Internet of Things/モノのインターネット）を手軽に実現できるマイコン
の Raspberry Pi（ラズベリーパイ）や Arduino（アールドゥイーノ）などとも親和性が
高く、実際のモノを使ったインスタレーション作品などにも使われています。
左：Perfume のダンスのモーションキャプチャデータを使ったプログラミング作品
引用：http://www.perfume-global.com/
右：Arduino+センサーを使ったインスタレーション作品
引用：https://vimeo.com/204873659
＜このテキストの進め方＞
1. *サンプルコード* そのまま打ち込んで動作確認をします。
→ 前後の解説を読みながら、しくみを理解しましょう。
2. #課題# のプログラム作成に取り組みます。
→ サンプルコードを修正しながら作成していきます。
→ A〜C のついた課題は難易度別です。適宜選択してください（A:易 B:普 C:難）。

2. ー 2 ー
1-2 エディタの説明
https://editor.p5js.org を開きます（「p5js editor」で検索）。
やってみよう 自動的に入っているコードのまま、実行ボタンを押してみよう！
createCanvas(400, 400); 縦 400 横 400 のキャンバス（描画エリア）を作成
background(220); 背景を灰色（グレースケール 220）で描画
1-3 Creative Coding 特有の枠組みについて ～ 初期化と描画 ～
p5.js では、初期設定・描画を行う関数の中括弧内へ処理を記述していきます。ゲーム
やディジタルアート系プログラミングの多くで、同じような枠組みが使われています。
コード記述エリア
実行ボタン
停止ボタン
コンソールウィンドウ
（エラーメッセージ等を表示） 図形描画エリア
function setup(){
}
function draw(){
}
初期設定：中括弧{ }内に記述
※ プログラム実行時に 1 度だけ実行される
※ キャンバスの作成 createCanvas( )など
描画：中括弧{ }内に記述
※ 1 秒間に 60 回実行される
※ 60 回/秒（フレームレート）は変更可能

3. ー 3 ー
1-4 初めてのプログラム
＊サンプルコード＊ background();の行の下に line()の行を追加
1
2
3
4
5
6
7
8
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
line(0,0,200,100);
}
設定{
キャンバスを作成
}
描画{
背景描画（灰色）
線を描く
}
※ すべて半角で書き、文の末尾にセミコロンを書くこと
実行 実行ボタンクリック
関数とは
・line( )のように、何らかの処理を行うように作られたまとまり。
・関数名の後ろの括弧（ ）には、処理に必要な値（引数）を指定する。
1-5 座標系
#課題#
線分を描く
line(始点 X, 始点 Y, 終点 X, 終点 Y)
関数
サンプルコードに１行追加し、右のようなバツマークを描くプ
ログラムを作成し、実行せよ。
X 軸
Y 軸
原点

4. ー 4 ー
＊サンプルコード＊ マウス位置に円を描く（前回コードの line()行を書き換え）
5
6
7
8
・
・
function draw() {
background(220);
ellipse(mouseX, mouseY, 50,50);
}
・
・
描画{
背景描画（灰色）
円を描く（マウス位置）
}
※ mouseX, mouseY は現在のマウスの座標値が入った変数（p5.js 特有の変数）
実行
1-6 エラーメッセージについて
プログラム中にスペルミスや文法ミスがあると、左下の Console（コンソール）ウィン
ドウにエラーメッセージが行番号とともに表示されます。
よくあるエラー：スペルミス / 中括弧{ }の閉じ括弧がない
円を描く
ellipse(中心 X, 中心 Y, 横幅, 縦幅)
関数
※ エラーの行よりも前に原因がある場合
もあるので注意！
参照エラー：mousex が定義されていません（7 行目）
（mouseX を mousex としたスペルミス）

5. ー 5 ー
1-7 コメントについて
プログラムの説明や自分自身の覚えとして、また、他の人が作ったプログラムを修正す
る場合に、なくてはならないのがコメントです。
コードの一部を一時的に削除（コメントアウト）して動作を確認し、必要に応じて元の
状態に戻す、といった場合に利用するのも便利です。
＊サンプルコード＊ 前回コードの背景描画の行をコメントアウト
5
6
7
8
・
・
function draw() {
//background(220);
ellipse(mouseX, mouseY, 50,50);
}
・
・
描画{
//背景描画（灰色）
円を描く（マウス位置）
}
実行
？考えよう？ 1 行コメントアウトする前と後の違いは、なぜ起こったのだろう？
1-8 その他の図形描画関数
#課題#
長方形を描く
rect(左上 X, 左上 Y, 横幅, 縦幅)
三角形を描く
triangle(X1, Y1, X2, Y2, X3, Y3) など
関数
サンプルコードを、マウス位置に長方形を描くプログラムに変更せよ。
コメントアウト
/* と */で文章をはさむ方法 → 数行にまたがるコメントも記述可能
//を文章の前につける方法 → その行の最後（改行）までがコメント

6. ー 6 ー
1-9 色や透明度を変えてみよう
色の指定法いろいろ
色の指定 補足 例
赤成分, 緑成分, 青成分 各成分は 0〜255 fill(42, 90, 37)
赤成分, 緑成分, 青成分, 透明度 0 透明〜255 不透明 fill(42, 90, 37, 50)
グレースケール 0 黒〜255 白 background(50)
グレースケール, 透明度 fill(50, 100)
'#カラーコード' 16 進表記 stroke('#ff7f50')
'#カラーコード'，透明度 fill('#3cb371', 50)
＊サンプルコード＊ 半透明の赤円をマウス位置に描画する
1
2
3
4
5
6
7
8
9
10
function setup() {
createCanvas(400, 400);
background(220);
}
function draw() {
fill(200, 15, 60, 70);
noStroke();
ellipse(mouseX, mouseY, 50,50);
}
設定{
キャンバスを作成
背景描画（灰色）
}
描画{
塗りつぶし色（）
線なし
円を描く（マウス位置）
}
※ 背景描画は、初期設定の中に記述すると、１度だけ行われます
実行
背景色の指定
background(色指定)
塗りつぶしの色指定 塗りつぶしなし
fill(色指定) noFill( )
線の色指定 線なし
stroke(色指定) noStroke( )
関数
グレースケール指定
RGB 指定(赤，緑，青)+透明度

7. ー 7 ー
#課題#
※ 行頭に//をつける
やってみよう
塗りつぶし色指定関数 fill( )の引数に mouseX や mouseY を入れて実行してみよう。
例： fill(mouseX, mouseY, 60, 70);
#課題#
2. 変数を使おう
2-1 変数とは
変数とは、数値や文字列の入れ物。名前（変数名）を付けて使います
同じ値であれば複数の変数に同時に代入することもできます。
ランダムな値（乱数）を発生させて変数に代入し、ランダムに図形を描画するプログラ
ムを作ってみよう。
18
year
year = 18; 変数 year に値 18 を代入
※「＝」は右辺の値を左辺に代入するという意味
等しいという意味で使う場合「＝＝」
サンプルコードで描いた図形や背景の色・透明度を変えて実行せよ。また、「線なし」
の指定 noStroke(); をコメントアウト（※）
し、枠線に色を指定する行を追加せよ。
ランダムな値を発生する
random(終範囲)
random(始範囲, 終範囲)
返り値：乱数
関数
x = y = z = 18;
※ 関数が返す値のことを「返り値」「戻り値」と呼ぶ
サンプルコードを、マウス位置に応じて半径が変化するよう変更せよ。

8. ー 8 ー
＊サンプルコード＊ ランダムな位置にランダムな色の円を描画する
5
6
7
8
9
10
11
12
13
14
15
・
・
function draw() {
x = random(400);
y = random(400);
colorR = random(255);
colorG = random(255);
colorB = random(255);
fill(colorR, colorG, colorB);
ellipse(x, y, 50,50);
}
・
・
描画{
x = 乱数（範囲 0〜480）
y = 乱数（範囲 0〜360）
colorR = 乱数（範囲 0〜255）
colorG = 乱数（範囲 0〜255）
colorB = 乱数（範囲 0〜255）
塗りつぶし色の指定
円を描く（位置 x, y, 横 50, 縦 50）
}
実行
#課題#
描画の更新回数（フレームレート）、つまり、draw(){}が実行される回数は、初期状態
で 60 回/秒となっています。変更したい場合、frameRate()関数を使います。
#課題#
フレームレートを設定する
frameRate(1 秒間の描画回数)
※ setup(){ }内に記述します
関数
サンプルプログラムのフレームレートを変更せよ。
サンプルプログラムを、半径もランダムになるように変更せよ。

9. ー 9 ー
？考えよう？ 2 つの変数に乱数を代入する方法として、下の 2 通りがあるが、実行結
果は同じだろうか？ 実行して確認してみよう。
2-2 システム変数
システム変数とは、システムの値（マウスの位置など）が格納されている変数で、いつ
でも参照できるが、値を代入することはできません。
＊サンプルコード＊ マウス位置に応じて色が変化する垂直な線を描く
5
6
7
8
・
・
function draw() {
stroke(0, mouseX, mouseY);
line(mouseX, 0, mouseX, height);
}
・
・
描画{
線の色
直線を描く
}
実行
#課題#
mouseX, mouseY ・・・現在のマウスの X 座標, Y 座標
pmouseX, pmouseY ・・・直前フレームのマウスの X 座標, Y 座標
width, height ・・・キャンバスの横幅 , 高さ
システム変数
x = random(400);
y = random(400);
x = y = random(400);
サンプルプログラムを、キャンバスの中心からマウス位置までの直線を描くプログラ
ムに変更せよ。
※ ヒント：width/2, height/2

10. ー 10 ー
3. 処理の流れを組み立てよう
3-1 制御構造
3-2 分岐処理（if 文，if-else 文）
3-3 条件式のいろいろ
記号 意味 記述方法 例
＝＝ 等しい if(A == B) A と B が等しい場合 if(mouseX == 0)
!= 等しくない if(A != B) A と B が等しくない場合 if(mouseX != 0)
> 大なり if(A > B) A が B より大きい場合 if(height > 100)
< 小なり if(A < B) A が B より小さい場合 if(width < 100)
>= 以上 if(A >= B) A が B 以上の場合 if(mouseX >= 10)
<= 以下 if(A <= B) A が B 以下の場合 if(mouseY <= 0)
条件
処理 A
順次処理
処理 A
処理 B
条件
処理 A 処理 B
真 偽
分岐処理 繰返し処理
if(条件式 1){
}else if(条件式 2){
}else{
}
条件式 1 が真の場合に実行される
条件式 2 が真の場合に実行される(省略可)
その他の場合に実行される(省略可)
※ 中括弧の中が 1 行のみの場合、中括弧{ }は省略できる

11. ー 11 ー
条件式の組み合わせ
記号 意味 記述方法
&& かつ if(条件式 1 && 条件式 2) 条件式 1 と条件式 2 が共に真の場合
|| または if(条件式 1 || 条件式 2) 条件式 1 または条件式 2 が真の場合
記述例
※ 条件式が複数ある場合の内側の括弧は省略できるが、可読性のためにつけた方がよい
※ 真偽値をとる変数は if(flag)のように記述できる
＊サンプルコード＊ 画面の右半分と左半分で色の異なる円を描く
5
6
7
8
9
10
11
12
・
・
function draw() {
if(mouseX > width/2){
fill('#ff77f2');
}else{
fill('#10f556');
}
ellipse(mouseX, mouseY, 50, 50);
}
・
・
描画{
もしマウス位置が右半分なら{
塗りつぶし色（ピンク）
}それ以外なら{
塗りつぶし色（緑）
}
円を描く（マウス位置）
}
実行
if((mouseX < 0) && (mouseY < height/2))
条件式１ 条件式２
if(flag && (mouseX < width/2))

12. ー 12 ー
＊サンプルコード＊ 分岐の入れ子（右半分の上下で分岐）
5
6
7
8
9
10
11
12
13
14
15
16
・
・
function draw() {
if(mouseX > width/2){
if(mouseY > height/2){
fill('#ff77f2');
}else{
fill('#ff5556');
}
}else{
fill('#10f556');
}
ellipse(mouseX, mouseY, 50, 50);
}
・
・
描画{
もしマウス位置が右半分なら{
もしマウス位置が下半分なら{
塗りつぶし色（ピンク）
}それ以外なら{
塗りつぶし色（赤）
}
}それ以外なら{
塗りつぶし色（緑）
}
円を描く（マウス位置）
}
実行
#課題#
3-4 繰返し処理（for 文）
キャンバスの右上・右下・左上・左下で図形の色や形を変えるプログラムを作成し、
実行せよ（サンプルプログラムの左半分も上下に分ける）
for(初期化; 条件式; 更新){
}
条件式が真の間繰り返される
※ 分岐を入れ子にする方法や、&&を使って組み立てる方法があります

13. ー 13 ー
＊サンプルコード＊ 9 回繰返し円を描く
5
6
7
8
9
10
・
・
function draw() {
for(i=0; i<9; ++i){
fill(mouseX,mouseY, 0);
ellipse(50*i, 200, 30, 30);
}
}
・
・
描画{
9 回繰返す{
塗りつぶし色
円を描く（座標をｉで指定）
}
}
実行
繰返しの for 文を入れ子にすることで、多元的に繰返しを行うことができます。
＊サンプルコード＊ 縦横 9 回繰返し円を描く（前のコードに繰返しの入れ子を追加）
5
6
7
8
9
10
11
12
・
・
function draw() {
for(i=0; i<9; ++i){
for(j=0; j<9; ++j){
fill(mouseX,mouseY, 0);
ellipse(50*i, 50*j, 30, 30);
}
}
}
・
・
描画{
9 回繰返す{
9 回繰返す{
塗りつぶし色
円を描く（ｉ,j で位置指定）
}
}
}
実行 → 前回のサンプルコードの実行結果の右側の図参照

14. ー 14 ー
3-5 イベントドリブンについて
インタラクティブなプログラムに必須の「マウスがクリックされたら○○する」のよう
に、ユーザの動作がトリガーとなって実行されるしくみをイベントドリブンと呼びます。
＊サンプルコード＊ マウスがクリックされたら塗りつぶし色を変更
5
6
7
8
9
10
11
・
・
function draw() {
rect(25, 25, 150, 150);
}
function mouseClicked() {
fill(random(255), random(255), 0);
}
・
・
描画{
正方形を描く
}
マウスがクリックされたら{
塗りつぶし色を設定（ランダム）
}
実行
マウスがクリックされたときに中括弧内の処理を実行
function mouseClicked(){
}
※ setup(){ }や draw(){ }の外側に記述します
関数
マウス関係
mouseClicked(){ }, mouseDragged(){ }, doubleClicked(){ }
キーボード関係
keyTyped(){ }, keyPressed(){ }
スマートフォン関係/画面タッチ関係
deviceMoved(){ }, deviceShaken(){ }, touchMoved(){ }
関数

15. ー 15 ー
4. もっと！p5.js！
4-1 y=sinθ のグラフを描いてみよう
＊サンプルコード＊ 正弦曲線を描く
5
6
7
8
9
10
11
・
・
function draw() {
translate(0, 200);
scale(20);
for(i=0; i<4*TWO_PI; i=i+PI/10){
ellipse(i, 2*sin(i), 0.1, 0.1);
}
}
・
・
描画{
表示位置を Y 軸方向へずらす
表示倍率 (20 倍）
4*2π まで繰り返し{
円を描く
}
}
実行
#課題#
正弦曲線の周期や振幅を変えてみよう。余弦曲線に変更してみよう。
正弦 余弦 正接
sin(角度) cos(角度) tan(角度)
角度のモード
angleMode(モード) モード：DEGREES または RADIANS（初期値）
システム定数
PI：3.1415・・・ TWO_PI：2*3.1415・・・
最大値/最小値
max(数 1, 数 2, ・・・)または max（配列）/ min()
関数

16. ー 16 ー
4-2 3 次元の図形を描いてみよう
＊サンプルコード＊ 3D のドーナツを描く
1
2
3
4
5
6
7
8
9
function setup() {
createCanvas(400, 400, WEBGL);
}
function draw() {
background(220);
rotateY(frameCount * 0.01);
torus(80, 40);
}
設定{
3D のキャンバスを作成
}
描画{
背景描画（灰色）
Y 軸の周りに回転
円環を描く
}
実行
#課題#
円環面を描く torus(外径, 内径)
直方体を描く box(x 幅, y 幅, z 幅）
球を描く sphere(半径)
軸の周りに回転する
rotateX(角度), rotateY(角度), rotateX(角度)
関数
X 軸原点
Y 軸
3D の直方体を描き、マウスで回転するプログラムを作成せよ。
描画フレーム数 frameCount システム変数
※ 3D の描画を行うには、createCanvas()の引数に WEBGL を指定します
※ 奥行きが Z 軸
ヒント：rotateX(mouseY * 0.01); rotateY(mouseX * 0.01);

17. ー 17 ー
4-3 ボタンやスライダを使ってみよう
＊サンプルコード＊ スライダで円の半径や色を変える
1
2
3
4
5
6
7
8
9
10
11
12
let slider;
function setup() {
createCanvas(400,400);
slider = createSlider(0, 255, 100);
slider.position(50, 50);
slider.style('width', '120px');
}
function draw() {
val = slider.value();
fill(val, 0, 255);
ellipse(200, 200, val, val);
}
変数：スライダ
設定{
キャンバスを作成
スライダを作成
スライダの位置
スライダのスタイル
}
描画{
変数 val ← スライダの値
塗りつぶし色
円を描く
}
実行
4-4 ビデオキャプチャを使ってみよう
＊サンプルコード＊ ビデオキャプチャを取り込み、フィルタをかける
1
2
3
4
5
6
7
8
9
10
11
12
let capture;
function setup() {
createCanvas(390, 240);
capture = createCapture(VIDEO);
capture.size(320, 240);
capture.hide();
}
function draw() {
image(capture, 0, 0, 320, 240);
filter(POSTERIZE, 3);
}
変数：キャプチャ
設定{
キャンバスを作成
キャプチャを作成
キャプチャサイズ
キャプチャ非表示
}
描画{
キャプチャ画像を表示
フィルター
}