課題の内容確認
ポイント
時間」をテーマに作品を制作
(リニューアルした) Hara Museum ARC の展示室で展示する作品という想定
メディアを用いた作品 作品のデモと展示プランをプレゼン
スライド資料
次回までの課題 : 時間を表現する
今週作ってきたスケッチをさらに詳細に
以下にあげた作品を参考により「時間」について深く考える
次回はきちんとプレゼンテーションする形式で
スライド (パワポ) などの資料
スケッチ、デモ
3分程度で説明
時間について
TimeLine – A Brief Introduction To The History Of Timekeeping Devices (時計の歴史)
VIDEO
時計の歴史 (Wikipedia) https://ja.wikipedia.org/wiki/%E6%99%82%E8%A8%88%E3%81%AE%E6%AD%B4%E5%8F%B2
しかし現代の物理学では時間は絶対的なものではない!
一般相対性理論下では時間は相対的なもの (双子のパラドクス)
The Twins Paradox Primer (Rotating TIME!)
VIDEO
時間を表現する
人力時計
Real Time: Schiphol Clock by Maarten Baas
Standard Time by Mark Formanek
VIDEO
Industrious Clock by Yugo Nakamura
VIDEO
Book Clock by Masaaki Hiromura
VIDEO
メカニカル & タイポグラフィ Continue Time by Sander Mulder
3.16 Billion Cycles by Che-Wei Wang & Taylor Lev
Water Clocks by Bernard Gitton
Ferrolic by Zelf Koelman
A Million Times by Humans Since 1982
A Study Of Time by rAndom International
Qlocktwo by Biegert & Funk selectively
https://qlocktwo.com/de_en/
ソフトウェア & クラウド All the Minutes by Studio Moniker https://alltheminutes.com/
Last Clock, by Jussi Angesleva & Ross Cooper https://www.chronoramic.org/the-last-clock-installation
Webバージョン https://lastclock.net/
Webバージョン https://lastclock.net/
The Colour Clock http://thecolourclock.com/
12 O’Clocks by John Maeda http://maedastudio.com/2004/rbooks2k/twelve.html
Ross Cooper, Jussi Ängeslevä “Tha Last Clock” 2001 時間は、私たちが出来事や変化を認識するための基礎的な概念です。時間の概念は芸術や哲学や自然科学など多くの分野で重要なテーマとなっています。時間の認識無くして文明は存在しません。現代の私たちの社会もまた時間によってコントロールされています。時間の流れの中の各瞬間を「時間」「分」「秒」といった時刻の単位で区他の時点や時間の区分して共通化することで日常生活は成立しています。
今期のデザイン演習IIの第2課題では「時間」をテーマに作品を制作します。そして、さらに制作した作品をHara Museum ARC で発表することを想定して展示のプランを作成します。
課題
以下の条件で「時間」を表現する作品を制作してください
Hara Museum ARC の展示室で展示する作品という想定で展示プランを発表する何らかのメディアを用いた作品であること
映像作品
インスタレーション
サウンドアート
デバイスアート
ネットアート …など
作品のデモと展示プランをプレゼン
展示概要
ステートメント (作者の意図を文章で表現)
テックライダー (展示のための技術資料)
デモプログラム など
VIDEO
今回は、音響合成やアルゴリズムによる作曲のためのプログラミング言語であり統合開発環境のSuperCollider を使用して音響合成の基本を紹介します。SuperColliderは単体でもとても強力な開発環境ですが、その自由度の高さや音質の良さから、TidalCyclesやSonicPiなどのライブコーディングの環境でも音響合成に用いられています。
今回はSuperColliderによる基本的な波形による音の生成から、最後はフィードバックを用いたノイズの生成まで解説していきます。
/*
* 基本(Hello World)
* -----------------------------
*/
{SinOsc.ar()}.play //モノラル
{SinOsc.ar().dup}.play //ステレオ
{SinOsc.ar(220).dup}.play //周波数を変更
{Saw.ar(440).dup}.play //波形を変更、鋸波
{Pulse.ar(440).dup}.play //波形を変更、パルス波
{Blip.ar(440).dup}.play
{SinOsc.ar([440, 442])}.play //左右を別の周波数で
{SinOsc.ar(XLine.kr(20, 20000, 10.0)).dup}.play //周波数を変化
{SinOsc.ar(110 + SinOsc.ar([120, 121]).exprange(100, 2000))}.play //FM
/*
* ちょっと応用
* -----------------------------
*/
//ハーモニー
({
var ratio = 3.0/2.0;
var freq = 220;
var detune = 1.001;
var osc1 = SinOsc.ar([freq, freq*detune]);
var osc2 = SinOsc.ar([freq*ratio*detune, freq*ratio]);
osc1 + osc2
}.play)
//ハーモニー + フィルター
({
var ratio = 4.0/3.0;
var freq = 110;
var detune = 1.001;
var osc1 = Saw.ar([freq, freq*detune]);
var osc2 = Saw.ar([freq*ratio*detune, freq*ratio]);
var out = RLPF.ar(osc1 + osc2, SinOsc.kr(0.02).exprange(80, 12000), 0.4);
out
}.play)
//ハーモニー + フィルター + リバーブ + ディストーション
({
var ratio = 4.0/3.0;
var freq = 110;
var detune = 1.001;
var osc1 = Saw.ar([freq, freq*detune]);
var osc2 = Saw.ar([freq*ratio*detune, freq*ratio]);
//var mix = RLPF.ar(osc1 + osc2, SinOsc.kr(0.02).exprange(50, 20000), 0.4);
var mix = RLPF.ar(osc1 + osc2, LFNoise1.kr(0.5).exprange(50, 20000), 0.6);
//var out = GVerb.ar(mix, 100, 10.0);
//AnalogVintageDistortion.ar(out, 0.1, 0, 0.9, 0.9);
GVerb.ar(mix*20, 100, 10.0).distort;
}.play)
/*
* フィードバック!!
* ----------------------------------------
* まず以下のコマンドでFeedbackをインストール
* インストールしたら、Recompile Librariesを実行
*/
Quarks.gui
// フィードバックノイズ
({
var ratio = 4.0/3.0;
var freq = 110;
var detune = 1.002;
var osc1 = Saw.ar([freq, freq*detune]);
var osc2 = Saw.ar([freq*ratio*detune, freq*ratio]);
var mix = osc1 + osc2;
var in = mix;
var fbNode = FbNode(2, 0.25);
var signal = fbNode.delay;
signal = RLPF.ar(signal * 1.5 + in, LFNoise1.kr(0.2).exprange(100, 10000), 0.4).distort;
fbNode.write(signal);
GVerb.ar(signal, 60, 10);
}.play;)
// サウンドファイルをフィードバック
({
//読み込むサウンドファイルをフルパスで指定
var path = "C:/Users/tado/Desktop/guitar-solo.wav";
var buf = Buffer.read(s, path);
var in = PlayBuf.ar(1, buf, loop:1.0, doneAction: 0.0);
var fbNode = FbNode(2, 2.0);
var signal = fbNode.delay;
signal = RLPF.ar(signal * 1.5 + in, LFNoise1.kr(0.2).exprange(200, 10000), 0.4).distort;
fbNode.write(signal);
GVerb.ar(signal);
}.play;)
// SynthDef版
// フィードバックをパラメータを変えてどんどん重ねていける!
// クロスフェード機能付き
(
SynthDef("feedbackme",
{
arg gate = 1, ratio = 1.5, freq = 110, detune = 1.002, gain = 1.0, amp = 0.5, flow = 100, fhigh = 10000;
var osc1 = Saw.ar([freq, freq*detune]);
var osc2 = Saw.ar([freq*ratio*detune, freq*ratio]);
var mix = osc1 + osc2;
var in = mix;
var fbNode = FbNode(2, 0.25);
var signal = fbNode.delay;
signal = RLPF.ar(signal * gain + in, LFNoise1.kr(0.1).exprange(flow, fhigh), 0.4).distort;
fbNode.write(signal);
Out.ar(0,
GVerb.ar(signal, 60, 10)
* EnvGen.kr(Env.asr(10, amp, 20), gate, doneAction: Done.freeSelf)
);
}
).add
)
~s1 = Synth("feedbackme");
~s2 = Synth("feedbackme", [ratio: (4.0/3.0)]);
~s3 = Synth("feedbackme", [ratio: (5.0/4.0)]);
~s1.set("gate", 0);
~s2.set("gate", 0);
~s3.set("gate", 0);
先週の補足
今回は物理シミュレーションを行うことができる、ofxBox2DというAddonをとりあげます。
ofxBox2D は、Box2D というC++で書かれた2Dの物理演算エンジンをopenFrameworksのAddon化したものです。Box2Dは質量、力、速度、摩擦といった古典物理学(ニュートン力学)の演算を高速に行う、物理法則の演算のためのライブラリーで、もともとはC++で書かれていますが、現在では、Java、C#、Python、JavaScriptなど様々な言語に移植されています。ofxBox2Dを使うことで簡単な物理法則を援用したアニメーションだけでなく、2次元のゲームやインタラクティブなコンテンツなどに応用可能です。今回は、ofxBox2Dの導入から、形を定義して物理世界に追加する方法、大量の物体を追加するための工夫などを紹介していきます。
スライド資料
サンプルファイル
アンケート
授業に参加した方は、本日のアンケートに回答してください。
アンケート
TouchDesigner中級編の3回目となる今回は、前回に引続きオーディオリアクティブな表現を探求します。前回は波形の情報からRMS (二乗平均平方根) を算出して音量によるビジュアライズを行いました。しかし、音量の情報だけではビジュアライズの限界があります。
実は我々の耳は音を波形ではなく、周波数に分解して知覚しています。ですので、波形をそのま操作して表示しても、あまり音と一致した映像にはなりません。音を周波数の帯域ごとの音の成分に分解するには、フーリエ変換という手法を用います。これにより、音を周波数帯域ごとの強さにわけて取得することが可能となります。フーリエ変換は、コンピュータ内で高速に処理する高速フーリエ変換（FFT）というアルゴリズムが考案され、現在ではPC内でリアルタイムに変換していくことが可能です。今回は、このフーリエ解析を利用して、TouchDesignerで音を可視化してみましょう。
スライド資料
サンプルプログラム
アンケート
本日の講義に参加した方は以下のアンケートに答えてください。
今年 (2022年) は、機械学習による画像生成の技術に大きなブレイクスルーがありました。特に拡散生成モデルによる画像生成は、今までになかった高精細で高精度の画像をテキストやイメージから生成することが可能です。(参考 : Image Synthesis 画像生成 )
拡散生成モデルによる画像生成の実装のひとつStable DiffusionはGoogle Colaboratoryで気軽に体験可能です。以下の手順で試していきましょう。
diffusersを用いたStable Diffusionの利用手順
1. (もし無ければ) Googleアカウントを作成
Googleアカウント作成
2. Hugging Faceにアカウント作成
Hugging Faceは様々な機械学習や自然言語処理を対象としたオープンソースのコミュニティです。今回はここから公開されている学習モデルを使用します。以下からアカウントを作成してください。右上の「sign up」ボタンから登録していきます。
Hugging Face
3. Hugging Faceトークン発行
Google Colaboratoryで使用するトークンを発行します。以下のページを参考にアクセストークンを発行してください。その際に
Name : notebooks
Role : write
にするようにしてください。
アクセストークンの発行手順 (Hugging Face)
4. Stable Diffusionのモデルのライセンス条項に同意する
今回使用するノートブックは、Stable Diffusion v1-4を使用しています。発行したトークンで利用するには、ライセンス条項などに同意する必要があります。下記のページからライセンス条項を確認した上で、「I have read the License and agree with its terms」にチェックを入れて、「Access repository」ボタンをクリックしてください。
CompVis/stable-diffusion-v1-4 · Hugging Face
5. diffusersのノートブックで画像生成!
以下のGoogle Colaboratoryのノートブックを実行していくと、画像が生成可能です。いろいろなテキストや生成方法を試してみましょう! ※途中でアクセストークンを入力する必要があります。3で発行したアクセストークンを使用してください。
Stable Diffusion with diffusers
Addon(アドオン)とは、openFrameworksに機能を拡張するためのライブラリーやフレームワークです。processingのLibrariesのように、openFrameworks単体ではできなかった様々な機能を実現することが可能となります。Addonは、oF本体の開発者以外でも独自に開発して追加することが可能であり、繰り返し用いる機能や、CやC++で記述された既存のライブラリーをopenFrameworksに統合することが可能となります。
今回はAddonの導入を、まずofxGuiというプロジェクトにGUIを追加するアドオンで行います。ofxGuiを使用することで、例えば周囲の環境が異なる場所でインスタレーションを設置する時など、すぐにパラメータを最適な状態に調整して保存することができ、とても便利です。
中間課題
ofxGuiを用いて、GUIを操作すると何かが変化するグラフィックをopenFrameworksで作成してください。締切は、次々回 (12/5) の授業までとします。授業内で発表してもらいます。
変化する要素は何でも構いません (色、大きさ、速さ、etc)
複数の要素が変化するものだと、さらに良いです
2D、3D、形態や内容などには限定はありません、自由に発想して作ってください
スライド資料
サンプルファイル
Project Generatorが使えない人は、以下のテンプレートを利用
アンケート
本日の授業に参加した方は、以下のアンケートに答えてください。
投稿フォーム
今回は、関数 (function) についてとりあげます。といっても、ここまでの講義で関数は頻繁に使用してきました。ここまでで使用してきた関数は主に2つの場合に分けられます。
1つ目は、プログラミングしているp5.jsのスケッチからp5.jsのライブラリー内で定義されているの関数を呼び出しです。例えば
//circle()関数の呼び出し
circle(400, 300, 100);
といったp5.jsで実行していた命令は、p5.jsの関数を呼び出していたのです。
2つ目は、 p5.jsのライブラリーから呼び出されている関数を定義する記述です。これは、setup() や draw() 内で書いていたプログラムに相当します。
//setup関数の定義
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(60);
...
}
関数はプログラムを処理内容ごとにモジュール化して、プログラムの可読性を高めデバッグを容易にします。
また、関数は引数(arguments)を受け取り、内部の処理のパラメータとして使用することが可能です。このことにより1つの関数で様々なバリエーションを持つことが可能となります。
p5.jsで実際に描画しながら関数について学んでいきましょう。
スライド資料
投稿作品とランキング
投稿作品
おめでとうございます!!
映像資料
https://youtube.com/watch?v=JAqX0lsx0Nk%3Fversion%3D3%26rel%3D1%26showsearch%3D0%26showinfo%3D1%26iv_load_policy%3D1%26fs%3D1%26hl%3Den-US%26autohide%3D2%26wmode%3Dtransparent
サンプルコード
本日の課題
関数を用いて作品を制作してください!
課題: 関数 (function) をつかって大量に形を増殖させる
引数によってバリエーションをつけながら何か形を描く関数を作成してください。作成した関数をdraw()関数から呼び出して大量に形を描いてください。
投稿したURLをアンケートから提出
投稿の際に sfc221118 のタグをつけてください! ※タグは既に提出済みの人がいるので変更しません
締切: 2022年11月30日(水) ※三田祭休みの関係で1週間延長しました まで!
アンケート
今回も、前回の提出作品の人気投票を行います!
前回のタグ sfc21111 1 でOpenProcessingで検索 (検索方法をSketches that are tagged にする必用あり)
一番良いと思った作品に1票投票 (自信があれば自分の作品でも可)
TouchDesigner入門(4) – 音楽に連動させよう! の回では、音楽の音量に反応させて図形を描く基本を学習しました。今回から数回は、このテクニックをさらに応用して、音の様々なパラメータを解析したビジュアル表現について探求していきます。まず初回の今回は、音量による反応をより詳細に取り上げていきます。
今回の内容は、比嘉了さんによる東京藝術大学での講義「映像音響処理概説 2019」の「第11回: 音反応 」を参考にしています。
参考映像
[triggering2018] Live performance for new 3 tracks (demo ver.)
Alva Noto – unitxt/univrs (Derivative Version)
VIDEO
[CHANNEL13] Daisuke Tanabe x HEXPIXELS スライド資料
サンプルファイル
アンケート
本日の講義を受講した方は以下のアンケートに回答してください。
TouchDesigner中級編の3回目となる今回は、前回に引続きオーディオリアクティブな表現を探求します。前回は波形の情報からRMS (二乗平均平方根) を算出して音量によるビジュアライズを行いました。しかし、音量の情報だけではビジュアライズの限界があります。
実は我々の耳は音を波形ではなく、周波数に分解して知覚しています。ですので、波形をそのま操作して表示しても、あまり音と一致した映像にはなりません。音を周波数の帯域ごとの音の成分に分解するには、フーリエ変換という手法を用います。これにより、音を周波数帯域ごとの強さにわけて取得することが可能となります。フーリエ変換は、コンピュータ内で高速に処理する高速フーリエ変換（FFT）というアルゴリズムが考案され、現在ではPC内でリアルタイムに変換していくことが可能です。今回は、このフーリエ解析を利用して、TouchDesignerで音を可視化してみましょう。
中間課題 (11/16出題)
TouchDesignerを使用して、サウンドの視覚化による表現をしてください。音量による視覚化 (前回の内容)、FFTを使用したスペクトルによる視覚化 (今回の内容) のどちらの手法を用いても (もしくはその両方を使用しても) 構いません。サウンドファイルはAudio File In CHOPでデフォルトで使用されているサウンドデータでOKです。
締切 : 11月30日 (水) ※講義内で発表会を行います
スライド資料
サンプルプログラム
アンケート
本日の講義に参加した方は以下のアンケートに答えてください。
