yoppa.org


情報メディアデザイン 2: 指示(instructions)から生成されるかたち / 最終課題出題

Wall Drawing 289 | MASS MoCA
Sol LeWitt, Wall Drawing 289 | MASS MoCA

ミニマル・アートやコンセプチャル・アートの先駆者として知られる、ソル・ルウィット (Sol LeWitt) は、指示 (Instructions) によって描かれる壁画作品を数多く制作しています。(参照: SOL LEWITT: A WALL DRAWING RETROSPECTIVE)壁画は本人が描くのではなく、作品が展示される際にどのように描くのか記述された「指示書」に従ってギャラリーの壁面に第三者の手によって描かれます。作品の実体は壁画そのものではなくその指示内容なのです。この考え方はコードによって形を生成する手法ととても良く似ています。デザイン基礎演習 IIの情報メディア分野の最終課題は、Sol Lewittの壁画のように特定の「指示」に従って描かれた形を生成します。

スライド資料

最終課題

特定の指示(instruction)に従って描かれた静止した図形をコードで生成してください。指示の内容は各自自由に考えてください。作品はp5.jsで作成しOpenProcessingに提出してください。

  • 作品を生成している「指示」は、OpenProcessinの作品情報の “Description” に記述
  • Webブラウザのウィンドウ全体に表示してください
  • 以下のテンプレートを参考にしてください

提出方法

  • OpenProcessingに提出したURLを以下のフォームに記述して送信してください (締切: 1月22日 23:59まで)
  • 投稿フォーム

最終課題について / openFrameworksのインタラクション

Reactive Books, John Maeda, 1995 – 1999

インタラクション (Interaciton)とは英語の「 inter (〜の間に)」と「action (動作)」を合成した言葉です。つまり、インタラクションとは「人間が何かアクション (動作) をした時、そのアクションが一方通行にならず、相手側の機器やプログラムがそのアクションに反応してリアクションをする」ということを意味します。今期のクリエイティブ・コーディングの講義の最終課題はこのインタラクションをテーマにします。

今回は、openFrameworksで実現可能な最もシンプルなインタラクションの方法である、マウスとキーボードによるインタラクションを取り上げます。openFrameworksでは、通常はsetup()、update()、draw() のループの中でアニメーションを生成します。しかし、マウスやキーボードの動作によってこのループの中に割り込むことのできる「イベント」と呼ばれる関数がいろいろ用意されています。例えば、マウスポインタを動かした時や、マウスボタンを押した時、またはキーボードを押した時など、ユーザーの動作に反応するプログラムを作成することが可能となります。

最終課題

最終課題のテーマ: 「インタラクションを表現する」

openFrameworksを使用してインタラクション (ユーザーとプログラムとの相互作用) のある作品を制作してください。インタラクションの手段は自由です。

  • マウス
  • キーボード
  • 音楽、音響
  • 映像 (動画ファイル、カメラ)
  • ネットワーク (OSCなど)

1月25日の最後の講義で講評会を行います!

スライド資料

サンプルプログラム


プログラミング開発環境の構築 / コードで表現する

A. Michael Noll, Vertical-Horizontal Number Three (1964) / Gaussian-Quadratic (1963)

プログラミングをする際に、効率的に作業を行うことができるように環境構築することはとても重要です。使用するテキストエディターとその拡張機能、フォント、バージョン管理システムなど、熟練したプログラマーはそれぞれこだわりの開発環境を構築しています。

今回は、まずコードで表現するにあたって、開発環境の構築を行います。この演習では以下の環境でコーディングを行っていきます

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

後半は、そうした歴史を踏まえた上で、 p5.js 実際に図形を描いていきます。まずp5.js の操作基本を解説し、簡単な図形を描きながらp5.jsでのプログラミングの基本を学びます。

スライド資料


最終課題発表会 (2回目)

本日は、前回に引き続き最終課題の発表の2回目です! 提出された作品は以下のリンクから閲覧可能です!

最終課題について

最終課題テーマ「音を視る – サウンドのビジュアライズ」

最終課題は、今回解析したp5.soundライブラリーのFFTを用いて、音響をビジュアライズした作品を制作してください。

  • 履修者は全員 (最終発表を希望した人もしなかった人も) 最終作品を提出してください
    • 最終発表した作品から改良したり、別のものにしても構いません
  • 最終締切は12月18日までとします。
  • 読み込むサウンドファイルは自由とします (できれば著作権フリーのもので
  • 音響を独自の視点でビジュアライズしてください
  • OpenProcessingに提出する際に必ず「sfcdesipro20final」とタグ付けしてください

最終課題提出フォーム (発表なし)

アンケート

この授業を履修している方は全員以下のアンケートに答えるようにしてください。


最終課題について / openFrameworksのインタラクション

Reactive Books, John Maeda, 1995 – 1999

インタラクション (Interaciton)とは英語の「 inter (〜の間に)」と「action (動作)」を合成した言葉です。つまり、インタラクションとは「人間が何かアクション (動作) をした時、そのアクションが一方通行にならず、相手側の機器やプログラムがそのアクションに反応してリアクションをする」ということを意味します。今期のクリエイティブ・コーディングの講義の最終課題はこのインタラクションをテーマにします。

今回は、openFrameworksで実現可能な最もシンプルなインタラクションの方法である、マウスとキーボードによるインタラクションを取り上げます。openFrameworksでは、通常はsetup()、update()、draw() のループの中でアニメーションを生成します。しかし、マウスやキーボードの動作によってこのループの中に割り込むことのできる「イベント」と呼ばれる関数がいろいろ用意されています。例えば、マウスポインタを動かした時や、マウスボタンを押した時、またはキーボードを押した時など、ユーザーの動作に反応するプログラムを作成することが可能となります。

映像資料

スライド資料

サンプルファイル

最終課題について

最終課題のテーマ : 「インタラクションを表現する」

インタラクションのあるopenFrameworksのスケッチを作成してください。インタラクションの手段は自由です。

  • マウス
  • キーボード
  • 映像 (カメラ)
  • ネットワーク (OSCなど)
  • …etc

1月15日の最後の講義で講評会を行います!

アンケート

授業に参加した方は以下のアンケートに回答してください。


TidalCycles応用 4 映像との連携 – OSCによるアプリケーション間接続

TidalCyclesはそれ自身には音を生成する機能は持っておらず、通常は演奏の情報を送信してSuperCollider内のSuperDirtで音響を生成しています。この際に用いられるのがOSC (Open Sound Control) という通信プロトコル (通信の方式) です。通常はTidalCycleとSuperCollider間のみで連携しているのですが、設定をカスタマイズすることでこのOSCの情報をさらに別のアプリケーションへと転送することが可能です。このOSCを例えばProcessingなどの映像のためのアプリケーションで受け取ることで、TidalCyclesでの演奏の情報をビジュアライズすることかできるようになります。今回は、OSCについての解説からProcessingとの連携の基本までを行います。

スライド資料

サンプルプログラム


TouchDesigner中級編(7) – プロジェクトの構造化とGUI、Container COMP、Widget COMP

TouchDesignerのプロジェクトは階層構造を持っています。作成しているプロジェクトの中に複数のオペレーターをまとめた「サブパッチ」のような構造を作ることが可能です。複数のオペレータをまとめるにはContainer COMPを使用します。Container COMPは、複数の入力と出力を設定したり、他のオペレータの値を参照することが可能です。さらに、このContainerの仕組みを応用してGUI (グラフィクスユーザーインターフェイス) が作成できます。Widgetというユーザーインターフェイスに特化したCOMPを使用してボタンやスライダーといった様々なパーツを組合せて独自のGUIを構築して画面上に配置したり、別ウィンドウで表示することが可能です。

スライド資料

サンプルファイル


openFrameworks Addon 4 : 顔をトラッキングofxFaceTracker2 (2)

今回も前回に引き続き、ofxFaceTracker2を使用した顔面のトラッキングを用いた表現を探求していきます。前回行った顔の特徴点 (LandMarks) を元にした合成では、正面を向いた状態ではうまく合成できるものの、顔を上下や左右に傾けた際に不自然な状態になってしまいました。これは、合成があくまで2次元平面上で行われていたことに起因しています。今回は、さらに顔の3次元空間での位置と回転を取得することにより、3D空間でも違和感のない表現に挑戦していきます。

スライド資料

サンプルプログラム


最終課題発表会 (1回目)

sfcdesipro20final

本日は最終課題発表の1回目です!

今回発表した人もしなかった人も含めて、課題の最終提出に関して以下のようにしましたので、必ず提出するようにしてください。

最終課題について

最終課題テーマ「音を視る – サウンドのビジュアライズ」

最終課題は、今回解析したp5.soundライブラリーのFFTを用いて、音響をビジュアライズした作品を制作してください。

  • 最終発表の受付は締切ました (12月10日)
  • 履修者は全員 (最終発表を希望した人もしなかった人も) 最終作品を提出してください
    • 最終発表した作品から改良したり、別のものにしても構いません
  • 最終締切は12月18日までとします。
  • 読み込むサウンドファイルは自由とします (できれば著作権フリーのもので
  • 音響を独自の視点でビジュアライズしてください
  • OpenProcessingに提出する際に必ず「sfcdesipro20final」とタグ付けしてください

最終課題提出フォーム (発表なし)

本日のアンケート

以下のアンケートに記入してください。

アンケート


openFrameworks Addon 4 : 顔をトラッキングofxFaceTracker2 (2)

今回も前回に引き続き、ofxFaceTracker2を使用した顔面のトラッキングを用いた表現を探求していきます。前回行った顔の特徴点 (LandMarks) を元にした合成では、正面を向いた状態ではうまく合成できるものの、顔を上下や左右に傾けた際に不自然な状態になってしまいました。これは、合成があくまで2次元平面上で行われていたことに起因しています。今回は、さらに顔の3次元空間での位置と回転を取得することにより、3D空間でも違和感のない表現に挑戦していきます。

映像資料

スライド資料

サンプルプログラム

「メディアアート・プログラミング II」今後の予定

  • 12月11日 (本日) : 顔のトラッキング ofxFaceTracker2 (2)
  • 12月18日 : 最終課題のテーマ出題
  • 12月25日 : 最終課題のヒントとなる内容のレクチャー
  • 1月8日 : 森山先生レクチャー
  • 1月15日 : 最終課題の発表会

本日のアンケート

本日の授業に参加した方は下記のアンケートに回答してください。