この講義ではp5.jsを使用してクリエイティブ・コーディングの基礎を学んできました。今回は、これまでのまとめと、ここから先へ進むためのステップについて解説します。
p5.jsの基礎を身に付けてから次に進む様々な手段がありますが、ここでは次の3つの方法を紹介します。
さらに高速化を追い求める – openFrameworks
ノードベースのビジュアルプログラミング – TouchDesigner
ゲームエンジンの活用 – Unreal Engine
openFrameworks は、クリエイティブコーディングのためのC++のオープンソースツールキットです。その最大の利点はスピードです。p5.jsでは処理が追いつかずコマ落ちしてしまうような表現も高速な演算で実現可能です。より本格的な作品制作を目指す方にはp5.jsを習得した後、openFrameworksにステップアップすることをお勧めします。openFrameworksには、p5.jsのライブラリーにあたるアドオン(addons)という拡張機能があり、膨大な数のアドオンが公開されている のも魅力の一つです。
TouchDesigner は、ノードベースのビジュアルプログラミング環境です。様々な機能が内包された箱(オペレーター)を画面上に配置して、それらをパッチケーブルで接続していくことで、多彩で高機能なプログラム開発が可能となります。ただし、TouchDesignerはDerivative社が開発販売している製品であり、p5.jsやopenFrameworksとは違いオープンソースのプロジェクトではありません。ただし、非商用の利用で、画像の最大サイズが1280×1280 Pixel以内であれば、無料で使用することが可能です。
Unreal Engine は、ゲームエンジンに分類されるゲームを開発するための環境です。様々な最新技術をとり入れることで驚くようなリアリティーのある表現が可能となります。Unreal Engineもオープンソースのアプリケーションではありませんが、学生のみなさんであれば完全に無料でフルの機能を使用可能です。
自分の作品の表現形態やテーマにあわせて、次のステップへ進んでいきましょう!
スライド資料
アンケート
本日の講義に参加した方は以下のアンケートに答えてください。
この講義ではopenFrameworks用してクリエイティブ・コーディングの基礎を学んできました。今回は、これまでのまとめと、ここから先へ進むためのステップについて解説します。
p5.jsの基礎を身に付けてから次に進む様々な手段がありますが、ここでは次の2つの方法を紹介します。
ノードベースのビジュアルプログラミング – TouchDesigner
ゲームエンジンの活用 – Unreal Engine
TouchDesigner は、ノードベースのビジュアルプログラミング環境です。様々な機能が内包された箱(オペレーター)を画面上に配置して、それらをパッチケーブルで接続していくことで、多彩で高機能なプログラム開発が可能となります。ただし、TouchDesignerはDerivative社が開発販売している製品であり、p5.jsやopenFrameworksとは違いオープンソースのプロジェクトではありません。ただし、非商用の利用で、画像の最大サイズが1280×1280 Pixel以内であれば、無料で使用することが可能です。
Unreal Engine は、ゲームエンジンに分類されるゲームを開発するための環境です。様々な最新技術をとり入れることで驚くようなリアリティーのある表現が可能となります。Unreal Engineもオープンソースのアプリケーションではありませんが、学生のみなさんであれば完全に無料でフルの機能を使用可能です。
自分の作品の表現形態やテーマにあわせて、次のステップへ進んでいきましょう!
スライド資料
アンケート
本日の授業に参加した方は以下のアンケートに回答してください。
アンケート
この講義「データ構造とアルゴリズムでは」変数と定数、反復、乱数、論理式と条件文、アニメーションとベクトル、配列の操作、関数、そしてオブジェクト指向プログラミングと様々なトピックスを扱ってきました。最終課題はこれらの内容を総動員して、Patatap (https://patatap.com/ ) のようなインタラクティブなオーディオビジュアル作品をp5.jsで制作します。
Patatapはとてもシンプルなインタラクションで構成された作品です。キーボードを操作すると、それぞれのキーにシンプルなアニメーションが割り振られていて、同時にサンプリングされたサウンドが鳴るようになっています。仕組みはとても単純なのですが、キーボードをリズムにあわせてタイピングすることで音と映像が同期して、まるでVJのパフォーマンスをしているような気分を味わえます。キーボードの組み合わせは無限にあるので、いつまでも飽きることがありません。
今回は、最終課題に向け、p5.jsをつかってPatatapを制作するための方法について解説していきます。
映像資料
VIDEO
スライド資料
最終課題提出
最終課題「Patatapを作る」
最終課題制作のオンデマンドの教材を参考にしながら「Patatap 」のようにキーボードからのタイピングで音と映像が同期する作品を制作してください。
投稿したOpenProcessingのURLを提出
投稿の際に sfc23final のタグをつけてください!
締切 : 2024年1月10日 (水)
最終課題講評会で発表する方もこちらに回答してください
最終課題提出フォーム
最終課題講評会での発表希望調査
この授業の最終課題の講評会を2022年1月14日と21日の2回に分けて開催します。講評会での発表をした方は一律10点 (100点満点中) 加算します。発表を希望する方は以下に学籍番号と氏名を記入してください。
締切 : 2023年1月10日 (水)
最終課題発表希望登録フォーム
今後のスケジュール
2024年1月12日 : 最終課題講評会 (1)
2024年1月19日 : 最終課題講評会 (2)
サンプルプログラム
この講義では、前半はStrudel 、後半はTidalCycles を使用してライブコーディングについて学び実際に演奏を行ってきました。今回は、ライブコーディングによる音楽制作環境としてもう一つ別の環境Sonic Pi を紹介します。
Sonic Piはプログラミング言語Rubyを元にした音楽のためのライブコーディング環境です。その特徴として、アプリケーションをインストールするだけでライブコーディングで音楽を演奏する統合開発環境として使用できる点があげられます。グラフィック系のアプリケーションで例えると、音楽版のProcessingのような環境というとイメージしやすいかもしれません。
今回は、Sonic Piの基本を通して別のライブコーディング環境を体験します。
スライド資料
アンケート
本日の講義に参加した方は以下のアンケートに答えてください。
今回も前回に引き続いてTouchDesignerとGLSLを組合せて高度な表現に挑戦します。前回はフラグメントシェーダー (ピクセルシェーダー) を用いてテクスチャー (TOP) を生成する2次元的な表現に留まっていました。今回はさらにGLSLを応用して3次元の形態(SOP)にGLSLを適用していきます。まず始めにGLSL TOPを用いてバンプマッピング (Bump mapping) をPhongマテリアル(Phong MAT)に適用しレンダリングの際に3Dの形状を変形するという手法を行います。さらに、続いて、GLSL MATを使用して頂点シェーダー (vertex shader) を用いて座標の情報をもとにマテリアルを動的に生成する手法に挑戦します。
スライド資料
サンプルプログラム
アンケート
本日の授業に参加した方は以下のアンケートに答えてください。
openFrameworksでは、画像や動画ファイルなどと同様に、プログラムにサウンドファイルを読み込み、再生したり、波形を表示することが可能です。しかし、音の波形を表示したら音響を視覚化したことになるでしょうか。
実は我々の耳は音を波形ではなく、周波数に分解して知覚しています。ですので、波形をそのま操作して表示しても、あまり音と一致した映像にはなりません。音を周波数の帯域ごとの音量に分解するには、フーリエ変換という手法を用います。これにより、音を周波数帯域ごとの強さにわけて取得することが可能となります。フーリエ変換は、コンピュータ内で高速に処理する高速フーリエ変換（FFT）というアルゴリズムが考案され、現在ではPC内でリアルタイムに変換していくことが可能です。今回は、このフーリエ解析を利用して、音を可視化してみましょう。
openFrameworksでは、Addons無しにofSoundPlayer()の機能でFFT解析を行うことが可能です。FFTを活用して音を効果的に視覚化していく方法について探っていきます。
スライド資料
サンプルプログラム
サウンドファイルのダウンロードは下記から。
アンケート
本日の授業に参加した方は、以下のアンケートに答えてください。
今回も前回に引き続き、p5.jsによるオブジェクト指向プログラミング (OOP) について学んでいきます。
今回は、オブジェクトを生成する際に実行される初期化のための関数であるコンストラクター (constructor) に注目します。ここまでやってきたようにコンストラクターはオブジェクトが初期化 (インスタンス化) される際に自動的に実行されます。つまりクラスの初期化関数として機能しています。インスタンス化は以下のように行ってきました。
let object = new ClassName();
クラス名の後に () があるところに注目してください。クラス側で設定することによってインスタンス化の際にコンストラクターの引数としてパラメータを受け取ることが可能です。つまり以下のようになります。
let object = new ClassName(arg1, arg2, arg3...);
こうすることで、クラスからオブジェクトを生成する際に引数の値によって様々なバリエーションのオブジェクトを生成することが可能となります。1つの工場 (= クラス) から、様々なバリエーションの車 (= オブジェクト) を生成するイメージです。
実際にp5.jsのコードを動かしながら、インスタンス化とコンストラクターについて理解していきましょう。
映像資料
VIDEO
スライド資料
本日のスタートポイント
本日の課題
1つのクラスから複数のオブジェクトを生成して表現してください。
クラスのコンストラクタの引数からパラメータを読み込み
様々なバリエーションのオブジェクトが生成されるように
本日作成した「Blob」クラスの例を参考にしてみてください!
投稿したURLをアンケートから提出
投稿の際に sfc231215 のタグをつけてください!
締切: 2022年12月14日(水)まで!
今回も、前回の提出作品の人気投票を行います!
前回のタグ sfc231208 でOpenProcessingで検索 (検索方法をSketches that are tagged にする必用あり)
一番良いと思った作品に1票投票 (自信があれば自分の作品でも可)
課題提出フォーム
サンプルコード
Shaderとは、もともとは3Dコンピュータグラフィクスで、シェーディング (陰影処理) をするプログラムのことを指していました。従来は、開発者やデザイナーは、グラフィクスカード (GPU) に固定機能として実装された定形の処理しか使えませんでした (固定機能シェーダー)。2000年代に入って、プログラマブル・シェーダーが登場します。これまでブラックボックスだったシェーダー自体が、プログラム可能になりました。OpenGLではGLSLというプログラミング言語が策定されシェーダーをプログラムすることが可能です。画面上の膨大なピクセル情報を、高い並列処理性能を持つGPUで実行することにより、CPUで実行するよりもはるかに高いパフォーマンスを実現できるようになりました。
TouchDesignerでは、GLSL TOPを使用してGLSLを記述してテクスチャーとして書き出すことが可能です。今回はTochDesignerでのGLSLの使用法の導入を行います。
スライド資料
サンプルプログラム
アンケート
今回の講義を受講した方は以下のアンケートに答えてください。
ここまで、この講義ではSonic-PiとTidalCyclesを使用したライブコーディングを行ってきました。Sonic PiやTidalCyclesで最終的に出力されるのは音 (音響、音楽) でした。それに対して、映像を出力するためのライブコーディングの環境も数多く存在します。
今回はビジュアルのためのライブコーディングの環境の中から以下の3つの開発環境/言語を取り上げます。
音のライブコーディングとはまた違った世界を楽しみましょう!
スライド資料
アンケート
本日の講義に参加した方は以下のアンケートに回答してください。
今回は、Addonの利用の3回目として、ofxOpenCvとofxCvを扱います。メディアアート作品では、カメラから取得した映像を用いてインタラクションを行う事例が沢山存在しています。映像を使ったインタラクションは、特別なセンサーを使用することなく、また鑑賞者に直接接触することなく高度なインタラクションが可能となり、多くの可能性を秘めた手法です。また、近年では映像の中から物体を認識したり、映像の中の微妙な差分や動きを検出したりといった、コンピュータ・ビジョン（Computer Vision = CV）の技術が発展し、高度な映像解析が活用できるようになりました。今回は、こうしたCVの技術の中でもオープンソースで多くの利用実績のあるOpenCVというCVのためのライブラリをopenFrameworksで活用する方法について紹介していきます。
スライド資料
サンプルプログラム
ProjectGeneratorが使用できない人は、下記のテンプレートを活用してください。
アンケート
本日の授業に参加した方は、以下のアンケートに答えてください。
