前回の講義「第6回: メディア芸術基礎 – 画像データを扱う、 画像の分析・再合成」で紹介した、画像の分析・再合成の手法を独自に拡張し、オリジナルの画像の再合成プログラムをProcessingで作成する。元になる画像は自由。前回のプログラムは、こちらのリンクを参照してください。
これまでProcessingで表現してきた内容は、基本的に平面の上に描かれる２次元の図形やアニメーションでした。今回はここに奥行を加えて３次元空間での表現をProcessingでプログラミングする手法について解説していきます。
今回は、Addonを使用したopenFrameworksの実践編の２回目として、様々なセンサーを使用していきます。
最近になって、元々はゲームのためのコントローラーとして開発されたKinectを筆頭に、手の骨格やジェスチャーを認識可能なLeap Motionなど、10年前くらいであれば数十万〜数百万円していたような高度なセンサーデバイスがとても安価に使用できるようになりました。また、こうしたセンサーは仕様が比較的オープンに設計されているので、ゲームだけでなく様々なプログラムに応用可能となっています。
今回は、こうした技術の中から、Kinectの深度情報を取得するofxKinect。さらにKinectで取得した深度情報から人体の骨格やジェスチャーを認識可能なofxOpenNI、Leap Motionを使用して手の骨格やジェスチャーを取得可能な、ofxLeapMotionをとりあげて、そのセットアップから使用法について解説します。
プログラムのサンプル、スライドなどの資料は、Githubのリポジトリからダウンロードしてください。
ProcessingのPImageクラスは、外部のビットマップ画像(Jpeg, GIF、PNGなど)をデータとしてプログラムに読み込むことができます。読み込んだ画像は単に画面に表示するだけでなく、色や明度やサイズを変更して表示することができます。さらには、画像に含まれる全てのピクセルの色情報を読み取り配列に格納することが可能です。そのデータをもとに別の画像を再生成することが可能となり、読み込んだ画像データの色情報をもとにした多彩な表現が可能となります。
今回はProcessingに画像を読み込んで、分析再合成することで、様々な表現の可能性について探っていきます。
HTMLのブロックレベル要素(見出し、段落など文書を構成する基本要素)は、ボックスと呼ばれる矩形(四角形)領域を生成します。この領域の概念のことを「ボックスモデル」と呼びます。各ボックスのテキストや画像などの内容の周辺には、パディング(Padding)、ボーダー(Border)、マージン(Margin)の順に周辺の領域を持っています。CSSでWebページをデザインしていく際に、このボックスモデルの理解が欠かすことのできない前提知識となります。今回はこのボックスモデルに焦点をあてて、CSSを活用したデザインについて解説していきます。
授業のスライドは、下記から参照してください
講義で使用する、HTMLのサンプルは、下記からダウンロードしてください。
Addon(アドオン)とは、openFrameworksに機能を拡張するためのライブラリーやフレームワークです。processingのLibrariesのように、openFrameworks単体ではできなかった様々な機能を実現することが可能となります。Addonは、oF本体の開発者以外でも独自に開発して追加することが可能であり、繰り返し用いる機能や、CやC++で記述された既存のライブラリーをopenFrameworksに統合することができます。今回は、Addonの利用の初回として、ofxOpenCvとofxCvを扱います。
メディアアート作品では、カメラから取得した映像を用いてインタラクションを行う事例が沢山存在しています。映像を使ったインタラクションは、特別なセンサーを使用することなく、また鑑賞者に直接接触することなく高度なインタラクションが可能となり、多くの可能性を秘めた手法です。また、近年では映像の中から物体を認識したり、映像の中の微妙な差分や動きを検出したりといった、コンピュータ・ビジョン（Computer Vision = CV）の技術が発展し、高度な映像解析が活用できるようになりました。今回は、こうしたCVの技術の中でもオープンソースで多くの利用実績のあるOpenCVというCVのためのライブラリをopenFrameworksで活用する方法について紹介していきます。
プログラムのサンプル、スライドなどの資料は、Githubのリポジトリからダウンロードしてください。
今回は、より複雑なアニメーションに挑戦します。たくさんの図形を、一定の手続き（= アルゴリズム）にそって動かしてみます。動きのアルゴリズムはいろいろありますが、今回はその一例として、三角関数（sin, cos , tan）を使用した動きをとりあげます。三角関数の定義は、直角三角形の角度とそれを取り囲む辺の比率で定義されます。しかし、同時に円運動を座標に変換する仕組みとしても活用可能です。この仕組みを応用してアニメーションするとどうなるか、三角関数を用いたアニメーションで美しいパターン「ビジュアルハーモニー」を生成する手法を紹介します。
ここまで4回にわたって解説してきたHTMLは、文書の中に目印をつけて(マークアップ)、その構造を記述するための言語でした。その結果ブラウザに整形されたページが表示されるものの、文字の色や大きさ、背景の色、行間やフォントなど、そのデザインはブラウザであらかじめ決められた固定のものでした。今回からはこのHTMLで構造を記述された文書に対してデザインを行うための新たな仕組みについて解説していきます。HTMLに対してその表示形式を制御するしくみとして「スタイルシート」というものがあります。HTMLではその代表的な仕組みとして、CSS (Cascading Style Sheets) があります。このCSSとHTMLによって、体裁と構造を分離して記述することが可能となり、現在のWebデザインの基本となる考え方となっています。今回はこのCSSの仕組みと基本についての導入を行います。
講義で使用する、HTMLのサンプルは、下記からダウンロードしてください。
これまでやってきたように、openFrameworksで位置と運動のベクトル（ofVec2）を操作することで、アニメーションを作成することができました。単純な動きの場合はこうした座標の足し算引き算で対応可能です。しかし、ここからさらに発展させて、よりリアルな動きを実現しようとすると、限界があります。今回は、単なる座標操作ではなく、運動の背後にある物理的な原理を理解して、その本質に迫ります。
アイザック・ニュートンは、運動の法則を基礎として構築した、力学体系を構築しました（ニュートン力学）。物体の運動や力、質量といったものは、ニュートンの運動の法則によって説明できます。
今回は、このニュートンの運動の法則を援用しながら、様々な動きや力についてopenFrameworksで実装しながら、動きに関する理解を深めていきます。
プログラムのサンプル、スライドなどの資料は、Githubのリポジトリからダウンロードしてください。
今回からいよいよ動きのある表現（= アニメーション）について扱っていきます。アニメーションを実現するには、まず時間を扱う基本構造を知る必要があります。Processingでは、setup(), draw() という2つのブロックにわけて、初期化と更新を行うことでアニメーションを実現しています。まず始めはこの基本構造について理解します。次に、これから動きを扱う際に、向きと大きさをもった「ベクトル」という概念を理解します。ベクトルを理解することで、位置や運動を整理して記述することが可能となります。最後に、この基本構造をベクトルを活用して簡単なアニメーションを作成します。
今回で、HTML入門の３回目になりました。HTMLの主要な要素についての入門編は今回で最後になります。今回は、情報を整理するための要素に着目します。まず始めに、いわゆる「箇条書き」で情報を簡素に列挙するための構造「リスト」を構成する、ul要素、ol要素、li要素を紹介します。次に、表形式で行と列の２次元で情報を整理するための構造「テーブル」を構成する、table要素、tr要素、th要素、td要素を紹介します。
本日のスライド資料は下記のリンクから参照してください。