今回は、最終課題に向けて、具体的なサンプルをいろいろ紹介していきます。
最終課題
最終課題のテーマ :「インタラクティブ・サウンド・アニメーション」
金曜日のサウンドの授業で作成した音を使用して、Webブラウザ上でインタラクティブなアニメーション作品を制作し発表する。
- 音響素材 : サウンド（矢坂先生）
- プログラミング : ネット（田所）
- この2つの要素を融合する
- インタラクションは、キーボード操作を基本とするが、それ以外のインタラクション（マウス、Webカメラ、センサー?）を使うのは自由
- 授業では、p5.jsを使用して解説するが、それ以外のJavascriptのライブラリ、その他の言語を使用しても良い
- ただし作品はWebブラウザで発表できるものに限定
- 締切: 2016年1月12日 (火) の講評会まで!
スライド資料
課題の提出方法
課題は、多摩美のWebサーバーに提出します。
1. 課題表紙ページの作成
前半作成したTumblrのポートフォリオのページと、今回作成した「インタラクティブ・サウンド・アニメーション」の双方へのリンクをした表紙ページを作成します。下記のテンプレートから作成してください。余裕があれば、CSSを改変してデザインを変更してください。
2.「インタラクティブ・サウンド・アニメーション」のファイル一式準備
「インタラクティブ・サウンド・アニメーション」のファイル一式を、階層構造はそのままで任意のフォルダ名を設定します。（例: interactive_sound）
ファイル一式は下記からダウンロードしてください。
3.iddのファイルサーバーに接続
iddのファイルサーバーに接続します。
- afp://fs.idd.tamabi.ac.jp
4.ファイル一式のアップロード
以下のファイル/フォルダを、マウントされた個人のネットワークフォルダの「public_html」内にコピーします。（コピーする場所重要!!）
- 「インタラクティブ・サウンド・アニメーション」のファイル一式（例: interactive_sound）
- 表紙ページ: index.html
- 表紙ページ: cssフォルダ
5.ページの確認
以下のリンクにある、IDDのMy Profileページの「ホームページアドレス」をから、自身のページが正しくアップロードされていることを確認します。
参考
IDDのWebページの公開などの詳細な情報は、idd ITサポートのページを参考にしてください。
前回に引き続きp5.jsでWebブラウザ上でプログラミングしていきます。今回からは、p5.jsでサウンドを扱っていきます。最終目標のイメージとして、音と映像をインタラクティブに操作する作品、例えば、patatapのような作品をWebブラウザ上で発表します。
スライド資料
この講義のここまで前半3回では「Web基礎」と題して、HTMLとCSSの基本、そしてTumblrを使用したオンライン・ポートフォリオの作成について解説してきました。前半のまとめとして、作成したオンライン・ポートフォリオのベースとなる部分を提出してもらいます。提出方法は授業内で指示します。
いよいよ後半は、サウンド&ネットのサウンドのパートとも協力して、Web上で音を使用した作品を公開することを最終目標に、新たな内容に進んでいきます。
JavaScript – Webブラウザでプログラミングする
これまで取り扱ってきた、HTMLやCSSは人工的に仕様が策定された言語ではありますが、プログラミング言語ではありませんでした（HTMLはマークアップ言語、CSSはスタイルシート言語）。
HTMLやCSSとは別に、Webブラウザ上で動作させることのできるプログラミング言語が存在します。その代表的な言語がJavaScriptです。
現在、Webサイトは「文書」を載せるためのメディアから、「アプリケーション」を作動させるためのプラットフォームへとその姿を変えつつあります。そのための技術を総称して（広義の）HTML5と呼ばれ、次世代のWeb技術として注目されています。
JavaScriptはこうしたHTML5の技術を支える根幹となるプログラミング言語といえます。
※ 注意: プログラミング言語のJavaとJavaScriptは、名称が似ているので関連する技術と勘違いされがちですが、全く関係ありません。「ハム」と「ハムスター」くらい違います。
JavaScriptのためのライブラリ
JavaScirptはプログラミング言語や開発環境をダウンロードしたり設定しなくても、Webブラウザさえあえればすぐにプログラミングが可能です。ただし、JavaScript単体でプログラミングするには、ある程度のプログラミングに関する知識と学習が必要となります。
JavaScriptでは、開発を容易にするための拡張機能として、ライブラリ（Library）と呼ばれる、汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたものが数多く開発され、フリーウェアとして配布されています。
代表的なものだけでも数多くのライブラリが存在しています。
こうした数多くのライブラリの中から、今回はp5.jsというライブラリを使用していきたいと考えています。
p5.js
p5.jsはアーティストでプログラマーのLauren McCarthyさんを中心に、Processing Foundationやニューヨーク大学ITPのサポートで開発されています。
p5.jsを採用した理由はいくつかあります。
- 既に春学期にProcessingを学んでいるので、導入が楽
- テキストやビデオ（Webcamからの入力を含む）、サウンドといったHTML5の他の要素を使用できる
- わかりやすい開発環境（p5 editor）が存在する
- Processingの開発コミュニティーとの相互交流がある
様々な利点からp5.jsを活用していくことにしました。
スライド資料
