Computer Art

Computer Art
Workshop 3
2002.8.20-23
コンピュータを用いた造形表現に関する基本的な技術の解説と演習
◆ 2002 年度のキーワード集 ...................................................................................................................................................................... 2
授業のあらすじ ................................................................................................................................................... 2
◆ 2002/8/20 .................................................................................................................................................. 2
AM ........................................................................................................................................................... 2
●オリエンテーション .......................................................................................................................... 2
PM ........................................................................................................................................................... 2
●最初の一歩 ....................................................................................................................................... 2
◆ 2001/8/21 .................................................................................................................................................. 3
AM ........................................................................................................................................................... 3
●前日の作業のダイアグラム化(リフレクションの為に)......................................................................... 3
PM ........................................................................................................................................................... 3
●制作の高度化 ................................................................................................................................... 3
◆ 2001/8/22 .................................................................................................................................................. 3
AM ........................................................................................................................................................... 3
●ロジックコンテの重要性 .................................................................................................................... 3
PM ........................................................................................................................................................... 4
●気分転換 .......................................................................................................................................... 4
◆2001/8/23 .................................................................................................................................................. 4
AM ........................................................................................................................................................... 4
●プレゼンテーションにむけて ............................................................................................................. 4
PM ........................................................................................................................................................... 4
●講評のポイント ...................................................................................................................................................................................... 4
◆授業で使うキーワード一覧 ..................................................................................................................................................................... 4
公立はこだて未来大学
情報アーキテクチャ学科
ART workshop@kimura lab
[email protected]
助教授 木村健一
1
◆ 2 0 0 2 年度のキーワード集
ディレクトリ
フォルダ
ファイル
リフレクション
インタラクション
グリットシステム
絵コンテ
ロジックコンテ
ソリューション
フォーマット
テンプレート
◆昨年の授業の様子→ http://www2.educ.fukushima-u.ac.jp/~kimken/2001.html
授業のあらすじ
(2001版をベースに予定してみる。変更があるので目安にすること)
_________
◆ 2002/8/20
AM
●オリエンテーション
・Animemoを用いて、
「○○○○」
をテーマにしたホームページを制作する。
・オープニングタイトルの構想を練る。
・2001,2002年のコンピュータアートの受講生が作ったホームページを見ながら、課題の
内容に変更があることを確認する。
・大きな違いは、言葉の変化をモーフィングとして表現するという点で、文字や文字から
触発された形をどのように「動きとして」
表現するかを考えることがポイント。更に、
オー
プニングアニメが加味される点を確認。
・マルチメディア系の作品例として、ThinkingSketchとsadaplay.comの例を紹介。
・なお、作品をホームページ化する理由として、各自のポートフォリオになりうるからであ
る事を紹介した。
・また、Mac-osとWin-osの目立った違いについて説明をして、特にフォルダとディスク
トップという概念についてはディレクトリの話も交えながら丁寧に説明する。
PM
●最初の一歩
・まず、
「しりとり」
で10ページほどのホームページを試作する。
。
この課題はクイズ。リンク概念の理解をこの課題で確認するのが目的。
・受講生は全員htmlの記述経験があることを前提に行う。
理解が不足している場合は、確認のため理解不足対象者を対象に説明。
・リンク概念の説明を省き、
「○○○○」
をテーマにAnimemoを用いた作業を開始。
・
「○○○○」
で取り上げた言葉をアニメーションで変形していく作業がおもしろいはず。
・全員が真剣に
(楽しいので集中している)
取り組んでいるのか要確認。
・本日の演習が終了する直前に、全員で今日の作業を振り返る時間を作る。
・これをリフレクション名づけ、口頭で各自が発表するのを全員で聞き、後に各自が今回
2
制作するホームページのindex.htmlにも文章とした書くことにした。
・アニメーションについては、単なる変形が目立ったので、ズーミングや回転、
オブ
ジェクトの移動など「各自が見てきたアニメーションや映画などの映像の画面転
換を思い出してみるよう」
にアドバイスする。
DVD 作品を上映して、画面転換の参考とする。
・直後に短時間作業をとる。
・最後にアメリカ製の復刻版「驚き板」
を全員で鑑賞する。素朴なアニメーションの面
白さを感じ取る。
_________
◆ 2001/8/21
AM
●前日の作業の
ダイアグラム化
( リフレクションの為に)
●前日の作業のダイアグラム化
ダイアグラム化(
・前日のしりとりホームページをホワイトボードに「リンク関係図」
として書かせる。
・記述の途中で、
リンク関係がおかしいファイルがあることに気が付く者がいるはず。
・各自に蛇腹状の紙をくばり、
ポストイットやセロテープも貸し出してそれぞれのアニ
メーションの構想やリンク関係を記述したロジックコンテを作る作業に入る。
・このコンテによって、自分だけでなく他者も関わって
「作品」
の内容検討ができるこ
とに気付く。
・マルチメディアコンテンツには、
こうしたコンテの記述が制作上とても有効であるこ
とに気付く。
・絵コンテの記述によって、内容をかなり吟味できる体制を作る。
・画面構成の源流に今世紀初めての抽象絵画運動が深く関与している事について
レクチャーする。
・特にグリットシステムの話をし、
イラストレータに具体的に使われているレイアウト用
のラインを確認する。
PM
●制作の高度化
・ロジックコンテを手元に、作品の質を向上させる具体的な作業を行う。
・制作が続く。
・AnimemoからGIFbulderにfileをexportする手順をデモする。
・GIFアニメにしてから、
ホームページ上に貼りこむ手順をデモする。
・制作の成果をリフレクションを目的に各自が全員の前で発表し、作品をデモする。
・他者がどんな効果や方法で、各自のコンセプトを実現しているのかを見ることの重
要性に気が付く。
_________
◆ 2001/8/22
AM
●ロジックコンテの重要性
・再度次の事を行う。
・AnimemoからGIFbulderにfileをexportする手順をデモする。
・GIFアニメにしてから、
ホームページ上に貼りこむ手順をデモする。
・作品のパーツであるアニメーションとリフレクションノート、
ホームページのリンクの
3要素をindex.htmlで項目としてあつかう事を再度確認する。
・ロジックコンテで確認しながら、作品の全体像をイメージしながら制作めばベスト。
・全体に制作の疲れが見え始める頃。作品を作る上で
「集中」
できる時間を自分の
中でどのように意識するかについて話をする。
・漫然と作業をすれば、集中して
「良い作業」
をした折角の作品を「壊してしまう」
。
3
PM
●気分転換
・制作が続く。
・没入感も観察される。徐々に作業に飽きが現れる頃。新しいリフレッシュ法を教える。
・Animemoの印刷機能を用いて、制作した全コマを印刷して全員で検討する。
・画面の中ではなく、印刷したコンテで赤ボールペンを用いてミニ講評会を実施する。
・外化という言葉、可視化という言葉も使う。
・気分転換に前田ジョンのアプリケーションを紹介する。
・sodaplay.comの事例も紹介する。
・作品についてはかなりの作りこみの段階。
・ホームページ側の作り込みを明日の大きなテーマにするように指示する。
・index.htmlにリフレクションの文章を書いて各自解散。
_________
2001/8/23
AM
●プレゼンテーションにむけて
・最終日の制作時間が限られている事を確認。
・最終のプレゼンテーションの事を考えて作業をするように指示する。
・作業が連続するとファイルが壊れることがある。
・バックアップをサーバ上におく慎重さが必要。
・各自のホームページを確認。NetscapeとIEの見え方が全く違う。
・どちらを推奨するかは本人の判断。閲覧の際の推奨ブラウザを明記するよう指示。
PM
●講評のポイント
・リフレクションを生かす事が出来たかどうか。
・メタな自分を見つけだすきっかけが出来たかどうか。
・ロジックコンテと絵コンテを描き、有効に制作に使う事ができたかどうか。
・アニメーション的な表現を理解し、表現する事ができたかどうか。
・インターフェースを考慮してホームページを作る事ができたかどうか。
◆授業で使うキーワード一覧
a picture element
形や色はマテリアルに左右される。
→素材や手法、技術の中に
「かたち」
は内包されていて、その中から取りだして
いるだけ。
ex.アルファベットのローマン体に見られる
「セリフ」
は石に刻んだノミの
後が様式化されたもの。
ex.明朝体の
「ウロコ」
は毛筆の筆跡がもとになったもの。
1960年代半ばにデジタルコンピュータを使った映像作品が出現し、XYプロッタ
やラインプリンタによるドローイングがたくさん描かれる。
1970年代は画像表現は現在と同じようなラスタスキャン型ディスプレイ
でアウトプットする、
ラスタグラフィックが主流となる。
4
コンピュータによる造形→コンピュータアート
プログラミングとピクセルに内包されている
「かたち」
をいかに取り出すかが
コンピュータによる造形のポイント。 →プログラミングとピクセル
デッサンの概念の違い
→かつてのデッサンは対象の量感・質感・形を表現する技術を習得
するのが目的。
そのためには光
(陰影)
をとらえ、対象を見極める目を作ることが大切だっ
た。
→絵画は対象の外観を写し取る技から
「目に見えない部分を考察
する」
ことや対象を通じて
「人間の内面を描こう」
という方向にその重
心を移した。
バウハウスを中心に幾何学的形態から自立的な造形言語を獲得するデッ
サンが1920年頃からバウハウスの予備課程から生まれた
ex.
「対象のリズムや運動をとらえるデッサン」
や
「幾何学的なデッサ
ン」
「分析的なデッサン」
。
マシン時代のものづくりに対応し、抽象絵画とも連動し新しい時代を
作っていった。
アルゴリズム
(算法)
プログラムで描かれた正方形は、
アルゴリズムの中から生まれる無数の
「か
たち」
の中のひとつ。
また、一見同じにしか見えない正方形も、
アルゴリズムの数だけ違う正方形
が存在しているといえる。
ex.
「正方形を描け」
という問題
同じ長さの線分を4本描き、
それぞれの端を順にくっつけ、一定距離
を進んだら直角に曲がる点の軌跡を描く、
などの方法が考えられる。
プログラムを行うためには、
アルゴリズムのデザインこそが不可欠で、
アルゴ
リズムこそが、描かれた正方形の性格を決める。
●ラスタ出力デバイス
定義:ピクセルが基本となって描かれた様々なディスプレイ上の画
像データを、
「ピクセルやドットに置き換えて出力する装置を
「ラスタ
出力デバイス」
という。
事実上の世界標準となっているページ記述言語
「ポストスクリプト」
はラスタ出力デバイスを制御する言語で、文字や図形を出力機の
解像度にあわせてラスタライズすることができる。
コンピュータによる造形表現ここではコンピュータアートは、
どこかで
ピクセルによる表現に翻訳される局面がある。
すべてはピクセルから始まる、
といっても過言ではない。
●ピクセルという単位
ピクセルpixelはもともとPic-Ele、つまりPicture Elementの省略形
で、画素と訳される。
文字通り、絵の元素、つまり画像を構成する最小単位で、
デジタル画
像はピクセルが格子状に積み重なっている。
デジタル画像は人類史上初めて単位をもった絵といえる。
5
デジタル画像を扱うにはピクセルを理解し、
ピクセルにアプローチするところか
ら始めなければ!
●解像度
dpi (dot per inch)
ppi(pixel per inch)
1インチあたりのドット数を表現している。
ディスプレイ表示やデータそのものの解像度を表現するのにppi
プリンタなどでピクセルをドットに翻訳して出力するときはdpi
現在は区別無くdpiと呼ばれることが多くなってきた。
●CRTモニタの場合
13インチの場合は640×480pixel
17インチの場合は832×624pixel
解像度は72dpi
画面上の1ピクセルとフォントの1ポイント
(1/72インチ)
が画面上で一致
DTPの基本コンセプトである
「WYSWYG(What You See Is What You Get)」
テキスト、画像、出力装置の解像度を揃えることで
「ディスプレイで見たままを印
刷物として得る=ディスプレイ上で造形表現
(アート)
をすること」
が原理的に可
能になった。
●アンチエイリアス
解像度を上げたり、エッジをぼかしたりしてジャギーを目立たせないようにする
ことを
「アンチ・エイリアシング(anti-aliasing)」
という。
●1ビットは一回の二者択一だから、白黒のビットマップしかつくれないグレースケール
を作るためには、
2
5
6階調、
8ビットのデータ量が必要になる.
●紙の大きさ mm
A0 1189×841
A1 541×591
A2 594×420
A3 420×297
A4 297×210
A5 210×184
A6 184×105
四六判 4.2寸×6.2寸 127mm×188mm
日本の伝統的な書籍の判型。現在でも単行本はほとんどこのサイズ
菊判 5寸×7寸2分 152mm×221mm
戦前に普及していた書籍の判型
新聞用紙に使われていたことから、菊
(聞く)
判と呼ばれている。
縦横比はA,B とも1:ルート2で相似形になっている
●パーフォレーション
コマ送り用の穴
35mmフィルムの幅1インチ3/8
(3
5mm)
縦3/4インチ、横1インチ、
、
、比率に直すと3
:4
1894年のぞき窓
「キネトスコープ」
が開発される。
これが1
0
0年をへて、マルチメ
ディアの窓としてモニターに画面比率がそのまま引き継がれている。
6
●1
2の等しい間隔をあけて結び目をつけたロープを3番目と8番目の結び目を杭で
とめ、両端の結び目を合わせると、直角を得ることができる。
3:4:5の直角三角形を得ることができる。
→ピタゴラスの三角形
3−4−5という整然とした整数比をもち、その上直角まで与えてくれる。
●ブックメタファー
スクロール
(巻物)
動画感覚とスクロールと時間軸
大量複製技術と客観性
A
ス
Animemo 2
スクロール 7
C
セ
CRT モニタ 6
セリフ 4
G
タ
GIF アニメ 3
GIFbulder 3
ダイアグラム 3
ハ
S
パーフォレーション 6
sodaplay.com 4
ヒ
W
ピクセル 5
WYSWYG 6
フ
X
XY プロッタ 4
ア
アルゴリズム 5
アンチエイリアス 6
ウ
ウロコ 4
エ
絵コンテ 4
カ
外化 4
解像度 6
可視化 4
キ
ブックメタファー 7
ホ
ポストイット 3
メ
メタな自分 4
ラ
ラインプリンタ 4
ラスタ出力デバイス 5
リ
リフレクション 3
リンク 2
ロ
ロジックコンテ 3
キネトスコープ 6
ク
グリットシステム 3
コ
コンテンツ 3
シ
前田ジョン 4
7