今回は、第1課題「家具の映像」制作のためのチュートリアルの2回目です。今回は、まず課題制作の参考になりそうな様々なWebサイトを紹介します。後半はその中の1つGenerative Gestaltungをとりあげ、インタラクティブなサンプルを自動的に動くようにする変更方法について解説します。

課題制作のヒント

• どのように制作を進めていくか?
• まっさらな状態で頭を悩ませていても、あまり進まないことが多い
• 参考になりそうな他人のコードを実行してソースを読んでみるのが効果的

参考サイト

• OpenProcessingの作品ページ
• NEORTでp5.jsのタグで検索
• Generative Gestaltung (Generative Design)
• Casey Reas
• Zach Lieberman – Instagram

家具としての映像を体験 Neort Digital Frame

NEORTでは、選んだお気に入りのデジタルアートを表示する専用アプリケーションが用意されています。Windows版、Mac版があるので、自分のノートPCにインストールして鑑賞してみましょう。(外部モニターだとなお良い)

• NEORT Digital Frame App

Generative Gestaltangのサンプルを利用する

• Generative Gestaltung (Generative Design) のサイト構成
  • New – p5.js 版
  • Old – Processing版
  • これから始めるのであれば、p5.js版がオススメ

• Generative DesignのGithubページからサンプル一式がダウンロード可能
  • https://github.com/generative-design/Code-Package-p5.js
  • VS Code内で開くと編集しながら閲覧できる!
  • 詳細は演習内で

• Generative Gestaltungと今回の課題の相違点
  • マウスなどのインタラクションは無し (自動的に変化させる)
  • フルスクリーンで
  • 派手な変化ではなく徐々にじんわりとした変化させる (場合による)
  • 大きさに関するパラメータはwidthとheightを基準にした相対的なものに

• どうやってマウスインタラクションを自動的な変化にするか?
  • 例えば、マウスの座標を三角関数を利用した円運動に置き換える
  • x軸とy軸の周波数を変えることで、リサジュー図形の運動にもなる

Generative Gestaltungを元にしたサンプル

• P_2_1_5_01 を元に自動的に変化するように変更したサンプル

https://openprocessing.org/sketch/1308292