この講義では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もオープンソースのアプリケーションではありませんが、学生のみなさんであれば完全に無料でフルの機能を使用可能です。
自分の作品の表現形態やテーマにあわせて、次のステップへ進んでいきましょう!
スライド資料
アンケート
本日の授業に参加した方は以下のアンケートに回答してください。
アンケート
この講義「データ構造とアルゴリズムでは」変数と定数、反復、乱数、論理式と条件文、アニメーションとベクトル、配列の操作、関数、そしてオブジェクト指向プログラミングと様々なトピックスを扱ってきました。最終課題はこれらの内容を総動員して、Patatap (https://patatap.com/) のようなインタラクティブなオーディオビジュアル作品をp5.jsで制作します。
Patatapはとてもシンプルなインタラクションで構成された作品です。キーボードを操作すると、それぞれのキーにシンプルなアニメーションが割り振られていて、同時にサンプリングされたサウンドが鳴るようになっています。仕組みはとても単純なのですが、キーボードをリズムにあわせてタイピングすることで音と映像が同期して、まるでVJのパフォーマンスをしているような気分を味わえます。キーボードの組み合わせは無限にあるので、いつまでも飽きることがありません。
今回は、最終課題に向け、p5.jsをつかってPatatapを制作するための方法について解説していきます。
スライド資料
最終課題提出
最終課題「Patatapを作る」
最終課題制作のオンデマンドの教材を参考にしながら「Patatap」のようにキーボードからのタイピングで音と映像が同期する作品を制作してください。
- 投稿したOpenProcessingのURLを提出
- 投稿の際に mitda22final のタグをつけてください!
- 締切 : 講義最終日の開始時間まで (2023年7月26日)
最終課題提出フォーム
アンケート
本日の授業アンケートはこちら。
アンケート
サンプルプログラム
今期の情報メディアデザインの最終課題「パラメトリック・ロゴデザイン」では、ここまでの内容でパラメトリックに変化させるようになった自分自身のロゴ (= Visual Identity, VI) をなめらかにアニメーションさせて最終作品とします。今回は動き、つまりアニメーションを作る部分に焦点をあてます。
前回までの内容で、スライダーでパラメータを操作して作成したVI (Visual Identity) を変化させられるようになりました。今回はこのパラメータを自動的に変化するように動きをつけていきます。今回の内容が最終的な課題になります。しっかり理解して制作していくようにしてください。
最終課題
パラメーターがなめらかに変化することでアニメーションする、あなた自身のロゴ (VI, Visual Identity) をデザインしてください。制作した作品はOpenProcessingに mitmedia23final のタグをつけて投稿してください。投稿したURLを以下のフォームから提出してください。提出の締切は、2023年7月26日 (最後の授業日の前日) とします。
スライド資料
アンケート
本日の講義に参加した方は下記のアンケートに回答してください。
サンプルスケッチ
最終課題制作に関連するサンプルをいろいろ作成しました。参考にしてください。
この講義では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もオープンソースのアプリケーションではありませんが、学生のみなさんであれば完全に無料でフルの機能を使用可能です。
自分の作品の表現形態やテーマにあわせて、次のステップへ進んでいきましょう!
スライド資料
アンケート
本日の授業に参加した方は以下のアンケートに回答してください。
アンケート
前回までの内容で、スライダーでパラメータを操作して作成したVI (Visual Identity) を変化させられるようになりました。今回はこのパラメータを自動的に変化させてアニメーションにします。今回の内容が最終的な課題になります。しっかり理解して制作していくようにしてください。
スライド資料
最終課題
パラメータを変化させることでアニメーションする自分自身のVI (Visual Identity) を作成してください。
- 必ずタイトルをつける
- 何のパラメータをどのように変化させたのか説明できるように
- 作品の意図、デザインの工夫、アピールポイントなど整理しておく
- OpenProcessingで保存する歳に mitdesign123final のタグをつける
OpenProcessingに投稿してそのURLを以下のフォームから送信してください。
サンプルスケッチ
最終課題制作に関連するサンプルをいろいろ作成しました。参考にしてください。
この講義「データ構造とアルゴリズムでは」変数と定数、反復、乱数、論理式と条件文、アニメーションとベクトル、配列の操作、関数、そしてオブジェクト指向プログラミングと様々なトピックスを扱ってきました。最終課題はこれらの内容を総動員して、Patatap (https://patatap.com/) のようなインタラクティブなオーディオビジュアル作品をp5.jsで制作します。
Patatapはとてもシンプルなインタラクションで構成された作品です。キーボードを操作すると、それぞれのキーにシンプルなアニメーションが割り振られていて、同時にサンプリングされたサウンドが鳴るようになっています。仕組みはとても単純なのですが、キーボードをリズムにあわせてタイピングすることで音と映像が同期して、まるでVJのパフォーマンスをしているような気分を味わえます。キーボードの組み合わせは無限にあるので、いつまでも飽きることがありません。
今回は、最終課題に向け、p5.jsをつかってPatatapを制作するための方法について解説していきます。
映像資料
スライド資料
本日の課題の提出フォーム
本日の発表用の課題提出フォームです。
(本日の) 課題提出フォーム
最終課題提出フォーム
最終課題で制作した作品は、OpenProcessingにアップロードして下記のフォームからURLを提出してください。
最終課題提出フォーム
サンプルプログラム
ライブラリー (Library) とは、 汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもので、多くのプログラミング言語で活用されています。p5.js自体もJavaScriptのライブラリーの1つです。p5.jsではさらにライブラリーを活用することで、p5.js単体では実現が難しい様々な機能を追加していくことが可能です。p5.jsのWebサイトでは様々なライブラリーが紹介されていて、すぐに利用することが可能です。
今回は、p5.js Libraryの中から音を扱かうための p5.Soundライブラリーを使用してp5.jsによるサウンドプログラミングに挑戦します。今回の内容の発展が今期の「データ構造とアルゴリズム」の最終課題となります。しっかりと理解して活用できるようになりましょう。
スライド資料
本日の課題
p5.soundライブラリーを使用してサウンドファイルを扱ったp5.jsのスケッチを作成してください。サウンドファイルの再生機能さえ使っていれば何をしても自由です (ピッチ変更、フィルター、ビジュアライズ ..etc)
サンプルコード
クリックでサウンド再生
再生スピードの変更
ローパスフィルター
サウンドの音量を視覚化
E Roon Kang + TheGreenEyl, MIT Media Lab Identity (2011)
これから数回に渡って、最終課題のテーマ「パラメトリック・ロゴデザイン」について解説と演習を行っていきます。
パラメトリックデザイン (parametric design)とは、建築要素やエンジニアリング部品などの形状を、直接設計するのではなくアルゴリズム的なプロセスに従って形成する設計手法のことです。このデザイン手法では、パラメータとルールによって設計意図と設計結果の関係が決定されます。
今期の情報メディアデザインの最終課題は、このパラメトリックデザインの手法をグラフィックデザインへ応用します。アルゴリズム的なプロセスやルールに従って形態や動きをデザインします。ジェネラティブデザイン (generative design) もしくはアルゴリズミックデザイン (algorithmic design) とも関連します。
参考リンク
スライド資料
アンケート
本日の講義に参加した方は以下のアンケートに答えてください。
サンプルプログラム
Windows 11を入れたDell Precision 5560 (Nvidia RTX A2000 Laptop GPU) にeGPU (Akitio Node Titan) でNvidia GeForce RTX 3090を接続する方法、いろいろ試行錯誤してようやく成功したのでメモを残しておく。
1. BitLockerを無効化する
Disable-BitLocker -MountPoint "C:"
2. BIOSの設定を変更
3. Device ManagerでA2000 GPUを無効化
- 自動的に切り替えたいのだけどまだやり方が分からず…
4. Nvidia Geforce RTX 3090用のStudio Driverをインストール
今回使用したノートPCのスペックは以下の通り
- Dell Precision 5560
- Processor: 11th Gen Intel(R) Core(TM) i9-11950H @ 2.60GHz
- Installed RAM: 32.0 GB (31.7 GB usable)
- Operating System: Microsoft Windows 11 Home Insider Preview Build 23493
- System type: 64-bit operating system, x64-based processor
- GPU processor: NVIDIA RTX A2000 Laptop GPU
