yoppa.org


Drawing Machine – openFrameworksで生成的な形を描く

今回は、今期のラボの課題の1つである “Drawing Machine” のヒントとなるトピックとして、プログラムを用いて「生成的(Generative)」な表現をする手法について考えていきます。

まず始めに、ある場所から上下左右に完全なランダムな確率で動く点をつくり、その軌跡を観察してみます。さらに、プログラミングの手法を洗練させ、ランダムに動く点を「クラス(Class)」として独立して記述する方法について学びます。ランダムに動く点が完成したら、次にその移動の確率を微妙に変化させてどのように変化するのか探っていきます。

後半は、さらに高度なノイズを扱います。Perlin Noiseというアルゴリズムを使用して、より複雑な動きをを生成します。また、その軌跡をプロットして有機的な形態を生成します。

スライド

サンプルファイル

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


「バードマン あるいは(無知がもたらす予期せぬ奇跡)」感想

たまには、ブログっぽい記事を。

映画「バードマン」が、なかなかいろいろ考えさせられる良い作品だったので、忘れないうちに感想を書いてみる。レビューなどという大層なものではなく、あくまで個人的な感想として。

以下、映画の結末に触れているので(いわゆる「ネタバレ」)これから観に行こうとしている方は読まない方がいいかも。

この映画をどう捉えるかは、最後のシーンをどう解釈するかによって大きく変化するように思う。あえて多様な解釈が可能にしてあるのだろう。

個人的には、延々と擬似的な長回しが続いた後、初めてカットが切り替わって以降の世界は、現実ではなく妄想や空想の中での話だと解釈した。そもそも冷静に考えると、いろいろおかしい。

  • 銃でこめかみを打ち抜いたのに、鼻が吹っ飛んだだけで済むなんて、しかも治療であっさり回復なんて都合の良い話すぎる
  • 落ち目の役者が舞台で自殺を図っただけで、一晩にしてヒーローになるわけがない
  • 劇の終演後、ほとんどの観客がスタンディングオベーションする中、静かに(悲しげに?)席を立った評論家が、その作品を激賞するのか?
  • 病室に置いてある新聞のタイトルが、“Birdman” になってる

などなど。つまり、リーガン(主人公)は既に死んでいるというのが素直な解釈なのだと思う。空を飛ぶ火の玉もそれを暗示している。

誰しも若い頃は自分は万能だと思っているけど、歳を重ねることで徐々に自分が凡庸で理想からほど遠い人間であることを思い知らされる。それでも理想を求めて葛藤する。リーガンもまた、自分は「バードマン」なんて子供騙しのキャラクターで終わる人間ではないと、本格的な役者として復活して人生を一発大逆転しようともがいている。

しかし、現実は厳しい。「演劇界」では所詮リーガンはヒーローを演じていたうすっぺらな映画業界人でしかなく、評論家からは、はなから相手にされない。

うっかり楽屋口から締め出され、パンツ一丁でブロードウェイを歩いた動画がネットでバズるという体験から転機が始まる。それまで、ネット上では存在すらしていなかった自分が、一夜にして有名人となる。ひさびさに、多くの人達から承認される喜び。拳銃で自殺するという突飛な発想も、世の中を悲観してというのではなく、さらにスキャンダラスな演出をすることでより、家族や世間から承認されたいという発想だったのではなかろうか。

この作品のテーマ、40歳を過ぎた自分にとっていろいろ身につまされて、心を揺さぶられる。多くの中年は、「俺はこんなもんじゃないはずだ」という心の中のバードマンと葛藤してる。スーパーヒーロになった自分を夢想しつつ、単調な現実を生きていく。なかなか重い。

ちなみに、劇中劇で使われるレイモンド・カーヴァーの「愛について語るときに我々の語ること」を読んだことがない。この作品の内容を知っていると、また感想は変わってくるのかもしれない。


第3回: メディア芸術基礎 – くりかえし

先週に引き続いて、Processingを用いたプログラミングの基本を解説します。まず始めに、数値や文字などの値を格納するための「箱」のような機能「変数」について解説します。その後で、変数を活用しながら、何度もくりかえして処理を行う方法について考えていきます。

スライド資料


Shadertoneで遊んでみた – 導入編

overtone-logo

Shadertoneで遊んでみたら、なかなか面白かったので、備忘録としてブログに書いてみる。

Shadertoneは、ソースコードがGithubで公開されている。

このリポジトリの要約をみると “A mix of www.shadertoy.com and Overtone” とある。理解してみるとなかなか的を得た要約なのだけれど、最初は何のことやらという感じだったのでここから解読してみる。

まず、shadertoyの方だけれど、こちらはGLSL(Shader)をWebブラウザ上で実行とコーディングする環境。GLSL sandbox に近い感じ。まあ、こちらは理解できる。

問題は、Overtoneのほうで、こちらはオフィシャルのWebサイトが用意されている。

ここの説明の、「SuperColliderとClojureをくっつけたもの」という部分が要点となる。SuperColliderは、コンピュータ音楽言語でありオーディオ生成エンジンとして、すっかりお馴染なので割愛。Clojureとは、Lispの方言の一つで、いま話題の「関数型プログラミング言語」のひとつ。Javaのバーチャルマシンの上で動作する。

つまり、ここまでを要約すると、

  • Shadertoneは、OvertoneとGLSLのライブコーディング環境をミックスしたもの
  • Overtoneは、ClojureからSuperColliderの音響合成を行うライブコーディング環境

ということ。

別の言語体系で、SuperColliderの音響合成エンジンで音を生成するというアプローチは、Sonic Piに似ている。それもそのはずで、OvertoneおよびShadertoneの作者Sam Aaronは、Sonic Piの開発者でもある。Sonic Piと同様、Overtoneもライブコーディングの機能を重視している。さらに、複数人でソースを共有しながらのライブコーディングも可能となる模様。Overtoneの実行している様子は、本人によるデモがわかりやすい。

Sonic Piが、どちらかというと簡易な文法でライブコーディングを体験できる教育用途に主眼を置いているのに対して、Overtoneはより本格的にゴリゴリとライブコーディングする環境という印象。さらにOvertone/Shadertoneは、インストールと環境構築がややハードルが高いのがちょっとやっかいな感じ。手元のOS X 10.3.3で動かした際の環境構築をざっと書き出してみる。

まず、Clojureを対話的に実行可能なテキストエディタを用意する必要がある。イケてるライブコーディング用エディタとして話題のLight Tableや、vimからでも実行可能なのだが、ここでは作者であるSam Aaronが使用しているEmacsで環境構築してみる。

まず、OS Xにいろいろインストールするのに便利なHomebrewの環境を用意する。Homebrewの導入はこちらを参照。

Homebrewの環境が整ったら、emacsを最新版(2015年4月現在だと、24.5)にしておく。

% brew install emacs

次に、Clojureのプロジェクト生成を自動化してくれるLeiningenという環境を入れる。これもHomebrewをつかうと楽。

% brew install leiningen

次に、Emacsをライブコーディング用にチューンナップする。Sam Aaron自ら、自分の環境をパッケージングしてEmacs-Liveという名前で公開している。こちらもターミナルから1行コマンドでインストール可能。

% bash < (curl -fksSL https://raw.github.com/overtone/emacs-live/master/installer/install-emacs-live.sh)

次に、GithubからShadertoneをZipでダウンロード、もしくはCloneする。

Shadertoneをダウンロードしたフォルダに移動して、emacsを起動

% cd shadertone
% emacs

すると、Emacs-liveでバキバキにチューンナップされたEmacsが起動する。

screenshot_902

まずは、Shadertoneのサンプルを試してみる。emacsから、example/00demo_intro_tour.clj を開いてみる。

C-x C-f example/00demo_intro_tour.clj

screenshot_903

サンプルを開いた状態で、emacsで以下のコマンドを実行

M-x cider-jack-in

これで、Shadertoneを対話的に実行する環境が起動する(起動にはしばらく時間がかかるので注意)。

このあとは、それぞれの行の末尾に移動して、

C-c C-e

を入力するとその行が評価される。例えば、

(t/start "examples/sine_dance.glsl")

の末尾に移動して C-c C-e をすると、ウィンドウが起動してShaderが表示される。ここから先は下記の映像を参照してみてほしい。

こんな感じで、どんどんライブコーディングしながら音と映像を同期していける。なかなか素晴らしい。

だいぶ長くなってきたので、続きはまた今度。


HTML(2):ハイパーリンク、インライン画像、リスト

今回も前回に引き続き、HTMLの要素について、その構造や使用方法について解説していきます。今回は、文書ないにハイパーリンクを設定する「a」要素、画像を貼り付ける「img」要素、リスト(いわゆる箇条書き)のための「ul」「ol」「li」といった要素をとりあげます。どれも、文書の構造を記述するためにとても重要な要素です。しっかりと理解して身に付けましょう。

スライド資料

本日のスライド資料は下記のリンクから参照してください。


openFrameworks はじめの一歩

いよいよ今回からopenFramweorksを使用してコーディングを始めます。

これからコーディングを始めるにあたって、まず制作のための環境を整えていきたいと思います。その手始めとして、Gitというバージョン管理システムの導入、およびGitを使うためのWebサービスGithubの設定を行います。これにより、過去のバージョンからの変更履歴を常にバックアップしながらの開発が可能となり、とても作業効率が上がります。サンプルファイルの配布もGithubを経由して行う予定です。

Gitの設定が完了したら、いよいよopenFrameworksでのコーディングを始めます。今回は、openFrameworksを用いたプログラミングの「最初の一歩」となるような導入を行います。

スライド


第2回 : かたちとコード

今回は、「かたちとコード」の関連について考えていきます。

まず始めに、1950年代〜70年代の、コンピューター黎明期から発展期におけるコード(プログラム)による様々な視覚表現について紹介します。過去の作家がどのようなアイデアで、何を表現しようとしてきたのか、その歴史を辿ります。

後半は、いよいよProcessingでの実践に入ります。今回は、まずProcessingの操作基本を復習し、簡単な図形を描きます。

スライド資料


HTML(1):HTMLとは何か、HTMLの基本構造、段落、見出し

今回から、いよいよWebサイトの制作を開始します。実際に作業を初める前に、先週解説したWebを構成する重要な3つの技術、URL、HTTP、HTMLについて復習します。この仕組みを理解した上で、今回からはHTMLという言語について学んでいきます。HTMLとはどのような言語なのか、どうやって記述するのかといった基本について解説します。

スライド資料

スライド資料は下記のリンクから参照してください。


第1回: メディア芸術の概要

今回は、初めての授業となりますので、まずはこの授業の概要、授業の進め方、スケジュール、採点と成績についてガイダンスを行います。

授業の概要を理解した上で、前半はこの授業の主題となる「メディア芸術」とは何かということを簡単に整理します。そして後半は、この授業で当面の間使用する予定の開発環境であるProcessingの導入を行います。

授業スライド


第1回: クリエイティブコーディングの現状

この演習の火曜日(田所担当)では、コード(プログラム)を使用して作品を制作するための技術を実践的に学びます。

現在、こうしたアート、デザインといった表現のためのコーディング環境は「クリエイティブ・コーディング」と呼ばれ、徐々に注目を集めるようになってきています。初回の授業の今回は、まずこうした「クリエイティブ・コーディング」をとりまく現状を紹介し、それが自身の作品にどう生かすことができるのか考えていきましょう。

スライド