yoppa.org


TouchDesigner中級編(5) – TouchDesigner + Shader (GLSL) 入門

Shaderとは、もともとは3Dコンピュータグラフィクスで、シェーディング (陰影処理) をするプログラムのことを指していました。従来は、開発者やデザイナーは、グラフィクスカード (GPU) に固定機能として実装された定形の処理しか使えませんでした (固定機能シェーダー)。2000年代に入って、プログラマブル・シェーダーが登場します。これまでブラックボックスだったシェーダー自体が、プログラム可能になりました。OpenGLではGLSLというプログラミング言語が策定されシェーダーをプログラムすることが可能です。画面上の膨大なピクセル情報を、高い並列処理性能を持つGPUで実行することにより、CPUで実行するよりもはるかに高いパフォーマンスを実現できるようになりました。

TouchDesignerでは、GLSL TOPを使用してGLSLを記述してテクスチャーとして書き出すことが可能です。今回はTochDesignerでのGLSLの使用法の導入を行います。

スライド資料

サンプルプログラム


openFrameworks Addon 3 – Open Sound Control (OSC) によるアプリケーション間通信 ofxOsc

今回は、Addonの使用の3回目として、ネットワークを活用したインタラクションについて考えていきます。ofxOscは、openFrameworksでOpen Sound Control(OSC)という通信プロトコルを使用するためのAddonです。OSCは、openFrameworksのアプリケーション同士をEthernetを介して通信することができ、これにより、ネットワークを介して複数のユーザが1つのアプリケーションを操作することが可能となります。またopenFrameworksのアプリケーションを他のアプリケーション、例えば、Max/MSPやPd、SuperCollider、さらにはTouchOSCといったiPhoneアプリなどからコントロールすることが出来るようになります。

スライド資料

サンプルプログラム


p5.js Libraryを使う 1 – p5.soundでサウンドプログラミング (2)

今回も前回に引き続きp5.soundを使用したサウンドプログラミングを行います。今回は、前回最後に紹介したFFTによるサウンドの解析の手法を発展させてサウンドのビジュアライズに挑戦します。FFTクラスを使用すると、音に含まれる周波数成分をリアルタイムに解析することが可能となります。この機能を使うことで、音の周波数成分を可視化して「音を視る」ことが可能となります。今回は、Soundライブラリーを用いたサウンドファイルの再生から、FFTを使用した音のビジュアライズまでを順番に解説していきます。FFTによって分析されたスペクトルの情報を、色や大きさに変換することで、音を様々な手法で視覚化していきます。

映像資料

スライド資料

最終課題について

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

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

  • 読み込むサウンドファイルは自由とします (できれば著作権フリーのもので
  • 音響を独自の視点でビジュアライズしてください
  • 最終課題の発表会は、12月11日と18日の2回で行います
  • 希望者のみの発表とします
  • 今回のアンケートは最終課題でどのような作品を作りたいかその内容を記述して回答してください

本日のアンケート

アンケート


openFrameworks Addon 3 – Open Sound Control (OSC) によるアプリケーション間通信 ofxOsc

今回は、Addonの使用の3回目として、ネットワークを活用したインタラクションについて考えていきます。ofxOscは、openFrameworksでOpen Sound Control(OSC)という通信プロトコルを使用するためのAddonです。OSCは、openFrameworksのアプリケーション同士をEthernetを介して通信することができ、これにより、ネットワークを介して複数のユーザが1つのアプリケーションを操作することが可能となります。またopenFrameworksのアプリケーションを他のアプリケーション、例えば、Max/MSPやPd、SuperCollider、さらにはTouchOSCといったiPhoneアプリなどからコントロールすることが出来るようになります。

映像資料

スライド資料

サンプルプログラム

本日の課題

ofxOscを使用して、ローカルで (自分のマシン内) で2つのアプリケーションを連動して表現してください!

  • 物体の移動
  • 色の変化
  • 入力は、キーボードマウスの他、マイク、カメラなどいろいろな手段を用いても可
  • 次回の授業の冒頭で発表してください

アンケート

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

アンケート


TouchDesigner中級編(4) – パーティクル表現

パーティクル (Particle) またはパーティクルシステム (Particle System) とは、たくさんの細かいスプライト画像、3Dモデル、またはその他のCGオブジェクトを使って、様々な現象をシミュレーションする表現手法です。パーティクルを用いて炎、爆発、煙、流水、火花、落葉、雲、霧、雪、埃、流星、毛髪、毛皮、草地など様々な現象や物体のふるまいをシミュレーションすることが可能です。

TouchDesingerでは、Particle SOPを用いることでとても簡単にパーティクルの生成と制御が可能です。また、生成したパーティクルにスプライト画像を適用したり、ジオメトリインスタンシングを用いてパーティクルの一粒ごとに3Dオブジェクトを配置することも可能です。今回はTouchDesingerのパーティクル表現についていろいろ実験していきます。

スライド資料

サンプルプログラム


TidalCycles応用 1 – 構造を作る

前回、前々回とTidalCyclesの様々な機能について学んできました。セットアップと起動の方法、パターン生成の基本、パターンを変形する様々な関数、エフェクト、テンポ、乱数、コード、スケールなどTidalCyclesではライブコーディングに関する膨大な機能を使用することが可能です。今回は、これまでの内容を総合して、TidalCyclesで演奏のための構造をつくるにはどのようにすれば良いのか、そのヒントとなる実例をいくつか取り上げます。今回紹介する方法が全てではありませんが、実際のライブコーディングの演奏の際のヒントとなるでしょう。

スライド資料


openFrameworks Addon 2 : 物理シミュレーション ofxBox2D

今回は物理シミュレーションを行うことができる、ofxBox2DというAddonをとりあげます。

ofxBox2Dは、Box2DというC++で書かれた2Dの物理演算エンジンをopenFrameworksのAddon化したものです。Box2Dは質量、力、速度、摩擦といった古典物理学(ニュートン力学)の演算を高速に行う、物理法則の演算のためのライブラリーで、もともとはC++で書かれていますが、現在では、Java、C#、Python、JavaScriptなど様々な言語に移植されています。ofxBox2Dを使うことで簡単な物理法則を援用したアニメーションだけでなく、2次元のゲームやインタラクティブなコンテンツなどに応用可能です。今回は、ofxBox2Dの導入から、形を定義して物理世界に追加する方法、大量の物体を追加するための工夫などを紹介していきます。

スライド資料

サンプルファイル

本日の課題

徐々に複雑な内容になってきて、一からオリジナルのプログラムを1週間で作るのは難しい内容になってきました。そこで…

  • 課題: ofxBox2Dのサンプルを改造して何かひとつオリジナルな要素を追加する
    • ofxBox2Dにはたくさんのサンプルプログラムが付属
    • それらのサンプルをとりあえず手当たり次第にビルド
    • 気に入ったプログラムをピックアップ
    • 何か1箇所でも良いので変化を加えてみる
    • もちろん複数の要素をいろいろ変更してもOK!
  • 次週の授業の冒頭で発表します!

openFrameworks Addon 2 : 物理シミュレーション ofxBox2D

今回は物理シミュレーションを行うことができる、ofxBox2DというAddonをとりあげます。

ofxBox2Dは、Box2DというC++で書かれた2Dの物理演算エンジンをopenFrameworksのAddon化したものです。Box2Dは質量、力、速度、摩擦といった古典物理学(ニュートン力学)の演算を高速に行う、物理法則の演算のためのライブラリーで、もともとはC++で書かれていますが、現在では、Java、C#、Python、JavaScriptなど様々な言語に移植されています。ofxBox2Dを使うことで簡単な物理法則を援用したアニメーションだけでなく、2次元のゲームやインタラクティブなコンテンツなどに応用可能です。今回は、ofxBox2Dの導入から、形を定義して物理世界に追加する方法、大量の物体を追加するための工夫などを紹介していきます。

スライド資料

映像資料

サンプルファイル

本日の課題

徐々に複雑な内容になってきて、一からオリジナルのプログラムを1週間で作るのは難しい内容になってきました。そこで…

  • 課題: ofxBox2Dのサンプルを改造して何かひとつオリジナルな要素を追加する
    • ofxBox2Dにはたくさんのサンプルプログラムが付属
    • それらのサンプルをとりあえず手当たり次第にビルド
    • 気に入ったプログラムをピックアップ
    • 何か1箇所でも良いので変化を加えてみる
    • もちろん複数の要素をいろいろ変更してもOK!
  • 次週の授業の冒頭で発表します!

アンケート

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

アンケート


p5.js Libraryを使う 1 – p5.soundでサウンドプログラミング(1)

p5.jsは、その設計思想として、構造をあまり複雑にせず創造的な部分に集中できるよう焦点を絞っています。グラフィクスとモーションを作り、マウスやキーボードといった汎用的な入力デバイスに反応する機能が基本です。しかし、それ以上のことを行うために、p5.jsではライブラリー (Libraries) というものが用意されています。ライブラリーとは汎用性の高い複数のプログラムを、再利用可能な形でひとまとまりにしたものです。p5.jsでも用途に応じて様々なライブラリがまとめられ、入手できるようになっています。

今回はp5.jsのライブラリーを使う第1弾として、p5.sound使用します。p5.soundライブラリーを使用することで、サウンドファイルの再生や、マイクやライン入力のキャプチャーだけでなく、音にエフェクトをかけたり、波形自体を生成したりと、サウンドに関する様々な機能が活用できます。今回は、Soundライブラリーを用いたサウンドファイルの再生から、音量による音のビジュアライズまでを順番に解説していきます。

映像資料

サンプル制作用サウンドファイル (beat.wav)

スライド資料

本日の課題

本日作成した最後のサンプルプログラム (音量を円の半径で表現) をもとにして、読み込んだサウンドファイルの音量で何かが変化するプログラムを作成してください。

  • 色、大きさ、形 …etc.
  • 読み込むサウンドは自由に変更しても良い
  • OpenProcessingに提出
  • 本日のタグ sfcdesipro201120

アンケート

提出課題

タグで検索: sfcdesipro1120

音のやつ, color, 王様の処刑曲_遊戯王DSOD, ball move music, ThreeCirlces, こんとらすと, scratch sound, リズム, 音の波動, MOUTH, music, 音楽, SoundStream, いけ、モン◯ターボール!, 復活の時, beat, 11月20日の駄作, 鼓動, beatwave, CivilizationAdventure, FREE, 赤青ビート, 踊る図形, 青と緑, 目標:むなしくないクリスマス, sound box, sound, シンプルイズザベスト, ザ・ビートズ, Sound view, よくみるやつに似てるやつ, のんびり10秒聴いてみて, THREEcircles, 音に巻き込まれる, 光明, Color, 早くなるstars, . cam, sound test, Dynamic Wah, 楽曲に合わせた楕円, Midnight, picopico, いろいろ, ディスコ, nice sound, 笑うピエロ, そろそろクリスマスですね, 目玉スピーカー, 目玉スピーカー, Lipstick, DJ, かろやかなsound, Dancing Laser, music circle, 耳をすませば, 楽曲に合わせた楕円, 見られてる, sound, Voice Game, サウンドメーター, Spain, beat of kadai, white sound, Now Playing, impact, 「聖なる夜」, 水面に映る蛍の舞, feel the beat, Sound-Visualized Network, クリック&サウンド, 回転, Peak, play ball, p5 sound test, 変形な太陽, DJの気分, sfc体操, sfc体操, 音を操るmii, sound, Escape, break out, make your lives extraordinary , Sound Business, 音量で速さ変更ボール, somecircle, 音ゲー 作ってみた, MusicFlower, my sketch, 円だよ, WALKMAN, Overture, Spotlights, Disco, 雪が奏でるクリスマスコーラス, 音虫, 信号機, 音蛍, SoundVis&RandomCol, shaken beads, kakkoii Bubbles, Very beautiful music visualizer, ドゥンドゥンDooon, 曲の速度変化, king of color, Interaction between particles and sound visualizer, sikakusikakusikaku, 1126, green purple , sound, Moving Egg, Wave Wave Wave, rmsを理解する, 左右, move, SpainCirc, f2020, sound×colour, SoundC, 波形+QWERでSE, Sound, Sound, 色でわかる音の周波数, audio vis, magneticField, Sound Visualizer, パルス, increasing balls, 俺のスピーカー, 音に合わせて荒ぶる紫陽花, ぽく・ぽく・ぽく・チーン, Love, new year, クラブ, Music Visualizer, 青春っていつも何かがたりない, ターンテーブル / TURNTABLE, 色と音, Sound Pulse, Sound Bar, (:3, DJブース, heart.sound, kadai, 青い夕焼け, , Black&White, myfav, 崩壊する夢, sound, 照明, MUSIC, Waving Sound, なし, soundESC, 音量に対応してメータが反応して色も変化する仕組み, , Play with Sound, My sound, sound, soundpop, ダンシングBOX, beatです, wave & circle, 音量注意, Ball Ball You, otoasobi, iPhone12欲しいね~, 宇宙からの光, sound, Some Synth!, 京王線, 特に思いつかない, Sound, maybe not going well, Sprint, 万華鏡, Homura , Sound, changeRGB with rms, デザインとプログラミング第六回課題, Homura , いろとりどり, Sound circle, 音と光のワンダーランド, sound training, Yやで, 音と光のワンダーランド, 色の波動, マンション最上階, HANABI, 脆弱性, , sound1, circle of sound, soundbox, 追憶, 1-(次+平+階)+正, sound.test, the sea at night(夜の海), SOUNDTHINKING, mic, 簡単なオーディオスペクトラム, 踊る花/Flower_Rock, soundrect, 律動, Bomber, Sound component, 明け方の空、山並み, 雪だるま, 滲み出る抵抗器感 溢れ出るoz感, 課題, DJ, Celestial Sphere, Musik, 音円, 大きさをぴったり当てるゲーム, Sound, クリックしてみて, the record, Disco Ball, アナログとデジタル, red spark, sound design, HIKAKIN, 未完, , assignment, Music, kadai07, p5.sound rect,


TidalCyclesの基本2 – 様々なパターンを生成する関数

Image result for Euclidean Rhythm

今回も前回に引き続きTidalCylesの基本について学びます。前回は “” で囲まれた1つのサイクル (小節) の中にbdやcpといったサンプル名を記述していってリズムを生成しました。しかしTidalCyclesにはパターンを生成したり変形するための様々な関数が用意されており、それらを駆使することで思いもかけないリズムパターンやメロディーが生成されていきます。今回は、そうしたリズムを変形させる関数についてとりあげていきます。ユークリッドリズム、タイムシフト、ポリリズム、ポリミーターなど複雑なパターンを生成するための様々な関数について実際に音を出しながら試していきます。

スライド資料