p5.jsのライブラリー「p5.dom」を使用すると、canvasの内部だけではなく、それを支えているHTMLファイルの要素にアクセスすることが可能です。HTMLの要素を用いてボタンやスライダーなどのGUIを作成できるようになります。p5.domはHTMLの要素だけでなく、カメラや音声の入出力などのWebブラウザーから操作可能なデバイスへのアクセスも可能になります。
今回はp5.domのカメラ入力機能を活用して、カメラで撮影した映像をp5.jsのスケッチに取り込んでリアルタイムに処理する方法について紹介していきます。
スライドで使用したプログラムのサンプルは以下からダウンロードしてください。
ライブラリー (Library) とは、 汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもので、多くのプログラミング言語で活用されています。p5.js自体もJavaScriptのライブラリーの1つです。p5.jsではさらにライブラリーを活用することで、p5.js単体では実現が難しい様々な機能を追加していくことが可能です。p5.jsのWebサイトでは様々なライブラリーが紹介されていて、すぐに利用することが可能です。
今回は、p5.js Libraryの中から音を扱かうための p5.Soundライブラリーを使用してp5.jsによるサウンドプログラミングに挑戦します。今回の内容の発展が今期の「データ構造とアルゴリズム」の最終課題となります。しっかりと理解して活用できるようになりましょう。
前回の実習ではIllustratorの基本操作について習得しました。今回は身に付けた技術を活用して、より実践的なデザインの手法について学んでいきます。
まず、デザイン制作の一般的な流れについて解説します。デザインする素材は、あらかじめ整理された状態で提供されるとは限りません。雑多な情報の中から必要に応じて整理して、 似たような情報がまとまった場所にあるように順番を整理したり 、情報の重要度によって強弱をつけたりといった作業を行います。そうしたデザイン制作のための一連の流れについて解説していきます。
さらに今回は「グリッドシステム」について詳細に取り上げます。グリッドシステムとは、 画面上に格子状に縦横のガイドラインを引き、そのブロックごとに文字や図版を配置してデザインする手法です。スイスのグラフィック・デザイナー、ヨゼフ・ミューラー＝ブロックマン（1914～1996年）は、デザインされる媒体の面積と文字の大きさの比例を研究しました。その成果は「Grid systems」として発表されました。グリッド・システムは、エディトリアルなどの分野で広く使用され、現在のWEBデザインの基本にもなっています。
後半の実習では、実際にグリッドをIllustratorで設定する方法について解説して、実際にグリッドシステムを用いたレイアウトに挑戦します。
今回はp5.jsで音を扱うためのp5.soundライブラリーを紹介します。
p5.soundライブラリーを使用することで、サウンドファイルの再生や、マイクやライン入力のキャプチャーだけでなく、音にエフェクトをかけたり、波形自体を生成したりと、サウンドに関する様々な機能が活用できます。さらに、FFTクラスを使用すると、音に含まれる周波数成分をリアルタイムに解析することが可能となります。この機能を使うことで、音の周波数成分を可視化して「音を視る」ことが可能となります。今回は、Soundライブラリーを用いたサウンドファイルの再生から、FFTを使用した音のビジュアライズまでを順番に解説していきます。
スライド資料の中でとり上げたサンプルプログラムは、全て下記からダウンロードして利用可能です。
今回も前回に引き続き、p5.jsによるオブジェクト指向プログラミング (OOP) について学んでいきます。
今回は、オブジェクトを生成する際に実行される初期化のための関数であるコンストラクター (constructor) に注目します。ここまでやってきたようにコンストラクターはオブジェクトが初期化 (インスタンス化) される際に自動的に実行されます。つまりクラスの初期化関数として機能しています。インスタンス化は以下のように行ってきました。
let object = new ClassName();
クラス名の後に () があるところに注目してください。クラス側で設定することによってインスタンス化の際にコンストラクターの引数としてパラメータを受け取ることが可能です。つまり以下のようになります。
let object = new ClassName(arg1, arg2, arg3...);
こうすることで、クラスからオブジェクトを生成する際に引数の値によって様々なバリエーションのオブジェクトを生成することが可能となります。1つの工場 (= クラス) から、様々なバリエーションの車 (= オブジェクト) を生成するイメージです。
実際にp5.jsのコードを動かしながら、インスタンス化とコンストラクターについて理解していきましょう。
今回の講義から、担当が変わって内容も変化します。今回からは、Illustratorを用いた2Dのグラフィクスデザインについて学んでいきます。ただし、後半の講義では、Illustratorのテクニカルな詳細について学んでいくわけではありません。あくまで平面をデザインするツールの一つとしてIllustratorを使用しているだけで、デザインの基本ルールを理解して論理的にきちんと計算されたデザインをできるようになるための基本を身につける事を主眼にしています。
初回の今回は、まずチュートリアルビデオを参照しながら、Illustratorの基本操作をマスターします。その上で、初回の課題として「トイレのマーク」のデザインに挑戦します。
ここまで、この講義ではp5.jsを用いた2次元のグラフィクスやアニメーションを取り扱ってきました。p5.jsでは、2次元のだけでなく、3次元のグラフィクスやアニメーションを描画することが可能です。
p5.jsの3D描画には、WebGLというウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様を使用してレンダリングを行います。WebGLはグラフィクスカード(GPU)を用いて描画を行うため、とても高速な3Dグラフィクスの表示を可能にしています。
今回は、p5.jsでの3D表示の基本から始めて、アルゴリズムを用いた生成的な3Dグラフィクス表現までを目指します。
今回から何回かに渡って、オブジェクト指向プログラミング (Object Oriented Programing) というトピックスについて学んでいきます。
まず始めの出発点として、完全にランダムな確率で動きまわる「ランダムウォーク」な動きをする点の動きをつくりその軌跡を描いてみます。次に、このランダムな動きを増殖させていきます。
増殖の際に今回は全てを一つのプログラムに書くのではなく、それぞれの点を細かなプログラムで実装し、その小さなプログラム達を組合せることで一つの機能を生みだすような設計にします。この小さなプログラムを「オブジェクト (Object)」と呼び、オブジェクトを構成単位にしてプログラムを作成していく手法を、オブジェクト指向プログラミング (OOP) と呼びます。
OOPの考え方は今後も重要な内容となってきますので、実例を通して確実に理解していきましょう。
p5.jsのp5.Imageクラスは、外部のビットマップ画像(Jpeg, GIF、PNGなど)をデータとしてプログラムに読み込むことができます。読み込んだ画像は単に画面に表示するだけでなく、色や明度やサイズを変更して表示することができます。さらには、画像に含まれる全てのピクセルの色情報を読み取り配列に格納することが可能です。そのデータをもとに別の画像を再生成することが可能となり、読み込んだ画像データの色情報をもとにした多彩な表現が可能となります。
今回はp5.jsに画像を読み込んで、分析再合成することで、様々な表現の可能性について探っていきます。
今回は、関数 (function) についてとりあげます。といっても、ここまでの講義で関数は頻繁に使用してきました。ここまでで使用してきた関数は主に2つの場合に分けられます。
1つ目は、プログラミングしているp5.jsのスケッチからp5.jsのライブラリー内で定義されているの関数を呼び出しです。例えば
//circle()関数の呼び出し
circle(400, 300, 100);
といったp5.jsで実行していた命令は、p5.jsの関数を呼び出していたのです。
2つ目は、 p5.jsのライブラリーから呼び出されている関数を定義する記述です。これは、setup() や draw() 内で書いていたプログラムに相当します。
// setup関数の定義
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(60);
}
関数はプログラムを処理内容ごとにモジュール化して、プログラムの可読性を高めデバッグを容易にします。
また、関数は引数(arguments)を受け取り、内部の処理のパラメータとして使用することが可能です。このことにより1つの関数で様々なバリエーションを持つことが可能となります。
p5.jsで実際に描画しながら関数について学んでいきましょう。