はじめに

この記事は、私が所属する技術系サークルである「いちぴろ・エクスプローラ」内で開催する「Processing＆Arduino勉強会」用の資料です。
ProcessingとArduinoを組み合わせて、簡易的なゲームを作成することを目標とします。この記事を含めて3記事構成の予定です。

1, Processingとは

Processingは、電子アートとビジュアルデザインのための言語、統合開発環境の事です。Arduino(マイコン)と連携させることで、Arduinoの操作やセンサ値の可視化などが実現でき、作れるものの幅が広がります。
ProcessingはJavaを単純化し、グラフィック機能に特化した言語のため、視覚的にフィードバックを得やすく、プログラミングを学ぶ教材として取っつきやすくて勉強しやすいです。現在はProcessing 4がリリースされています。

ProcessingのJavaScript移植版としてProcessing.js(pjs)やp5.jsがあります。前者はProcessing(オリジナル)の書き方で動くように作られたライブラリ、後者はJavaScriptの文法を拡張するようなライブラリです。
Pythonの文法でProcessingのスケッチが書けるProcessing.pyとかもあります。

2, Processingをインストールする

Processingは、Windows,MacOS,Linux,Raspberry Piにインストールできます。

Windowsの場合、セットアップウィザードから、Next→ライセンス契約&Next→「Typcal」をクリック→Installで簡単にインストールできます。他のOSでもたぶん簡単だと思います。

セットアップウィザードの操作の流れ

インストールが終わると、スタートメニューから起動できるようになっているので、「Processing」で検索して起動しましょう！
最近入れたアプリケーションならおすすめに出ているのですぐに起動できます。

3, Processingを使ってみよう！

起動するとこのような画面が立ち上がります。
白背景の部分にプログラムを記述し、▶を押して実行、■を押して停止させることができます。
プログラム実行時に文字列出力をする場合は黒背景の部分（コンソール）を使います。

3.1 コンソール出力してみよう

コンソールに文字列を出すプログラムを実行してみましょう。
Procssingは基本 setup という関数と draw という2つの関数でなり立ちます。setupは1度だけ実行される関数、drawは1秒に60フレームで繰り返し実行されます。

文字列出力にはprint関数とprintln関数があり、文字列出力した後に改行も行う場合はprintlnを使うと便利です。

void setup() {
  println("Hello World!!"); // 改行あり出力
  print("I'm ???\nThank You"); // 改行なし出力
}

void draw() {
}

実行すると、ちゃんと文字列出力されることが分かります。検証時、setup内に書かず、グローバルに書いても動作したので、少し不思議でした。

3.2 図形を表示してみよう

先程プログラムを実行した時、小さなウィンドウが出たはずです。
このウィンドウを使って、図形を描画してみます。
ウィンドウの描画サイズ変更は size関数でできます。lineで線を引き、squareで正方形、ellipseで楕円を書くことができます。

void setup(){
  size(500, 500); // 画面サイズ指定
  line(220, 50, 440, 280); // 線
  square(60, 100, 220); // 正方形
  ellipse(400, 400, 180, 180); // 楕円
}

void draw() {
}

3.3 テキスト表示してみよう

図形を出したウィンドウに文字列を出してみましょう。

テキスト出力にはtext関数を用います。文字サイズはtextSize、色設定はfillでできます。
もしフォントを指定したい場合は、createFont関数でフォントオブジェクトを作成し、それをtextFont関数で設定して適用させられます。

void setup() {
  size(700, 400);
  textSize(100);
  fill(100, 100, 200); // text色指定
  text("HCU", 150, 300); // 表示位置
  PFont font = createFont("Meiryo", 50); // 日本語フォント　メイリオ
  textFont(font);
  text("いちぴろ・エクスプローラ", 10, 100);
}

void draw() {
}

3.4 クリック情報を取得してみよう

Processingでは、マウス情報やキーボード情報を取得し、インタラクティブなアプリを作成することができます。ここではマウスが押されたかの情報を取得してみましょう！
サンプルコードBasics/Structure/Loopを開いて実行すると、画面をクリックしたタイミングで白線が上に向かって動き出し、枠を越えるとまた下から現れて上に上がる。といった動き方をすると思います。

ソースコードを見てみましょう。

/**
 * Loop. 
 * 
 * If noLoop() is run in setup(), the code in draw() 
 * is only run once. In this example, click the mouse 
 * to run the loop() function to cause the draw() the 
 * run continuously. 
 */

float y = 180;
 
// The statements in the setup() function 
// run once when the program begins
void setup() {
  size(640, 360);  // Size should be the first statement
  stroke(255);     // Set stroke color to white
  noLoop();
}

void draw() { 
  background(0);  // Set the background to black
  line(0, y, width, y);  
  y = y - 1; 
  if (y < 0) { 
    y = height; 
  } 
} 

void mousePressed() {
  loop();
}

この中で重要な関数はnoLoop、loop、mousePressedです。もしこの関数が無い場合、クリックに関係なく白線は動き続けます。実はdraw関数の継続的な実行はnoLoop関数の呼び出しで止めることができるのです。
loop関数を呼び出すことで、draw関数は実行再開されます。今回はマウスのクリック動作によって実行再開したいので、マウスのボタン押下を検知する関数mousePressedの中に書きました。これにより、マウスを押すと白線が動き出すという動作が実現されます。

では、このサンプルを使って、一度マウスをクリックしたら動きだし、もう一度押したら停止、さらにもう一度押したら動き出す...といったプログラムに書き換えてみましょう！

想定回答

float y = 180;
int click_count = 0;

void setup() {
  size(640, 360);  // Size should be the first statement
  stroke(255);     // Set stroke color to white
  noLoop();
}

void draw() { 
  background(0);  // Set the background to black
  line(0, y, width, y);  
  y = y - 1; 
  if (y < 0) { 
    y = height; 
  } 
} 

void mousePressed() {
  click_count = click_count + 1;
  if (click_count % 2 == 1) { // 奇数
    loop();
  } else { // 偶数
    noLoop();
  }
}

3.5 マウスの位置情報を取得してみよう

マウスの位置情報は変数mouseXとmouseYに格納されています。これを用いてマウスの位置に円を描くプログラムを書くことができます。

void setup() {
  size(500, 500);
}

void draw() {
  fill(255, 255, random(0, 255));
  circle(mouseX, mouseY, 30);
}

fill関数によって円の色を指定することができますが、今回はランダムに色が変わるようにしました。random(0, 255)によって0から255までの値を乱数で得ることができます。これにより、マウスの位置にランダムで色が変わる円を出現させることができます。

他の色をランダムにしてみるなど、遊んでみてください！！

3.6 クラスで処理をまとめてみよう

ProcessingはJavaベースなので、クラスが存在します。クラスを用いて似た挙動を行うオブジェクトの定義をまとめてみましょう！

クラスは基本的にこのように定義することができます。

class className {
  type1 member1;
  type2 member2;
  ...
  className(type1 var1, type2 var2, ...) {
    member1 = var1;
    member2 = var2;
    ...
  }
  type method1(type var1) {
    ...
  }
}

クラスを定義するイメージとしては、複数のデータによって一つの処理が構成されているような状態に対して、関係するデータと処理を新しいデータ型としてくくりだすようなイメージ？でしょうか

実際に使ってみましょう。今回は、画面左側に異なるサイズの球3つを置き、それぞれの速度に応じて右側に到達するまでをアニメーションするプログラムを書いてみます。
それぞれのボールについて座標と球の大きさとスピードを持ち、一段階進んだ状態を描画する関数を持つ必要があります。それぞれのボールの情報を全てグローバルに置くことも可能ですが、プログラムの規模が大きくなるにつれて管理が困難となります。よって今回はクラスを用いてボール情報の管理を行います。
それぞれのボールについて、クラスはこんな感じで定義できます。

class MovePoint {
  int x, y;
  int speed;
  
  MovePoint(int setX, int setY, int setSpeed) {
    x = setX;
    y = setY;
    speed = setSpeed;
  }
  
  void update() {
    x = x+speed;
    circle(x,y,30);
  }
}

MovePointというクラスを作成しました。このクラスでは球を移動しながら描画するため、球の座標xとyと速度speedをメンバ変数として持ちます。updateメソッドでx軸移動と再描画を行います。
これらのメンバ変数を初期化するためにコンストラクタを定義します。クラス名と同じ名前の関数がコンストラクタで、new コンストラクタ(引数)の形式で呼び出して、クラスをインスタンス化します。

このクラスを用いて、3つの球が左側に配置して右端まで移動するプログラムを作成してください。

想定回答

MovePoint point1;
MovePoint point2;
MovePoint point3;

void setup() {
  size(1000, 500);
  point1 = new MovePoint(0, 50, 5);
  point2 = new MovePoint(30, 150, 4);
  point3 = new MovePoint(50, 300, 3);
}

void draw() {
  point1.update();
  point2.update();
  point3.update();
}

class MovePoint {
  int x, y;
  int speed;
  
  MovePoint(int setX, int setY, int setSpeed) {
    x = setX;
    y = setY;
    speed = setSpeed;
  }
  
  void update() {
    x = x+speed;
    circle(x,y,30);
  }
}

今までの知識や時にリファレンスを参考すると、ある程度のサンプルコードが読めるようになるかと思います。
試しにBasics/Math/Arctangentを実行し、プログラムを読んでみましょう。大枠はすぐにつかめると思います。

3.7 キーボード入力を取得しよう

最後に、キーボードの入力を受け取り動作するプログラムを作成してみましょう。
キーボードの押下は変数keyPressedを参照することで検出できます。trueであれば押下された、falseなら押下されていないことを表します。
押下されている場合、変数keyCodeを参照することでキーコードを得ることができます。

これを基に、こんなプログラムを書くことができます。

void setup() {
  size(500, 500);
}
void draw() {
  if (keyPressed == false) return;
  
  background(101); 
  if (keyCode == UP){
    triangle(300, 120, 400, 120, 350, 50);
    square(320, 120, 60);
  }
  if (keyCode == DOWN) {
    triangle(300, 180, 400, 180, 350, 250);
    square(320, 120, 60);
  }
  if (keyCode == RIGHT) {
    triangle(380, 100, 380, 200, 450, 150);
    square(320, 120, 60);
  }
  if (keyCode == LEFT) {
    triangle(320, 100, 320, 200, 250, 150);
    square(320, 120, 60);
  }
}

このプログラムを実行すると、矢印キーの向きに応じて矢印のマークが表示されます。

まとめ

様々な組み込み関数や組み込みクラスについては、Referenceから調べることができます！
サンプルコードや関数を調べて表現の幅を広げていきましょう！