yoppa org – 2023

関数によるモジュール化とバリエーション

今回は、関数 (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で実際に描画しながら関数について学んでいきましょう。

映像資料

https://youtube.com/watch?v=AJW5Oge6dAQ%3Fversion%3D3%26rel%3D1%26showsearch%3D0%26showinfo%3D1%26iv_load_policy%3D1%26fs%3D1%26hl%3Den-US%26autohide%3D2%26wmode%3Dtransparent

スライド資料

関数によるモジュール化とバリエーション

サンプルコード

forkするサンプル https://www.openprocessing.org/sketch/726079
増殖する花のサンプル https://www.openprocessing.org/sketch/726406

本日の課題

課題: 関数 (function) をつかって大量に形を増殖させる

引数によってバリエーションをつけながら何か形を描く関数を作成してください。作成した関数をdraw()関数から呼び出して大量に形を描いてください。作成したプログラムはOpenProcessingに投稿してURLをフォームから提出してください。本日のタグは、 geidaima230602 です!

参考: 増殖する花 https://www.openprocessing.org/sketch/726406

提出フォーム

openFrameworks Addon 1: Addonについて – ofxGui

Addon(アドオン)とは、openFrameworksに機能を拡張するためのライブラリーやフレームワークです。processingのLibrariesのように、openFrameworks単体ではできなかった様々な機能を実現することが可能となります。Addonは、oF本体の開発者以外でも独自に開発して追加することが可能であり、繰り返し用いる機能や、CやC++で記述された既存のライブラリーをopenFrameworksに統合することが可能となります。

今回はAddonの導入を、まずofxGuiというプロジェクトにGUIを追加するアドオンで行います。ofxGuiを使用することで、例えば周囲の環境が異なる場所でインスタレーションを設置する時など、すぐにパラメータを最適な状態に調整して保存することができ、とても便利です。

スライド資料

サンプルファイル

サンプルファイル

アンケート

本日の授業に参加した方は、以下のアンケートに答えてください。

アンケート

p5.dom でHTML 5オブジェクトを使う

今回は、p5.domを使用します。p5.domを使用することで、p5.jsのcanvasの枠を越えて、HTML 5のDOMに直接アクセスすることが可能となります。例えば、Webブラウザで用意されている、ボタンやチェックボックス、スライダーなどのGUIのパーツを利用したり、Webカメラやマイクなどのデバイスへのアクセスしてインタラクションすることが出来るようになります。

映像資料

https://youtube.com/watch?v=mQun92HLjLk%3Fversion%3D3%26rel%3D1%26showsearch%3D0%26showinfo%3D1%26iv_load_policy%3D1%26fs%3D1%26hl%3Den-US%26autohide%3D2%26wmode%3Dtransparent

スライド資料

p5.js Libraryを使う 1 – p5.dom でHTML 5オブジェクトを使う

サンプルプログラム

本日の課題

p5.jsのp5.domライブラリーを用いて作品を制作してください!

p5.domで利用する機能は自由
- GUI系 (テキスト入力、ボタン、スライダー …etc.)
- カメラ
- オーディオ (マイク入力が使えます!)
講義内で紹介していない機能も自由に使用してください
- リファレンス: https://p5js.org/reference/#group-DOM
OpenProcessingに投稿、提出フォームからURLを提出してください!

本日のタグは、geidaima230526でお願いします!

提出フォーム

p5.jsで画像データを扱う – 画像の分析・再合成

p5.jsのスケッチは、外部のビットマップ画像(Jpeg, GIF、PNGなど)をデータとしてプログラムに読み込むことができます。読み込んだ画像は単に画面に表示するだけでなく、色や明度やサイズを変更して表示することができます。さらには、画像に含まれる全てのピクセルの色情報を読み取り配列に格納することが可能です。そのデータをもとに別の画像を再生成することが可能となり、読み込んだ画像データの色情報をもとにした多彩な表現が可能となります。

今回はp5.jsに画像を読み込んで、分析再合成することで、様々な表現の可能性について探っていきます。

スライド資料

p5.jsで画像データを扱う – 画像の分析・再合成

本日の課題

テーマ: 「p5.jsに読み込んだ画像ファイルのデータで表現する!」

本日の映像資料を参考に、OpenProcessingに画像をアップロードした画像をスケッチに読み込み画像ファイルの情報から新たなイメージを生成してください。読み込む画像は自由です。OpenProcessingに投稿してURLを提出フォームから送信してください。

提出フォーム

動きを生みだす – アニメーションとベクトル

今回からいよいよp5.jsを用いた動きのある表現（= アニメーション）について扱っていきます。アニメーションを実現するには、まず時間を扱う基本構造を知る必要があります。p5.jsでは、setup(), draw() という2つのブロックにわけて、初期化と更新を行うことでアニメーションを実現しています。まず始めはこの基本構造について理解します。次に、これから動きを扱う際に、向きと大きさをもった「ベクトル」という概念を理解します。ベクトルを理解することで、位置や運動を整理して記述することが可能となります。最後に、この基本構造をベクトルを活用して簡単なアニメーションを作成します。

参考リンク

スライド資料、サンプルプログラム

動きを生みだす – アニメーションとベクトル

サンプルプログラム

アンケート

本日の授業を受講した方は以下のアンケートに回答してください。

アンケート

p5.jsで画像データを扱う – 画像の分析・再合成

今回はp5.jsに画像を読み込んで、分析再合成することで、様々な表現の可能性について探っていきます。

映像資料

https://youtube.com/watch?v=-McHA9YZw6g%3Fversion%3D3%26rel%3D1%26showsearch%3D0%26showinfo%3D1%26iv_load_policy%3D1%26fs%3D1%26hl%3Den-US%26autohide%3D2%26wmode%3Dtransparent

スライド資料、サンプルプログラム

本日の課題

テーマ: 「p5.jsに読み込んだ画像ファイルのデータで表現する!」

本日のタグは、geidaima230519でお願いします!

提出フォーム

関数によるモジュール化とバリエーション

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);
}

関数はプログラムを処理内容ごとにモジュール化して、プログラムの可読性を高めデバッグを容易にします。

p5.jsで実際に描画しながら関数について学んでいきましょう。

本日の完成イメージ

スライド資料

関数によるモジュール化とバリエーション

本日の課題

関数 (Function) を使用して、大量に形を描くプログラムをp5.jsで作成してOpenProcessingにアップロードしてください。

提出はこちらから

提出フォーム

動きを生みだす – アニメーションとベクトル

前回も図形を動かすプログラムを紹介しましたが、今回はより詳細に動きのある表現（= アニメーション）について扱っていきます。アニメーションを実現するには、まず時間を扱う基本構造を知る必要があります。p5.jsでは、setup(), draw() という2つのブロックにわけて、初期化と更新を行うことでアニメーションを実現しています。まず始めはこの基本構造について理解します。次に、これから動きを扱う際に、向きと大きさをもった「ベクトル」という概念を理解します。ベクトルを理解することで、位置や運動を整理して記述することが可能となります。最後に、この基本構造をベクトルを活用して簡単なアニメーションを作成します。

スライド資料

動きを生みだす – アニメーションとベクトル

サンプルプログラム

最後の実習の際は、以下のプログラムを参考にしてください。

応用例 : マウスインタラクション

本日の課題

スライド資料を読んで本日の内容を学ぶ
サンプルプログラムを改造してアニメーションを用いたp5.jsのプログラムを作成してOpenProcessingにアップロード
下記のアンケートから提出

課題提出アンケート

アンケート

動きを生みだす – アニメーションとベクトル

今回からいよいよ動きのある表現（= アニメーション）について扱っていきます。アニメーションを実現するには、まず時間を扱う基本構造を知る必要があります。p5.jsでは、setup(), draw() という2つのブロックにわけて、初期化と更新を行うことでアニメーションを実現しています。まず始めはこの基本構造について理解します。次に、これから動きを扱う際に、向きと大きさをもった「ベクトル」という概念を理解します。ベクトルを理解することで、位置や運動を整理して記述することが可能となります。最後に、この基本構造をベクトルを活用して簡単なアニメーションを作成します。

映像資料

https://youtube.com/watch?v=wVYVaNbhwxE%3Fversion%3D3%26rel%3D1%26showsearch%3D0%26showinfo%3D1%26iv_load_policy%3D1%26fs%3D1%26hl%3Den-US%26autohide%3D2%26wmode%3Dtransparent

スライド資料、サンプルプログラム

本日の課題

本日の課題「たくさんの物体の動きを表現する」

本日解説した内容を踏まえて、たくさんの物体の動きを表現してください。

アニメーションの原理 setup()とdraw()
ベクトル
条件分岐(if)
配列

作成した作品は、OpenProcessingに投稿してURLをオンラインフォームから提出してください。本日のタグは geidaima230512 です!

提出フォーム

反復と乱数

順次処理 (sequence)、反復 (iteration)、条件分岐 (selection) は、プログラムを構造化する際の基本構造です。今回はこの3つのプログラムの基本構造の中から「反復 (iteration)」についてとりあげます。コンピュータは何度もくりかえし処理することが得意です。プログラムで指定さえすれば、数百回、数千回、数万回と不満を言うことなく瞬時に反復処理を行います。反復によって人力の作業では膨大な時間がかかるような処理も瞬時に終えることが可能です。

今回はさらに、この反復処理に乱数を適用してみます。乱数とは、サイコロを振って得られる数字のように規則性のない数のことです。p5.jsでは random() 関数を使用することで範囲を指定して乱数を生成することが可能です。

乱数と反復を組合せることで、偶然性を取り入れた表現が可能となります。図形の位置、大きさ、色などを乱数を利用して特定の範囲内でランダムに繰り返し指定することで、偶然性をコントロールしながら表現に取り入れることができるようになります。いろいろな可能性を試してみましょう。