今回からいよいよopenFrameworksによるプログラミングを開始していきます。

openFrameworksではProcessingやp5.jsのように新規ファイルを生成するだけではプログラムは開始できません。様々なファイルや設定を内包したプロジェクトを生成する必要があります。まず初めに新規のプロジェクトの生成の方法について説明します。

次に、openFrameworksでまず差し当って編集していく、main.cpp、ofApp.h、ofApp.cppという3つのファイルについて解説します。また、ofAppの中にある3つの重要な関数、setup()、update()、draw()の役割についても説明していきます。

後半はいよいよプログラミングしていきます。今回は物体が直線運動する簡単なアニメーションを完成させるところまでを目標とします。

スライド資料

• openFrameworksプログラミング、はじめの一歩!

本日の課題

• 本日の授業とスライド資料を参考にして、簡単な直線運動のアニメーションを完成させてください
• そのプログラムを元にアニメーションのパラメータを何か変更してください
  • 速度
  • 円の色
  • 円の大きさ
  • (応用) 動きかた
  • (応用) 円の数

課題の作成にあたっては、今回の授業のサンプルを参考に作成してください。最終のofApp.hとofApp.cppはこちら。

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);
}