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

      2017年度 メディアプログラミング演習II はコメントを受け付けていません

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

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

スケジュール

【4月14日】 ヴィジュアライゼーション基礎

データ・ヴィジュアライゼーションの簡単な歴史
ポイント:不可視の現象を可視化する

まずは2人の会話を5分間録音する
素材:conversations

Adobe Illustrator入門参考サイト
http://webdesignrecipes.com/illustrator-basic-tips/
http://liginc.co.jp/web/design/illustrator/81319

【4月21日】 タイポグラフィ

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

素材:スペーシングのテンプレート

【4月28日】 色彩

色相、彩度、明度
参考URL: https://r-dimension.xsrv.jp/classes_j/color_basic/

【5月12日】 インフォグラフィック1

都道府県別のデータを使って、グラフおよび日本地図を作成する。
参考サイト:
統計局ホームページ http://www.stat.go.jp/
農林水産省の統計 http://www.maff.go.jp/j/tokei/index.html

素材:日本地図
japan_two_map160414.ai

素材:肉類の消費マップデータ
meat_map_data160512.xlsx

Excelの絶対参照

【5月19日】 インフォグラフィック2

スケッチ発表、グループディスカッション、ダイアグラム制作
ポイント
・スケッチのグラフィックで企画意図が伝わるか
・改善点のアドバイス
・なるべく客観的に!

【5月26日】 インフォグラフィック3, プログラミング実習

インフォグラフィック講評
復習もしくは予習しておく

Processingの準備
Processingの操作画面
点・線・図形の描画
変数
色彩
演算
画像の表示
デバッグ、エラーへの対応
コメント、インデント

while, forの理解
if文の理解

【6月2日】 プログラミング実習1

運動
インタラクション

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

1次元配列の理解2次元配列の理解

【6月16日】 プログラミング実習3

sine-cosine

【6月23日】 プログラミング実習4

translate, rotate, scale

【6月30日】 プログラミング実習5

関数
テキストの表示
データの視覚化

【7月7日】 最終課題制作

スケッチ提出、グループディスカッション

【7月14日】 最終課題制作

【7月21日】 講評

 

課題

■小課題1:3人分の会話の視覚化

4/14の授業を基にして、3人分の会話の視覚化を完成させる。

■小課題2:名刺を作成する

左にローマン体を使ったレイアウト。右にサンセリフ体を使ったレイアウトを行う。重要な点は、限られた条件で一書体のファミリーを使ってどれだけ変化を出せるか。
テンプレート

  • 各レイアウトにそれぞれ1書体だけ使う。ファミリーの使用は自由
  • ローマン体はBaskerville, Minion, Adobe Caslon, Adobe Garamond、サンセリフ体はAvenir (Next), Helvetica (Neue), Myriadの中から選ぶ
  • 文字以外は使わない
  • 使用する色は白黒のみ(グレーは使わない)。サイズは90mm x 55mm以内
  • 必ず入れる構成要素は、氏名、大学の住所と電話番号。メールアドレス。その他に入れたい人は他の情報を入れても構わない
  • 大学の情報は以下の通り。

1583 Iiyama, Atsugi, Kanagawa
243-0297, Japan
Phone: 046-242-4111
Fax: 046-242-3000

プリントして切ったものと、データも提出

■小課題3-1

まず、一種類の素材に絞って幅100 x 高さ200ピクセルの画像をサンプリングし、色彩のバリエーションが多くあるものを選ぶ。今年度は「土」を採集してみる。
インターネットの画像検索などでもいいが、その際には既存の著作権には十分配慮すること。
サンプリングしたカラーサンプルを、明度順、彩度順に並び替え、それぞれ10個のグラデーションを作成する。

・目標
 色相、彩度、明度の微細な違いをコントロールできるようにする

・注意点
 明度の場合は、左端が1番明度が低く、右端が1番明度が高くなるように配置する。彩度は一定。
 彩度の場合は、左端が1番彩度が高く、右端が1番彩度が低くなるように配置する。明度は一定。
 サンプリングする場合は、なるべく解像度の高い画像を選ぶ。

例:color_study_sample

テンプレート

■小課題3-2 色彩のイメージ性

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

・目標
 色彩の持つイメージをコントロールできるようにする

テンプレート:color2.ai

■小課題4 日本の情報地図

■中間課題

「自分自身のヴィジュアライゼーション」
自分自身の行動、習慣、物理的数値などを統計データとみなして数値化する。
例;一週間内の日毎の睡眠時間 / 食事のカロリー / 一週間内で食べたもの / 生活費の内訳 / 時間帯によるツイート数 など
そして、その統計の数値データを図形、色彩、テキストを使って視覚化した美しいグラフィックを作成しなさい。
インフォグラフィックの説明(Wikipedia)
例: infogra.me
例: visual.ly

条件:
・A4画面を使用する。Adobe Illustratorを使用すること。
・補助的にイラストを使用しても構わないが、あくまでも中心的なグラフィックは統計データの視覚化なので、イラストがメインにならないようにすること。

■小課題5 プログラムによるパターンの作成

美しいパターンのアニメーションを作成してください。必ず、2次元配列を使うこと。
・500 x 500pixel以内の画面を使用する。

■小課題6

三角関数を使って、美しい図形を描画してください。

条件:
400x400pxの画面を使用
静止画もしくはアニメーションを作成する
色彩自由
実習では点だけしか使用していないが、図形は何を使用しても構わない

■最終課題

「日本」をテーマとしたデータの視覚化
現在は、オープンデータやオープンガバメントなど、日本の政府や公共機関などが積極的に統計データを提供する時代となっています。自身が興味ある日本に関する統計データを図形、色彩、テキストを使いプログラムによって視覚化しなさい。
例:気象情報、貿易額、政府の予算、海外からの観光客数、県民性など

●条件:
・画面は500x500px以内
・補助的にイラストを使用しても構わないが、主題は統計データの視覚化なので、イラストがメインにならないようにすること
・データベースはXMLもしくはJSONを使用すること
・インタラクションはあってもなくてもいい

●採点基準
・プログラミング技術(インデントやコメントなどのコードの可読性も含む) 40%
・デザインの完成度(見た目の美しさ、面白さ、インタフェースの操作性) 40%
・データの希少性、着眼点 20%

●特典
他の人とアイデアが被らなかった人は、+5加点します

成績評価

【授業開始15~30分までは遅刻を認める。それ以降は欠席扱いとする。】
出席→50%、小課題(全課題)→15%、中間課題→10%、最終課題→25%の割合で評価する。
遅刻の場合(授業開始15分以降)は、正規の出席の50%。