2013年度 メディアプログラミング演習II

【プログミング初心者向け】
本授業では、プログラミング技術を前提としたインフォメーションデザイン実習を行う。
19世紀以降、情報を正確に楽しく視覚的に伝える事にデザインが果たして来た役割は非常に大きいといえる。しかし、20世紀以降のコンピュータ技術は、モダンデザインが培ってきた遺産を更に次の段階に展開している。それは、従来は紙の上や立体のみであったデザインに「インタラクティビティ」が存在し始めたという事である。そして、それを鮮やかに実現するのがプログラミング言語だということが言える。
本授業では、インフォメーションデザインの原理的要素である形態、色彩、タイポグラフィの実習から始まりプログラミング言語の実習に繋げる事により、現代を生きるデザイナー/アーティストに必要な感性および技術を身につける。

前半は、インフォメーションデザインの基礎的な要素となる形態、色彩、タイポグラフィ(文字組のデザイン)を行い、その結果としてのダイアグラムデザイン(図のデザイン)を行う。後半には、1, 2年次の復習としてProcessingを使ったプログラミング実習を行う。
最終的に上記の実習を元にした作品を制作する。

スケジュール

1. 【4月12日】 インフォメーションデザイン演習

まずはグラフを作成してみる
素材:statistics japan_map.ai

2. 【4月19日】 タイポグラフィ

タイポグラフィ
和文/欧文フォント
フォントファミリー
サイズ/カーニング/トラッキング/行間

素材:typo1.ai

3. 【4月26日】 色彩

色彩の空間性、イメージ性
参考URL: https://r-dimension.xsrv.jp/classes_j/color_basic/

4. 【5月10日】 ダイアグラムデザイン

スケッチ、グループで検討、制作
先週の課題のカラーサンプル

5. 【5月17日】 ダイアグラムデザイン

ダイアグラム制作

6. 【5月24日】 ダイアグラムデザイン

ダイアグラム講評
プログラミング基礎実習
 図形を描く
 色彩
 変数
 画像の表示

7. 【5月31日】

while, forの理解
if文の理解
アニメーション

8. 【6月7日】 プログラミング実習1

インタラクション1次元配列の理解

9. 【6月14日】 プログラミング実習2

2次元配列の理解

10. 【6月21日】 プログラミング実習3

sine-cosine

11. 【6月28日】 プログラミング実習4

テキストの表示
棒グラフをプログラムで作ってみる
データベース・Excelシートからのデータの取得

12. 【7月5日】 制作

円グラフをプログラムで作ってみる

13. 【7月12日】 制作

14. 【7月19日】 講評

15. 【7月26日】 (補講日)

休講があった場合やスケジュール進行が遅い場合の予備日
 

課題

■色彩課題

●小課題1 色彩の空間性
与えられたテンプレートの中の四角形に色をつけ、左側の四角形から右側の四角形まで、順番に滑らかに空間的に奥に見えるように操作する。

条件:
隣接する四角形の色相は、必ず60度以上離す。

テンプレート:color1.ai
参考作品(パスワード保護)

  

●小課題2 色彩のイメージ
色彩というものは、それぞれ固有のイメージを持っており、広く一般に知られているものもある(例:赤→情熱、白→清潔)。
それらの色彩とイメージの関係を踏まえ、与えられたテンプレートの中でそれぞれ与えられたイメージ(例:さわやかな、伝統的な)にふさわしい色の組み合わせを選び、四角形の中を彩色する。

テンプレート:color2.ai

  

●中間課題
日本国内の統計(例:人口、人口密度、河川の水質、タレントの出身地など)をもとにして、都道府県別の日本地図を作成する。その際、地図は必ずしも実際の形である必要は無く、情報を整理するために変形してかまわない。

●条件:
・必ず、2種類の情報を組み合わせて地図を作ること。2種類の情報は何らかの相関関係(比例・反比例など)があることが望ましい。
例:ゴミの排出量と不法投棄の比率
・必ず作品の右下に引用元を明記する事
・使用ソフト: Adobe Illustrator
・用紙サイズ:A3
・横位置

●ポイント:
・扱う2つの情報の相関性
・単位をどのように区切るか
・それぞれの情報を何に置き換えるか(色?形?大きさ?)

●情報地図を作る時のポイント:
・地図の大きさや説明部分のレイアウトを考え、窮屈なレイアウトにならないようにする
・色は、なるべく違いが分かるように差をつける

参考サイト
統計局ホームページ http://www.stat.go.jp/
農林水産省の統計 http://www.maff.go.jp/j/tokei/index.html

  

●最終課題
統計の数値データを形、色、アニメーション、インタラクションによって視覚化したインフォグラフィックを作成しなさい。

インフォグラフィックの説明(Wikipedia)
インフォグラフィックの例
 
条件

  1. XlsReaderを使って、excelシートからデータを読み込むこと。
  2. 選ぶ統計データは何でもいい。例えば、自分自身の情報(例:生活費の内訳、時間帯によるツイート数など)でもいいし、国勢調査のデータのようなものも考えられる。
  3. この課題は、「分かりやすく」というよりは、「データをグラフィックに変換する際にどのような可能性が考えられるか」という点を重視する。なので、必ずしも単純明快でなくてもかまわない。
  4. アニメーション、インタラクションがあるのが望ましいが、プログラムとしては難易度が高いので、静止画でもOKとする。
  5. 画面は、800 x 800 ピクセル以内で作成する

1つ1つのオブジェクトを選ぶとアクションがある(例:大きさ、色が変わる)というようなインタラクションをデザインしたい人は、オブジェクト指向の考え方が必要になります。やってみたい人は以下のレジュメをやるとわかります。また、Processingで3Dオブジェクトを扱う事もできます。

■オブジェクト指向の考え方
クラス、メソッド
クラスの継承

■3D
1. オブジェクトの作成
2. オブジェクトの移動、回転
3. 座標の保存(pushMatrix, popMatrix)
4. vertex(頂点)を使用した図形の描画
5. ライト
6. カメラ

成績評価

【授業開始30分までは遅刻を認める。それ以降は欠席扱いとする。】
出席→50%、毎回の課題→20%、中間課題→10%、最終課題→20%の割合で評価する。