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

この投稿はパスワードで保護されているため抜粋文はありません。

プログラミングとデザインの両方の知識が必要な分野として、データの視覚化（データ・ヴィジュアライゼーション）があります。
この実習では１つのデータに対する複数の視覚化を試すことによって、これまでの実習で学習してきた形態、色彩、運動、インタラクションを統合するメディアを作成します。
5.7.1　課題1
2015年の東京都における「365日の平均気温」を視覚化する。
目的
・データベースに慣れる
・1種類のデータによる様々な視覚化のバリエーションの可能性があることを確認する

ランダムについて理解が深まったでしょうか？次はノイズです。ここではプログラミングの世界で最もよく使われているパーリンノイズを使ってみます。
このパーリンノイズは、波や炎など、連続的に変化する形態を作ることに適しています。
まず、一つサンプルを作成してみましょう。

一般的に、プログラミング言語にはランダム値（乱数）を発生させる仕組みがあります。ランダム値とは、サイコロの目のように不規則で予測できない数値のことを指しますが、特にゲームなどで必ずと言っていいほど利用されています。また、ノイズ（パーリン・ノイズ）はランダムと同じように不規則ですが、波の形のように連続的に変化するのが特徴です。
ここでは、ランダムやノイズを積極的に使って造形的な工夫をおこなうことを考えてみます。
4.8.1　ランダムとは
まずは、図形は作らずに数値だけ出力してみましょう。setup()内には何も書かず、draw()の中にprintln()を書いて、その中でrandom()を実行します。

プログラミングとデザインの役割の一つに「データの視覚化」があります。一般的に「インフォグラフィック」と呼ばれるものですが、プログラムをうまく使えばインタラクションのあるインフォグラフィックを作ることも可能です。特に、近年はインターネットの普及によって大量のデータが日々生み出されている状況において、それらのデータを分かりやすく視覚化する必要性が重要視されています。
プログラミングとデザインの結びつきの一つの可能性として、実際に視覚化を体験してみましょう。
5.6.1　データ視覚化の実例
まずは、データ可視化の実例を参照してみましょう。
●Radiation & Food Map in Japan
http://foodradiation.org/map/
福島第一原発事故後から現在に至るまでの日本全国の食品中放射性物質検査の結果をインタラクティブマップにしたもの。約157万件（2017年1月現在）の検査結果が視覚化されている。自身のプロジェクト。

図5.6-a

noise()はrandom()と似た機能ですが、random()と違い、連続的な値を得る事ができます。そのため、使い方次第では波のような形や雲のような形を作る事ができたり、オブジェクトに予測できない動きをつけることもできます。
この、random()と同様にプログラミングならではの機能であるnoise()を積極的に造形要素と捉えてみます。

多くのプログラミング言語にある機能ですが、random()はある意味プログラミング言語ならではの描画を可能にします。しかし、意識して使用しないとなかなか独自性を出すことが難しいというのも事実です。
このスタディでは、ランダムの値を緩やかにコントロールすることによって、多様な造形を作り出すことを目標にします。

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

オブジェクトを移動、回転、拡大縮小するには、オブジェクトそのものを操作する以外に「座標系」を変換する方法があります。
一般的にプログラミングの場合、直交座標系（デカルト座標系）を使いますが、この座標系とはある点を空間上に置くための規則です。
通常は必ず画面の左上が(0, 0)になりますが、座標を移動すると、左上が(0, 0)でなくなる場合もあります。
例えば、translate() 移動、rotate() 回転、scale() 拡大縮小を順番に実行する場合、概念的には【図4.1-a】になります。

図4.1-a
4.1.1　translate（移動）
それでは、まず座標系を移動するところから始めます。
右方向に100ピクセル、下方向に100ピクセル移動してみます。その場合にはtranslate(x, y)を使います。

図4.1-b