yoppa org – 2020

第8回: openFrameworks Addon 1: Addonについて – ofxGui

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

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

スライド資料

第8回: openFrameworks Addon 1: Addonについて – ofxGui

サンプルファイル

サンプルファイル

本日の課題

ofxGuiを使用して、GUIのパラメータで変化するスケッチを作成してください。変化させるものは何でも構いません (色、大きさ、形、速度 …etc.) 。オンライン講義の際と同様にGoogle Formから投稿してください。

投稿フォーム

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

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

映像資料

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

スライド資料

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

本日の課題

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

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

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

提出フォーム

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

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

映像資料

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

スライド資料

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

本日の課題

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

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

提出フォーム

第7回 openFrameworks + OOP 1 – オブジェクト指向プログラミング入門

これまでのopenFrameworksのプロジェクトは、ofApp.h と ofApp.cpp という2つのファイルに全てのプログラムを記述してきました。しかし、この方法では徐々にプロジェクトが複雑になり巨大化するうちに、扱いが困難になってきます。プログラミングをわかりやすく保つには、役割ごとに内容を分割して記述すべきです。openFrameworksの元となるプログラミング言語であるC++では「オブジェクト」という単位でプログラムを構造化していきます。このオブジェクトを基本単位にしたプログラミング手法のことを「オブジェクト指向プログラミング (Object Oriented Programing = OOP)」と呼びます。OOPはC++だけでなく、Java、Python、Ruby、C#、Objective-C、Swiftなどでも利用されていて、現在のプログラミング言語の主流となっているパラダイムです。

今回は、このOOPをopenFrameworksで実現する方法を「生成的な形態を生成する」というテーマに沿って徐々に発展させていきます。今回の内容が今後のより本格的な作品制作のための重要なテクニックとなっていきます。しっかり理解していきましょう。

映像資料

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

本日の課題

ランダムウォークの動きをするクラス(RandomWalker) を改造して、生成的な表現をする作品を作成してください。改造する内容は自由です。

3D化
色の変化
動きを変更
…etc.

いつものようにGoogle Formから投稿して提出してください。

提出フォーム

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

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

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

映像資料

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

本日の課題

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

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

提出フォーム

第6回: 条件分岐とアニメーション

第4回: 反復による表現の中で、プログラムを構造化する際の3つの基本構造として、順次処理 (sequence)、反復 (iteration)、条件分岐 (selection) があると解説しました。今回はこの中の条件分岐(selection)について扱います。

条件分岐の構造を実現するには、まず論理式(Boolean Expression)を用いてtrue( = 真)またはfalse( = 偽)を返す式を記述します。この式の判定結果をif文の中で使用することで、条件によって挙動を変化させる構造を記述することが可能です。

今回は、論理式と条件文についてアニメーションを活用しながらじっくりと学んでいきます。

映像資料

スライド資料

第6回: 条件分岐とアニメーション

本日の課題

動画で解説した画面の上下左右でバウンドするプログラムを改造して、ボールが壁にぶつかるたびに何か変化するようにしてください。

例: ボールが壁にぶつかると

ボール大きさが少しずつ大きくなる
ボールのスピードが少しずつ遅くなる
ボールの色が変化する
ボールがランダムな向きにバウンドする
…etc

作成したプログラムは、タイトルをつけてOpenProcessingに投稿して、URLを投稿フォームより送信してください。

課題投稿フォーム

第6回: openFrameworks より複雑な3Dの形態へ-3Dメッシュの操作

前回は、立方体 (ofBoxPrimitive) や球体 (ofSpherePrimitive) など3Dの基本図形を描画して、カメラやライティング、マテリアルの設定などを行いました。3Dの基本図形を組合わせて形状を複雑にしていくことは可能ですが、完全に自由な形態を生成することは困難です。

今回は、もっと自由に複雑な3Dの形状の生成に挑戦します。そのために、openFrameworksでポリゴンメッシュを扱うためのofMeshを利用していきます。まずofPlanePrimitiveなどで3Dの基本図形を生成し、そのメッシュの情報を抽出します。抽出されたメッシュの頂点の座標を移動することで複雑な形状へと発展させていきます。

映像資料

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

本日の課題

前回の授業「3Dグラフィクスの基本」と今日の内容を組合せて応用します。

今日とりあげたサンプルの1つを選択を選択して、その描画をワイヤーフレーム(drawWireframe) ではなく面を描画(draw)に変更してください。ライティングやマテリアルを工夫してリアルな質感にしましょう。

今回もGoogle Formsからソースコードを提出してください。

提出フォーム

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

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

映像資料

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

本日の課題

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

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

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

作成した作品は、OpenProcessingに投稿してURLをオンラインフォームから提出してください。

提出フォーム

第5回 : 最終課題制作実習

今回は、次週の最終課題の講評会に向けて、最終課題の制作実習の時間とします。

最終課題について

最終課題: 「身近なモノのポスターを (勝手に) つくる」

自分の身近にある愛用している製品の魅力を紹介するポスターを制作してください。題材にする製品は実在するもの (例えば、コップ、ボールペン、ノートPC、ギターなど) であれば何でも構いません。その製品の魅力が伝わるように工夫してポスターをデザインしてください。

今回の課題は、今後様々な演習で制作した作品を発表する際の基礎となるものです。今回の課題に関しては、むやみに奇をてらったデザインではなく、ここまで解説してきたデザインの基本である、レイアウト (グリッドシステム、余白)、文字と文章 (行揃え、行間、フォントサイズ、フォントフェイス)、配色 (カラースキーム) などを踏まえて、情報を的確に伝えるデザインを心掛けてください。

制作は以下のフォーマットに従ってください。