yoppa.org


第12回:HTML5 実践 – canvas + JavaScriptで時計をつくる

この講義の最終課題は以下のテーマとします

最終課題:canvas + JavaScriptで「時間」を表現する

この授業の後半で扱ってきた、HTML5のcanvas要素とJavaScriptをつかって「時間」を視覚的に表現してください。ただし、必ずしも「時間 = 時計」というわけではありません。いままでにない手法で「時間」というものを感じられる作品を目指してください。

  • プログラムは、jsdo.it に投稿することで提出とします。
  • 最終講評会は、1月23日の講義最終日に行います。

今日の内容

今日の授業では、この最終課題「時間を表現する」の準備として、まずは通常の時計をcanvas + JavaScriptで再現してみます。


第11回:openFrameworks – OpenGLによる3Dグラフィクス

openFrameworksは図形の描画のためのライブラリとしてOpenGLというプログラミングのインターフェイスを使用しています。OpenGLは2次元の図形だけでなく、3次元のグラフィクスを簡単に扱うことが可能です。今回は、openFrameworksの3Dグラフィックスの部分に注目して、様々な機能を実践します。

スライドを直接開く




第12回:HTML5 実践 – canvas + JavaScriptで時計をつくる

この講義の最終課題は以下のテーマとします

最終課題:canvas + JavaScriptで「時間」を表現する

この授業の後半で扱ってきた、HTML5のcanvas要素とJavaScriptをつかって「時間」を視覚的に表現してください。ただし、必ずしも「時間 = 時計」というわけではありません。いままでにない手法で「時間」というものを感じられる作品を目指してください。

  • プログラムは、jsdo.it に投稿することで提出とします。
  • 最終講評会は、1月25日の講義最終日に行います。

今日の内容

今日の授業では、この最終課題「時間を表現する」の準備として、まずは通常の時計をcanvas + JavaScriptで再現してみます。


第11回:HTML5 実践 – video要素で映像を表示

今回は、ここ数回やってきたCanvas要素からは離れて、HTML5で採用されたvideo要素について考えていきます。video要素はHTML4以前にもあった静止画像をページimg要素のように簡単に動画をページに貼りつけることができます。さらに、JavaScriptやCSS3と連動することで、独自にカスタマイズすることも可能です。

サンプルプログラムのダウンロード (Google Docsにリンク)



第10回:openFrameworksとArduinoを連携する

今回の授業は、openFrameworksのアプリケーションをArduinoと連携する方法について解説していきます。ofArduinoクラスを利用することで、openFrameworksとArduinoは簡単に連携することが可能です。これにより、openFrameworksの強力なグラフィックスの処理能力を駆使してセンサーの値をビジュアライズしたり、openFrameworksで演算した結果をArduinoに送信したりといった、デバイスとアプリケーションとの双方向の通信が可能となります。様々なデバイスとopenFrameworksを組み合せることで、いろいろな応用が可能となるでしょう。


第11回:HTML5 実践 – video要素で映像を表示

今回は、ここ数回やってきたCanvas要素からは離れて、HTML5で採用されたvideo要素について考えていきます。video要素はHTML4以前にもあった静止画像をページimg要素のように簡単に動画をページに貼りつけることができます。さらに、JavaScriptやCSS3と連動することで、独自にカスタマイズすることも可能です。

サンプルプログラムのダウンロード (Google Docsにリンク)


第11回:ソーシャルメディアで情報を共有する

Webページを作成してWebサーバにアップロードしても、外部からのアクセスが無ければ、せっかく公開した情報も誰の目にも触れることはありません。公開したページは、より多くの人に見てもらえるように様々な工夫が必要です。

これまでページを多くの人に見てもらうため一般的だった手法は、GooleやYahooなどに代表されるような検索エンジンで上位にランクされるように最適化する、SEO (サーチエンジン最適化) というテクニックでした。しかし、最近になってより注目されているのは、いかにして現実社会との繋りをWeb上で活用するかという視点です。現実の人間の繋り (= ソーシャルグラフ) を活用するという方法が今後ますます重要となります。今回はこうしたソーシャルなメディアと連携する方法について解説していきます。