この講義の最終課題は以下のテーマとします
最終課題:canvas + JavaScriptで「時間」を表現する
この授業の後半で扱ってきた、HTML5のcanvas要素とJavaScriptをつかって「時間」を視覚的に表現してください。ただし、必ずしも「時間 = 時計」というわけではありません。いままでにない手法で「時間」というものを感じられる作品を目指してください。
- プログラムは、jsdo.it に投稿することで提出とします。
- 最終講評会は、1月23日の講義最終日に行います。
今日の内容
今日の授業では、この最終課題「時間を表現する」の準備として、まずは通常の時計をcanvas + JavaScriptで再現してみます。
openFrameworksは図形の描画のためのライブラリとしてOpenGLというプログラミングのインターフェイスを使用しています。OpenGLは2次元の図形だけでなく、3次元のグラフィクスを簡単に扱うことが可能です。今回は、openFrameworksの3Dグラフィックスの部分に注目して、様々な機能を実践します。
スライドを直接開く
スライドを直接開く
サンプルファイルのダウンロード
サンプルファイル12月22日分 (Google Docsにリンク)
今日から数回にわたって、この授業の最終課題の制作に向けて、実際にサンプルの作成を通してHTMLとCSSに関する様々な内容を復習していきます。今回は、960 grid systemを使用してページの設計から実際に表紙のページを作成するまでを、実際にコーディングしながら確認していきます。
この講義の最終課題は以下のテーマとします
最終課題:canvas + JavaScriptで「時間」を表現する
この授業の後半で扱ってきた、HTML5のcanvas要素とJavaScriptをつかって「時間」を視覚的に表現してください。ただし、必ずしも「時間 = 時計」というわけではありません。いままでにない手法で「時間」というものを感じられる作品を目指してください。
- プログラムは、jsdo.it に投稿することで提出とします。
- 最終講評会は、1月25日の講義最終日に行います。
今日の内容
今日の授業では、この最終課題「時間を表現する」の準備として、まずは通常の時計をcanvas + JavaScriptで再現してみます。
今回は、ここ数回やってきたCanvas要素からは離れて、HTML5で採用されたvideo要素について考えていきます。video要素はHTML4以前にもあった静止画像をページimg要素のように簡単に動画をページに貼りつけることができます。さらに、JavaScriptやCSS3と連動することで、独自にカスタマイズすることも可能です。
サンプルプログラムのダウンロード (Google Docsにリンク)
スライドを直接開く
今回の授業は、openFrameworksのアプリケーションをArduinoと連携する方法について解説していきます。ofArduinoクラスを利用することで、openFrameworksとArduinoは簡単に連携することが可能です。これにより、openFrameworksの強力なグラフィックスの処理能力を駆使してセンサーの値をビジュアライズしたり、openFrameworksで演算した結果をArduinoに送信したりといった、デバイスとアプリケーションとの双方向の通信が可能となります。様々なデバイスとopenFrameworksを組み合せることで、いろいろな応用が可能となるでしょう。
今回は、ここ数回やってきたCanvas要素からは離れて、HTML5で採用されたvideo要素について考えていきます。video要素はHTML4以前にもあった静止画像をページimg要素のように簡単に動画をページに貼りつけることができます。さらに、JavaScriptやCSS3と連動することで、独自にカスタマイズすることも可能です。
サンプルプログラムのダウンロード (Google Docsにリンク)
Webページを作成してWebサーバにアップロードしても、外部からのアクセスが無ければ、せっかく公開した情報も誰の目にも触れることはありません。公開したページは、より多くの人に見てもらえるように様々な工夫が必要です。
これまでページを多くの人に見てもらうため一般的だった手法は、GooleやYahooなどに代表されるような検索エンジンで上位にランクされるように最適化する、SEO (サーチエンジン最適化) というテクニックでした。しかし、最近になってより注目されているのは、いかにして現実社会との繋りをWeb上で活用するかという視点です。現実の人間の繋り (= ソーシャルグラフ) を活用するという方法が今後ますます重要となります。今回はこうしたソーシャルなメディアと連携する方法について解説していきます。