yoppa.org


openFrameworks Addon 1 : Addonについて – ofxGui / 音の視覚化 – ofxFft, ofxProcessFFT

Addon(アドオン)とは、openFrameworksに機能を拡張するためのライブラリーやフレームワークです。processingのLibrariesのように、openFrameworks単体ではできなかった様々な機能を実現することが可能となります。Addonは、oF本体の開発者以外でも独自に開発して追加することが可能であり、繰り返し用いる機能や、CやC++で記述された既存のライブラリーをopenFrameworksに統合することが可能となります。今回はAddonの導入を、まずofxGuiというプロジェクトにGUIを追加するアドオンで行います。ofxGuiを使用することで、例えば周囲の環境が異なる場所でインスタレーションを設置する時など、すぐにパラメータを最適な状態に調整して保存することができ、とても便利です。

後半は、ofxFftというアドオンを用いて音響解析を行います。前回やったように、openFrameworksでは、画像や動画ファイルなどと同様に、プログラムにサウンドファイルを読み込み、再生したり、波形を表示することが可能です。しかし、音の波形を表示したら音響を視覚化したことになるでしょうか。実は我々の耳は音を波形ではなく、周波数に分解して知覚しています。ですので、波形をそのま操作して表示しても、あまり音と一致した映像にはなりません。音を周波数の帯域ごとの音量に分解するには、フーリエ変換という手法を用います。これにより、音を周波数帯域ごとの強さにわけて取得することが可能となります。フーリエ変換は、コンピュータ内で高速に処理する高速フーリエ変換(FFT)というアルゴリズムが考案され、現在ではPC内でリアルタイムに変換していくことが可能です。

スライド資料

サンプルファイル

プログラムサンプルは、Githubのリポジトリからダウンロードしてください。


第7回: メディア芸術基礎 – 3DCGプログラミング

これまでProcessingで表現してきた内容は、基本的に平面の上に描かれる2次元の図形やアニメーションでした。今回はここに奥行を加えて3次元空間での表現をProcessingでプログラミングする手法について解説していきます。

コンピュータのディスプレイは、2D(縦横に並んだピクセル)です。ここの2Dのスクリーンの中で3Dの図形を表現するには、奥行や前後の重なりは擬似的に表現するしかありません。スクリーン画面に、立体や空間などの3次元の存在を投影して描画するイメージです。2次元平面に3次元の存在を投影するには、様々な数学的な知識が必要となります。Processingではこうした演算を自動的に行うことが可能です。3次元の座標系をそのまま使用してプログラムすると、Processing側でその値をもとに3Dの座標を2次元のスクリーン上に変換し、さらに奥行きや前後の重なりを自動的に計算してくれます。

スライド資料

サンプルファイル


CSS(3):Webフレームワークを使う – Twitter Bootstrap

CSSを駆使して、サイト全体の複雑なレイアウトをしていくことは、技術的には可能です。しかし実際に制作してみると、細かな調整や思わぬブラウザの挙動に苦労することも多いのが現状です。「CSSフレームワーク」を使用することで、ブラウザごとの表示の違いをリセットしたり、レイアウトのための基本的な仕組みを利用して簡単にページ全体のレイアウトをすることが可能となります。現在、様々なCSSフレームワークがフリーで公開され利用できるようになっています。今回は、CSSフレームワークの中でも人気の高い「Twitter Bootstrap」を使用して、サイト全体をデザインする基本を学びます。

スライド資料

授業のスライドは、下記から参照してください


openFrameworks作品制作のための実践テクニック – アドオンの追加、画像、動画、3Dオブジェクトの読込と表示

今日の内容

WSの中間制作や学外展など、各種発表が迫ってきました。今回は、具体的な作品制作のためのopenFrameworksの様々な実践的なテクニックについて紹介していきます。

まず始めに、機能拡張のためのアドオン(Addons)の追加方法とその利用方法について。次に、画像や動画をプロジェクトに読み込んで表示する方法。サウンドの読み込みと再生。さらに3Dオブジェクトをプロジェクトに追加して表示する方法について取り上げます。

画像のロードと表示

ロードする画像を選択して表示します。画像は、.gif、.jpg、または .png フォーマットが使用可能です。

oFのプロジェクトの bin/data フォルダー内に「image」という名前で新規にフォルダーを作り、画像を格納します。

ofApp.h ファイル内で :

ロードしたい画像のそれぞれに対して、 ofImage型のインスタンス変数を追加します。

ofImage bikers;
ofImage bikeIcon;

ofApp.cpp ファイル内で :

ofImageクラスのload()メソッドを呼びだして、画像をロードします。画像は相対パスで指定します。

imageName.load("INSERT FILE PATH HERE")

例 :

void ofApp::setup(){
    bikers.load("images/bikers.jpg");
    bikeIcon.load("images/bike_icon.png");
}

ofImageクラスのdraw()メソッドを呼びだして、画像を表示します。画面上の水平と垂直の座標上の点を指定して配置します。画像の左上の角が配置の基準点になります。

imageName.draw(xPosition, yPosition)

例 :

void ofApp::draw(){
    bikers.draw(0, 0);
    bikeIcon.draw(190, 490);
}

加えて、表示する画像の 高さ を新たに指定してリサイズすることも可能です。

imageName.getColor(xPosition, yPosition, width, height)

例 :

   
void ofApp::draw(){
    bikeIcon.draw(190, 490, 20, 20);
}

詳細な情報

このサンプルを確認してください : examples/graphics/imageLoaderExample

ビデオをロードして再生する

ロードして再生するビデオファイルを選択します。

oFのプロジェクト内の bin/dataフォルダに “movies” と名前をつけた新規フォルダを作成し、そこにビデオファイルを格納します。

ofApp.hファイル内で :

ロードしたいビデオのためにofVideoPlayerクラスのインスタンス変数を追加します。

ofVideoPlayer fingerMovie;

ofApp.cppファイル内で :

setup()関数内で :

ofVideoPlayerクラスのload()メソッドを呼び出して、相対パスで指定してビデオをロードします。

videoName.load("INSERT FILE PATH HERE");

ビデオの再生を開始します。

videoName.play();

例 :

void ofApp::setup(){
    fingerMovie.load("movies/fingers.mov");
    fingerMovie.play();
}

update()関数内で :

videoPlayer.update();

例 :

void ofApp::update(){
    fingerMovie.update();
}

draw()関数内で :

videoPlayer.draw(xPosition, yPosition, width, height);

例 :

void ofApp::draw(){
    fingerMovie.draw(0, 0, 400, 300);
}

詳細な情報

このサンプルを確認してください : examples/video/videoPlayerExample

サウンドの読み込みと再生

音の読み込みと再生はとても簡単です。ofSoundPlayerを初期化して、サウンドファイルを読み込んで、再生するだけです。

まず最初に、サウンドファイルを、bin/dataフォルダ内に入れてください。

Screenshot of Example)

ヘッダーファイル(.h)内で

ofSoundPlayerを初期化します。

ofSoundPlayer   mySound;

実装ファイル(.cpp)内で

setupメソッド内で、サウンドファイルを読み込みます。.mpr、.wavなど、様々な種類のサウンドファイルを読み込むことができます。

void ofApp:setup(){
    mySound.load("fileName.mp3");
}

次に、サウンドファイルを再生します。もし、setupメソッドに下記のコードを加えると、サウンドはアプリケーションを開始した際に1回だけ再生されます。もし、継続して再生したい場合は、ループ再生するように設定することも可能です。

void ofApp:setup(){
    mySound.load("fileName.mp3");
    mySound.play();
}

マウスボタンを押した際や、キー入力、マウスドラッグなどの際に再生をトリガーすることも可能です。例えば、以下のように記述します。

void testApp::keyPressed  (int key){
    if(key == "p"){
        mySound.play();
    }
}

詳細な情報

oFでサウンドを扱うより詳細な方法は、oF Bookのsound chapterを、参照してください。

3Dモデルを読み込む

openFrameworksのアプリケーションに3Dのモデルを読み込むには、ofxAssimpModelLoaderアドオンを使用しなくてはなりません。このアドオンはopenFrameworksをインストールした際に付属されています。

まず初めに、ofApp.h内で、ofxAssimpModelLoaderをインクルードして宣言します。

#include "ofxAssimpModelLoader.h"
ofxAssimpModelLoader yourModel;

そして、ofApp.cppのファイル内で、モデルを読み込んで描画します。

void ofApp::setup(){
  yourModel.loadModel("squirrel/NewSquirrel.3ds", 20);
}

void ofApp::draw(){
  yourModel.drawFaces();
}

openFramworksのaddons/3DModelLoaderExample/フォルダの中に、完成された作動するサンプルが入っています。

プロジェクトにアドオンを追加する方法

アドオンはどこにあるの?

アドオンは、 oFをインストールした階層のaddonsフォルダに置いてあります。oFをダウンロードした段階で、addonsフォルダにはいろいろなコアアドオンがみつかるでしょう。あなた自身で開発したアドオンや、他の人達によって開発されたアドオンも、ここに入れましょう。

projectGeneratorを使う (OSX / Windows / Linux)

アドオンをGUIのドロップダウンメニューから選択できます。

chooseAnAddon

generate ボタンを押すと、アドオンがプロジェクトに追加されます。

generateAProject

既存のプロジェクトをインポートして、使用するアドオンを追加したり削除して変更することも可能です。

updateAProject


第6回: メディア芸術基礎 – 画像データを扱う、 画像の分析・再合成

ProcessingのPImageクラスは、外部のビットマップ画像(Jpeg, GIF、PNGなど)をデータとしてプログラムに読み込むことができます。読み込んだ画像は単に画面に表示するだけでなく、色や明度やサイズを変更して表示することができます。さらには、画像に含まれる全てのピクセルの色情報を読み取り配列に格納することが可能です。そのデータをもとに別の画像を再生成することが可能となり、読み込んだ画像データの色情報をもとにした多彩な表現が可能となります。

今回はProcessingに画像を読み込んで、分析再合成することで、様々な表現の可能性について探っていきます。

スライド資料

サンプルファイル


CSS(2):ボックスモデルを理解する

HTMLのブロックレベル要素(見出し、段落など文書を構成する基本要素)は、ボックスと呼ばれる矩形(四角形)領域を生成します。この領域の概念のことを「ボックスモデル」と呼びます。各ボックスのテキストや画像などの内容の周辺には、パディング(Padding)、ボーダー(Border)、マージン(Margin)の順に周辺の領域を持っています。CSSでWebページをデザインしていく際に、このボックスモデルの理解が欠かすことのできない前提知識となります。今回はこのボックスモデルに焦点をあてて、CSSを活用したデザインについて解説していきます。

スライド資料

授業のスライドは、下記から参照してください

サンプルファイル

講義で使用する、HTMLのサンプルは、下記からダウンロードしてください。


力と運動 : openFrameworksで動きを極める!

これまでやってきたように、openFrameworksで位置と運動のベクトル(ofVec2)を操作することで、アニメーションを作成することができました。単純な動きの場合はこうした座標の足し算引き算で対応可能です。しかし、ここからさらに発展させて、よりリアルな動きを実現しようとすると、限界があります。今回は、単なる座標操作ではなく、運動の背後にある物理的な原理を理解して、その本質に迫ります。

アイザック・ニュートンは、運動の法則を基礎として構築した、力学体系を構築しました(ニュートン力学)。物体の運動や力、質量といったものは、ニュートンの運動の法則によって説明できます。

  • 第1法則(慣性の法則): 質点は、力が作用しない限り、静止または等速直線運動する
  • 第2法則(ニュートンの運動方程式): 質点の加速度は、そのとき質点に作用する力に比例し、質点の質量に反比例する
  • 第3法則(作用・反作用の法則): 二つの質点の間に相互に力が働くとき、質点 2 から質点 1 に作用する力と、質点 1 から質点 2 に作用する力は、大きさが等しく、逆向きである

今回は、このニュートンの運動の法則を援用しながら、様々な動きや力についてopenFrameworksで実装しながら、動きに関する理解を深めていきます。

スライド

サンプルファイル

プログラムのサンプル、スライドなどの資料は、Githubのリポジトリからダウンロードしてください。


第5回: メディア芸術基礎 – 「ビジュアルハーモニー」アルゴリズムによるアニメーション

今回は、より複雑なアニメーションに挑戦します。たくさんの図形を、一定の手続き(= アルゴリズム)にそって動かしてみます。動きのアルゴリズムはいろいろありますが、今回はその一例として、三角関数(sin, cos , tan)を使用した動きをとりあげます。三角関数の定義は、直角三角形の角度とそれを取り囲む辺の比率で定義されます。しかし、同時に円運動を座標に変換する仕組みとしても活用可能です。この仕組みを応用してアニメーションするとどうなるか、三角関数を用いたアニメーションで美しいパターン「ビジュアルハーモニー」を生成する手法を紹介します。

スライド資料

サンプルファイル


CSS(1) : CSS入門

ここまで4回にわたって解説してきたHTMLは、文書の中に目印をつけて(マークアップ)、その構造を記述するための言語でした。その結果ブラウザに整形されたページが表示されるものの、文字の色や大きさ、背景の色、行間やフォントなど、そのデザインはブラウザであらかじめ決められた固定のものでした。今回からはこのHTMLで構造を記述された文書に対してデザインを行うための新たな仕組みについて解説していきます。HTMLに対してその表示形式を制御するしくみとして「スタイルシート」というものがあります。HTMLではその代表的な仕組みとして、CSS (Cascading Style Sheets) があります。このCSSとHTMLによって、体裁と構造を分離して記述することが可能となり、現在のWebデザインの基本となる考え方となっています。今回はこのCSSの仕組みと基本についての導入を行います。

スライド資料

サンプルファイル

講義で使用する、HTMLのサンプルは、下記からダウンロードしてください。


openFrameworks + OOP – オブジェクト指向プログラミング入門

これまでのopenFrameworksのプロジェクトは、ofApp.h と ofApp.cpp という2つのファイルに全てのプログラムを記述してきました。しかし、この方法では徐々にプロジェクトが複雑になり巨大化するうちに、扱いが困難になってきます。プログラミングをわかりやすく保つには、役割ごとに内容を分割して記述すべきです。openFrameworksの元となるプログラミング言語であるC++では「オブジェクト」という単位でプログラムを構造化していきます。このオブジェクトを基本単位にしたプログラミング手法のことを「オブジェクト指向プログラミング (Object Oriented Programing = OOP)」と呼びます。OOPはC++だけでなく、Java、Python、Ruby、C#、Objective-C、Swiftなどでも利用されていて、現在のプログラミング言語の主流となっているパラダイムです。

今回は、このOOPをopenFrameworksで実現する方法を「生成的な形態を生成する」というテーマに沿って徐々に発展させていきます。今回の内容が今後のより本格的な作品制作のための重要なテクニックとなっていきます。しっかり理解していきましょう。

スライド資料

サンプルコード

サンプルコードは、Tamabi Creative VisualisationのGithubリポジトリをCloneしてください。