第９回：ナビゲーションの構造、サイトの設計
今回はオンラインポートフォリオの制作に向けて、サイト構成の設計について考えます。まず、ナビゲーションの構造についてクレメント・モック氏の提唱する7つの構造モデルをもとに考えます。その上で、制作するオンラインポートフォリオの構造を各自で設計しサイトマップを作成していきます。
第９回：HTML5 実践 – “jsdo.it” を使ってみる
今回は、jsdo.itというHTML5、JavaScript、CSSなどのコードをオンラインに保存、公開することが可能なオープンソースコミュニティーのシステムを使用して、HTML5 Canvasのプログラムを作成します。Webブラウザ上でコードを記述しながらリアルタイムにその結果をプレビューすることが可能で、HTML5やJavaScriptのコーディングの際にとても便利なWebサービスです。また、jsdo.itを使用することで、公開されているコードにアレンジを加えて(= fork)、新たに自分のコードとして公開することも可能です。
第９回：openFrameworksとArduinoを連携する
今回の授業は、openFrameworksのアプリケーションをArduinoと連携する方法について解説していきます。ofArduinoクラスを利用することで、openFrameworksとArduinoは簡単に連携することが可能です。これにより、openFrameworksの強力なグラフィックスの処理能力を駆使してセンサーの値をビジュアライズしたり、openFrameworksで演算した結果をArduinoに送信したりといった、デバイスとアプリケーションとの双方向の通信が可能となります。様々なデバイスとopenFrameworksを組み合せることで、いろいろな応用が可能となるでしょう。
第８回：Canvasアニメーション
前回に引き続き、HTML5のCanvasを用いた表現について解説していきます。今回は、Canvas要素とJavaScriptを用いてアニメーションを実現する方法について考えていきます。
後期：第3回 HTML 5 canvas要素 + Javascriptで作る、動的コンテンツ
前回のjQueryによるWebページのプログラミングからさらに一歩進んで、HTML5のCanvas要素とJavaScriptによる動的なWebページのプログラミングについて解説していきます。
今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。
HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、canvas要素と連動するJavascriptという言語がキーとなります。まず最初にこのcanvas要素とJavascriptの基本についてみていきましょう。
第７回：openFrameworks Addon – ofxOpenCvのつづき
今回は、前回の授業で途中までになってしまった、ofxOpenCVを使用した画像解析、物体の輪郭抽出の方法について解説していきます。また、その輪郭抽出を活用した様々な表現についてプログラムサンプルを見ながら考えていきます。
第８回：openFrameworks addonを利用する3：フェイストラッキング – ofxCv, ofxFaceTracker
Addons紹介シリーズの3回目の今回は、最近ちょっとしたブームになっている、フェイストラッキングの技術を使っていろいろ実験していきます。フェイストラッキングとは、カメラから入力した映像の中から人間の顔を検知して、その傾きや大きさ、さらには目や鼻、口、眉といった顔のそれぞれのパーツの位置や大きさを立体的に検知することのできる、画像解析の技術です。この技術を利用して、顔の表情でプログラムをコントロールしたり、自分の顔に他人の顔を合成したりと様々な応用が可能となります。今回は、このフェイストラッキングに必要な環境設定とビルドの方法を解説した上で、その応用方法について考えていきます。
授業内で紹介した全てのサンプルプログラムは下記からダウンロードすることができます。
第７回：HTML5 Canvas + JavaScriptで図形を描く
今回は、ここまで数回にわたって紹介してきたjQueryからさらに一歩進んで、HTML5を使用した動的なコンテンツの世界に踏み込んでいきます。
今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。
HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、canvas要素と連動するJavascriptという言語がキーとなります。まず最初にこのcanvas要素とJavascriptの基本についてみていきましょう。
第６回：openFrameworks Addon 1 – ofxControlPanel, ofxOpenCv
今回から数回にわたって、openFrameworksのaddon(アドオン)という機能について紹介していきます。addonとは、openFrameworksの機能を拡張するための、Processingでいう外部ライブラリのような機能です。addonを活用することで、openFrameworks単体ではプログラミングが困難な複雑な機能も簡単に付加することが可能となります。今回は、addonの紹介の初回として、ofxControlPanelとofxOpenCvを紹介します。
授業内で紹介した全てのサンプルプログラムは下記からダウンロードすることができます。
第８回：グリッドレイアウト、ワイヤーフレームの作成
前回学んだCSSレイアウトを応用して、より高度なWebデザインを実践していきます。今回はページ全体に「グリッドシステム」を適用する方法を紹介します。これにより、デザインに秩序が生みだされ、情報が整理された見やすくまとまりのあるWebページを作成することが可能となります。グリッドシステムの適用方法を学んだ上で、最終的に作成する自身のWebサイトの「ワイヤーフレーム」の制作方法について解説します。