この講義「データ構造とアルゴリズムでは」変数と定数、反復、乱数、論理式と条件文、アニメーションとベクトル、配列の操作、関数、そしてオブジェクト指向プログラミングと様々なトピックスを扱ってきました。最終課題はこれらの内容を総動員して、Patatap (https://patatap.com/) のようなインタラクティブなオーディオビジュアル作品をp5.jsで制作します。
Patatapはとてもシンプルなインタラクションで構成された作品です。キーボードを操作すると、それぞれのキーにシンプルなアニメーションが割り振られていて、同時にサンプリングされたサウンドが鳴るようになっています。仕組みはとても単純なのですが、キーボードをリズムにあわせてタイピングすることで音と映像が同期して、まるでVJのパフォーマンスをしているような気分を味わえます。キーボードの組み合わせは無限にあるので、いつまでも飽きることがありません。
今回は、最終課題として、p5.jsをつかってPatatapを制作するための方法について解説していきます。
映像資料
スライド資料
課題制作のための資料・サンプルなど
課題の提出について
本日分でできた作品についてはまず以下のフォームから提出してください。
課題の最終的な提出は、7月30日 (木) とします。7月31日 (金) 13:00から、自由参加で最終講評回を行います。都合のつく方は参加してください。
今回も前回に引き続き、p5.jsによるオブジェクト指向プログラミング (OOP) について学んでいきます。
今回は、オブジェクトを生成する際に実行される初期化のための関数であるコンストラクター (constructor) に注目します。ここまでやってきたようにコンストラクターはオブジェクトが初期化 (インスタンス化) される際に自動的に実行されます。つまりクラスの初期化関数として機能しています。インスタンス化は以下のように行ってきました。
let object = new ClassName();
クラス名の後に () があるところに注目してください。クラス側で設定することによってインスタンス化の際にコンストラクターの引数としてパラメータを受け取ることが可能です。つまり以下のようになります。
let object = new ClassName(arg1, arg2, arg3...);
こうすることで、クラスからオブジェクトを生成する際に引数の値によって様々なバリエーションのオブジェクトを生成することが可能となります。1つの工場 (= クラス) から、様々なバリエーションの車 (= オブジェクト) を生成するイメージです。
実際にp5.jsのコードを動かしながら、インスタンス化とコンストラクターについて理解していきましょう。
映像資料
スライド資料
本日の課題
今回作成したクラス「Blob」を改造して新たな作品を制作してください。コンストラクターから引数を受けとって、様々なバリエーションのオブジェクトを大量に生成してみましょう。もちろん、元のサンプルプログラムから全然違う形や動きや色にしてしまって構いません。
OpenProcessingに作成して、URLをオンラインフォームから提出してください。
提出フォーム
サンプルコード
今回はp5.jsで生成的(Generative)な形態を生みだすにはどうすればよいのか、試行錯誤しながら実験していきます。まず初めに、コードを用いた生成的な表現の実例をいくつか紹介した後、実際にp5.jsでプログラミングしていきます。
まず始めに、完全にランダムな確率で動きまわる「ランダムウォーク」な動きをする点の動きをつくり、その軌跡を描いてみます。次にこのランダムな動きを増殖させていきます。増殖の際に今回は全てを一つのプログラムに書くのではなく、それぞれの点を細かなプログラムで実装し、その小さなプログラム達を組合せることで一つの機能を生みだすような設計にします。この小さなプログラムを「オブジェクト (Object)」と呼び、オブジェクトを構成単位にしてプログラムを作成していく手法を、オブジェクト指向プログラミング (OOP) と呼びます。このOOPの考え方は今後も重要な内容となってきますので、実例を通して確実に理解していきましょう。
映像資料
スライド資料
本日の課題
ランダムウォークの動きをするクラス (Walker) を改造して生成的な作品を制作してください。改造する内容は自由です (色の変化、動き、速さなど) 。今回もGoogle FormからOpenProcessingのURLを投稿して提出してください。
投稿フォーム
サンプルコード
今回は、関数 (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で実際に描画しながら関数について学んでいきましょう。
映像資料
スライド資料
本日の課題
課題: 関数 (function) をつかって大量に形を増殖させる
引数によってバリエーションをつけながら何か形を描く関数を作成してください。作成した関数をdraw()関数から呼び出して大量に形を描いてください。作成したプログラムはOpenProcessingに投稿してURLをフォームから提出してください。
提出フォーム
p5.jsのスケッチは、外部のビットマップ画像(Jpeg, GIF、PNGなど)をデータとしてプログラムに読み込むことができます。読み込んだ画像は単に画面に表示するだけでなく、色や明度やサイズを変更して表示することができます。さらには、画像に含まれる全てのピクセルの色情報を読み取り配列に格納することが可能です。そのデータをもとに別の画像を再生成することが可能となり、読み込んだ画像データの色情報をもとにした多彩な表現が可能となります。
今回はp5.jsに画像を読み込んで、分析再合成することで、様々な表現の可能性について探っていきます。
映像資料
スライド資料、サンプルプログラム
本日の課題
テーマ: 「p5.jsに読み込んだ画像ファイルのデータで表現する!」
本日の映像資料を参考に、OpenProcessingに画像をアップロードした画像をスケッチに読み込み画像ファイルの情報から新たなイメージを生成してください。読み込む画像は自由です。OpenProcessingに投稿してURLを提出フォームから送信してください。
提出フォーム
今回からいよいよ動きのある表現（= アニメーション）について扱っていきます。アニメーションを実現するには、まず時間を扱う基本構造を知る必要があります。p5.jsでは、setup(), draw() という2つのブロックにわけて、初期化と更新を行うことでアニメーションを実現しています。まず始めはこの基本構造について理解します。次に、これから動きを扱う際に、向きと大きさをもった「ベクトル」という概念を理解します。ベクトルを理解することで、位置や運動を整理して記述することが可能となります。最後に、この基本構造をベクトルを活用して簡単なアニメーションを作成します。
映像資料
スライド資料、サンプルプログラム
本日の課題
本日の課題「たくさんの物体の動きを表現する」
本日解説した内容を踏まえて、たくさんの物体の動きを表現してください。
- アニメーションの原理 setup()とdraw()
- ベクトル
- 条件分岐(if)
- 配列
作成した作品は、OpenProcessingに投稿してURLをオンラインフォームから提出してください。
提出フォーム
順次処理 (sequence)、反復 (iteration)、条件分岐 (selection) は、プログラムを構造化する際の基本構造です。今回はこの3つのプログラムの基本構造の中から「反復 (iteration)」についてとりあげます。 コンピュータは何度もくりかえし処理することが得意です。プログラムで指定さえすれば、数百回、数千回、数万回と不満を言うことなく瞬時に反復処理を行います。反復によって人力の作業では膨大な時間がかかるような処理も瞬時に終えることが可能です。
今回はさらに、この反復処理に乱数を適用してみます。 乱数とは、サイコロを振って得られる数字のように規則性のない数のことです。p5.jsでは random() 関数を使用することで範囲を指定して乱数を生成することが可能です。
乱数と反復を組合せることで、偶然性を取り入れた表現が可能となります。図形の位置、大きさ、色などを乱数を利用して特定の範囲内でランダムに繰り返し指定することで、偶然性をコントロールしながら表現に取り入れることができるようになります。いろいろな可能性を試してみましょう。
映像資料
スライド資料
本日の課題
本日のテーマ: 「反復と乱数 – 色彩と形態による画面構成」
ここまで解説したプログラミング手法を活用してp5.jsで画面構成を行ってください。
- 繰り返し (for)
- 乱数 (random)
- 色彩 (HSB)
- 形態
- 座標
作成した作品にタイトルをつけて、OpenProcessingに投稿して、そのURL (アドレス) を以下のオンラインフォームから提出してください。
投稿フォーム
プログラミング言語では、扱われるデータを一定期間記憶し必要なときに利用できるようにするための仕組みが必要となることがあります。そのための仕組みが変数(Variable)と定数(Constant)です。また、JavaScriptではオブジェクト(Object)という複数の変数をひとつのまとまりとして整理するためのデータ構造を利用可能です。
今回は、この変数、定数、オブジェクトについて、実際にp5.jsで視覚的にプログラミングすることを通して理解していきます。
スライド資料
本日の課題
テーマ : マウスの位置によるインタラクション
マウスの位置を取得するシステム変数 (mouseX, mouseY) を使用して面白いインタラクションを考えてp5.jsで実現してください
- マウスの位置 (mouseX, mouseY)で変化させてみる
- 今回はフルスクリーンで
- createCanvas(windowWidth, windowHeight);
作成した作品はopenProcessingにアップロードしてそのURLを以下のフォームから提出してください。
提出フォーム
この講義では、p5.jsを使用してコードによるデザインを行います。その最初の一歩として、コードによって「かたち」を描くにはどうすれば良いのか考えていきます。
まず始めに、1950年代〜70年代の、コンピューター黎明期から発展期におけるコード（プログラム）による様々な視覚表現について紹介します。過去の作家がどのようなアイデアで、何を表現しようとしてきたのか、その歴史を辿ります。
後半は、そうした歴史を踏まえた上で、 p5.js 実際に図形を描いていきます。まずp5.js の操作基本を解説し、簡単な図形を描きながらp5.jsでのプログラミングの基本を学びます。
スライド資料
本日の課題
テーマ: 「p5.js基本図形と色による画面構成」
ここまで解説したp5.jsの機能を活用して画面構成をしてみましょう
- キャンバスのサイズは 800 x 600 pixelで
createCanvas(800, 600); - 点、線、矩形、楕円、円といった基本図形
- 背景色、塗りの色、線の色
- 完成したら何かタイトルをつける
- 座標、色、数値による図形の描画に慣れるのが目的です
- 完成した作品はOpenProcessingに投稿してURLを提出
- 最後の30分で簡単に作品発表をします!
課題の提出は以下のオンラインフォームから。課題の提出をもって出席とします。
初回となる今回は、まず、講義全体のオリエンテーションを行います。オンラインでの講義の方法について、また講義に関する基本的な情報について説明します。次に、この講義を始めるにあたり「なぜプログラミングするのか?」という内容のイントロダクションを説明します。Casey Reasによるプログラマーの歴史の解説を参照しながら「ハイブリッド」なプログラマー像を紹介します。後半は、この講義で使用する「p5.js」というプログラミングの開発環境について、その歴史を紹介した上で、開発のための環境構築について説明していきます。
スライド資料
本日の課題
まず、この授業で使用する開発環境を準備します。各自使用しているPCで以下の作業をしてください
以上の作業をしたら、オンラインフォームに記入して提出してください。課題の提出をもって出席とします。
