前回はopenFrameworksで、位置と速度という2つの変数 (Veriable) を使用して図形1つをアニメーションさせるところまで到達できました。今回はこのプログラムを応用して複数の図形を同時に動かす方法について解説していきます。複数の図形を動かすには位置と速度という2つのベクトルを個別の変数にではなくまとめて取り扱うデータの格納方法が必要となります。こうした場合には配列(Array)を使用すると便利です。それぞれのベクトルを配列にまとめることで、大量の図形のアニメーションをシンプルに記述することが可能です。さらに、あらかじめ物体の最大数が決まっていない際には、可変長配列 (std::vector) を使用するという方法もあります。この方法もあわせて解説していきます。
スライド資料
次回までの課題
本日のサンプルのプログラムをもとに、2次元のアニメーションを3次元に拡張してください!
- ヒント:
- 位置と速度のベクトルをglm::vec2 を glm::vec3 へ
- 座標は、(x, y) から (x, y, z) へと拡張される
- バウンドさせる制限に、z座標の制限もつける
- ベクトルの計算はそのままでOK
- 締切 :
- 次回のこの授業の開始まで。次回に答合わせしていきます!!
課題のファイルとその解答例
アンケート
本日の授業を受講した方は、以下のアンケートに答えてください。
順次処理 (sequence)、反復 (iteration)、条件分岐 (selection) は、プログラムを構造化する際の基本構造です。今回はこの3つのプログラムの基本構造の中から「反復 (iteration)」についてとりあげます。 コンピュータは何度もくりかえし処理することが得意です。プログラムで指定さえすれば、数百回、数千回、数万回と不満を言うことなく瞬時に反復処理を行います。反復によって人力の作業では膨大な時間がかかるような処理も瞬時に終えることが可能です。
今回はさらに、この反復処理に乱数を適用してみます。 乱数とは、サイコロを振って得られる数字のように規則性のない数のことです。p5.jsでは random() 関数を使用することで範囲を指定して乱数を生成することが可能です。
乱数と反復を組合せることで、偶然性を取り入れた表現が可能となります。図形の位置、大きさ、色などを乱数を利用して特定の範囲内でランダムに繰り返し指定することで、偶然性をコントロールしながら表現に取り入れることができるようになります。いろいろな可能性を試してみましょう。
映像資料
スライド資料
サンプルプログラム
本日の課題
本日のテーマ: 「反復と乱数 – 色彩と形態による画面構成」
ここまで解説したプログラミング手法を活用してp5.jsで画面構成を行ってください。
- 繰り返し (for)
- 乱数 (random)
- 色彩 (HSB)
- 形態
- 座標
作成した作品にタイトルをつけて、OpenProcessingに投稿して、そのURL (アドレス) を以下のオンラインフォームから提出してください。本日のタグは、geidai230428 です!
投稿フォーム
この講義で使用する開発環境であるp5.jsは、JavaScriptというプログラミング言語のライブラリです。つまり言語の文法やデータ構造などはJavaScriptに準拠しています。
今回は、JavaScirpt (p5.js) で使用されるデータ構造の基本を学びます。1つの値を格納する定数 (const) と変数 (let) 、複数の値を格納する配列 (Array) 、そして配列の操作といった内容を、p5.jsを用いて形やアニメーションを用いて視覚的に学んでいきます。
スライド資料
本日の課題 :
スライド資料を参考にプログラムを進めると以下のようなスケッチが完成します。
このスケッチを改造して何か1つ以上変化を加えてください。
- 円のサイズ
- 円の色
- 円の数
- アニメーションのスピード
- … etc.
変更を加えたプログラムはOpenProcessingに投稿して、そのURLをオンラインフォームから提出してください。課題の提出はこちらから。
この講義では、p5.jsを使用してコードによるデザインを行います。その最初の一歩として、コードによって「かたち」を描くにはどうすれば良いのか考えていきます。
まず始めに、1950年代〜70年代の、コンピューター黎明期から発展期におけるコード（プログラム）による様々な視覚表現について紹介します。過去の作家がどのようなアイデアで、何を表現しようとしてきたのか、その歴史を辿ります。
後半は、そうした歴史を踏まえた上で、 p5.js 実際に図形を描いていきます。まずp5.js の操作基本を解説し、簡単な図形を描きながらp5.jsでのプログラミングの基本を学びます。
スライド資料
次回までの課題
テーマ: 「p5.js基本図形と色による画面構成」
ここまで解説したp5.jsの機能を活用して画面構成をしてみましょう
- キャンバスのサイズは 800 x 600 pixelで
createCanvas(800, 600);
- 点、線、矩形、楕円、円といった基本図形
- 背景色、塗りの色、線の色
- 完成したら何かタイトルをつける
- 座標、色、数値による図形の描画に慣れるのが目的です
- 完成した作品はOpenProcessingに投稿してURLを提出
- mitmedia230427 でタグ付けする!
- 授業の最後の時間で簡単に作品発表をします!
アンケート
本日の講義に参加した方は下記のアンケートに回答してください。
今回からいよいよopenFrameworksによるプログラミングを開始していきます。
openFrameworksではProcessingやp5.jsのように新規ファイルを生成するだけではプログラムは開始できません。様々なファイルや設定を内包したプロジェクトを生成する必要があります。まず初めに新規のプロジェクトの生成の方法について説明します。
次に、openFrameworksでまず差し当って編集していく、main.cpp、ofApp.h、ofApp.cppという3つのファイルについて解説します。また、ofAppの中にある3つの重要な関数、setup()、update()、draw()の役割についても説明していきます。
後半はいよいよプログラミングしていきます。今回は物体が直線運動する簡単なアニメーションを完成させるところまでを目標とします。
スライド資料
アンケート
本日の授業を受講した方は、以下のアンケートに答えてください。
今回はまずCreative Codingについて解説していきます。Creative Codingとはコンピュータプログラミングの一種で、プログラミングによって機能の実現ではなく何かを表現することを目的とするものです。画像、アニメーション、映像、音響、音楽、3Dグラフィックなど様々な手段を用いて表現します。Creative Codingのための様々な開発環境が存在します。まずそれらの簡単な歴史と関連について説明していきます。
後半は、この授業で主に扱っていくp5.jsの開発環境を構築します。Visual Studio Codeにp5.jsの開発のための機能拡張をインストールしていきます。環境構築が完了したらVisual Studio Codeを用いたp5.jsの開発のやり方について実際にコーディングしながら解説します。
スライド資料
アンケート
本日の講義に参加した方は以下のアンケートに答えてください
プログラミング言語では、扱われるデータを一定期間記憶し必要なときに利用できるようにするための仕組みが必要となることがあります。そのための仕組みが変数(Variable)と定数(Constant)です。また、JavaScriptではオブジェクト(Object)という複数の変数をひとつのまとまりとして整理するためのデータ構造を利用可能です。
今回は、この変数、定数、オブジェクトについて、実際にp5.jsで視覚的にプログラミングすることを通して理解していきます。
映像資料
スライド資料
本日の課題
テーマ : マウスの位置によるインタラクション
マウスの位置を取得するシステム変数 (mouseX, mouseY) を使用して面白いインタラクションを考えてp5.jsで実現してください
- マウスの位置 (mouseX, mouseY)で変化させてみる
- 今回はフルスクリーンで
- createCanvas(windowWidth, windowHeight);
作成した作品はopenProcessingにアップロードしてそのURLを以下のフォームから提出してください。
今回は geidaima230421 のタグをつけて投稿してください。
提出フォーム
この講義ではp5.jsを使用してアルゴリズムやオブジェクト指向、データ構造など様々な内容を学んでいきます。具体的な内容に入る前に、本日はp5.jsの基本を確認していきます。今後の内容で必須の知識となりますのでしっかりと学んでいきましょう。
スライド資料
アンケート
本日のアンケートに以下から答えてください。
billboardExample
今回からいよいよopenFrameworksを使用してクリエイティブコーディングを始めていきます。
まず前半は、実際にコーディングを始める前に、openFrameworksとは何なのか、その開発の歴史と開発環境の特徴などを簡単に解説していきます。後半は、開発環境のセットアップが正しく完了しているか確認するために、付属するサンプルファイルをビルド (コンパイル) して、openFrameworksで作成したアプリケーションが起動するか確認していきます。
スライド資料
アンケート
本日の講義に参加した方は以下のアンケートに答えてください。
この講義では、p5.jsを使用してコードによるデザインを行います。その最初の一歩として、コードによって「かたち」を描くにはどうすれば良いのか考えていきます。
まず始めに、1950年代〜70年代の、コンピューター黎明期から発展期におけるコード（プログラム）による様々な視覚表現について紹介します。過去の作家がどのようなアイデアで、何を表現しようとしてきたのか、その歴史を辿ります。
後半は、そうした歴史を踏まえた上で、 p5.js 実際に図形を描いていきます。まずp5.js の操作基本を解説し、簡単な図形を描きながらp5.jsでのプログラミングの基本を学びます。
映像資料
スライド資料
本日の課題
テーマ: 「p5.js基本図形と色による画面構成」
ここまで解説したp5.jsの機能を活用して画面構成をしてみましょう
- キャンバスのサイズは 800 x 600 pixelで
createCanvas(800, 600);
- 点、線、矩形、楕円、円といった基本図形
- 背景色、塗りの色、線の色
- 完成したら何かタイトルをつける
- 座標、色、数値による図形の描画に慣れるのが目的です
- 完成した作品はOpenProcessingに投稿してURLを提出
- geidaima230414 でタグ付けする!
- 授業の最後の時間で簡単に作品発表をします!
課題の提出は以下のオンラインフォームから。課題の提出をもって出席とします。
