グラフィックス

1．やってみよう

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

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

void draw()
{
  background(255, 255, 255);
  stroke(0, 0, 0);
  fill(255, 255, 255);
  ellipse(100, 75, 30, 30);
}

(2) Runボタンを押してプログラムを実行し、ウィンドウに円が描画されることを確認しなさい。

2．解説

　Processingのプログラムは、setup関数とdraw関数というふたつの関数を骨格として動作する。setup関数には初期設定が記述されており、最初に1回だけ実行される。一方、draw関数にはメインの処理が記述されており、無限ループによって繰り返し実行される。

　このプログラムは、まず、setup関数を実行することで、初期設定として、ウィンドウの設定を行っている。

　size関数は、ウィンドウのサイズを設定する関数である。このプログラムは、ウィンドウのサイズとして、横を200、縦を150に設定している。なお、図1に示すように、ウィンドウの座標系は、左上のコーナーが原点になっていることに注意すること。widthとheightは、それぞれウィンドウの横と縦のサイズを表しており、あらためて定義しなくてもプログラムのなかで自由に使うことができるシステム変数になっている。

図1．ウィンドウの座標系

　frameRate関数は、ウィンドウのフレームレートを設定する関数である。このプログラムは、フレームレートを30に設定し、1秒間あたり30回の速度でウィンドウを書き換えるものになっている。

　つづいて、このプログラムは、draw関数を実行することで、メインの処理として、円の描画を行っている。

3．課題

(1) プリミティブ図形を組み合わせて、複雑な図形を描画しなさい。

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

4．ヒント

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

図2．Processingのプリミティブ図形

　図3に示すように、一見すると複雑な図形も、プリミティブ図形を組み合わせることで描画することができる。なお、図形を重ねる場合は、先に描画した図形よりも、後から描画した図形が手前に配置されることに注意すること。

図3．プリミティブ図形の組み合わせ

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

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

　なお、ウィンドウを書き換える速度は、フレームレートによって変化する。同じアニメーションでも、フレームレートを変更すると速度が変化することに注意すること。

5．ゲームをつくってみよう（1）

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

int ball_x, ball_y, ball_dx, ball_dy, ball_size;

void setup()
{
  size(300, 400);
  frameRate(30);
  
  ball_size = 64;
  
  ball_x = (int)random(32, width - 32);
  ball_y = (int)random(32, height - 32);
  
  ball_dx = 10;
  ball_dy = 10;
}

void draw()
{
  background(0, 0, 255);
  
  noStroke();
  fill(255, 255, 255);
  ellipse(ball_x, ball_y, ball_size, ball_size);
  
  ball_x += ball_dx;
  if (ball_x < 0)
  {
    ball_dx *= -1;
    ball_x = -ball_x;
  }
  if (ball_x > width)
  {
    ball_dx *= -1;
    ball_x = width - (ball_x - width);
  }
  
  ball_y += ball_dy;
  if (ball_y < 0)
  {
    ball_dy *= -1;
    ball_y = -ball_y;
  }
  if (ball_y > height)
  {
    ball_dy *= -1;
    ball_y = height - (ball_y - height);
  }
}

(2) Runボタンを押してプログラムを実行し、ウィンドウの壁でボールが反射することを確認しなさい。ウィンドウの壁にめりこまずボールを反射させるにはどうすればよいか考えなさい。

Last Modified: October 1 12:00 JST 2021 by Naofumi Aoki
E-mail: aoki@ime.ist.hokudai.ac.jp