今年度のデザイン演習 I 情報メディアデザインの課題は「パラメトリック・グラフィックデザイン」です。今回は、グラフィックの様々なパラメータを直接操作する方法について考えていきます。
形を描くパラメータを変数にして、その変数の値を変化させることでパラメトリックな操作は可能です。しかしこの方法では、毎回変数を変更してはその結果を確認する必要がありやや面倒な作業になります。
こうした際に、スケッチにGUI (グラフィック・ユーザー・インターフェイス) を追加して、例えばスライダーを操作することで形を描くパラメータをなめらかに操作することができれば、微妙な調整が可能となり、さらに実際にプログラムを動作させたままで作業することが可能です。
今回は、p5.jsにスライダーを追加してパラメータを操作する方法について、実際にプログラムしながら学んでいきます。
スライド資料
次回までの課題
今回の演習の内容を理解して、スライダーの操作で変化するVIを作成してください。作品はOpenProcessingに投稿して、そのURLを以下のフォームから提出してください。この作品をもとに次回動き (アニメーション) を加えていきます。次回の演習の開始前までを締切とします!
- 変化させるパラメータ : 位置、大きさ、色、回転、サイズ …など
- 前回作成したVIが複雑すぎて変化が難しい場合には、変更してもOK
- まず1つのパラメータを変化させてみてから、少しずつ変化項目を加えてみる
- どんな変化加えると、作成したVIが面白く変化するか
- 楽しみながら考えていきましょう!
投稿フォーム
ライブラリー (Library) とは、 汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもので、多くのプログラミング言語で活用されています。p5.js自体もJavaScriptのライブラリーの1つです。p5.jsではさらにライブラリーを活用することで、p5.js単体では実現が難しい様々な機能を追加していくことが可能です。p5.jsのWebサイトでは様々なライブラリーが紹介されていて、すぐに利用することが可能です。
今回は、p5.js Libraryの中から音を扱かうための p5.Soundライブラリーを使用してp5.jsによるサウンドプログラミングに挑戦します。今回の内容の発展が今期の「メディアアート・プログラミング I」の最終課題となります。しっかりと理解して活用できるようになりましょう。
映像資料
https://youtube.com/watch?v=N2AShmO5Vos%3Fversion%3D3%26rel%3D1%26showsearch%3D0%26showinfo%3D1%26iv_load_policy%3D1%26fs%3D1%26hl%3Den-US%26autohide%3D2%26wmode%3Dtransparent
スライド資料
本日の課題
本日の映像資料を参考に、サウンドを用いた表現を行ってください。いつものようにOpenProcessingに作成し下記の投稿フォームからURLを提出してください。本日のタグは、geidaima230630 です。
投稿フォーム
ここまで、この講義ではp5.jsを用いた2次元のグラフィクスやアニメーションを取り扱ってきました。p5.jsでは、2次元のだけでなく、3次元のグラフィクスやアニメーションを描画することが可能です。
p5.jsの3D描画には、WebGLというウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様を使用してレンダリングを行います。WebGLはグラフィクスカード(GPU)を用いて描画を行うため、とても高速な3Dグラフィクスの表示を可能にしています。
今回は、p5.jsでの3D表示の基本から始めて、アルゴリズムを用いた生成的な3Dグラフィクス表現までを目指します。
スライド資料
本日の課題
下記のサンプルコードを参照して、何か一つ以上要素(色、数、多きさ、スピードなど) を変更してOpenProcessingに提出してください。下記のフォームから提出をお願いします!
サンプルコード
3D基本図形
法線マテリアル
スペキュラーマテリアル
立方体の反復による表現
今回は、より複雑なアニメーションに挑戦します。たくさんの図形を、一定の手続き（= アルゴリズム）にそって動かしてみます。動きのアルゴリズムはいろいろありますが、今回はその一例として、三角関数（sin, cos , tan）を使用した動きをとりあげます。三角関数の定義は、直角三角形の角度とそれを取り囲む辺の比率で定義されます。しかし、同時に円運動を座標に変換する仕組みとしても活用可能です。この仕組みを応用してアニメーションするとどうなるか、三角関数を用いたアニメーションで美しいパターン「ハーモニー (和音)」を生成する手法を紹介します。
スライド資料
アンケート
本日の講義に参加した方は以下のアンケートに答えてください。
サンプルコード
前回に引き続き、openFrameworksでShader (GLSL) を使用した高度な表現に挑戦します! 前回はFragment Shader (フラグメントシェーダー / ピクセルシェーダー) のみを使用しました。今回はさらにVertex Shaderを記述して3D空間に配置されたオブジェクトの表面にシェーダーによるアニメーションするパターンを描画します。この手法を応用することで、様々な3D表現が可能となります!
スライド資料
サンプルファイル
※古いマシン (特にMac) などでOpenGL 4.3以上に対応していない場合は下記のサンプルを使用してください
汎用的に使用可能なvertex/fragment shaderのテンプレート
shader.vert
#version 430
in vec4 position;
in vec4 color;
in vec3 normal;
in vec2 texcoord;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat4 textureMatrix;
uniform mat4 modelViewProjectionMatrix;
uniform float usingTexture;
uniform float usingColors;
uniform vec4 globalColor;
uniform sampler2D src_tex_unit0;
out Vertex {
vec4 worldSpacePos;
vec4 color;
vec3 normal;
vec2 texcoord;
} oVert;
void main() {
gl_Position = modelViewProjectionMatrix * position;
oVert.worldSpacePos = position;
oVert.color = color;
oVert.normal = normal;
oVert.texcoord = texcoord;
}
shader.frag
#version 430
uniform float u_time;
in Vertex {
vec4 worldSpacePos;
vec4 color;
vec3 normal;
vec2 texcoord;
} iVert;
out vec4 fragColor;
void main() {
vec3 vUV = iVert.worldSpacePos.xyz;
//...
fragColor = vec4(r, g, b, a);
}
アンケート
本日の講義に参加した方は以下のアンケートに回答してください。
Paul Rand
本日のデザイン演習は、まずこの演習で使用するp5.jsの環境設定を行っていきます。プログラミングする際に、エディターの選択や設定フォントの設定など細かな調整をしていって心地良く作業できる環境にしていくことはとても重要です。いろいろお勧めの設定を紹介していきます。
後半はVI (Visual Identity) について考えていきます。この授業の最終課題である「自分のVI」を作成するにあたって、様々な参考資料を紹介していきます。
講義ノート
次回までの課題
課題 : 自分のVI(ビジュアルアイデンティティー / ロゴ)をp5.jsでデザインする
OpenProcessingに投稿し、そのURLを以下のフォームから提出してください。次回の演習(7月1日)の開始前(12:50)までとします。
投稿フォーム
ここまで、この講義ではp5.jsを用いた2次元のグラフィクスやアニメーションを取り扱ってきました。p5.jsでは、2次元のだけでなく、3次元のグラフィクスやアニメーションを描画することが可能です。
p5.jsの3D描画には、WebGLというウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様を使用してレンダリングを行います。WebGLはグラフィクスカード(GPU)を用いて描画を行うため、とても高速な3Dグラフィクスの表示を可能にしています。
今回は、p5.jsでの3D表示の基本から始めて、アルゴリズムを用いた生成的な3Dグラフィクス表現までを目指します。
映像資料
https://youtube.com/watch?v=bteI6Wn4T3s%3Fversion%3D3%26rel%3D1%26showsearch%3D0%26showinfo%3D1%26iv_load_policy%3D1%26fs%3D1%26hl%3Den-US%26autohide%3D2%26wmode%3Dtransparent
スライド資料
本日の課題
本日の映像資料を参考に、3D空間でのアニメーションによる表現を行ってください。いつものようにOpenProcessingに作成し下記の投稿フォームからURLを提出してください。本日のタグは、geidaima230623 です!
投稿フォーム
サンプルコード
3D基本図形
法線マテリアル
スペキュラーマテリアル
立方体の反復による表現
今回も前回に引き続き、p5.jsによるオブジェクト指向プログラミング (OOP) について学んでいきます。
今回は、オブジェクトを生成する際に実行される初期化のための関数であるコンストラクター (constructor) に注目します。ここまでやってきたようにコンストラクターはオブジェクトが初期化 (インスタンス化) される際に自動的に実行されます。つまりクラスの初期化関数として機能しています。インスタンス化は以下のように行ってきました。
let object = new ClassName();
クラス名の後に () があるところに注目してください。クラス側で設定することによってインスタンス化の際にコンストラクターの引数としてパラメータを受け取ることが可能です。つまり以下のようになります。
let object = new ClassName(arg1, arg2, arg3...);
こうすることで、クラスからオブジェクトを生成する際に引数の値によって様々なバリエーションのオブジェクトを生成することが可能となります。1つの工場 (= クラス) から、様々なバリエーションの車 (= オブジェクト) を生成するイメージです。
実際にp5.jsのコードを動かしながら、インスタンス化とコンストラクターについて理解していきましょう。
スライド資料
本日の課題
今回作成したクラス「Blob」を改造して新たな作品を制作してください。コンストラクターから引数を受けとって、様々なバリエーションのオブジェクトを大量に生成してみましょう。もちろん、元のサンプルプログラムから全然違う形や動きや色にしてしまって構いません。
以下のオンラインフォームから提出してください。
提出フォーム
サンプルコード
今回はまず前回の課題「アニメーションで表現する」の講評会を行います。
後半は今回の課題の内容をさらに拡張して、様々な手法でアニメーションを表現するアイデアを実際のサンプルをベースに紹介していきます。
スライド資料
サンプルコード
サイズのアニメーション – 拡大
サイズのアニメーション – 縮小
色のアニメーション – 色相の変化
色 + サイズのアニメーション
波の動き – サイズの変化
波の動き – サイズ + 色
波の動きによる位置のアニメーション
波の動き(左右) + 波の動き(上下) = 円の動き!
たくさんの円の動き
たくさんの円の動き + 大きさの変化
たくさんの円の動き + 動きの変化 (リサジュー)
Shaderとは、もともとは3Dコンピュータグラフィクスで、シェーディング (陰影処理) をするプログラムのことを指していました。従来は、開発者やデザイナーは、グラフィクスカード (GPU) に固定機能として実装された定形の処理しか使えませんでした (固定機能シェーダー)。2000年代に入って、プログラマブル・シェーダーが登場します。これまでブラックボックスだったシェーダー自体が、プログラム可能になりました。OpenGLではGLSLというプログラミング言語が策定されシェーダーをプログラムすることが可能です。画面上の膨大なピクセル情報を、高い並列処理性能を持つGPUで実行することにより、CPUで実行するよりもはるかに高いパフォーマンスを実現できるようになりました。
openFrameworksでは、ofShaderクラスを使用してGLSLを記述した結果をopenFrameworks内で描画することが可能です。今回はopenFrameworksでのGLSLの使用法の導入を行います。
スライド資料
サンプルファイル
※古いマシン (特にMac) などでOpenGL 4.3以上に対応していない場合は下記のサンプルを使用してください
アンケート
本日の授業に参加した方は下記のアンケートに答えてください。
