授業で使いやすいように、小さなサンプルコード＋課題で構成されています。

1. ー 1 ー
1. プロローグ ～ まず動かそう ～
1-1 Let's Creative Coding! ～Processing でプログラミングを学ぼう～
プログラミングは、産業分野、研究分野など、さまざまな分野でなくてはならないもの
になっていますが、芸術の世界でも、プログラミングを使うことでその可能性が広がって
きています。
ミュージシャンの舞台やインタラクティブなディジタルアートのイベントなどで、コン
ピュータが作り出した光の芸術を見たことがありませんか？それらの多くは、
Processing や openFrameworks といった、視覚的で創造的なプログラミングに適した
枠組み（フレームワーク）で作られています。中でも、Processing は、操作がシンプル
で実行結果が視覚的にわかりやすく、プログラミング学習に適しています。
～ ♪Coffee Break♪ ～
下に引用した Perfume のプロジェクト公式サイトでは、Processing で作られた
サンプルコードやモーションキャプチャデータ（ダンスをする 3 人の身体の動きを
記録したデータ）が公開されており、ダウンロードして利用することができます。
引用：http://www.perfume-global.com/

2. ー 2 ー
1-2 画面の説明
1-3 初めてのプログラム
＊コード＊ コード記述エリアに次のコードを書く 実行 実行ボタンクリック
関数とは
・line( )のように、何らかの処理を行うように作られたまとまり。
・関数名の後ろの括弧（ ）には、処理に必要な値（引数）を指定する。
・関数には返り値（戻り値）があり、関数内で算出された値などが返される。
？考えよう？ (0, 0)はどこ？ x 軸と y 軸の向きは？
line(0,0,80,40);
エラーメッセージ
コード記述エリア
実行ボタン・停止ボタン
ファイル名
キャンバスに
実行結果が
表示される
線分を描く
line(始点 X, 始点 Y, 終点 X, 終点 Y)
関数
※ すべて半角で書く
※ 文の末尾にセミコロン

3. ー 3 ー
1-4 座標系
#課題#
1-5 Processing 特有の枠組みについて ～ 初期化と描画 ～
設定・初期化・描画の中括弧｛ ｝の中に、処理を記述していきます。ゲームやその他
ディジタルアート系プログラミングの多くで、似たような枠組みが使われています。
＊コード＊ マウス位置に円を描く
1
2
3
4
5
6
void settings(){
size(480, 360);
}
void draw(){
ellipse(mouseX, mouseY, 50,50);
}
設定{
キャンバスサイズ
}
描画{
円を描く（マウス位置）
}
※ size(横幅, 高さ)は、キャンバスサイズを指定する関数
※ mouseX, mouseY は現在のマウスの座標値が入った変数（Processing 特有の変数）
右のようなバツマークを描くプログラムを作成し、実
行せよ（サイズ・位置・個数は自由）。
void settings(){
}
void setup(){
}
void draw(){
}
設定（なければ省略）
※ キャンバスサイズの指定 size( )など
初期化（なければ省略）
※ 最初に一度だけ実行される処理を記述
※ 1 秒間に 60 回実行される
※ 60 回/秒（フレームレート）は変更可能
描画
X 軸
Y 軸
原点

4. ー 4 ー
実行 実行ボタンをクリック
？考えよう？ 描画位置の座標（mouseX, mouseY）を（mouseX+50, mouseY+50）
に変えるとどうなるだろう？また、X 座標と Y 座標を入れ替えて（mouseY, mouseX）
としたらどうなるだろう？予想をたてたら、実際に試してみよう。
？考えみよう？ 円の横幅や縦幅の値を mouseX や mouseY に変えるとどうなるだろ
う？予想をたてたら、実際に試してみよう。
～ ♪Coffee Break♪ インデントについて ～
左端から、最初の文字までの空白部分の長さをインデントと言います。多くのプロ
グラミング言語では、インデントがなくても実行結果に影響はありません。更には、
改行もなくてもよいのです。
しかし、インデントや改行なしでは、コードが読みづらく、修正もしにくいので、
慣例通りの適切なインデントをつけるべきです。Processing 含め多くのエディタ（プ
ログラム記述ツール）では、自動的にインデントをつけてくれます。
void settings(){
size(480, 360);
}
void draw(){
ellipse(mouseX, mouseY, 50,50);
}
void setup(){size(480,480);}void draw(){ellipse(mouseX, mouseY, 50,50);}
同じコード

5. ー 5 ー
1-6 いろいろな描画関数
（ ）の中の引数に、位置やサイズを渡します。
#課題 A#
#課題 B#
1-7 色や透明度を変えてみよう
描画前に色を指定する関数を呼び出します。
円を描く
ellipse(中心 X, 中心 Y, 横幅, 縦幅)
長方形を描く
rect(左上 X, 左上 Y, 横幅, 縦幅)
四角形を描く
quad(X1, Y1, X2, Y2, X3, Y3, X4, Y4)
三角形を描く
triangle(X1, Y1, X2, Y2, X3, Y3)
点を描く
point(X1, Y1)
扇形を描く
arc(中心 X, 中心 Y, 横幅, 縦幅, 開始角, 終了角)
→ 角度はラジアンで記述（PI/4 など）
関数
塗りつぶしの色指定
fill(色指定)
線の色指定
stroke(色指定)
背景色の指定
background(色指定)
塗りつぶしなしの指定
noFill( )
線なしの指定
noStroke( )
関数
マウス位置に一辺 30 の正方形を描画するプログラムを作成し、実行せよ。
マウス位置に 3 辺が 30，40，50 の直角三角形を描画するプログラムを作成し、実行
せよ。

6. ー 6 ー
色の指定法いろいろ
色の指定 補足 例
赤成分, 緑成分, 青成分 各成分は 0～255 fill(42, 90, 37)
赤成分, 緑成分, 青成分, 透明度 fill(42, 90, 37, 50)
グレースケール 0 黒～255 白 background(50)
グレースケール, 透明度 fill(50, 100)
#カラーコード 16 進表記 stroke(#ff7f50)
#カラーコード，透明度 0 透明～255 不透明 fill(#3cb371, 50)
＊コード＊ コード記述エリアに次のコードを書く
1
2
3
4
5
6
7
8
9
10
11
void settings(){
size(480, 360);
}
void setup(){
background(255);
noStroke();
}
void draw(){
fill(200, 15, 60, 70);
ellipse(mouseX, mouseY, 30, 30);
}
設定{
キャンバスサイズ
}
初期化{
背景色（白）
線なし
}
描画{
塗りつぶし色（）
円を描く（指定座標）
}
実行 実行ボタンをクリック
#課題 A#
前のコードで背景色を指定している行 background(255);を、draw( ); の中括弧
{ } 内の先頭（fill の前の行）に移動して実行せよ。
グレースケール指定
RGB 指定(赤，緑，青)+透明度

7. ー 7 ー
？考えよう？ 背景色を指定する行の記述場所を変えただけで、実行結果が変わったの
はなぜ？
#課題 B#
？考えよう？ この課題で、塗りつぶしの RGB の値にマウス座標を使ったが、mouseX
をそのまま使わず mouseX/2 とし、またキャンバスサイズは 510×510 とした。これに
は共通の理由があるが何だろう？
～ ♪Coffee Break♪ コメントについて ～
プログラムの中に、実行に関係のない覚え書きや説明を入れたい場合には、コメン
トを使います。コメントには 2 通りの書き方があります。/* と */で文章をはさむ
方法と、文章の前に//を付ける方法です。//の場合、//の直後からその行の最後（改
行）までがコメントとみなされます。
コードの一部を一時的に削除（コメントアウト）して動作を確認し、必要に応じて
元の状態に戻す、といった場合に利用するのも便利です。
前のコードの fill(200, 15, 60, 70); を、
fill(mouseX/2, mouseY/2, 60, 70); として実行せよ。
マウス位置によって色が変わる
/* 課題：円の描画 */
void settings(){
size(480, 480); //キャンバスサイズ
}
void draw(){
background(255); //背景色
// noStroke();
fill(#dc143c, 30); //塗りつぶし色
ellipse(mouseX, mouseY, 50, 50); //円描画
}
コメントアウト

8. ー 8 ー
2. 変数を使おう
2-1 変数とは
・数値や文字の入れ物。名前を付けて使う
・整数/小数/文字/文字列などの種類がわかるよう宣言してから使う
変数の型の種類
タイプ 格納できる値 格納できる値の例
int 整数 1, 6, 100, 0, -4, ・・・
float 実数 0.2, 1.03, -2.3, ・・・
boolean 真偽値 true, false （2 種類のみ）
char 文字（1 文字） 'A', 'B', 'a', ・・・
（シングルクォーテーションでくくる）
String 文字列 "ABC", "Suzuki", ・・・
（ダブルクォーテーションでくくる）
※型はその他にもあります
変数の宣言と代入は、別々に行うことも、同時に行うこともできます。
同じ型であれば複数の変数を一度に宣言できます。また、同じ値であれば複数の変数に
同時に代入することもできます。
18
year
int year;
year = 18;
宣言文：整数型・変数名 year
代入文：変数 year に値 18 を代入
※「＝」は右辺の値を左辺に代入するという意味
等しいという意味で使う場合「＝＝」
int age;
age = 18;
int age = 18;
同じ
※ 変数 age を宣言し、18 を age に代入
int x, y, z;
x = y = z = 18;

9. ー 9 ー
ランダムな値（乱数）を発生させて変数に代入し、ランダムに図形を描画するプログラ
ムを作ってみよう。
＊コード＊ コード記述エリアに次のコードを書く
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
void settings(){
size(1000, 800);
}
void setup(){
background(0);
}
void draw(){
float x = random(0, 480);
float y = random(0, 360);
float r = random(0, 255);
float g = random(0, 255);
float b = random(0, 255);
fill(r, g, b);
ellipse(x, y, 50,50);
}
設定{
キャンバスサイズ
}
初期化{
背景色（黒）
}
描画{
小数 x = 乱数（範囲 0～480）
小数 y = 乱数（範囲 0～360）
小数 r = 乱数（範囲 0～255）
小数 g = 乱数（範囲 0～255）
小数 b = 乱数（範囲 0～255）
塗りつぶし色（r, g, b）
円を描く（位置 x, y, 横 50, 縦 50）
}
実行 実行ボタンをクリック
ランダムな値を発生する
random(始範囲, 終範囲)
返り値：乱数（始範囲から終範囲までのランダムな値）
float 型
関数
※関数が返す値のことを「返り値」「戻り値」と呼ぶ

10. ー 10 ー
描画の速さを変更したい場合、フレームレート（1 秒間の描画回数）を変更します。指
定しない状態では 60 回/秒になっています。
#課題 A#
#課題 B#
？考えよう？ 2 つの変数に乱数を代入する方法として、下の 2 通りがあるが、実行結
果は同じだろうか？
上のプログラムを、半径が 10～100 の間でランダムに変化する円を描くよう変更し、
実行せよ（フレームレート 5）。
フレームレートを設定する
frameRate(1 秒間の描画回数)
※ setup(){ }内に記述します
関数
上のプログラムを、フレームレート 1 で 1 辺 50 の正方形を描くように変更し、実行
せよ。
float x, y;
x = random(0, 10);
y = random(0, 10);
float x, y;
x = y = random(0, 10);

11. ー 11 ー
2-2 Processing 変数
・システムの値（マウスの位置など）が格納されている Processing 独自の変数。
・いつでも参照できるが、値を代入することはできない。
・型宣言は不要。
＊コード＊ マウス位置に応じてキャンバスの上端から下端まで垂直な線を描く
1
2
3
4
5
6
7
void settings(){
size(480, 360);
}
void draw(){
stroke(0, mouseX, mouseY);
line(mouseX, 0, mouseX, height);
}
設定{
キャンバスサイズ
}
描画{
線の色
直線を描く
}
実行 実行ボタンをクリック
#課題 A#
mouseX ・・・現在のマウスの X 座標
mouseY ・・・現在のマウスの Y 座標
pmouseX ・・・直前フレームのマウスの X 座標
pmouseY ・・・直前フレームのマウスの Y 座標
width ・・・キャンバスの横幅
height ・・・キャンバスの高さ
mousePressed ・・・マウスが押されたかどうか（true/false）
keyPressed ・・・キーボードが押されたかどうか（true/false）
Processing 変数
上のプログラムを、マウス位置に応じて水平な直線を描くプログラムに変更し、実
行せよ。

12. ー 12 ー
マウスの速さに応じて半径が変化する円を描くプログラムを作ってみよう。現在のマウ
ス位置と直前フレームのマウス位置との距離が、1 フレームあたりの速さとなります。
＊コード＊ マウスの速さに応じて半径が変化する円を描く
1
2
3
4
5
6
7
void settings(){
size(480, 360);
}
void draw(){
float d = dist(mouseX, mouseY, pmouseX, pmouseY);
fill(mouseX, mouseY, 0);
ellipse(mouseX, mouseY, d, d);
}
設定{
キャンバスサイズ
}
描画{
変数 d = 距離
塗りつぶし色
円を描く
}
実行 実行ボタンをクリック
#課題 B#
上のプログラムで、円の塗りつぶし色を灰色とし、マウスを早く動かすと白、ゆっ
くり動かすと黒に近づくように変更し、実行せよ。
2 点間の距離を求める
dist(X 座標 1, Y 座標 1, X 座標 2, Y 座標 2)
返り値：2 点間の距離。float 型。
関数
＜灰色について＞ 色の指定で fill(30)のように引数を 1 つだけにするか、fill(30, 30, 30)の
ように R, G, B の値をすべて同じにすることで灰色、つまりグレースケール表示となります。

13. ー 13 ー
3. 処理の流れを組み立てよう
3-1 制御構造
3-2 分岐処理（if 文，if-else 文）
＊コード＊ マウスが押されたら正方形を描く
1
2
3
4
5
6
7
8
9
10
void settings(){
size(480, 360);
}
void draw(){
stroke(#ff0000);
if(mousePressed==true){
fill(#ffa500);
rect(mouseX, mouseY, 30, 30);
}
}
設定{
キャンバスサイズ
}
描画{
線色（赤）
もしマウスが押されたら{
塗りつぶし色（オレンジ）
正方形を描く（マウス位置）
}
}
条件
処理 A
順次処理
処理 A
処理 B
条件
処理 A 処理 B
真 偽
分岐処理 繰返し処理
if(条件式 1){
}else if(条件式 2){
}else{
}
条件式 1 が真の場合に実行される
条件式 2 が真の場合に実行される(省略可)
その他の場合に実行される(省略可)
※ 中括弧の中が 1 行のみの場合、中括弧{ }は省略できる

14. ー 14 ー
実行 実行ボタンをクリック
＊コード＊ マウスが押されていないときの処理を追加
1
2
3
4
5
6
7
8
9
10
11
12
13
void settings(){
size(480, 360);
}
void draw(){
stroke(#ff0000);
if(mousePressed==true){
fill(#ffa500);
rect(mouseX, mouseY, 30, 30);
}else{
fill(#ff77f2, 80);
ellipse(mouseX, mouseY, 20, 20);
}
}
設定{
キャンバスサイズ
}
描画{
線色（赤）
もしマウスが押されたら{
塗りつぶし色（オレンジ）
正方形を描く（マウス位置）
}それ以外なら{
塗りつぶし色（ピンク, 半透明）
円を描く（マウス位置）
}
}
実行 実行ボタンをクリック
#課題 B#
マウス位置がキャンバスの上半分か下半分かで色や形を変えるプログラムを作成
し、実行せよ

15. ー 15 ー
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)
Processing 変数 mousePressed のように、値が真偽値（true/false）となるものは、以
下のような記述をすることもできる。
3-4 条件式の組み合わせ
記号 意味 記述方法
&& かつ if(条件式 1 && 条件式 2) 条件式 1 と条件式 2 が共に真の場合
|| または if(条件式 1 || 条件式 2) 条件式 1 または条件式 2 が真の場合
記述例
※複数条件の場合の各条件式を、括弧でくくらない記述もできる。
if((mousePressed == true) && (mouseX < width/2))
条件式１ 条件式２
if(mousePressed==true) if(mousePressed)
if(mousePressed==false) if(!mousePressed)
同じ
if(mousePressed && (mouseX < width/2))

16. ー 16 ー
＊コード＊ キャンバスの左上、右上、左下、右下で色を変えてマウス位置に円を描く
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
void settings(){
size(480, 360);
}
void draw(){
if((mouseX < width/2)&&(mouseY < height/2)){
fill(#ff77f2);
}else if((mouseX > width/2)&&(mouseY < height/2)){
fill(#10f556);
}else if((mouseX < width/2)&&(mouseY > height/2)){
fill(#ff5556);
}else{
fill(#10f5e6);
}
ellipse(mouseX, mouseY, 20, 20);
}
設定{
キャンバスサイズ
}
描画{
もしマウスが左上{
塗りつぶし色
}もしマウスが右上{
塗りつぶし色
}もしマウスが左下{
塗りつぶし色
}それ以外なら{
塗りつぶし色
}
円描画
}
実行 実行ボタンをクリック

17. ー 17 ー
3-5 繰返し処理（for 文）
＊コード＊ 10 回繰返し円を描く
1
2
3
4
5
6
7
8
9
10
11
12
void settings(){
size(510, 510);
}
void setup(){
noStroke();
}
void draw(){
for(int i=0; i<10; ++i){
fill(mouseX/2,mouseY/2, 0);
ellipse(55*i, 200, 30, 30);
}
}
設定{
キャンバスサイズ
}
初期化{
線なし
}
描画{
10 回繰返す{
塗りつぶし色
円を描く（座標をｉで指定）
}
}
実行 実行ボタンをクリック
for(初期化; 条件式; 更新){
}
条件式が真の間繰り返される

18. ー 18 ー
繰返しの for 文を入れ子にすることで、多元的に繰返しを行うことができます。
＊コード＊ 縦横 10 回繰返し円を描く（前のコードに繰返しの入れ子を追加）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
void settings(){
size(510, 510);
}
void setup(){
noStroke();
}
void draw(){
for(int i=0; i<10; ++i){
for(int j=0; j<10; ++j){
fill(mouseX/2,mouseY/2, 0);
ellipse(55*i, 55*j, 30, 30);
}
}
}
設定{
キャンバスサイズ
}
初期化{
線なし
}
描画{
10 回繰返す(i){
10 回繰返す(j){
塗りつぶし色
円を描く（ｉ, j で位置指定）
}
}
}
実行 実行ボタンをクリック