今回からいよいよ動きのある表現（= アニメーション）について扱っていきます。アニメーションを実現するには、まず時間を扱う基本構造を知る必要があります。p5.jsでは、setup(), draw() という2つのブロックにわけて、初期化と更新を行うことでアニメーションを実現しています。まず始めはこの基本構造について理解します。次に、これから動きを扱う際に、向きと大きさをもった「ベクトル」という概念を理解します。ベクトルを理解することで、位置や運動を整理して記述することが可能となります。最後に、この基本構造をベクトルを活用して簡単なアニメーションを作成します。
今回は「配列 (Array)」というデータ形式について学びます。配列とは複数の値の集合を格納し管理するのに用いられるデータ構造です。
前回の円を動かすアニメーションでは、位置と速度のベクトルを1つの円の動きのパラメーターに用いました。この円を10個、100個と増やしていこうとすると、これまでの変数に1つの値を格納する方法ではすぐにプログラムが破綻してしまいます。このようなケースで配列を使用することで、データをとても賢く管理することが可能となります。
また、JavaScriptの配列には要素を削除したり追加するための命令が用意されています。この機能を活用することで、円の数を増やしたり減らしたりすることが可能となります。
実際にアニメーションを作成しながら配列について理解していきましょう。
順次処理 (sequence)、反復 (iteration)、条件分岐 (selection) は、プログラムを構造化する際の基本構造です。今回はこの3つのプログラムの基本構造の中から「反復 (iteration)」についてとりあげます。 コンピュータは何度もくりかえし処理することが得意です。プログラムで指定さえすれば、数百回、数千回、数万回と不満を言うことなく瞬時に反復処理を行います。反復によって人力の作業では膨大な時間がかかるような処理も瞬時に終えることが可能です。
今回はさらに、この反復処理に乱数を適用してみます。 乱数とは、サイコロを振って得られる数字のように規則性のない数のことです。p5.jsでは random() 関数を使用することで範囲を指定して乱数を生成することが可能です。
乱数と反復を組合せることで、偶然性を取り入れた表現が可能となります。図形の位置、大きさ、色などを乱数を利用して特定の範囲内でランダムに繰り返し指定することで、偶然性をコントロールしながら表現に取り入れることができるようになります。いろいろな可能性を試してみましょう。
ここまでは、主に静止した図形を主に扱ってきました。今回はアニメーション、つまり図形を動かす方法についてより深く考えていきます。
まず、位置と速度によって動きを記述する方法について考えていきます。さらにそこから発展させて、「ベクトル」という概念を用いて、向きと大きさをもった量としてアニメーションを記述する方法について学んでいきます。
第4回: 反復による表現の中で、プログラムを構造化する際の3つの基本構造として、順次処理 (sequence)、反復 (iteration)、条件分岐 (selection) があると解説しました。今回はこの中の条件分岐(selection)について扱います。
条件分岐の構造を実現するには、まず論理式(Boolean Expression)を用いてtrue( = 真)またはfalse( = 偽)を返す式を記述します。この式の判定結果をif文の中で使用することで、条件によって挙動を変化させる構造を記述することが可能です。
今回は、論理式と条件文についてじっくりと学んでいきます。
プログラムを構造化していく際に、3つの重要な構成要素があります。それは、「順次 (Sequence)」、「反復 (Iteration)」、「分岐 (Selection)」 です。今回は、この3つの構成要素の中の反復 (Iteration) に注目して、Processingで形を描きながら反復について考えます。また、一意的でないランダムな値である「乱数」と反復を組合せて、どのような表現か可能となるか探求していきます。
今回は「乱数」による表現に挑戦します。乱数とは、サイコロを振って得られる数字のように規則性のない数のことです。p5.jsでは random() 関数を使用することで範囲を指定して乱数を生成することが可能です。
この規則性のない乱数を利用することで、偶然性を取り入れた表現が可能となります。図形の位置、大きさ、色などを乱数を利用して特定の範囲内でランダムに繰り返し指定することで、偶然性をコントロールしながら表現に取り入れることができるようになります。いろいろな可能性を試してみましょう。
次回までに以下の課題を作成して、OpenProcessingにアップロードしてください。
ここまで解説したプログラミング手法を活用してp5.jsで画面構成をしてください。次回の授業で発表します。
完成した作品にタイトルをつけて、OpenProcessingにアカウントを作成してアップロードしておいてください。