今回は、関数 (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をフォームから提出してください。
提出フォーム
今回は、関数 (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で実際に描画しながら関数について学んでいきましょう。
スライド資料
サンプルコード
アンケート
今回の授業に出席した方は、以下のアンケートに回答してください。
アンケート
この講義では、ここまで主に２次元平面上での描画による表現を扱ってきました。今回は２次元での表現からさらに（文字通り）次元を越えて、３次元空間での表現について考えていきたいと思います。
openFrameworksで3Dグラフィクスを扱う手法はこれまでとさほど変化はありません。なぜなら、openFrameworksの描画の基本はOpenGLで行っています。OpenGLはそもそも３次元のグラフィクスの描画のために開発されたライブラリであり、最初から３次元空間をとり扱うための様々な機能が備わっています。
しかし、3Dの物体を扱うには、これまでとは違った様々な要素が加わります。カメラ（視点）、ライティング、光と影（シェーディング）、奥行の重なりなどといった２次元の平面には無かった様々な技術や概念の理解が必要となります。
今回は、立方体 (ofBoxPrimitive) と球体 (ofSpherePrimitive) という3Dの基本図形の描画を通して、3Dグラフィクスの基本を学んでいきます。
スライド資料、サンプルプログラム
本日の課題
本日の課題のテーマ : 3Dオブジェクトをアニメーションさせる。
本日紹介した3Dの基本図形を用いて、アニメーションを作成してください。何を動かすかは自由です。
次回の授業で発表をしてもらいます!
アンケート
本日の授業に出席した方は、以下のアンケートに回答してください。
アンケート
今回は、p5.domを使用します。p5.domを使用することで、p5.jsのcanvasの枠を越えて、HTML 5のDOMに直接アクセスすることが可能となります。例えば、Webブラウザで用意されている、ボタンやチェックボックス、スライダーなどのGUIのパーツを利用したり、Webカメラやマイクなどのデバイスへのアクセスしてインタラクションすることが出来るようになります。
映像資料
スライド資料
サンプルプログラム
本日の課題
p5.jsのp5.domライブラリーを用いて作品を制作してください!
- p5.domで利用する機能は自由
- GUI系 (テキスト入力、ボタン、スライダー …etc.)
- カメラ
- オーディオ (マイク入力が使えます!)
- 講義内で紹介していない機能も自由に使用してください
- OpenProcessingに投稿、提出フォームからURLを提出してください!
提出フォーム
p5.jsのスケッチは、外部のビットマップ画像(Jpeg, GIF、PNGなど)をデータとしてプログラムに読み込むことができます。読み込んだ画像は単に画面に表示するだけでなく、色や明度やサイズを変更して表示することができます。さらには、画像に含まれる全てのピクセルの色情報を読み取り配列に格納することが可能です。そのデータをもとに別の画像を再生成することが可能となり、読み込んだ画像データの色情報をもとにした多彩な表現が可能となります。
今回はp5.jsに画像を読み込んで、分析再合成することで、様々な表現の可能性について探っていきます。
スライド資料、サンプルプログラム
本日の課題
テーマ: 「p5.jsに読み込んだ画像ファイルのデータで表現する!」
本日の映像資料を参考に、OpenProcessingに画像をアップロードした画像をスケッチに読み込み画像ファイルの情報から新たなイメージを生成してください。読み込む画像は自由です。OpenProcessingに投稿してURLを提出フォームから送信してください。
提出フォーム
p5.jsのスケッチは、外部のビットマップ画像(Jpeg, GIF、PNGなど)をデータとしてプログラムに読み込むことができます。読み込んだ画像は単に画面に表示するだけでなく、色や明度やサイズを変更して表示することができます。さらには、画像に含まれる全てのピクセルの色情報を読み取り配列に格納することが可能です。そのデータをもとに別の画像を再生成することが可能となり、読み込んだ画像データの色情報をもとにした多彩な表現が可能となります。
今回はp5.jsに画像を読み込んで、分析再合成することで、様々な表現の可能性について探っていきます。
映像資料
スライド資料、サンプルプログラム
本日の課題
テーマ: 「p5.jsに読み込んだ画像ファイルのデータで表現する!」
本日の映像資料を参考に、OpenProcessingに画像をアップロードした画像をスケッチに読み込み画像ファイルの情報から新たなイメージを生成してください。読み込む画像は自由です。OpenProcessingに投稿してURLを提出フォームから送信してください。
提出フォーム
今回からいよいよ動きのある表現（= アニメーション）について扱っていきます。アニメーションを実現するには、まず時間を扱う基本構造を知る必要があります。p5.jsでは、setup(), draw() という2つのブロックにわけて、初期化と更新を行うことでアニメーションを実現しています。まず始めはこの基本構造について理解します。次に、これから動きを扱う際に、向きと大きさをもった「ベクトル」という概念を理解します。ベクトルを理解することで、位置や運動を整理して記述することが可能となります。最後に、この基本構造をベクトルを活用して簡単なアニメーションを作成します。
スライド資料、サンプルプログラム
アンケート
本日の授業に参加した方は、以下のアンケートに答えてください。
アンケート
今回からいよいよ動きのある表現（= アニメーション）について扱っていきます。アニメーションを実現するには、まず時間を扱う基本構造を知る必要があります。p5.jsでは、setup(), draw() という2つのブロックにわけて、初期化と更新を行うことでアニメーションを実現しています。まず始めはこの基本構造について理解します。次に、これから動きを扱う際に、向きと大きさをもった「ベクトル」という概念を理解します。ベクトルを理解することで、位置や運動を整理して記述することが可能となります。最後に、この基本構造をベクトルを活用して簡単なアニメーションを作成します。
映像資料
スライド資料、サンプルプログラム
本日の課題
本日の課題「たくさんの物体の動きを表現する」
本日解説した内容を踏まえて、たくさんの物体の動きを表現してください。
- アニメーションの原理 setup()とdraw()
- ベクトル
- 条件分岐(if)
- 配列
作成した作品は、OpenProcessingに投稿してURLをオンラインフォームから提出してください。
提出フォーム
今回は「乱数」による表現に挑戦します。乱数とは、サイコロを振って得られる数字のように規則性のない数のことです。p5.jsでは random() 関数を使用することで範囲を指定して乱数を生成することが可能です。
この規則性のない乱数を利用することで、偶然性を取り入れた表現が可能となります。図形の位置、大きさ、色などを乱数を利用して特定の範囲内でランダムに繰り返し指定することで、偶然性をコントロールしながら表現に取り入れることができるようになります。いろいろな可能性を試してみましょう。
スライド資料
本日の課題
本日のテーマ: 「反復と乱数 – 色彩と形態による画面構成」
ここまで解説したプログラミング手法を活用してp5.jsで画面構成を行ってください。
- 繰り返し (for)
- 乱数 (random)
- 色彩 (HSB)
- 形態
- 座標
作成した作品にタイトルをつけて、OpenProcessingに投稿して、そのURL (アドレス) を以下のオンラインフォームから提出してください。
投稿フォーム
