前回はopenFrameworksで、位置と速度という2つ変数を使用して図形1つをアニメーションさせるところまで到達できました。今回はこのプログラムを応用して複数の図形を同時に動かす方法について解説していきます。複数の図形を動かすには位置と速度という2つのベクトルを個別の変数にではなくまとめて取り扱うデータの格納方法が必要となります。こうした場合には配列(Array)を使用すると便利です。それぞれのベクトルを配列にまとめることで、大量の図形のアニメーションをシンプルに記述することが可能です。さらに、あらかじめ物体の最大数が決まっていない際には、可変長配列 (std::vector) を使用するという方法もあります。この方法もあわせて解説していきます。

スライド

• openFrameworksで複数の図形を動かす – 配列 (Array) と可変長配列 ( std::vector)

動画資料

サンプルファイル

ofApp.h

#pragma once
#include "ofMain.h"

class ofApp : public ofBaseApp {
public:
	void setup();
	void update();
	void draw();

	glm::vec2 location;
	glm::vec2 velocity;
};

ofApp.cpp

#include "ofApp.h"

void ofApp::setup() {
	ofSetCircleResolution(64);
	ofSetFrameRate(60);
	location = glm::vec2(0, 0);
	velocity = glm::vec2(30, 10);
}

void ofApp::update() {
	location = location + velocity;
	if (location.x > ofGetWidth() || location.x < 0) {
		velocity.x = velocity.x * -1;
	}
	if (location.y > ofGetHeight() || location.y < 0) {
		velocity.y = velocity.y * -1;
	}
}

void ofApp::draw() {
	ofSetColor(0, 127, 255, 200);
	ofDrawCircle(location, 20);
	ofSetColor(255);
	ofDrawBitmapString(ofGetFrameRate(), 20, 20);
}

本日の課題

本日の動画で作成した最後のプログラムを元にして、何か1箇所以上を変更したプログラムを作成して提出してください。

• 基本編
  • 円の色
  • 円の大きさ
  • 図形の形 (円から別のかたちに)
• 応用編
  • 動きの変化 (加速・減速、直線以外の動きなど)
  • 円の色を別々の色に塗り分ける
  • インタラクション (マウスドラッグで円が増えるなど)

作成したofApp.hとofApp.cppファイルに何を変更したのかのコメントを添えて、以下のアンケートフォームから提出してください。

アンケートフォーム