🚀Processingで始めるプログラミングの基礎：実践で学ぶコードの世界

はじめに

プログラミングは、まるで楽器の演奏やスポーツの練習と同じです。演奏理論の本を読んだだけではギターは弾けるようになりませんし、サッカーの試合で活躍するためには月1回の練習では足りません。同じように、プログラミングも授業を聞いているだけでは身につきません。実際に自分で考えて問題を解く経験を積むことが不可欠です。

この記事では、プログラミング言語「Processing」を使って、プログラミングの基礎を実践的に学べるように、多くの具体例を交えながら解説します。コードをコピー＆ペーストして実際に動かし、値を変更して試すことで、深い理解へとつなげることを期待しています。

Processingは、Javaをベースに作られたオープンソースのプログラミング言語で、描画やアニメーションを容易に実現できるため、プログラミング入門に最適です。macOS、Windows、Linuxといった主要なOSで動作します。

1. プログラムの基本：文字の表示

まずは、最も基本的な「文字の表示」から始めましょう。Processingには、コンソールにメッセージを出力するためのprintln()とprint()という関数があります。

println()とprint()

• println(what);: whatの内容を表示し、改行を行います。
• print(what);: whatの内容を表示しますが、改行は行いません。

whatが文字列の場合は、ダブルクォーテーション（"）で囲む必要があります。

// 例1-1: println()の基本
println("Hello, Processing!");
// 出力: Hello, Processing!

// 例1-2: print()とprintln()の組み合わせ
print("Hello");
print(" ");
println("World!");
println("This is a new line.");
// 出力:
// Hello World!
// This is a new line.

プログラムの実行順序

プログラムは、原則として上から下へ順番に実行されます。コンピューターが「気を利かせて」人が望むような順番で実行してくれることはありません。

// 例1-3: 実行順序の確認
println("Good night");
println("Good bye");
println("Hello");
// 出力:
// Good night
// Good bye
// Hello

コードを記述する際は、処理をどのような順番で実行したいかをきちんと考える必要があります。

2. データの一時保管：変数

プログラムでは、数値や文字列などのデータを一時的に保管しておく場所が必要です。それが「変数」です。

変数の必要性

なぜ変数が必要なのでしょうか？例えば、複数のリンゴやミカンの価格を計算するプログラムを考えてみましょう。

// 例2-1: 変数を使わない計算 (問題点: 分かりにくい、変更が困難)
println(100 * 5); // リンゴ5個
println(100 * 5 + 80 * 10); // リンゴ5個、ミカン10個
println(100 * 80 + 80 * 100); // リンゴ80個、ミカン100個

このコードでは、100がリンゴの価格、80がミカンの価格だと推測できますが、ぱっと見て何をしているか分かりにくいです。もしリンゴやミカンの価格が変わったら、プログラム中のすべての数値を手動で変更しなければならず、ミスも起こりやすくなります。

そこで、変数を使います。変数には「名札」のように名前を付け、データを関連付けます。

// 例2-2: 変数を使った計算 (可読性、変更容易性が向上)
int applePrice = 100; // リンゴの価格
int orangePrice = 80; // ミカンの価格

println(applePrice * 5);
println(applePrice * 5 + orangePrice * 10);
println(applePrice * 80 + orangePrice * 100);
// 出力は例2-1と同じですが、コードの意図が明確になります。

変数の宣言、代入、参照

変数を使うには、以下の3つのステップが必要です:

1. 宣言: 変数の「型」と「名前」を決めます。Processingでは、変数の宣言時にデータの種類（型）を明示する必要があります。
   • int: 整数（例: 1, 0, -27）
   • float: 実数（浮動小数点数）（例: 1.2, 0.0, -27.3）
   • char: 文字（例: 'A', 'b', '#'）
   • String: 文字列（例: "Hello", "HEY"）
   • boolean: 真偽値（trueまたはfalse）
2. 代入: 変数にデータを格納します。代入には代入演算子=を使います。文字列はダブルクォーテーション、文字はシングルクォーテーションで囲みます。宣言と同時に初期値を与えることも可能です。
3. 参照: 変数に格納されたデータを利用します。

// 例2-3: 変数の宣言、代入、参照
// 宣言
int score;
String name;
boolean isStudent;

// 代入 (初期化)
score = 95;
name = "Alice";
isStudent = true;

// 参照
println("名前: " + name);
println("点数: " + score);
println("学生ですか？: " + isStudent);

// 宣言と同時に初期化
float pi = 3.14;
println("円周率: " + pi);

適切な変数名

変数名にはルールと習慣があります。

• lower camel case: 複数の単語からなる変数名は、最初の単語の先頭は小文字、それ以降の単語の先頭は大文字にします（例: greenApplePrice）。
• 内容が分かるように: price1, price2よりもapplePrice, orangePriceのように、何を表すのか明確な名前を付けましょう。
• 短く適切に: applicationをappのように省略することもありますが、これはある程度の知識・経験が必要です。

3. 数値の計算：算術演算子

Processingでは、算術演算子を使って四則演算や剰余演算を行うことができます。

算術演算子一覧

算術演算子	役割
+	加算
-	減算
*	乗算
/	除算
%	剰余演算

注意：整数同士の除算

非常に重要なポイントです！ 整数同士の除算では、商の小数点以下は切り捨てられます。演算対象に1つでも実数（float型）があれば、結果は実数になります。

// 例3-1: 整数同士の除算と実数を含む除算
println(10 / 3);   // 出力: 3 (小数点以下切り捨て)
println(5 / 2);    // 出力: 2 (小数点以下切り捨て)

println(10 / 3.0); // 出力: 3.3333333 (実数を含むため切り捨てなし)
println(5.0 / 2);  // 出力: 2.5 (実数を含むため切り捨てなし)

この挙動は、意図しないバグの原因となることが多いため、計算を行う際には常に「計算過程で値が整数なのか実数なのか」を意識するようにしましょう。

剰余演算

%演算子は、除算の余りを求めます。倍数や約数の判定、周期性のある値の計算などによく利用されます。

// 例3-2: 剰余演算
println(11 % 3);   // 出力: 2 (11を3で割ると商は3、余りは2)
println(5 % 2);    // 出力: 1 (5を2で割ると商は2、余りは1)
println(100 % 30 % 3); // 出力: 1 (100 % 30 = 10, 10 % 3 = 1)

演算子の優先順位

数学と同様に、演算子には計算の優先順位があります。同じ優先順位の場合は、前に書かれている方が先に計算されます。

1. ()で括られた範囲 (最優先)
2. *, /, %
3. +, - (最低優先度)

// 例3-3: 演算子の優先順位
println(4 * 3 / 2 * 3);  // (4 * 3) / 2 * 3 = 12 / 2 * 3 = 6 * 3 = 18
println(4 * 3 / (2 * 3)); // 4 * 3 / 6 = 12 / 6 = 2
println(3 / 2 * 2);      // (3 / 2) * 2 = 1 * 2 = 2 (整数除算の切り捨てに注意)
// 出力:
// 18
// 2
// 2

4. 処理の分岐：条件分岐

プログラムの実行中に、ある条件に応じて処理の流れを変えたい場合があります。これが「条件分岐」です。

真偽値と比較演算子

条件分岐では、ある条件が「成立するか（真 / true）」または「不成立か（偽 / false）」を判定する必要があります。この真偽を表す値が「真偽値」で、Processingではboolean型で扱います。

条件の真偽を判定するためには、「比較演算子」を使います。

記号	説明
==	等しい
!=	等しくない
>	より大きい
<	より小さい
>=	以上
<=	以下

比較演算子の結果はboolean型になります。

// 例4-1: 比較演算子
println(1 == 1); // true
println(1 != 2); // true
println(2 > 1);  // true
println(1 < 2);  // true
println(1 >= 1); // true
println(1 <= 2); // true

println(1 == 2); // false
println(1 != 1); // false
println(2 > 3);  // false
println(1 < 0);  // false
println(1 >= 2); // false
println(1 <= 0); // false

if文

if文は、条件式（test）の結果がtrueであれば、その中にある処理（statements）を実行します。falseであれば何も実行しません。

// 例4-2: if文の基本
int age = 19;

if (age < 20) {
  println("You cannot drink.");
}
// 出力: You cannot drink.

else文

if文にelse文を組み合わせると、条件式の結果がtrueの場合とfalseの場合で、それぞれ異なる処理を実行できます。

// 例4-3: if-else文
int age = 25;

if (age < 20) {
  println("You cannot drink.");
} else {
  println("You can drink.");
}
// 出力: You can drink.

else if文

3つ以上の条件で処理を分岐させたい場合は、else if文を複数使用できます。上から順に条件式が評価され、最初にtrueになったブロックの処理が実行されます。

// 例4-4: else if文
int score = 85;

if (score >= 90) {
  println("Great!");
} else if (score >= 80) { // scoreが90未満で、かつ80以上の場合
  println("Good!");
} else {
  println("Keep practicing.");
}
// 出力: Good!

論理演算子

複数の条件を組み合わせてより複雑な条件を表現するために、「論理演算子」を使います。

• && (AND/論理積): 両方の条件がtrueの場合にtrue。
• || (OR/論理和): どちらか一方または両方の条件がtrueの場合にtrue。
• ! (NOT/否定): 条件がfalseの場合にtrue（条件の真偽を反転させる）。

論理演算子にも優先順位があります。

1. ()で括られた範囲 (最優先)
2. !
3. &&
4. || (最低優先度)

同じ優先順位の場合は、左から順に計算されます。

注意点: &&と||には「短絡評価（ショートサーキット評価）」という性質があります。

• &&: 左側の条件がfalseの場合、右側の条件は評価されません（結果が必ずfalseになるため）。
• ||: 左側の条件がtrueの場合、右側の条件は評価されません（結果が必ずtrueになるため）。

これは、意図しないエラーを防ぐためにも重要です。例えば、配列の範囲チェックと要素へのアクセスを&&で結合する場合、範囲チェックを先に書くべきです。

// 例4-5: 論理演算子と優先順位
int x = 15;
int y = 12;

// AND (&&)
if (x >= 10 && x < 20) {
  println("xは10以上20未満です。"); // true && true -> true
}

// OR (||)
if (y >= 10 || y % 5 == 0) {
  println("yは10以上、または5の倍数です。"); // true || false -> true
}

// NOT (!)
boolean isSunny = false;
if (!isSunny) {
  println("晴れていません。"); // !false -> true
}

// 優先順位の例 (p || q && r) -> p || (q && r)
boolean p = true;
boolean q = false;
boolean r = false;
if (p || q && r) { // true || (false && false) -> true || false -> true
  println("OK");
}
// 出力:
// xは10以上20未満です。
// yは10以上、または5の倍数です。
// 晴れていません。
// OK

入れ子構造のif文

共通の条件がある場合、if文を入れ子構造にするとコードが簡潔になります。内側のブロックには、一段深いインデントを入れるのがルールです。

// 例4-6: 入れ子構造のif文 (送料計算の例)
boolean member = true;
int price = 600;
int count = 15;
int total = price * count; // 合計金額 = 9000

if (member) { // 会員の場合
  if (total < 10000) {
    println("送料: 300円");
  } else {
    println("送料: 無料");
  }
} else { // 非会員の場合
  if (total <= 12000) {
    println("送料: 500円");
  } else {
    println("送料: 200円");
  }
}
// 出力: 送料: 300円

重要: インデントはコードの可読性を保つために非常に重要です。不適切なインデントは減点対象になることがあります。この記事の例では、半角スペース2個のインデントを使用しています。

5. 処理の繰り返し：ループ

同じ処理を何度も繰り返したい場合に使うのが「繰り返し（ループ）」です。Processingには主にwhile文とfor文があります。

while文

while文は、指定した条件式（test）がtrueである限り、その中にある処理（statements）を繰り返し実行します。

// 例5-1: while文の基本
int i = 0;
while (i < 5) { // iが5未満である限り繰り返す
  println(i);
  i++; // iの値を1増やす (これを忘れると無限ループになる)
}
// 出力:
// 0
// 1
// 2
// 3
// 4

無限ループに注意！ while文の条件式が常にtrueになるように記述してしまうと、プログラムが終了しなくなり、「無限ループ」に陥ります。繰り返し処理の中で、条件式に関わる変数を適切に更新する処理を忘れないようにしましょう。

// 例5-2: 無限ループ (意図的に避けるべきコード)
// int i = 0;
// while (i < 5) {
//   println(i);
//   // i++; がないため、iは常に0で、i < 5が常にtrueとなり無限ループ
// }

for文

for文は、初期化処理（init）、条件式（test）、更新処理（update）の3つの要素を1行で記述できる繰り返し処理です。

// 例5-3: for文の基本
for (int i = 0; i < 5; i++) { // iを0で初期化、iが5未満である限り繰り返し、1回ごとにiを1増やす
  println(i);
}
// 出力:
// 0
// 1
// 2
// 3
// 4

for文は、繰り返し回数が事前に分かっている場合に特に適しています。

while文とfor文の使い分け

• for文: 繰り返しの回数が事前に明らかである場合や、カウンタ変数の初期化・更新が明示的な方がミスしにくい場合に適しています。
• while文: 繰り返しの回数が事前に不明な場合や、更新処理が複雑で条件によって異なる場合に書きやすいです。

どちらの文も同じような処理を実現できますが、適切な方を選択することでコードの可読性やメンテナンス性が向上します。

入れ子構造のループ

if文と同様に、ループも入れ子構造にすることができます。例えば、2次元のパターンを描画したり、九九の表を生成したりするのに便利です。

// 例5-4: 入れ子構造のfor文 (九九の表の例)
for (int i = 1; i <= 9; i++) { // 段
  for (int j = 1; j <= 9; j++) { // 数
    int x = i * j;
    if (x < 10) { // 桁を揃えるために1桁の数字の前にスペースを追加
      print(" ");
    }
    print(x + " ");
  }
  println(); // 1段終わったら改行
}
// 出力:
//  1  2  3  4  5  6  7  8  9
//  2  4  6  8 10 12 14 16 18
//  3  6  9 12 15 18 21 24 27
//  4  8 12 16 20 24 28 32 36
//  5 10 15 20 25 30 35 40 45
//  6 12 18 24 30 36 42 48 54
//  7 14 21 28 35 42 49 56 63
//  8 16 24 32 40 48 56 64 72
//  9 18 27 36 45 54 63 72 81

高度な代入演算子とインクリメント/デクリメント演算子

ループ処理で頻繁に利用されるのが、変数への加減乗除を簡潔に記述できる「高度な代入演算子」と、値を1増減させる「インクリメント/デクリメント演算子」です。

記号	説明
+=	左辺に右辺を加算し代入
-=	左辺に右辺を減算し代入
*=	左辺に右辺を乗算し代入
/=	左辺に右辺を除算し代入
++	変数の値を1増やす（後置の場合、文実行後に増える）
--	変数の値を1減らす（後置の場合、文実行後に減る）

// 例5-5: 高度な代入演算子とインクリメント/デクリメント
int a = 10;
a += 5; // a = a + 5; と同じ -> aは15
println("a: " + a);

int b = 20;
b -= 3; // b = b - 3; と同じ -> bは17
println("b: " + b);

int c = 2;
c *= 4; // c = c * 4; と同じ -> cは8
println("c: " + c);

int d = 10;
d /= 2; // d = d / 2; と同じ -> dは5
println("d: " + d);

int x = 5;
println("x++ (後置インクリメント): " + (x++)); // 5が表示され、その後xが6になる
println("xの値: " + x);

int y = 5;
println("++y (前置インクリメント): " + (++y)); // yが6になり、その後6が表示される
println("yの値: " + y);
// 出力:
// a: 15
// b: 17
// c: 8
// d: 5
// x++ (後置インクリメント): 5
// xの値: 6
// ++y (前置インクリメント): 6
// yの値: 6

6. データの集合：配列

これまでの変数では、一つの箱に一つのデータしか格納できませんでした。大量の似たようなデータを扱いたい場合、一つ一つ変数を用意するのは非効率的です。そこで登場するのが「配列」です。

配列は、同じ型の複数のデータを1つの集合として扱うことができるデータ構造です。集合内の各データは、添字（インデックス）と呼ばれる番号で区別します。添字は0から始まります。

配列の宣言と初期化

配列の宣言方法は主に2つあります。

1. 要素数のみを指定して宣言: 各要素はデフォルト値で初期化されます。

   datatype[] array = new datatype[length];
   

   • datatype: int, float, Stringなどの型。
   • length: 配列に格納できるデータの数。

   // 例6-1: 要素数のみを指定して宣言
   int[] scores = new int; // int型の要素5個分の配列
   // scoresの内容: {0, 0, 0, 0, 0} (intのデフォルト値は0)
   scores = 85;
   scores = 92;
   println(scores); // 添字0の要素を参照 -> 出力: 85
   

2. 初期値を指定して宣言: 波括弧{}で囲んで初期値を指定します。

   datatype[] array = {value_1, ..., value_n};
   

   // 例6-2: 初期値を指定して宣言
   String[] fruits = {"Apple", "Banana", "Cherry"};
   // fruitsの内容: {"Apple", "Banana", "Cherry"}
   println(fruits); // 出力: Apple
   println(fruits); // 出力: Cherry
   

配列の要素数（配列長）は、array.lengthで取得できます。

配列の走査

配列の各要素に順番にアクセスする操作を「走査（トラバーサル）」と呼びます。ループを使うと、配列の全要素へのアクセスが容易になります。

// 例6-3: 配列の全要素走査 (順方向)
int[] data = {10, 20, 30, 40, 50};
for (int i = 0; i < data.length; i++) {
  print(data[i] + " ");
}
println(); // 出力: 10 20 30 40 50 

// 例6-4: 配列の全要素走査 (逆方向)
int[] data = {10, 20, 30, 40, 50};
for (int i = data.length - 1; i >= 0; i--) { // 末尾から先頭へ
  print(data[i] + " ");
}
println(); // 出力: 50 40 30 20 10 

特定の範囲や1つおきの要素を走査することも可能です。

// 例6-5: 配列の一部要素走査 (前半 - 中央要素を含む)
int[] data = {10, 20, 30, 40, 50, 60, 70, 80, 90}; // 要素数9 (奇数)
// data.length / 2 は 9 / 2 = 4 (整数除算)
// <= data.length / 2 とすることで中央の要素(data=50)も含む
for (int i = 0; i <= data.length / 2; i++) {
  print(data[i] + " ");
}
println(); // 出力: 10 20 30 40 50 

// 例6-6: 配列の一部要素走査 (1つおき)
String[] messages = {"Nihon", "Japan", "University", "School", "CHS", "Bunri"};
for (int i = 0; i < messages.length; i += 2) { // 2つずつインクリメント
  print(messages[i] + " ");
}
println(); // 出力: Nihon University CHS 

配列要素の操作

配列の要素を入れ替えたり、挿入したりすることもできます。

• 要素の入れ替え: 2つの要素を入れ替えるには、一時的に値を退避させるためのバッファ変数が必要です。

  // 例6-7: 要素の入れ替え
  int[] data = {10, 20, 30, 40, 50};
  int buffer;
  
  // dataとdataを入れ替える
  buffer = data; // data (10) をbufferに退避
  data = data; // dataにdata (20) を代入 -> dataは{20, 20, 30, 40, 50}
  data = buffer; // dataにbuffer (10) を代入 -> dataは{20, 10, 30, 40, 50}
  
  for (int i = 0; i < data.length; i++) {
    print(data[i] + " ");
  }
  println(); // 出力: 20 10 30 40 50 
  

• 要素順の反転: バッファ変数を使った要素の入れ替えを応用すると、配列の要素順を反転させることができます。配列の半分までを走査し、対称位置にある要素同士を入れ替えます。

  // 例6-8: 要素順の反転
  String[] strs = {"to", "have", "you", "before", "Change"};
  String buffer;
  
  for (int i = 0; i < strs.length / 2; i++) { // 配列の半分まで走査
    buffer = strs[i];
    strs[i] = strs[strs.length - 1 - i]; // strs.length - 1 - i で対称位置の添字を計算
    strs[strs.length - 1 - i] = buffer;
  }
  
  for (int i = 0; i < strs.length; i++) {
    print(strs[i] + " ");
  }
  println(); // 出力: Change before you have to 
  

• 要素の挿入: 配列の途中に新しい要素を挿入するには、既存の要素をずらす必要があります。

  // 例6-9: 要素の挿入 (先頭から2番目の位置に挿入し、末尾要素を削除)
  int[] data = {10, 20, 30, 40, 50, 60, 70, 80, 90}; // 要素数9
  int targetPos = 2; // 挿入したい位置 (dataの位置)
  int newData = 1000; // 挿入したい新しいデータ
  
  // 挿入位置より後の要素を1つずつ後ろにずらす
  // data.length - 1 (data=90) から targetPos + 1 (data=40) まで逆順にずらす
  for (int i = data.length - 1; i >= targetPos + 1; i--) {
    data[i] = data[i - 1];
  }
  data[targetPos] = newData; // 指定位置に新しいデータを代入
  
  for (int i = 0; i < data.length; i++) {
    print(data[i] + " ");
  }
  println(); // 出力: 10 20 1000 30 40 50 60 70 80 
             // 元の90が削除される形になる
  

特定データの検索

配列の中から、特定の値を持つデータを探すことを「検索」と呼びます。

• 線形探索: 配列の先頭から順番に、目的のデータと各要素を比較していく最も基本的な方法です。

  // 例6-10: 線形探索 (最初に登場する位置)
  int[] data = {10, 20, 30, 40, 50, 60, 40, 50, 50, 60};
  int target = 40;
  int i = 0;
  
  // 添字が配列範囲内であり、かつ、data[i]がtargetと等しくない限り繰り返す
  while (i < data.length && data[i] != target) {
    i++;
  }
  
  if (i < data.length) { // 見つかった場合
    println(target + "は添字" + i + "にあります。");
  } else { // 見つからなかった場合
    println(target + "は見つかりませんでした。");
  }
  // 出力: 40は添字3にあります。
  

• 特定データの出現回数を数える: for文を使って配列全体を走査し、条件に合う要素が見つかるたびにカウンタを増やします。

  // 例6-11: 特定データの出現回数を数える
  int[] data = {10, 20, 30, 40, 50, 60, 40, 50, 50, 60};
  int target = 50;
  int count = 0;
  
  for (int i = 0; i < data.length; i++) {
    if (data[i] == target) {
      count++;
    }
  }
  println(target + "は" + count + "回出現します。");
  // 出力: 50は3回出現します。
  

7. 描画とアニメーション

Processingの大きな魅力は、簡単なコードで図形を描画したり、アニメーションを実現したりできる点です。

Windowと座標系

• size(w, h);: 描画領域（Window）の幅（w）と高さ（h）をピクセル単位で指定します。
• 座標系: Windowの左上が原点(0, 0)です。x軸は右方向、y軸は下方向が正の方向になります。
• width, height: Processingが自動的にWindowの幅と高さを保持する変数です。

基本図形の描画

• ellipse(x, y, w, h);: 中心座標(x, y)、幅w、高さhの楕円を描画します。wとhを同じにすると円になります。
• rect(x, y, w, h);: 左上頂点座標(x, y)、幅w、高さhの長方形を描画します。wとhを同じにすると正方形になります。
• line(x1, y1, x2, y2);: 2点(x1, y1)と(x2, y2)を結ぶ線分を描画します。
• triangle(x1, y1, x2, y2, x3, y3);: 3点(x1, y1), (x2, y2), (x3, y3)を結ぶ三角形を描画します。

色の指定

• color(r, g, b);: 赤（R）、緑（G）、青（B）の各成分（0〜255）を指定して色を作成します。
• background(color);: Windowの背景色を指定します。
• fill(color);: 図形の内側の塗り色を指定します。
• stroke(color);: 図形の輪郭線の色を指定します。
• noStroke();: 図形の輪郭線を表示しないようにします。

一度指定した色は、新たに指定するまで有効です。

// 例7-1: 基本図形と色の描画
void setup() {
  size(600, 400); // Windowサイズを設定
  noLoop(); // draw()を1回だけ実行する (アニメーションしない場合)
}

void draw() {
  // 背景色を黒に設定
  background(color(0, 0, 0));

  // 緑色の円を描画
  fill(color(0, 255, 0)); // 塗り色を緑に設定
  ellipse(width / 4, height / 2, 100, 100); // Window左半分に円

  // 青色の四角形を描画
  fill(color(0, 0, 255)); // 塗り色を青に設定
  rect(width / 2, height / 4, 100, 100); // Window右上に四角形

  // 輪郭線のある赤い三角形
  stroke(color(255, 0, 0)); // 輪郭線を赤に設定
  strokeWeight(5); // 輪郭線の太さを5に設定
  fill(color(255, 255, 0)); // 塗り色を黄色に設定
  triangle(width * 3 / 4, height * 3 / 4, width * 3 / 4 + 50, height * 3 / 4 - 100, width * 3 / 4 + 100, height * 3 / 4);
}

変数を用いた描画

描画においても変数を用いることは重要です。特に、オブジェクトの位置を管理する際に、基準点を変数で定義すると、全体の移動が容易になります。

// 例7-2: 変数を使った家の描画
int houseX = 200; // 家の基準点X
int houseY = 300; // 家の基準点Y

void setup() {
  size(800, 600);
  noLoop();
}

void draw() {
  background(255, 255, 255); // 白い背景

  // 屋根
  fill(color(200, 50, 50));
  triangle(houseX + 200, houseY - 100, houseX, houseY, houseX + 400, houseY);

  // 壁
  fill(color(150, 75, 0));
  rect(houseX, houseY, 400, 200);

  // 窓
  fill(color(50, 50, 200));
  ellipse(houseX + 50, houseY + 50, 50, 50);
  ellipse(houseX + 150, houseY + 50, 50, 50);

  // ドア
  fill(color(200, 200, 0));
  rect(houseX + 300, houseY + 100, 50, 100);
}

houseXやhouseYの値を変更して実行してみてください。家全体が移動するのを確認できるでしょう。

アニメーションの実現

アニメーションは、複数の静止画を連続して表示することで、描画対象が動いているように見せる技法です。Processingでは、「Activeモード」という特別なモードを使います。

• setup()関数: プログラム実行直後に1回だけ実行されます。Windowの設定や初期化など、一度だけ行う準備処理を記述します。
• draw()関数: setup()の後に、手動で終了するまで永遠に繰り返して実行されます。アニメーションの各フレームごとの描画処理を記述します。

// 例7-3: ボールの移動アニメーション
int ballX;    // ボールの中心x座標
int ballY;    // ボールの中心y座標
int ballD = 50; // ボールの直径
int xStep = 5;  // x方向の移動量
int yStep = 3;  // y方向の移動量

void setup() {
  size(800, 600);
  ballX = width / 2;  // 初期位置をWindow中央に設定
  ballY = height / 2;
}

void draw() {
  background(0); // 背景を黒でクリア (前のフレームを消す)

  // ボールの描画
  ellipse(ballX, ballY, ballD, ballD);

  // ボールの位置を更新
  ballX += xStep;
  ballY += yStep;

  // ボールがWindowの端に到達したら跳ね返る
  // x軸方向の跳ね返り (ボール全体がWindow内に収まるように)
  if (ballX < ballD / 2 || ballX > width - ballD / 2) {
    xStep *= -1; // 移動方向を反転
  }
  // y軸方向の跳ね返り (ボール全体がWindow内に収まるように)
  if (ballY < ballD / 2 || ballY > height - ballD / 2) {
    yStep *= -1; // 移動方向を反転
  }
}

このコードを実行すると、ボールがWindowの端で跳ね返りながら動き続けるアニメーションが実現できます。draw()関数が繰り返し実行されることで、ボールの位置が少しずつ更新され、それが連続した動きに見えるのです。

インタラクティブアニメーション

ユーザーの操作（マウスの動きなど）に応じて動きを変える「インタラクティブアニメーション」も実現できます。

• mouseX, mouseY: マウスポインタの現在のx座標とy座標を保持する変数です。
• dist(x1, y1, x2, y2);: 2点間の距離を計算する関数です。

// 例7-4: マウスポインタと連動する円
void setup() {
  size(600, 400);
}

void draw() {
  background(220); // 薄い灰色で背景をクリア

  float circleX = width / 2;
  float circleY = height / 2;
  float circleDiameter = 100;

  // マウスポインタが円の内部にあるか判定
  // dist()でマウスポインタから円の中心までの距離を計算し、半径と比較
  if (dist(mouseX, mouseY, circleX, circleY) < circleDiameter / 2) {
    fill(255, 0, 0); // 円の内部にあれば赤
  } else {
    fill(0, 0, 255); // なければ青
  }

  ellipse(circleX, circleY, circleDiameter, circleDiameter);
}

このコードを実行し、マウスを円の上に乗せたり外したりしてみてください。円の色が変わるのを確認できるでしょう。

最後に：実践あるのみ

この記事の到達目標は、プログラミング能力と論理的思考能力の習得です。
まずは実践としてコピペ、写経、そしてアレンジを加えてみましょう。