順次処理 (sequence)、反復 (iteration)、条件分岐 (selection) は、プログラムを構造化する際の基本構造です。今回はこの3つのプログラムの基本構造の中から「反復 (iteration)」についてとりあげます。 コンピュータは何度もくりかえし処理することが得意です。プログラムで指定さえすれば、数百回、数千回、数万回と不満を言うことなく瞬時に反復処理を行います。反復によって人力の作業では膨大な時間がかかるような処理も瞬時に終えることが可能です。
今回はさらに、この反復処理に乱数を適用してみます。 乱数とは、サイコロを振って得られる数字のように規則性のない数のことです。p5.jsでは random() 関数を使用することで範囲を指定して乱数を生成することが可能です。
乱数と反復を組合せることで、偶然性を取り入れた表現が可能となります。図形の位置、大きさ、色などを乱数を利用して特定の範囲内でランダムに繰り返し指定することで、偶然性をコントロールしながら表現に取り入れることができるようになります。いろいろな可能性を試してみましょう。
映像資料
スライド資料
本日の課題
本日のテーマ: 「反復と乱数 – 色彩と形態による画面構成」
ここまで解説したプログラミング手法を活用してp5.jsで画面構成を行ってください。
- 繰り返し (for)
- 乱数 (random)
- 色彩 (HSB)
- 形態
- 座標
作成した作品にタイトルをつけて、OpenProcessingに投稿して、そのURL (アドレス) を以下のオンラインフォームから提出してください。
投稿フォーム
順次処理 (sequence)、反復 (iteration)、条件分岐 (selection) は、プログラムを構造化する際の基本構造です。今回はこの3つのプログラムの基本構造の中から「反復 (iteration)」についてとりあげます。
コンピュータは何度もくりかえし処理することが得意です。プログラムで指定さえすれば、数百回、数千回、数万回と不満を言うことなく瞬時に反復処理を行います。反復によって人力の作業では膨大な時間がかかるような処理も瞬時に終えることが可能です。
反復について、p5.jsでグラフィカルに理解していきましょう。
スライド資料
本日の課題
課題: 繰り返しで表現する
繰り返しの構文 (for文) を用いて自由に形を描いてください。描く形、繰り返す回数は自由に決めてください。作成した作品はOpenProcessingに投稿してURLをGoogleフォームから回答してください。課題の提出をもって出席とします。
提出フォーム
今回からいよいよopenFrameworksによるプログラミングを開始していきます。
openFrameworksではProcessingやp5.jsのように新規ファイルを生成するだけではプログラムは開始できません。様々なファイルや設定を内包したプロジェクトを生成する必要があります。まず初めに新規のプロジェクトの生成の方法について説明します。
次に、openFrameworksでまず差し当って編集していく、main.cpp、ofApp.h、ofApp.cppという3つのファイルについて解説します。また、ofAppの中にある3つの重要な関数、setup()、update()、draw()の役割についても説明していきます。
後半はいよいよプログラミングしていきます。今回は物体が直線運動する簡単なアニメーションを完成させるところまでを目標とします。
スライド資料
アンケート
本日の授業を受講した方は、以下のアンケートに答えてください。
プログラミング言語では、扱われるデータを一定期間記憶し必要なときに利用できるようにするための仕組みが必要となることがあります。そのための仕組みが変数(Variable)と定数(Constant)です。また、JavaScriptではオブジェクト(Object)という複数の変数をひとつのまとまりとして整理するためのデータ構造を利用可能です。
今回は、この変数、定数、オブジェクトについて、実際にp5.jsで視覚的にプログラミングすることを通して理解していきます。
映像資料
スライド資料
本日の課題
テーマ : マウスの位置によるインタラクション
マウスの位置を取得するシステム変数 (mouseX, mouseY) を使用して面白いインタラクションを考えてp5.jsで実現してください
- マウスの位置 (mouseX, mouseY)で変化させてみる
- 今回はフルスクリーンで
- createCanvas(windowWidth, windowHeight);
作成した作品はopenProcessingにアップロードしてそのURLを以下のフォームから提出してください。
提出フォーム
プログラミング言語では、扱われるデータを一定期間記憶し必要なときに利用できるようにするための仕組みが必要となることがあります。そのための仕組みが変数(Variable)と定数(Constant)です。また、JavaScriptではオブジェクト(Object)という複数の変数をひとつのまとまりとして整理するためのデータ構造を利用可能です。
今回は、この変数、定数、オブジェクトについて、実際にp5.jsで視覚的にプログラミングすることを通して理解していきます。
スライド資料
アンケート
本日の授業を受講した方は、下記のアンケートに答えてください。
billboardExample
今回からいよいよopenFrameworksを使用してクリエイティブコーディングを始めていきます。
まず前半は、実際にコーディングを始める前に、openFrameworksとは何なのか、その開発の歴史と開発環境の特徴などを簡単に解説していきます。後半は、開発環境のセットアップが正しく完了しているか確認するために、付属するサンプルファイルをビルド (コンパイル) して、openFrameworksで作成したアプリケーションが起動するか確認していきます。
スライド資料
本日の課題
openFrameworksのexampleフォルダ以下にある様々なサンプルプロジェクトをビルドして実行してみましょう。その中で気に入ったり興味をもったプロジェクトをいくつか選んで、そのサンプルは一体何をやっているのか予想して答えてください。
この講義では、p5.jsを使用してコードによるデザインを行います。その最初の一歩として、コードによって「かたち」を描くにはどうすれば良いのか考えていきます。
まず始めに、1950年代〜70年代の、コンピューター黎明期から発展期におけるコード（プログラム）による様々な視覚表現について紹介します。過去の作家がどのようなアイデアで、何を表現しようとしてきたのか、その歴史を辿ります。
後半は、そうした歴史を踏まえた上で、 p5.js 実際に図形を描いていきます。まずp5.js の操作基本を解説し、簡単な図形を描きながらp5.jsでのプログラミングの基本を学びます。
映像資料
スライド資料
本日の課題
テーマ: 「p5.js基本図形と色による画面構成」
ここまで解説したp5.jsの機能を活用して画面構成をしてみましょう
- キャンバスのサイズは 800 x 600 pixelで
createCanvas(800, 600); - 点、線、矩形、楕円、円といった基本図形
- 背景色、塗りの色、線の色
- 完成したら何かタイトルをつける
- 座標、色、数値による図形の描画に慣れるのが目的です
- 完成した作品はOpenProcessingに投稿してURLを提出
- 授業の最後の時間で簡単に作品発表をします!
課題の提出は以下のオンラインフォームから。課題の提出をもって出席とします。
この講義では、データ構造とアルゴリズムを理解する際に、できるだけ視覚的にかつ直感的にわかり易く解説していこうと考えています。そうした目的に適した開発環境として、p5.jsを使用していきます。
今回は、このp5.jsを用いたプログラミングの基本を行います。開発環境の構築方法やプログラミングの基礎を理解した上で、簡単な図形を描くところまでを目標とします。
スライド資料
本日の課題
基本図形を使って、自由に形を描いてみよう!
- p5.jsを用いて平面構成を行ってください
- キャンバスの大きさは、フルスクリーンで
- createCanvas(windowWidth, windowHeight);
- 以下の要素を使用
- 円 (circle)
- 楕円 (ellipse)
- 矩形 (rect)
- 線 (line)
- 背景色と描画色は自由に設定してください
- 基本図形以外の高度な機能は自由に使ってかまいません!
- 完成した作品は、OpenProcessingにアップロードして公開
- 必ずタイトル (題名) をつける
- ハッシュタグを mit210415 で!
- 以下のフォームから提出してください。締切は次週の授業の開始前までとします。
提出フォーム
初回となる今回の講義は、まずこの「システム生体プログラミング特論」ではどんな内容を取り扱っていくのかを解説し、履修のための条件などについて説明します。成績の基準についても説明します。
後半は、まず始めに何故プログラミングが必要なのかをCasey Reasによる “History of the Future, Art & Technology from 1965 – Yesterday” の講演を参考にしながら解説していきます。さらにこの講義で扱う「クリエイティブコーディング」とは何か、その概要を紹介していきます。
スライド資料
アンケート
本日の講義についてのアンケートに答えてください。
次週までの課題
次週までに、各自のノートPCに以下に指示されているプログラミング開発環境をインストールしてきてください。
1. 統合開発環境 (IDE)
- Windows
- Visual Studio IDEからCommunity 2019をダウンロード
- 以下の設定でインストール
- macOS
- Application > AppStoreを起動
- 検索欄でXcodeで検索
- 表示されたページで「Install」ボタンを押してインストール
2. openFrameworks
現時点での最新版のver. 0.11.2 をダウンロードしてZipフィアルを展開しておいてください。
- Windows + Visual Studio
- macOS + Xcode
- ダウンロードしたファイルを展開して、書類フォルダなどに入れておく
ENIAC
初回となる今回は、まず、講義全体のオリエンテーションを行います。オンラインでの講義の方法について、また講義に関する基本的な情報について説明します。次に、この講義を始めるにあたり「なぜプログラミングするのか?」という内容のイントロダクションを説明します。Casey Reasによるプログラマーの歴史の解説を参照しながら「ハイブリッド」なプログラマー像を紹介します。後半は、この講義で使用する「p5.js」というプログラミングの開発環境について、その歴史を紹介した上で、開発のための環境構築について説明していきます。
映像資料
スライド資料
本日の課題
まず、この授業で使用する開発環境を準備します。各自使用しているPCで以下の作業をしてください
以上の作業をしたら、下記のオンラインフォームに記入して提出してください。課題の提出をもって出席とします。
