Tumblrを使う３ カスタムHTMLテーマの作成
今回も引き続き、Tumblrのテーマのカスタマイズについて解説していきます。今回は、前回のテーマのカスタマイズよりもさらに高度な方法として、Thumblrの「edit HTML」の機能を使用して、自分独自のテーマをまっさらな状態から作成する方法について取りあげていきます。
スライド資料
スライド資料は下記のリンクから閲覧してください。
カスタムテーマ、テンプレート
カスタムテーマの基本テンプレートは、下記からダウンロードしてください。
第11回: Sonic piでサウンドプログラミング2 – ランダムとプログラム構造
今回も前回に引き続き、Sonic Piを使用してサウンドンプログラミングに挑戦します。前回までは、プログラムは1行ずつ上の行から順番に実行されるという単純な構造でした。また指定したパラメータも固定のものでした。今回は、ここに、より本格的なプログラム構造を適用していきます。まず始めに「乱数 (random)」を使って毎回違った数値を音程やリズムなどのパラメータに適用する方法について解説します。Sonic Piには、様々なランダムの機能が組込まれており、その違いを理解していくようにします。
次に、ループや指定した回数の繰り返し、複数のスレッド(処理の流れ)を扱う方法など、プログラムの構造をつくるための機能を解説します。
最後に、ここまでの内容の実践編として、Steve Reichの”Piano Phase”のような、「位相のずれ (Phase Shifting)」による作品制作に挑戦します!
スライド資料
Tumblrを使う – テーマをカスタマイズする
今回も引き続きTumblrを使用したWebサイト制作について解説していきます。Tumblrでは「テーマ」を選択することで誰でも簡単にデザインを変更することが可能です。さらに多くのテーマは色やフォントなど様々なページ内のデザイン要素をカスタマイズしていく機能が提供されています。テーマをカスタマイズすることで自分の好みにあわせたページを作っていくことができるようになります。今回はこのテーマのカスタマイズ方法についてとりあげていきます。
スライド資料
授業のスライドは、下記から参照してください。
openFrameworks – Shaderをつかった、GPUプログラミング
Shaderとは、もともとは3Dコンピュータグラフィクスで、シェーディング (陰影処理) をするプログラムのことを指していました。従来は、開発者やデザイナーは、グラフィクスカード (GPU) に固定機能として実装された定形の処理しか使えませんでした (固定機能シェーダー)。2000年代に入って、プログラマブル・シェーダーが登場します。これまでブラックボックスだったシェーダー自体が、プログラム可能になりました。OpenGLではGLSLというプログラミング言語が策定されシェーダーをプログラムすることが可能です。画面上の膨大なピクセル情報を、高い並列処理性能を持つGPUで実行することにより、CPUで実行するよりもはるかに高いパフォーマンスを実現できるようになりました。
今回は、このShaderをopenFrameworksから操作して高度な表現に挑戦します。
スライド資料
サンプルファイル
プログラムのサンプル、スライドなどの資料は、Githubのリポジトリからダウンロードしてください。
第10回: Sonic piでサウンドプログラミング入門
「メディア芸術の基礎」の前半では、主にProcessingを用いたビジュアルプログラミングを行ってきました。後半はまた新たな内容をとりあげていきます。
後半の講義では、音響や音楽をプログラミングを用いて処理し表現を行います。サウンドを扱うための開発環境として「Sonic Pi」を使用します。Sonic piは、教育現場でのプログラミングや音楽の授業をサポートするように設計された、ライブコーディング可能な無料のサウンドプログラミング開発環境です。「カノンからダブステップまで」というキャッチフレーズに代表されるように、古典〜現代の音楽を作曲できる、Mac OS XやWindows、さらにはRaspberry Piでも動かすことが可能で、柔軟なプログラミングが可能です。
今回は、Sonic Piの入門として、インストールから操作方法、そしてプログラミングの基本を学んでいきます。
スライド資料
Tumblr入門：Tumblrとは何か？
演習の後半は、また新たな内容に入っていきます。今回から数回にわたって、Tumblr（タンブラー）というWebサービスを利用してWebサイトを作成してみます。Tumblrは、メディアミックスブログサービスで、ブログとミニブログ、そしてソーシャルブックマークを統合したマイクロブログサービスとなっています。今回は導入としてメンバー登録と基本的な使い方について解説していきます。
スライド資料
授業のスライドは、下記から参照してください
第9回: Processingでオブジェクト指向プログラミング 2 – クラスの継承
前回に引き続き、Processingにおけるオブジェクト指向プログラミング(OOP)の方法について解説していきます。今回はOOPの重要な概念の一つである「継承 (インヘリタンス) 」について考えていきます。継承とは、既存クラスの機能構造を共有する新たなクラス(サブクラス)を派生させることです。サブクラスからは親となるクラスのプロパティやメソッドをそのまま引き継ぐことが可能です。この継承の仕組みを効果的に活用することで、既存のクラスを再利用しながらそこに新たな機能を加えていくということが可能となります。
スライド資料
CSS（4）：Webフレームワークを使う2 – Twitter Bootstrapのカスタマイズ
今回も前回に引き続き、Twitter Bootstrapを使用したWebデザインについて解説していきます。前回の授業で解説したようにTwitter Bootstrapを使用するととても簡単に本格的なWebページを作成することが可能となります。しかし、Bootstrapである程度ページが作成できるようになってくると、自分の好みにあわせて独自にカスタマイズしてみたくなって来るのではないでしょうか。Twitter BootstrapのCSSは直接編集するには高度な知識が必要とされます。しかし、現在では様々な開発者によって作成された、カスタマイズのための多くのWebサービスがあり、これらを活用すると簡単に独自のBootstrapのテーマが作成可能です。今回はこうしたWebサービスを使用したBootstrapのカスタマイズについて解説していきます。
スライド資料
授業のスライドは、下記から参照してください
第8回: Processingでオブジェクト指向プログラミング – １
今回は「オブジェクト指向プログラミング(OOP)」というプログラミングの手法について解説します。OOPは、現在最も普及しているプログラミングの構造化の手法といえるでしょう。今後、本格的なプログラムを設計・実装していく上で避けて通ることのできない重要な概念です。OOPは様々な難解な用語が登場するため、最初は戸惑うかもしれません。しかし、実際にやっていることは実はシンプルな内容です。Processingで実際にプログラミングしながら、その考え方についてじっくりと学んでいきましょう。
スライド資料
openFrameworks – 3Dグラフィクス、OpenGL
このワークショップでは、ここまで主に２次元平面上での描画による表現を扱ってきました。今回は２次元での表現からさらに（文字通り）次元を越えて、３次元空間での表現について考えていきたいと思います。
openFrameworksで3Dグラフィクスを扱う手法はこれまでとさほど変化はありません。なぜなら、openFrameworksの描画の基本はOpenGLで行っています。OpenGLはそもそも３次元のグラフィクスの描画のために開発されたライブラリであり、最初から３次元空間をとり扱うための様々な機能が備わっています。
しかし、3Dの物体を扱うには、これまでとは違った様々な要素が加わります。カメラ（視点）、ライティング、光と影（シェーディング）、奥行の重なりなどといった２次元の平面には無かった様々な技術や概念の理解が必要となります。
スライド資料
サンプルファイル
プログラムのサンプル、スライドなどの資料は、Githubのリポジトリからダウンロードしてください。