Processing lesson(6) 変数

Learning Objectives

• 変数とは何か、なぜ便利かについて理解する
• 変数を使ってプログラムを作る

講義

(外部サイト)ZERO-PDE

シンプルな形からプログラムを作っていく方法が書かれています。順を追って自分で書いてみましょう！

例1. クリックするたびに大きくなるミカン（完成形）

joho_unit07_6_variable1.pde

// だんだん膨らむ風船
// 風船の大きさを覚えておくための変数を宣言する
// 名前は ballSize とする
float ballSize;

void setup() {
  size(600, 600);
  strokeWeight(2);
  fill(255, 200, 100);
  // ballSize の初期値（最初の大きさ）を代入
  ballSize = 100;
}

void draw() {
  background(245, 134, 64);
  // ミカンの大きさとして使うと決めた変数 ballSize にもとづき円を描く
  // ミカンの大きさの座標はx:300, y:300で固定。
  ellipse(300, 300, ballSize, ballSize);　
}

// マウスボタンを押したときに実行されるブロック
void mousePressed() {
  // ballSize に ballSize + 10 を代入
  // この結果、 ballSize はクリックされるたびに 10 ずつ増えていく
  ballSize = ballSize + 10;
}

ポイント

• 複数の関数で使う変数は、関数の外（グローバルなスコープ）で"宣言"する (floab ballSize)
• 変数には分かりやすい名前をつける (“ballSize”: ボールの大きさ）
• 変数に値を入れることを"代入"という。 (ballSize = 100; : 変数"ballSize"に100を入れる)
• 変数は 値を覚えておく。ballSize = ballSize + 10; 　“ballSize"に10を足して、“ballSize"に代入する

---

例2. 座標の位置に変数を使う（矢印キーで操作する）

キーボードの上下左右の矢印キー（↑↓←→）でボールを動かしてみよう。(外部サイト)ZERO-PDE (覚えておく)　に沿って進めてみましょう。

ヒント：矢印キーが押された時は・・？

• 座標の位置を表す変数 (ballX, ballY)を宣言する
• float ballX;
• float ballY;
• void keyPressed() { } の中で変数を操作する. IF文で以下の場合ごとの操作を書く
• keyCode==LEFT // ← が押された時
• keyCode==RIGHT // →が押された時
• keyCode==UP // ↑が押された時
• keyCode==DOWN // ↓が押された時

---

演習: 「モゾモゾ動くボール」

モゾモゾ動く図形をプログラムで書いてみよう（特に提出はありません。この後の課題で変数を使いこなせるように練習してみましょう）

ヒント

• まずはキャンバス中央にボールを描く　・・・①

• ボールの位置を覚えておくための変数を作り、組み込む・・・②

• 毎フレームごと（つまり draw() の中）で、位置の変数をランダムに増減させる。動くためには、前のフレームの位置を"覚えて"おき、そこから位置をずらす

• ランダムの使い方は lesson(5)ランダム

  ①②まで書いたプログラムはこれ。どう変えたら「ランダムに動き回る」？考えて書いてみよう

  float ballX; float ballY; void setup(){ size(600, 600); background(255); fill(0); ballX=300; ballY=300; } void draw(){ ellipse(ballX, ballY, 10,10); }

モゾモゾ動き回るボール

---

読み込んだ画像をモゾモゾ動かすこともできる。

モゾモゾ動くアンパンマン

PImage pict;
float ballX;
float ballY;

void setup(){
  pict = loadImage("Anpanman.png");
  size(600, 600);
  background(255);
  fill(0);
  ballX=300;
  ballY=300;
}

void draw(){
  ballX = ballX + random(-20,20);
  ballY = ballY + random(-20,20);
  background(255);
  image(pict, ballX, ballY);
}