第6回　Processing

1．やってみよう

(1) Processingのプログラミング環境に、つぎのプログラムを入力しなさい。

int x;

void setup()
{
  size(200, 150);
  frameRate(30);
  
  x = 1;
}

void draw()
{
  background(255, 255, 255);
  
  if (x == 0)
  {
    stroke(0, 0, 0);
    fill(255, 255, 255);
    rect(90, 65, 20, 20);
    fill(0, 0, 0);
    ellipse(100, 75, 18, 18);
  }
  else
  {
    stroke(0, 0, 0);
    fill(255, 255, 255);
    rect(90, 65, 20, 20);
    fill(255, 255, 255);
    ellipse(100, 75, 18, 18);
  }
}

void mousePressed()
{
  x = 1 - x;
}

(2) Runボタンを押してプログラムを実行し、マウスをクリックするたびにオンとオフの表示が交互に切り替わることを確認しなさい。

2．解説

　マイコンボードとPCを連携して動作させると、マイコンボードの機能だけでなく、PCが得意とするグラフィックスやサウンドといった機能を組み合わせて利用できるようになるため、モノづくりの可能性が大きく広がる。

　こうしたモノづくりに挑戦するには、マイコンボードだけでなく、PCのアプリケーションを作るためのプログラミング環境が必要になる。さまざまなものがあるが、Arduinoと相性のよいプログラミング環境として知られているのがProcessingである。

　コンピュータに対してインタラクティブな操作を行うには、マイコンボードの場合、スイッチを使うことが基本になるが、一方、PCの場合、スイッチのかわりになるのがマウスである。

　マウスを操作すると、移動やクリックなどさまざまなイベントが発生するが、Processingには、こうしたイベントが発生するたびに、それぞれに対応した関数を自動的に呼び出すしくみが用意されている。

　そのひとつがmousePressed関数である。mousePressed関数は、マウスがクリックされると自動的に呼び出される関数であり、マウスがクリックされたときの処理を記述することで、インタラクティブに動作するアプリケーションを作ることができる。

3．課題

(1) プリミティブ図形を組み合わせてボタンのアイコンを描画し、ボタンをクリックするたびにオンとオフの表示が交互に切り替わるプログラムを作りなさい。

(2) 円の位置を少しずつ変化させながら繰り返し描画することで、まるでボールが移動しているように見えるアニメーションのプログラムを作りなさい。

4．ヒント

　図1に示すように、プリミティブ図形を描画するために、Processingにはいくつかの関数が用意されている。

図1．プリミティブ図形の定義

　図2に示すように、一見すると複雑な図形も、プリミティブ図形を組み合わせることで描画することができる。

図2．クリックするたびにオンとオフの表示が交互に切り替わるボタン

　マウスをクリックするたびにオンとオフの表示が交互に切り替わるボタンを動作させるには、マウスポインタの位置を把握し、ボタンの上でマウスがクリックされたことを判定する必要がある。

　図3に示すように、マウスポインタの位置を把握するためのしくみとして、ProcessingにはmouseXとmouseYというシステム変数が用意されている。それぞれマウスポインタのx座標とy座標に対応しており、こうしたシステム変数を利用することで、マウスポインタの位置をリアルタイムに把握することができるようになっている。

図3．マウスポインタの座標

　図4に示すように、円の位置を少しずつ変化させながら繰り返し描画すると、人間の目には、まるでボールが移動しているに見える。これが、アニメーションの原理である。

図4．アニメーションの原理

Last Modified: June 13 12:00 JST 2017 by Naofumi Aoki
E-mail: aoki@ime.ist.hokudai.ac.jp