yoppa.org

ガイダンス

自己紹介

田所　淳（たどころ　あつし）

1972年千葉県生まれ。昨年度より、千葉商科大学商経学部非常勤講師。政策情報学部非常勤講師、政策情報学研究科客員講師(非常勤)。

研究領域：コンピュータ音楽。普段の仕事：Webデザイナー、プログラマー。

e-mail:tado@cuc.ac.jp

履修にあたっての注意

成績について

以下のように、出席と履修態度、中間課題成績、最終課題成績の3つの要素を総合的に評価します。きちんと出席して、課題を両方とも提出すれば、落第することは、まず無いと思います。

  • 出席、履修態度:30%
  • 中間課題:30%
  • 最終課題:40%

教科書

ありません。

参考となる図書、URL、DVDなどは授業のなかで適宜紹介します。

この講義のねらい

普段Flashなどを用いてサイト制作をしていて、「文字情報だけあればいい」「アニメーションいらない、うざったい」「重い」「デザイナーの自己満足」といった意見を耳にします。

もともと研究者の論文などを共有するために開発されたWorld Wide Web(WWW)というメディアは、基本的には文字を中心にしたメディアであり、いまでもその中心は文字情報であるといえます。テキストの部分(ノード)同士をネットワーク上のハイパーリンクでくもの巣のように張りめぐらせるというアイデアで、WWWは爆発的に普及してきました。Webブラウザに表示される、サイトの１画面分を「1ページ」と呼ぶことからもわかるように、「本」を念頭にWWWを見ている人が多いでしょう。そうした歴史的な流れから考えると、WWWは既存のテキストの機能を技術の力で飛躍的に高めたものと考えられます。

しかし、Webとはそれだけなのでしょうか？ 文字とそれに付随する図表だけで、全ての内容を表現することが可能なのでしょうか？こうした疑問がこの講義全体を通したテーマです。せっかく無限の可能性をもったメディアを自由に使う環境が構築されているのに、我々はその可能性のごく一部分しか利用していないのではないでしょうか。「テキストがあれば十分」という思い込みが、その先の可能性を見る妨げになってはいないでしょうか。「WWW=ハイパーテキスト」という固定観念から逃れて、既存のシステムの裏をかくようなWebサイトがもっとあってもいいのではないでしょうか。

この講義では、「Web動画表現技法」という講義名に準拠する意味で、「動き」に特化してWebサイト制作のための技法を学んでいきます。その際に、従来の「読み易い」「わかりやすい」という基準を越えて、表現のためのメディアとしてWWWを捉えていきたいと思います。いままでのWebの固定概念をとりはらって、いろいろなチャレンジをしてください。受講するみなさんは、やわらかい頭で、「今までにないWeb上での表現を開拓するんだ」という心意気で半年間がんばりましょう。

参考資料

従来のWWWの枠を越えて、Webならではの新しい表現を探究しているサイトを、Flashを用いたサイトを中心に、いくつか紹介します。

Webキャンペーン・ブランディング

動画配信

ビジュアライゼーション

インタフェイス、新規技術

ガイダンス – この授業の方針


Webを記述する言語の標準の現状

昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。

  • HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1
  • CSS (文書の体裁・デザインを指定する言語) – CSS 2

しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。

HTML (Webサイトの記述言語) の標準化巡る闘争の歴史

HTML年表AppleInsider: なぜ Apple は HTML 5 に賭けているのか： ウェブの歴史 [Page 2] より

HTMLを巡る標準化の動きは、様々な組織や企業が、それぞれの思惑を抱えながら覇権争いをくりひろげた闘争の歴史でもあります。Webブラウザの開発者、ソフトウェアメーカー、MicrosoftやAppleなどのOSの開発会社、標準化団体などが、それぞれの立場で標準を主張してきました。その結果、HTMLのバージョンの歴史はとても複雑怪奇なものとなっています。

長年にわたる闘争の末、数年前にようやくHTMLの標準は落ちつくかと思われました(XHTML + CSS)。しかしながら、現実は予想に反してXHTML 1.0という当初の規格は思うように普及せず、その後継として計画されてたXHTML 2の標準化も途中で頓挫してしまい、最終的に標準化のためのワーキンググループは解散するという事態になってしまいました。

そのため、標準化を巡る流れはおおきく方向転換を余技なくされ、そこでいままでの標準化団体とは別にブラウザのベンター(Apple, Mozilla, Opera, Google) 達が新たな標準化を押しすすめるようになり、その結果XHTML 2.0に代わるものとして提案された規格が、HTML 5 です。

現在 HTML 5 は2012年の勧告(一般に向けて仕様を公開する)に向けて、標準化の仕様策定の作業が続けられています。その機能は徐々に現状のブラウザにも反映され、一部の機能は既に様々な分野で仕様され始めています。しかしながら、現状ではまだブラウザによってその進度は大きな差があります。現状での HTML 5 の進行状況は、◎Chrome、◎Safari、○Firefox、○Opera、△IE8、(× IE6) といったところです。

HTML 5 とは何なのか?

では、HTML 5とは何なのでしょうか。その機能は多岐にわたります。下記の資料がその全貌をわかりやすく解説しているので、参考にしてみましょう。

HTML 5 の特徴を要約すると、だいたい以下のような感じになるでしょう。

  • Webアプリケーションを実現するための、機能の拡張
  • HTMLに、新しい要素や属性の導入
  • ローカルの記憶領域、DBとの連携強化
  • UIの向上 (ドラッグ&ドロップ、FORMの拡張)
  • 地図情報
  • オーディオ、ビデオの取り扱い
  • キャンバス (図形の描画)
  • CSS (文書の要素のデザイン機能) の大幅な拡張

これらの機能の追加により、今まではHTML文書単体では不可能であった様々なリッチなユーザ体験が可能となることでしょう。

HTML 5 になると、古い記述(XHTML 1.0)が使えなくなるわけではない

では、HTML 5 を導入すると、以前仕様していた古い記述方法を仕様することはできなくなるのでしょうか。実は、そのようなことはありません。HTML 5 はいままで普及していた書式、HTML 4.xや、XHTML 1.0 の書式を包括するより広い範囲での記述の仕様となります。いままでの古い記述の方法もまた、HTML 5 に含まれているというイメージです。下記のマンガがこの概念をわかりやすく解説しています。

今学期のイメージリテラシーでのHTMLの方針

以上の点を踏まえて、この授業では以下のような基準で「正しい」HTMLというものを決定していきます。

  • 基本的な文法は、現状普及している XHTML 1 に準拠する。
  • ただし、現在でも使用可能な機能に関しては、積極的に HTML 5 と CSS 3 に関するトピックスも扱っていく

現在のWebブラウザに配慮しつつ、将来を見据えた標準についても同時に学んでいこうというのが、この授業での基準となります。

HTML 5 の新要素、レイアウト要素を使用する

HTML 5 の導入として、HTML 5 から導入された数多くの新機能の中から、HTML 5 から加わった新しい要素であるレイアウト要素を使用してみましょう。

これまでのHTMLでは、ヘッダーやフッター、サイドメニューなどのページ全体のレイアウトを画面上で実現しようとした場合、古くはtable要素、CSS2によってある程度レイアウトができるようになるとdiv要素といった本来はレイアウトのために考案されていない要素を「裏技」として使用してきたものが、定番の方法として定着してしまっていました。

しかし、HTTML 5 からは、最初からレイアウトに使用することを前提とした要素を使用してレイアウトできるようになました。また、画面のレイアウトをする際には、tableやdivではなくレイアウト要素の使用が奨励されています。またページ制作者にとってもレイアウト要素を使用することで、非常にシンプルにページ全体のレイアウトを行うことができるようになり、とても便利になりました。

実際にレイアウト要素を使用しながら、HTML 5 の利便性を体感してみましょう。

openFrameworks – プログラムの制御構造

サンプルファイルのダウンロード

授業で解説したプログラムは下記からダウンロードしてください。

openFrameworksを使用した作品の紹介

openFrameworksを使用するとどんなことができるのか、自身の作品制作に向けてのイメージを膨らませるために、まずはいろいろな作品の実例を紹介します。

インスタレーション

パブリッシング

パフォーマンス

モバイル

プログラムの制御構造

制御構造は、プログラミング言語において、文や命令を実行する順番を意味しています。プログラミングでアルゴリズムを生成したり、図形やアニメーションを描いたり、特定の動作(イベント)に対する反応を定義したりといった様々な命令を実行する際に、プログラミングの制御構造を正しく理解することが理解の際の重要なポイントとなります。

逆にいうと、今日学ぶプログラミングの基本となる4つの制御構造さえ理解すれば、プログラミングに関しての半分以上は理解できたと考えることも可能でしょう。また、今回は基本となる制御構造をopenFramweworksを実例として(つまりC++の文法にのっとって)学んでいきますが、この基本の制御構造自体は、ほとんどのプログラミング言語で共通するものです。

プログラムの制御構造をしっかり理解することで、他の言語での開発をする際にも、すぐに知識を応用することが可能となるでしょう。

プログラミング、4つの制御構造

今日学ぶ制御構造は以下の4つのみです。しかし、この基本となる4つの制御構造で、プログラミングのほとんどの構造を表現することが可能となります。

  1. 継続 – 順番に実行する
  2. 条件分岐 – 「もし〜だったら…せよ」
  3. ループ – くりかえし
  4. 関数 – 特定の処理をまとめる、サブルーチン

以下では、openFrameworksを使用してプログラムの制御構造をビジュアルで理解することを試みます。実例を通して、制御構造についてしっかりと理解しましょう。

制御構造(1) – 継続

  • openFrameworksの(つまりC++の)プログラムは、基本的に上から下に実行される
  • 実行される順番が重要な意味を持つこともある

フローチャートで表現すると…

継続のサンプル 1. 順番に図形を描く

図形の重なり順に注意!!

testApp.cpp

#include "testApp.h"

void testApp::setup(){
    ofBackground(0, 0, 0);
    ofSetCircleResolution(64); //円の解像度
}

void testApp::update(){

}

void testApp::draw(){
    //長方形
    ofSetColor(127, 127, 127);
    ofRect(300, 300, 250, 250);
    
    //円1
    ofSetColor(255, 63, 31);
    ofCircle(500, 300, 120);
    
    //円2
    ofSetColor(31, 63, 255);
    ofCircle(600, 400, 80);
}
/* 《後略》 */

継続のサンプル 2. 増殖する円

testApp.cpp

#include "testApp.h"

void testApp::setup(){
    ofBackground(0, 0, 0);
    ofSetBackgroundAuto(false); //背景を更新しない
    ofSetCircleResolution(64); //円の解像度
}

void testApp::update(){

}

void testApp::draw(){
    //円を描く点をランダムに設定
    ofPoint pos;
    pos.set(ofRandom(0, ofGetWidth()), ofRandom(0, ofGetHeight()));
    
    //円の半径もランダムに
    float radius = ofRandom(1, 10);
    
    //色もランダムに
    ofSetColor(ofRandom(0, 255), ofRandom(0, 255), ofRandom(0, 255));
    
    //設定した場所と半径で、円を描く
    ofCircle(pos.x, pos.y, radius);
}
/* 《後略》 */

継続のサンプル 3. アニメーション

アニメーションもdraw()による継続機能を使用している。

  • drawはofSetFramerate()で指定した間隔で、update() と draw() を行う
  • 後述するループとの差異について注意
  • 座標の値を継続して変更することによるアニメーションを作成してみる

testApp.cpp

#include "testApp.h"

//円の座標を記録するための、クラス変数
ofPoint pos;

void testApp::setup(){
    ofBackground(0, 0, 0);
    ofSetFrameRate(60);
    ofSetCircleResolution(64); //円の解像度
    
    //座標を初期化
    pos.x = 0;
    pos.y = 0;
}

void testApp::update(){
    //座標の更新
    pos.x += 0.3;
    pos.y += 0.2;
}

void testApp::draw(){
    //設定した座標に、円を描く
    ofSetColor(31, 127, 255);
    ofCircle(pos.x, pos.y, 40);
}
/* 《後略》 */

制御構造(2) – 条件分岐

条件分岐

パターン1：「もしXXならば、***しなさい」→ if文
パターン2：「もしXXならば、***しなさい、そうでなければ—しなさい」→ if-else文

if文の基本文法

if (条件式) {
    真文
}

フローチャートで表現すると…


if文 (左)、if-else文 (右)

条件分岐のサンプル

座標のアニメーションを改造。画面の端にくると、反対側の端から出現する。

#include "testApp.h"

//円の座標を記録するための、クラス変数
ofPoint pos;

void testApp::setup(){
    ofBackground(0, 0, 0);
    ofSetFrameRate(60);
    ofSetCircleResolution(64); //円の解像度
    
    //座標を初期化
    pos.x = 0;
    pos.y = 0;
}

void testApp::update(){
    //座標の更新
    pos.x += 3;
    pos.y += 2;
    
    //画面の端にきたら、反対がわから出るように条件分岐を設定
    //左、右、上、下それぞれの場合で条件分けする

    //左
    if (pos.x < 0) {
        pos.x = ofGetWidth();
    }
    //右
    if (pos.x > ofGetWidth()) {
        pos.x = 0;
    }
    //上
    if (pos.y < 0) {
        pos.y = ofGetHeight();
    }
    //下
    if (pos.y > ofGetHeight()) {
        pos.y = 0;
    }
}

void testApp::draw(){
    //設定した座標に、円を描く
    ofSetColor(31, 127, 255);
    ofCircle(pos.x, pos.y, 40);
}
/* 《後略》 */

条件分岐 – クイズ

物体が画面の端に来たときに、反対側から出てくるのではなく、バウンドするようにするにはどうすれば良いか?

  • 条件分岐の部分を変更する
  • 2D空間を運動する物体の、バウンドを表現するには、どのような演算をすれば良いのか?

制御構造(3) – 繰り返し (ループ)

くりかえしを実現するには、for文を用いる

for文の基本文法

for(初期化; ループの継続条件; カウンタ変数の更新) {
  文
}

フローチャートで表現すると…

ループ(繰り返し)を使用したプログラムで、大量の変数を格納する際には、配列(Array)を使用すると便利

  • 配列 = 変数のロッカーのようなもの、
  • 同じ型の変数(箱)が、コンピュータのメモリに順番に生成される
  • それぞれの要素には、区別するための連番の数字(添字)が付与されている

繰り返しと配列を使用したサンプル

繰り返しと配列を使用して、一度にたくさんの図形を動かしてみる。

testApp.cpp

#include "testApp.h"
#define NUM 100 //定数NUMを100と定義する

//円の座標を記録するための、クラス変数をNUM個の配列で定義
ofPoint pos[NUM];
//円のスピードを記録するための、クラス変数NUM個を定義
ofPoint speed[NUM];

void testApp::setup(){
    ofBackground(0, 0, 0);
    ofSetFrameRate(60);
    ofSetCircleResolution(64); //円の解像度
    
    //for文で繰り返すことで、全ての配列の座標を初期化
    for (int i = 0; i < NUM; i++) {
        //画面の中でランダムな位置に初期化
        pos[i].set(ofRandom(0, ofGetWidth()), ofRandom(0, ofGetHeight()));
        //スピードを初期化
        speed[i].set(ofRandom(-4, 4), ofRandom(-4, 4));
    }
}

void testApp::update(){
    //座標を、for文の繰り返しで全て更新
    for (int i = 0; i < NUM; i++) {
        //座標更新
        pos[i] += speed[i];
    
        //画面の端にきた場合,バウンドする
        //左右
        if (pos[i].x < 0 || pos[i].x > ofGetWidth()) {
            speed[i].x *= -1;
        }
        //上下
        if (pos[i].y < 0 || pos[i].y > ofGetHeight()) {
            speed[i].y *= -1;
        }
    }
}

void testApp::draw(){
    //配列に格納された全ての座標に円を描く
    for (int i = 0; i < NUM; i++) {
        ofSetColor(31, 127, 255);
        ofCircle(pos[i].x, pos[i].y, 20);
    }
}
/* 《後略》 */

繰り返し クイズ

同時にアニメーションする円の大きさ、色をランダムにしてみる

制御構造(4) – 関数 (サブルーチン)

  • 関数プログラム中で意味や内容がまとまっている作業をひとつの手続きとしたもの、サブルーチン
  • openFrameworks (C++) では「関数 (function)」という呼び方が一般的

引数と戻り値

  • 関数へ渡す値(パラメータ) – 引数 (ひきすう, argument)
  • 関数が返す値 – 戻り値(return value)

関数の、「引数」と「戻り値」のイメージ

関数を利用したサンプル

アニメーションの色がフェードする機能を、関数化する

関数を定義する

関数名：

  • ofFadeColor()

引数：

  • 引数1：フェードする色のR成分 (int)
  • 引数2：フェードする色のG成分 (int)
  • 引数3：フェードする色のB成分 (int)
  • 引数4：フェードの透明度 (int)

戻り値：

  • なし

testApp.h

#ifndef _TEST_APP
#define _TEST_APP

#include "ofMain.h"

class testApp : public ofBaseApp{
    
public:
    void setup();
    void update();
    void draw();
    
    void keyPressed  (int key);
    void keyReleased(int key);
    void mouseMoved(int x, int y );
    void mouseDragged(int x, int y, int button);
    void mousePressed(int x, int y, int button);
    void mouseReleased(int x, int y, int button);
    void windowResized(int w, int h);
    
    //新規に定義したクラス関数
    void ofFadeColor(int r, int g, int b, int a);
};

#endif

testApp.cpp

#include "testApp.h"
#define NUM 100 //定数NUMを100と定義する

//円の座標を記録するための、クラス変数をNUM個の配列で定義
ofPoint pos[NUM];
//円のスピードを記録するための、クラス変数NUM個を定義
ofPoint speed[NUM];

void testApp::setup(){
    ofBackground(0, 0, 0);
    ofSetFrameRate(60);
    ofSetCircleResolution(64); //円の解像度
    
    //for文で繰り返すことで、全ての配列の座標を初期化
    for (int i = 0; i < NUM; i++) {
        //画面の中でランダムな位置に初期化
        pos[i].set(ofRandom(0, ofGetWidth()), ofRandom(0, ofGetHeight()));
        //スピードを初期化
        speed[i].set(ofRandom(-4, 4), ofRandom(-4, 4));
    }
}

void testApp::update(){
    //座標を、for文の繰り返しで全て更新
    for (int i = 0; i < NUM; i++) {
        //座標更新
        pos[i] += speed[i];
    
        //画面の端にきた場合,バウンドする
        //左右
        if (pos[i].x < 0 || pos[i].x > ofGetWidth()) {
            speed[i].x *= -1;
        }
        //上下
        if (pos[i].y < 0 || pos[i].y > ofGetHeight()) {
            speed[i].y *= -1;
        }
    }
}

void testApp::draw(){
    //色をフェードさせる関数を呼び出し
    ofFadeColor(0, 15, 63, 10);
    
    //配列に格納された全ての座標に円を描く
    for (int i = 0; i < NUM; i++) {
        ofSetColor(31, 127, 255);
        ofCircle(pos[i].x, pos[i].y, 20);
    }
}

//画面をフェードさせる関数
void testApp::ofFadeColor(int r, int g, int b, int a) { //引数と戻り値はなし
    ofSetBackgroundAuto(false); //背景を書き換えない
    ofEnableAlphaBlending(); //透明度を使用
    ofSetColor(r, g, b, a); //フェードする色と透明度を設定
    ofSetRectMode(OF_RECTMODE_CORNER); //四角形の描画モードをCORNERに
    ofRect(0, 0, ofGetWidth(), ofGetHeight()); //画面全体に四角形を描く
}
/* 《後略》 */

課題：アルゴリズムについて考えてみる – 円を描くには?

  • ofCircle や ofEllipse を用いずに円を描いてみる
  • 円を描くアルゴリズム
    • 一番真っ当な方法 – 三角関数を用いる方法
  • その他の方法で円を描くことは可能か?
  • その方法を、openFrameworksで表現してみる
  • 今日解説したプログラム構造(継続、条件分岐、ループ、サブルーチン)を駆使して考えてみる

どっちも真理

最近話題になっていた、ある人材開発コンサルタントの書いた「逃げるクセがついた人は、いつまでたっても「有能感」が満たされません」 というエントリを読んでいろいろ考えてしまった。

どんな仕事にも「有能感」という「人間は、自分は有能でありたい」という感覚がエネルギーとなっている。そして、その「有能感」は「現場で必死に戦い、努力して、結果を出すことでしか獲得できません」という意見。

確かにそうなのだと思う。すぐに達成感が得られて面白い仕事なんてほとんど無いだろうし、そんな簡単なものだったら「有能感」は薄いのだと思う。そういった点で、仕事って楽器をマスターしたり、スポーツをするのに似てるのかもしれない。

ただ一方で、全てはそうとも限らないような気もする。この人は成功した例だけれど、世の中には必死で与えられた仕事と格闘するものの、いつまでも「有能感」が満たされないまま、つらい思いで働いている人もたくさんいる。

このエントリとほぼ同じ時期に、Tumblrで見付けたとある企業のマニフェストにぐっときた。

http://shop.holstee.com/pages/about

こちらも、やはり真理のように思う。

これは、あなたの人生。好きなことをしなさい。頻繁に。気にいらないことは、変えなさい。いまの仕事が嫌なら、辞めなさい… (中略) … 人生は短い。

いまやっている仕事を続けていれば、常に成功するとは限らない。なので、せめて好きなことをするべきなのかもしれない。ただし、ある程度その仕事と格闘してみないと、その面白さがわからないのも事実。でも、人生は一度きりの短いものなので、その全てを確かめることはできないし。

難しい…

iPod nanoとNike+

DSC_7919

ちょっと忘れていたのだが、あと1ヶ月ちょっとで、ハーフマラソンの大会に出場するのだった。そろそろ本気でトレーニングしていかないと完走できなさそう。

モチベーションアップのために、ガジェット購入。iPod nanoとNike+ iPod Sport Kit 。Nikeの靴は個人的にあまり足に合わないので、Nike+のセンサーを普通のランニングシューズに装着するためのホルダーも購入した。Nike+のキットは既に届いていたのだが、今朝ようやくiPod nanoも配送されてきたので、早速試してみた。家の近所を軽くジョギング。

結論から言うと、かなり良い。

以前iPod touchを持って走ってみたことがあったのだが、やはり邪魔になって途中で持ってきたことを後悔してしまった。ランニングのアクセサリとしてはちょっと不向きと思った。ところが、新発売されたのがiPod nanoは相当小さい。クリップもついているので、単体で服に取り付けるとほとんど持っていることを意識しない。

適当に曲をSyncして、走る時間または距離を決めて、BGMを聞きながらスタート。定期的に経過時間と走行距離、現在のペースなどを音声で知らせてくれる。これで距離を測ったり時間を見る必要がなくなり、とても快適にランニングできる。

家に戻って、Nike+のアカウントに走行記録を同期すると、その日の成果がきれいなグラフで表示される。目標にあわせたトレーニングメニューを作成したり、登録ユーザ同士での「都道府県対抗バトル」なんかがあったりして、面白い。

しばらくは飽きずにトレーニングできそうだ。

カウンター

DSC_7552

Podcastで、タマフルの放課後ポッドキャストでの町山さんのBeck評を聞いた。映画Beckに関しては観ていないのでなんともいえないし、たぶん今後も観ることはないので特に感想は無いのだけれど、その論評の中で「ロックの歴史はだいたい10年単位で、高度に発達したらまたそれをカウンター勢力が生まれて破壊するくりかえし (大意) 」という発言があり、なるほどなあと思った。ロックというジャンル自体が高度に発展しすぎて煮詰ってくると、パンクやヒップホップなど常にそれを破壊する動きが生れてまたシーンが活性化する。そこで重要なのが「これだったら俺だってできるじゃん!」と感じられるかどうかという部分だという指摘。

確かにそうかもしれない。「自分だって頑張ればできそう」と思えるからこそ、バンドを始めてみようと思ったり、ギターを買ってみたり、シンセとシーケンサーを買って打ち込みをしてみるのかもしれない。今だったらターンテーブルを買ってDJをしてみるというのが一番身近な「俺でもできるじゃん」なのかも。

それが、最近感じたモヤモヤについての一つのヒントになった。

あまり詳細は書きずらいのだが、先日授業のゲストに某Webプロダクションの方が来て、プロジェクトの参加を募るプレゼンをしてたときに、意外なほど教室には熱気がなく、多くの学生があまり興味がなさそうな感じだった。うーんこれはFlashという技術が徐々に別のものに替わりつつある前兆なのか、と当初は思っていたのだけど、少し実態は違うのかもしれない。

要は、最近の大規模な広告系のキャンペーンサイトには「これだったら俺にもできるじゃん!」と感じられないのかもしれない。考えてみると、僕がFlashに夢中になって一番いろいろ試行錯誤していた時期は、有名なサイトをみても、頑張れば自分も作れそう、と思うものが多かった。もちろん、当時でも物量で勝負したり有名人の露出を売りにするサイトもあったが、メジャーな路線は努力すれば手の届く範囲にあった気がする。

ところが、最近はどうかというと、TVコマーシャルと遜色ない洗練された映像を駆使していたり、大規模なシステムを駆使しなければ実現できそうもなかったりするものが多くて「これなら俺でもできるじゃん」感がほとんど感じられないサイトが多いのかもしれない。アクセスしても、なんだかすごいね、で終ってしまう。

個人的な勝手な期待としては、こうした高度な表現が最高地点まで高まったときに、それをぶち壊すようなパンクな勢力が台頭きて欲しい。荒削りなんだけど、Webの面白さを再発見させてくれるようなサイトがいろいろ出てくるとまた「俺でもできるじゃん」という人達がたくさん生まれてくる。結果としてシーンがまた活性化するという。

もしかしたら、自分が耄碌しすぎて、そうした動きに気付いていないだけなのかもしれないが…

openFrameworks入門

ma2_100913

サンプルファイルのダウンロード

授業で解説したプログラムは下記からダウンロードしてください。

openFrameworksとは

openFrameworks とは?

C++によるクリエイティブなコーディングのためのオープンソースのツールキット

簡単な歴史

2004年、Zachary Liebermanがニューヨークのパーソンズ美術大学での大学院のクラスの作品制作のためのツールとして開発
その後、Zachary Lieberman、Theo Watson、Arturo Castroを主要メンバーとして、世界中の開発者と協力しながら発展

様々なメディアを駆使した作品を作りたい!!

様々な技術に精通しなくてはならない
サウンド、ビデオ、フォント、画像解析、物理演算
…etc.

openFrameworksを利用すると、
既存の道具(=ライブラリ)を設定なしに使用可能
→ 作品制作のための「糊」

開発のための「糊」

ネイティブアプリケーションとして動作する

→ 超高速!!

参考：100万個のパーティクルをアニメーションさせる
サンプルをダウンロード(openCL_demo) ※Mac OSXのみ

DIY → DIWO

Do It Yourself から
Do It With Others! (みんなと一緒に!)

openFrameworksを使ってみる

ダウンロードとインストール

URL http://www.openframeworks.cc/download

「FATバージョン」をダウンロードする

  • OSX – x-code FAT
  • Windows – visual studio 2008 FAT or code blocks FAT

※「FAT」バージョンとは、様々な拡張機能(addons)とそのサンプルが含まれた状態で配布されているパッケージ

サンプルを実行してみる

サンプルファイルの場所 → [oFをインストールしたフォルダ]/apps/examples/

  • プロジェクトのフォルダをオープンする
  • XCodeのメニューバーにある「ビルドして実行」を押す


「ビルドと実行」ボタン

新規プロジェクトの作成

新規にプロジェクトを作成する手順

  • 自分のプロジェクトのためのフォルダを”apps”フォルダ内に用意する
    • 例：[oFのフォルダ]/apps/myApps/
  • “examples/EemptyExample” フォルダをコピーする
  • 作成した自分のプロジェクトのためのフォルダにペースト
    • 例：[oF folder]/apps/myApps/emptyExample/
  • フォルダの名前を変更 (例：TestApp)
  • プロジェクトファイルの名前も変更 (例：TestApp.xcodeproj)
  • プロジェクトファイルを開く
  • 「グループとファイル」→「ターゲット」内の実行ファイルの名前も変更
    • 例：TestApp

openFrameworksの構造

(さしあたって) 編集するファイルは2つだけ

testApp.h

プログラム(正確にはクラス)についての情報を記述する

  • 全体で使用する関数 (動作)
  • 全体で使用する変数 (値)
  • 定数やマクロの定義

testApp.cpp

実際の処理を記述する、実装ファイル

  • ヘッダーファイルで定義された情報に従って、実際の処理の内容を記述していく

基本は、setup, update, draw の3つ

setup、update、draw の3つの構造は、testApp.cpp 内に最初から用意されている

XCodeでの、”testApp.h”と”testApp.cpp”の場所

openFrameworksの座標

  • 左上に原点 (0, 0)
  • X座標：左から右に値が増えていく
  • Y座標：上から下に値が増えていく

基本図形を描く

線：Line – ofLine(…)

  • ofLine(float x1, float y1, float x2, float y2)

長方形：Rectangle – ofRect(…)

  • ofRect(float x1, float y1, float w, float h)

円：Circle – ofCircle(…)

  • ofCircle(float x, float y, float radius)

楕円：Ellipse – ofEllipse(…)

  • ofEllipse(float x, float y, float w, float h)

色について

色の三原色 (光の混色)

Red, Green, Blue, Alpha (透明度)

色に関する設定

背景の色

  • ofBackground(int r, int g, int b)

背景を自動的に更新するかどうかの設定

  • ofSetBackgroundAuto(bool bAuto)

図形を描画する色

  • ofSetColor(int r, int g, int b, int a)

指定した色で塗り潰す

  • ofFill()

色を塗り潰さずに、枠線だけ描く

  • ofNoFill()

演習：基本的な図形描いてみる

参考 – 01_basicShapes

  • 座標系に慣れる
  • 色を塗りわけるには?
  • 透明度を設定して、色を重ねる

アニメーション

アニメーション作成の基本

setup()

  • 画面の初期設定をする
  • 開始時の物体の位置、大きさ、色、回転角度などを設定する

update()

  • アニメーションで変化するパラメータを更新する
  • 位置、大きさ、色、回転 など

draw()

  • 更新したパラメータを用いて、図形を描く

座標系の移動、回転によるアニメーション

回転：rotate

  • ofRotateX(角度) – X軸を中心に回転
  • ofRotateY(角度) – Y軸を中心に回転
  • ofRotateZ(角度) – Z軸を中心に回転

座標の移動：translate

  • ofTransrate(x, y, z)

座標情報の一時保存

  • ofPushMatrix();

座標情報の復帰

  • ofPopMatrix();

参考：02_Rotation – 四角形の中心を軸にして回転

参考：03_Rotation3d – X,Y,Z軸それぞれを回転→3Dに

インタラクション

  • マウスやキーボードの状態を検知して実行される関数が定義されている
  • update 〜 draw のループに割り込んで処理をする
定義 インタラクションの種類
keyPressed キーボードを押した瞬間に実行される
keyReleased キーボードを離した瞬間に実行される
mouseMoved マウスを移動した際に実行される
mouseDragged マウスをドラッグした際に実行される
mousePressed マウスボタンを押した瞬間に実行される
mouseReleased マウスボタンを離した瞬間に実行される

インタラクションの追加のイメージ

演習：インタラクションの実装

  • 先程の回転のアニメーションに、インタラクションを追加する
  • マウスの位置に応じて、回転スピードが変化するアニメーション
  • マウスのクリックで、回転の ON / OFF が切り替えるには?
  • キーボードでなにかしらの入力があると、画面をフルスクリーンに

繰り返し

プログラムの利点

  • 単純な処理を、何度でも飽きもせず、高速に実行してくれる
  • 単純な処理の反復により、複雑な処理を行う
  • 高速な計算機で始めて可能となる表現とは?

for文の書きかた

for (初期化式; 継続条件式; 再初期化式) {
    文;
}
  • 初期化式：初期化の際の条件式
  • 継続条件式：繰り返しを継続する条件式
  • 再初期化式：繰り返されるたびに実行される式

繰り返しによる表現

参考：04_RepeatMotion：移動の繰り返し → 複雑な形態が生成される

座標の計算によるアニメーション

座標系全体を回転/移動するのではなく、図形の座標を指定してアニメーションしてみる

ofPoint クラスを使用してみる

  • x, y, z 座標すべてを一つの変数で管理できて便利

例：

  • ofPint hoo;
  • hoo.x, hoo.y, hoo.z をまとめて記録できる

三角関数を利用した動き

三角関数を利用して、動きを生成してみる

  • X座標にSin、Y座標にCosを使用すると、どんな動きになるだろうか?
  • 円運動になる
    • Sin → sin(経過時間) * 半径
    • Cos → cos(経過時間) * 半径

参考：05_CircularMotion

円運動を反復する

  • 視覚的なハーモニーが生成される

参考：06_CircularMotions

三角関数による円運動1

  • X軸、Y軸の周波数を別々に変化させる

参考：07_WaveMotions

三角関数による円運動2

  • 三角関数を組み合せて、さらに複雑な動き、形態を生成

参考：08_HarmonicMotion

Example: Particle system 1

参考：09_Particle_01：複数の物体を移動する

Example: Particle system 2

参考：10_Particle_02：複数の物体の移動、その2

iTamabiアプリ発表

iTmabiの履修者の方々の開発したiPhoneアプリです。


ACCEL SEQUENCER

iPhoneをシェイクすることで音を入力していく、ステップシーケンサー。音色のセットを切り替えることも可能。複数台のiPhoneでセッションをすると楽しい。

  • 馬場美沙紀 (情報芸術)
  • 加治 洋紀 (情報芸術)
  • 出雲優子 (情報芸術)
  • 星野泰宏 (情報芸術)

barcode clock

現在の時間をバーコードで表示する時計アプリ。表示されるのは、実際に読み取り可能な本物のバーコード。

  • 長谷川昇平 (情報デザイン)

A Cloclwork Light

光の粒が時間の変化とともに飛び散りながら変化する。表示される光は、実際にライトを撮影して素材にしている。

  • 林響太朗 (情報デザイン)
  • 梶原恵 (情報デザイン)
  • 浮島佳祐 (情報デザイン)

Draw Sound

画面上を指で線を描くと、その形からメロディーが生まれる。

  • 長谷川昇平 (情報デザイン)

dripple

画面をタップすると、波紋が拡がり、水滴が落ちる音で音楽を奏でる。

  • 中谷綾花 (グラフィックデザイン)

DropClock

重力によってデジタル時計の文字がiPhoneの傾きと一致して、重力によって崩れていく。しばらくするとまた文字が表示され、また崩れるという繰り返し。

  • 高橋昂司 (情報芸術)

GulinClock

デジタル時計の後ろで、物理演算によって運動する球体が動きまわる。

  • 中谷 嵩 (プロダクトデザイン)

hagunet planet

ネコのキャラクターを操作して敵を避けていく、本格的なアクションゲーム。画面をタッチしてロケットの推進力をコントロールする。

  • 櫻井瑶子 (情報デザイン)

未来派気取り

二進数の数値によって時間がリアルタイムに変化し、経過していく過程をビジュアライズしている。

  • 土居下太意 (情報芸術)

montage

モンタージュ写真を作成するアプリ。画面をタップして、目と鼻と口を左右にスライドさせて、様々なキャラクターの断片から新たな顔を生成する。

  • 中森源 (情報デザイン)

PANDA

パンダのキャラクターが上下にバウンド。画面をタップするとバウンドのスピードが変化する。

  • 難波江明香 (油絵)

Potope

iPhoneのカメラで撮影した写真の色情報を分析して、万華鏡のような模様がアニメーションする。

  • 矢野哲太郎 (情報芸術)

PIKADOOOM

iPhoneのマイクを通して入力された周囲の音にあわせて、空から稲妻が落ちてくる。

  • 笠井明日菜 (情報デザイン)

Rough Coaster

手書きアニメーションによる、3Dローラーコースター。

  • 芹澤 諒 (情報デザイン)

sensitiveA

一見普通のアナログ時計だが、画面をタッチすると敏感(sensitive)に反応して針が震える。

  • 杉浦知実 (情報デザイン)

sensitiveD

Sensiteive A のデジタル版。画面タッチでデジタルの数値が敏感に反応する。

  • 杉浦知実 (情報デザイン)

SoundSwitch

マトリクス上にならんだスイッチをON/OFFすることで演奏するシーケンサー。スイッチの状態とONにするタイミングで、リズムパターンを生成する。

  • 木村功平 (情報芸術 大学院)

一日時計タマビ行き

時計の背景に、実際の時間と連動して多摩美の一日の様子が変化する。

  • 藤野雅子 (情報デザイン)

Tamabi百景

キャンパスの地図上に表示されたポイントをクリックすると、その場所で描かれた絵画やイラストが表示される。地図と連動したポートフォリオ。

tamanekorogashi

多摩美に生息する猫の写真のスライドショー。画面をタップすると、運動する円を配置できる。

  • 今泉杏奈 (情報芸術)

あたりゲーム

3人の中から一人のあたりを決める抽選ゲーム。それぞれ自分の色を決めて、回転する円が一番上の位置に来たらあたりになる。

  • リム メグミ
  • ジャン ウンス
  • アン ヘリム