本日は最終課題の制作実習を行います。最終課題の制作を進めてください。わからないことは随時質問してください。
最終課題
patatapを参考にして、キーボードからの入力に反応して音とアニメーションが再生されるインタラクティブな作品を作成してください。サウンドはネットからダウンロード可能なフリー音源を使用して構いません。
制作にあたっては、下記の制作テンプレートをforkして使用します。
最終課題の作品は、OpenProcessingにアップロードしてそのURLを下記のフォームに記入してください。最終締切は、7月29日までとします。
この講義「データ構造とアルゴリズムでは」変数と定数、反復、乱数、論理式と条件文、アニメーションとベクトル、配列の操作、関数、そしてオブジェクト指向プログラミングと様々なトピックスを扱ってきました。最終課題はこれらの内容を総動員して、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によるサウンドプログラミングに挑戦します。今回の内容の発展が今期の「データ構造とアルゴリズム」の最終課題となります。しっかりと理解して活用できるようになりましょう。
スライド資料
今回から何回かに渡って、オブジェクト指向プログラミング (Object Oriented Programing) というトピックスについて学んでいきます。
まず始めの出発点として、完全にランダムな確率で動きまわる「ランダムウォーク」な動きをする点の動きをつくりその軌跡を描いてみます。次に、このランダムな動きを増殖させていきます。
増殖の際に今回は全てを一つのプログラムに書くのではなく、それぞれの点を細かなプログラムで実装し、その小さなプログラム達を組合せることで一つの機能を生みだすような設計にします。この小さなプログラムを「オブジェクト (Object)」と呼び、オブジェクトを構成単位にしてプログラムを作成していく手法を、オブジェクト指向プログラミング (OOP) と呼びます。
OOPの考え方は今後も重要な内容となってきますので、実例を通して確実に理解していきましょう。
スライド資料
サンプルプログラム
今回は、関数 (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をフォームから提出してください。
提出フォーム
第4回: 反復による表現の中で、プログラムを構造化する際の3つの基本構造として、順次処理 (sequence)、反復 (iteration)、条件分岐 (selection) があると解説しました。今回はこの中の条件分岐(selection)について扱います。
条件分岐の構造を実現するには、まず論理式(Boolean Expression)を用いてtrue( = 真)またはfalse( = 偽)を返す式を記述します。この式の判定結果をif文の中で使用することで、条件によって挙動を変化させる構造を記述することが可能です。
今回は、論理式と条件文についてアニメーションを活用しながらじっくりと学んでいきます。
映像資料
スライド資料
本日の課題
動画で解説した画面の上下左右でバウンドするプログラムを改造して、ボールが壁にぶつかるたびに何か変化するようにしてください。
例: ボールが壁にぶつかると
- ボール大きさが少しずつ大きくなる
- ボールのスピードが少しずつ遅くなる
- ボールの色が変化する
- ボールがランダムな向きにバウンドする
- …etc
作成したプログラムは、タイトルをつけてOpenProcessingに投稿して、URLを投稿フォームより送信してください。
課題投稿フォーム
今回は「乱数」による表現に挑戦します。乱数とは、サイコロを振って得られる数字のように規則性のない数のことです。p5.jsでは random() 関数を使用することで範囲を指定して乱数を生成することが可能です。
この規則性のない乱数を利用することで、偶然性を取り入れた表現が可能となります。図形の位置、大きさ、色などを乱数を利用して特定の範囲内でランダムに繰り返し指定することで、偶然性をコントロールしながら表現に取り入れることができるようになります。いろいろな可能性を試してみましょう。
映像資料
スライド資料
本日の課題
本日のテーマ: 「反復と乱数 – 色彩と形態による画面構成」
ここまで解説したプログラミング手法を活用してp5.jsで画面構成を行ってください。
- 繰り返し (for)
- 乱数 (random)
- 色彩 (HSB)
- 形態
- 座標
作成した作品にタイトルをつけて、OpenProcessingに投稿して、そのURL (アドレス) を以下のオンラインフォームから提出してください。
投稿フォーム
順次処理 (sequence)、反復 (iteration)、条件分岐 (selection) は、プログラムを構造化する際の基本構造です。今回はこの3つのプログラムの基本構造の中から「反復 (iteration)」についてとりあげます。
コンピュータは何度もくりかえし処理することが得意です。プログラムで指定さえすれば、数百回、数千回、数万回と不満を言うことなく瞬時に反復処理を行います。反復によって人力の作業では膨大な時間がかかるような処理も瞬時に終えることが可能です。
反復について、p5.jsでグラフィカルに理解していきましょう。
映像資料
スライド資料
本日の課題
課題: 繰り返しで表現する
繰り返しの構文 (for文) を用いて自由に形を描いてください。描く形、繰り返す回数は自由に決めてください。作成した作品はOpenProcessingに投稿してURLをGoogleフォームから回答してください。課題の提出をもって出席とします。
提出フォーム
プログラミング言語では、扱われるデータを一定期間記憶し必要なときに利用できるようにするための仕組みが必要となることがあります。そのための仕組みが変数(Variable)と定数(Constant)です。また、JavaScriptではオブジェクト(Object)という複数の変数をひとつのまとまりとして整理するためのデータ構造を利用可能です。
今回は、この変数、定数、オブジェクトについて、実際にp5.jsで視覚的にプログラミングすることを通して理解していきます。
スライド資料
本日の課題
ballオブジェクトを改造して、オリジナルのballを作ってください。変更する項目は自由です
- 初級 : 色、大きさ、速さ …など
- 中級 : 動き
- 上級 : ballの数を増やしてみる
OpenProcessingに投稿してURLをFORMから提出してください。
課題提出フォーム
この講義では、データ構造とアルゴリズムを理解する際に、できるだけ視覚的にかつ直感的にわかり易く解説していこうと考えています。そうした目的に適した開発環境として、p5.jsを使用していきます。
今回は、このp5.jsを用いたプログラミングの基本を行います。開発環境の構築方法やプログラミングの基礎を理解した上で、簡単な図形を描くところまでを目標とします。
スライド資料
本日の課題
課題 : 円、楕円、矩形、線を用いて、平面構成を行う
- p5.jsを用いて平面構成を行ってください
- キャンバスの大きさは、800 x 600 Pixelで
- 以下の要素を使用
- 円 (circle)
- 楕円 (ellipse)
- 矩形 (rect)
- 線 (line)
- 背景色と描画色は自由に設定してください
- 完成した作品は、OpenProcessingにアップロードして公開
- 必ずタイトル (題名) をつける
- 以下のフォームから提出してください。課題の提出をもって出席とします
課題提出フォーム