前回はopenFrameworksで、位置と速度という2つの変数 (Veriable) を使用して図形1つをアニメーションさせるところまで到達できました。今回はこのプログラムを応用して複数の図形を同時に動かす方法について解説していきます。複数の図形を動かすには位置と速度という2つのベクトルを個別の変数にではなくまとめて取り扱うデータの格納方法が必要となります。こうした場合には配列(Array)を使用すると便利です。それぞれのベクトルを配列にまとめることで、大量の図形のアニメーションをシンプルに記述することが可能です。さらに、あらかじめ物体の最大数が決まっていない際には、可変長配列 (std::vector) を使用するという方法もあります。この方法もあわせて解説していきます。
スライド資料
サンプルプログラム
サンプルプログラムは以下からダウンロードしてください。
本日の課題
本日の最終のプログラム 「一定の数に制限する」 をもとに、2次元のアニメーションを3次元に拡張してください!
ヒント:
- 位置と速度のベクトルをglm::vec2 を glm::vec3 へ
- 座標は、(x, y) から (x, y, z) へと拡張される
- バウンドさせる制限に、z座標の制限もつける
- ベクトルの計算はそのままでOK
作成したofApp.hとofApp.cppが入ったフォルダに以下の名前をつけて、Zip圧縮したものをGoogle Formsから提出してください。
- 学籍番号氏名(英字)
- 例「01234567AtsushiTadokoro」
課題提出フォーム
プログラミング言語では、扱われるデータを一定期間記憶し必要なときに利用できるようにするための仕組みが必要となることがあります。そのための仕組みが変数(Variable)と定数(Constant)です。また、JavaScriptではオブジェクト(Object)という複数の変数をひとつのまとまりとして整理するためのデータ構造を利用可能です。
今回は、この変数、定数、オブジェクトについて、実際にp5.jsで視覚的にプログラミングすることを通して理解していきます。
スライド資料
本日の課題
テーマ : マウスの位置によるインタラクション
マウスの位置を取得するシステム変数 (mouseX, mouseY) を使用して面白いインタラクションを考えてp5.jsで実現してください
- マウスの位置 (mouseX, mouseY)で変化させてみる
- 今回はフルスクリーンで
- createCanvas(windowWidth, windowHeight);
作成した作品はopenProcessingにアップロードしてそのURLを以下のフォームから提出してください。
提出フォーム
プログラミング言語では、扱われるデータを一定期間記憶し必要なときに利用できるようにするための仕組みが必要となることがあります。そのための仕組みが変数(Variable)と定数(Constant)です。また、JavaScriptではオブジェクト(Object)という複数の変数をひとつのまとまりとして整理するためのデータ構造を利用可能です。
今回は、この変数、定数、オブジェクトについて、実際にp5.jsで視覚的にプログラミングすることを通して理解していきます。
スライド資料
本日の課題
ballオブジェクトを改造して、オリジナルのballを作ってください。変更する項目は自由です
- 初級 : 色、大きさ、速さ …など
- 中級 : 動き
- 上級 : ballの数を増やしてみる
OpenProcessingに投稿してURLをFORMから提出してください。
課題提出フォーム
読み手が制作されたデザインから受ける印象は、書体の種類や文字の配置によって大きく変わります。また、書体や文字の配置や大きさ行送りなどによって、文章の読み安さは大きく変化します。読み手に適切に情報を伝えるデザインを制作するには、書体の種類、書体によるイメージ、タイトルに適した書体と本文に適した書体、読み易い文章のための文字の配置方法など、様々な知識が必要です。今回は文字と書体、文章のデザインについて、InkScapeを使用しながら学んでいきます。
スライド資料
本日の課題
InkScapeを使用して、総合デザイン工学科のリーフレットを作成しましょう。
以下のZipファイルをダウンロードして展開すると、制作テンプレートとサンプルが入っています。
制作したファイルをInkScape SVG形式で保存して、以下のフォームから提出します。
課題提出フォーム
※提出の際にGoogleアカウントでログインする必要があります。Googleアカウントの無い方は、以下のリンクから作成してください。
今回からいよいよopenFrameworksによるプログラミングを開始していきます。
openFrameworksではProcessingやp5.jsのように新規ファイルを生成するだけではプログラムは開始できません。様々なファイルや設定を内包したプロジェクトを生成する必要があります。まず初めに新規のプロジェクトの生成の方法について説明します。
次に、openFrameworksでまず差し当って編集していく、main.cpp、ofApp.h、ofApp.cppという3つのファイルについて解説します。また、ofAppの中にある3つの重要な関数、setup()、update()、draw()の役割についても説明していきます。
後半はいよいよプログラミングしていきます。今回は物体が直線運動する簡単なアニメーションを完成させるところまでを目標とします。
スライド資料
本日の課題
動画内で解説したアニメーションのプログラムを改造して新たなプログラムを作成してください。
変更例
以下のフォームから、作成したプログラムのofApp.hとofApp.cppのファイルを添付して送信してください。
課題提出フォーム
この講義では、p5.jsを使用してコードによるデザインを行います。その最初の一歩として、コードによって「かたち」を描くにはどうすれば良いのか考えていきます。
まず始めに、1950年代〜70年代の、コンピューター黎明期から発展期におけるコード（プログラム）による様々な視覚表現について紹介します。過去の作家がどのようなアイデアで、何を表現しようとしてきたのか、その歴史を辿ります。
後半は、そうした歴史を踏まえた上で、 p5.js 実際に図形を描いていきます。まずp5.js の操作基本を解説し、簡単な図形を描きながらp5.jsでのプログラミングの基本を学びます。
スライド資料
本日の課題
テーマ: 「p5.js基本図形と色による画面構成」
ここまで解説したp5.jsの機能を活用して画面構成をしてみましょう
- キャンバスのサイズは 800 x 600 pixelで
createCanvas(800, 600); - 点、線、矩形、楕円、円といった基本図形
- 背景色、塗りの色、線の色
- 完成したら何かタイトルをつける
- 座標、色、数値による図形の描画に慣れるのが目的です
- 完成した作品はOpenProcessingに投稿してURLを提出
- 最後の30分で簡単に作品発表をします!
課題の提出は以下のオンラインフォームから。課題の提出をもって出席とします。
この講義では、データ構造とアルゴリズムを理解する際に、できるだけ視覚的にかつ直感的にわかり易く解説していこうと考えています。そうした目的に適した開発環境として、p5.jsを使用していきます。
今回は、このp5.jsを用いたプログラミングの基本を行います。開発環境の構築方法やプログラミングの基礎を理解した上で、簡単な図形を描くところまでを目標とします。
スライド資料
本日の課題
課題 : 円、楕円、矩形、線を用いて、平面構成を行う
- p5.jsを用いて平面構成を行ってください
- キャンバスの大きさは、800 x 600 Pixelで
- 以下の要素を使用
- 円 (circle)
- 楕円 (ellipse)
- 矩形 (rect)
- 線 (line)
- 背景色と描画色は自由に設定してください
- 完成した作品は、OpenProcessingにアップロードして公開
- 必ずタイトル (題名) をつける
- 以下のフォームから提出してください。課題の提出をもって出席とします
課題提出フォーム
今回からいよいよopenFrameworksを使用してクリエイティブコーディングを始めていきます。
まず前半は、実際にコーディングを始める前に、openFrameworksとは何なのか、その開発の歴史と開発環境の特徴などを簡単に解説していきます。後半は、開発環境のセットアップが正しく完了しているか確認するために、付属するサンプルファイルをビルド (コンパイル) して、openFrameworksで作成したアプリケーションが起動するか確認していきます。
スライド資料
本日の課題
openFrameworksのexampleフォルダ以下にある様々なサンプルプロジェクトをビルドして実行してみましょう。
その中で気に入ったり興味をもったプロジェクトの実行結果のウィンドウをキャプチャーして以下のフォームから提出してください。フォームからの課題の提出をもって出席とします。
※画像の提出にはGoogleアカウントが必要です。もしGoogleアカウントを持っていない方はGoogleアカウントの作成ページより新規に作成してください。
今回から、Figmaを使用してデザインの基本を学んでいきます。
まず前回の課題であった、環境構築がきちんとできているか確認します。具体的には以下の3つが設定/インストールされている必要があります。
次に今回は、デザイン制作の流れを解説していきます。これは、今後様々な授業でパネルやポスターなどの資料を作っていく際の基本となります。
後半は実習として名刺のデザインを行います。解説したグリッドシステムを用いて「感覚」や「センス」ではなく、論理的にレイアウトを行っていく練習です。
スライドデータ
本日の課題
Figmaを使用して名刺をデザインしてください。必ずグリッドを使用して、論理的にレイアウトしてください。フォントは、Noto Sans CJK JPを使用すること。
以下のテンプレートを利用してください。
デザインが完成したら「Share」機能を使用してファイルのURL(アドレス)を取得して提出フォームに記入してください。詳細は動画内で説明しています。
初回となる今回は、まず、講義全体のオリエンテーションを行います。オンラインでの講義の方法について、また講義に関する基本的な情報について説明します。次に、この講義を始めるにあたり「なぜプログラミングするのか?」という内容のイントロダクションを説明します。Casey Reasによるプログラマーの歴史の解説を参照しながら「ハイブリッド」なプログラマー像を紹介します。後半は、この講義で使用する「p5.js」というプログラミングの開発環境について、その歴史を紹介した上で、開発のための環境構築について説明していきます。
スライド資料
本日の課題
まず、この授業で使用する開発環境を準備します。各自使用しているPCで以下の作業をしてください
以上の作業をしたら、オンラインフォームに記入して提出してください。課題の提出をもって出席とします。
