yoppa.org

多摩美 – Media Lab. I 2016

openFrameworks入門

今日やること

火曜日のワークショップでは、openFrameworksを開発環境の軸として使用していきます。今回はまずopenFrameworksの開発環境を準備して、付属のサンプルをいろいろ見てみます。その後、簡単なプログラムを作成してみます。

  • openFrameworksって何?
  • 開発環境を準備する
    • openFrameworksのダウンロード
    • Mac: Xcodeのセットアップ
    • Win: Visual Studioのセットアップ
  • サンプルを動かしてみる
  • 新規プロジェクトの作成
  • 簡単な形を描画/アニメーション
  • 課題

openFrameworksって何?

イントロダクション: ビデオを視聴

OF Showreel from openFrameworks on Vimeo.

openFramwroksとは何か?

openFrameworksとは何なのか、openFrameworksのトップページに掲載されている文章が端的に表現しています。

  • openFrameworks is an open source C++ toolkit for creative coding.
  • openFrameworksは創造的なコーディングのためのC++のオープンソースツールキットです

ポイントは3つあります。

  • クリエイティブ・コーディングのためのもの
  • C++で書かれている
  • オープンソースである

また、さらに深くopenFrameworksのデザインの哲学を理解するために、以下のページを読んでみましょう。

  • openFrameworksを構成する様々なライブラリー
    • グラフィクス：OpenGL, GLEW, GLUT, libtess2, cairo
    • オーディオの入出力と分析：rtAudio, PortAudio, OpenAL, Kiss FFT または FMOD
    • フォント：FreeType
    • イメージの読込と保存：FreeImage
    • 動画の再生と取込：Quicktime,GStreamer, videoInput
    • 様々なユーティリティー：Poco
    • コンピュータビジョン：OpenCV
      -3Dモデルの読み込み：Assimp
  • openFramworksデザイン哲学のポイント
    • 協調的
    • シンプルさ
    • 一貫していて直感的
    • クロスプラットフォーム
    • パワフル
    • 拡張性
    • みんなでやろう Do it with others (DIWO)

どんな作品を作ることができるのか?

それでは、openFramworksでどんな作品を作ることができるのでしょうか? 様々な方法で調べることが可能です。まずすぐに思いつく方法は、一般的な検索エンジン(google)やSNSを利用する方法です。

より質の高い情報に絞って検索する方法として、エディターによってキュレーションされたサイトで調べる方法があります。クリエイティブ・コーディングのジャンルでは、CreativeApplicationsがお勧めです。とても質の高い情報が日々更新されています。

CreativeApplicationsでは、開発環境ごとに絞り込んで検索することも可能です。openFrameworksに絞りこんで作品をみてみましょう

大量の作品がみつかります。

開発環境を準備する

openFrameworksは、Processingなどのように開発環境がアプリケーションに用意されているということはありません。「openFramwroksとは何か?」のところで解説したように、openFrameworksは「糊」のように様々なライブラリーを繋ぎとめている存在でしかありません。

openFrameworksで開発するには、まず、使用しているOSにあわせて統合開発環境(IDE)を準備します。IDEのセットアップ方法はオフィシャルサイトにとても丁寧に解説させています。まずはこの資料を参照してセットアップしましょう。

IDEのセットアップ

openFrameworks本体のダウンロード

2016年4月現在の最新版である、v.0.9.3をOSと選択した開発環境にあわせてダウンロードします。

サンプルを動かしてみる

openFrameworksには大量のサンプルプロジェクトが内包されています。まずはサンプルをどんどん動かしてみましょう。そして、そのサンプルが何をしているのか考えてみましょう。

参考: openFrameworks 0.8.0 examples screen captures

新規プロジェクトの作成

ほとんどのプラットフォーム (OS X、Windows、Linux) では、新しいProject Generatorを使用することが可能です。Project Generatorを起動してみましょう。

プロジェクトは、openFramewroksのフォルダ内の「apps」フォルダ内に作成することをお薦めします。例えば、simpleSketch というプロジェクトを作成し apps/myApps 内に置くとします、つまりopenFrameworksのルートからのフルパスは apps/myApps/simpleSketch になります。例えばいろいろなプロジェクトに取り組んでいる場合などに、「apps」内に新規にフォルダを作成することも可能です。

openFrameworksをハードディスクのどこに配置したかによって、設定を調整する必要があるかもしません。

重要なポイントは、openFramewroksのプロジェクトは相対的に機能するというところです。つまり、プロジェクトはopenFrameworksのライブラリのフォルダを、相対的に参照しています (例 : ../../../libs) 。もし、プロジェクトを作成したら、openFrameworksのルートフォルダからの階層構造を保持したままにしておく必要があります。あるいは、もしフォルダの階層を変えたいのであれば、Project Generatorを使用してアップデートすることも可能です。

今日の課題 : とりあえずやってみる!

「習うより慣れろ」という方針で、簡単なアニメーションのプログラムを提示しますので、その内容を解析し改造してみてましょう!

サンプルプログラム

まずは課題のプログラムのソースをみてみましょう! ポイントとなる部分にはコメントが入れてあります。そのコメントをみながらプログラムの内容を解析してみましょう。

理解のためのポイント

基本図形の描き方

openFrameworksの基本図形は、ofGraphicsクラスにまとめられています。ドキュメントを参照してみましょう。

色の設定

ベクトル (速度と位置の表現)

  • ベクトル

※ 現段階では、「x座標とy座標を一緒にしたもの」というざっくりとした理解でOK!

何を改造するのか?

  • 初心者向け
    • 色
    • 大きさ
    • 形
    • 速度
  • 上級者向け
    • 動き (直線運動以外の動き)
    • 大きさの変化
    • 力の表現 (摩擦、重力 …etc.)

提出方法

  • 課題のリポジトリをClone
  • assingment1フォルダ内に新規にプロジェクトを作成、プロジェクト名は本名、Githubユーザー名など(例: AtsushiTadokoro)
  • Templateを参考にプログラム作成
  • 完了したら、リポジトリにPush
  • 次回火曜日のWSまで!