sotu.dvi

中部大学工学部

卒業論文

グラフィックデザイナーのための

視覚化プログラミング環境に関する基礎検討

高畠綾子

2004

年

3

月

A Graduation Thesis of College of Engineering, Chubu University

A Proposal of Programming Evironment of Visualization

for Graphic Designer

目 次

第 1 章 はじめに 1 第 2 章 視覚化プログラミング環境 について 3 2.1 視覚化プログラミング環境 . . . . 3 2.2 4つの着目点. . . . 4 2.2.1 図形の表示方法 . . . . 4 2.2.2 表示状態 . . . . 5 2.2.3 出力形式 . . . . 7 2.2.4 二次利用の可能性 . . . . 8 第 3 章 視覚化を目的とした既存システム 9 3.1 DBN . . . . 9 3.1.1 数字を用いてデザインする DBN . . . . 9 3.1.2 DBNの起動と実行 . . . 10 3.1.3 DBNの利点欠点 . . . 12 3.2 Processing . . . 13 3.2.1 Javaを基調とした Processing . . . 13 3.2.2 Processingの起動と実行 . . . 14 3.2.3 Processingの利点欠点 . . . 18 3.3 Adobe Scripting . . . 19 3.3.1 3種類の言語を選べる Adobe Scripting . . . 19 3.3.2 Adobe Scriptingの起動と実行 . . . 19 3.3.3 Adobe Scriptingの利点欠点 . . . 24 3.4 その他のシステム . . . 24

第 4 章 視覚化のためのプログラミング環境 27 4.1 プロトタイプシステムの作成 . . . 28 4.2 プロトタイプシステムのプログラム . . . 29 4.3 プロトタイプシステムの描画例 . . . 30 第 5 章 おわりに 33 謝  辞 35 参考文献 37

図 目 次

2.1 平面形状と立体形状のサンプル . . . . 5 2.2 静的なイメージサンプル . . . . 5 2.3 動的なイメージサンプル . . . . 6 2.4 動的なイメージサンプル . . . . 6 2.5 ラスター形式とベクター形式の比較 . . . . 8 2.6 追加作業例 . . . . 8 3.1 DBN起動時 . . . 10 3.2 DBNサンプル 1 . . . 11 3.3 DBNサンプル 2 . . . 11 3.4 DBNサンプル 3 . . . 11 3.5 Processing起動時 . . . 14 3.6 Processingサンプル . . . 16 3.7 Javaでの描画 . . . 16 3.8 Processingでの描画 . . . 16 3.9 Scriptingサンプル 1 . . . 20 3.10 Scriptingサンプル 2 . . . 22 3.11 Scriptingサンプル 3 . . . 22 4.1 提案する視覚化プログラミング環境 . . . 27 4.2 プロトタイプシステム . . . 28 4.3 プロトタイプサンプル 1 . . . 30 4.4 プロトタイプサンプル 2 . . . 31 4.5 プロトタイプサンプル 3 . . . 31

表 目 次

3.1 プログラムに対する意識調査 . . . 13 3.2 既存システム比較 . . . 25 4.1 プロトタイプシステム用コマンド一覧 . . . 29

第

1

_{章 はじめに}

近年, 個人が扱う情報の多様化, 量の膨大さから文書や画像等の情報を視覚化する技術の 需要が高まっている. このような情報の視覚化においては, プログラミングが必要とされ ている. しかし, 既存のプログラミング環境では, 動的情報の視覚化により出力された画 像を印刷物等の高解像度の媒体で二次利用することができない問題がある. そこで本研究 では, グラフィックデザイナーのための視覚化プログラミング環境に関する基礎検討とし て, 出力画像の二次利用を可能とするマウスによる動的情報の視覚化を実現するプログラ ミング環境の構築を目的とする. 本論文では第 2 章にて論文内で使用する言葉を解説した後に, 第 3 章で既存の Visualiza-tion Systemの調査結果を記す. 続いて既存のシステムの問題点を考慮し, 第 4 章では新し いシステムの提案を行い, より有用であると考えられるシステムの構想を示す. 本研究の 成果として第 4 章では構想したシステムの前進となるプロトタイプシステムを作成し, 実 行結果の表示, またそのプロトタイプシステムの評価と今後の展開について述べる.

第

2

_{章 視覚化プログラミング環境}

について

本章では視覚化プログラミング環境について解説した後, その環境より出力された画像を 4種類の視点より着目する. 4 種類の着目点としては図形の表示方法, 描画状態, 出力形式, 追加加工の可能性に関する説明を各節で行う.

2.1

視覚化プログラミング環境

視覚化プログラミング環境とは視覚化環境 (Visualization System) のうち, プログラム を用いて描画を行うシステムのことを指す. 視覚化環境とは膨大なデータ群の構造やその データを視覚的に見て有用なイメージとして提示できるスペースを描画するためのシス テムのことである. コンピュータ内のファイルやフォルダの表示が最も身近な視覚化の例 と言える. 世界各国のアーティストが独自のシステムを開発しているが, そのシステムを一般ユーザ に公開しているものは少ないのが現状である. 一般に利用できるシステムとしては Design By Numbers (DBN), Processing(P5), Adobe Scripting等が挙げられる.

2.2

4

つの着目点

本節では, 視覚化プログラミング環境より出力された画像を四種類の視点より着目する 際に使用する 4 種類の着目点についてそれぞれ解説する. 着目点とは図形の表示方法, 描 画状態, 出力形式, 二次利用の可能性である.

2.2.1

図形の表示方法

図形の表示方法はシステムの出力部に表示される図が平面を取扱うか, 立体を取扱うか の 2 種類に分かれる. 描画する際はどちらの形状で描画するかを選択する, もしくは何れ かの表示専用の命令コマンドを使用する必要がある. • 平面図形 2次元の座標系上で描かれたイメージを指す. このイメージは２次元上で処理され る. 処理の例としては x 軸上での移動, y 軸上での移動, 図形の描画, 文字の記述等 が挙げられる. • 3D 図形 表示された状態は 2 次元であるが, 実際は 3 次元の座標系上で描かれたイメージを 指す. このイメージは 3 次元上で処理される. 処理の例としては x 軸上での移動, y 軸上での移動, x 軸上での移動, 物体の回転 (3 軸に対して可能), シェーディング処理 等が挙げられる. 以上 2 種類の形状を Processing を用いて表示した図を図 2.1 に示す. 平面形状は平面な図 形を表示している. 一方, 立体形状はマウス動作によって回転中の立方体のスナップショッ トを示している. 光源により黒く見えるが, プログラムの設定では白色の立方体である.

2.2. 4つの着目点 図 2.1: 平面形状と立体形状のサンプル

2.2.2

表示状態

表示状態は大きく分けて静的なイメージと動的なイメージに二分される. 各状態につい ては以下に説明する. • 静的なイメージ 静止画, 写真の様に動くことの無いイメージを指す. DBN と Processing を用いて描 いた静的なイメージのサンプルを図 2.2 に示す. 図 2.2: 静的なイメージサンプル • 動的なイメージ 動的なイメージには二つの意味合いがある. 一つはアニメーションの様に再生し続 けるイメージ, もう一つはインタラクティブアクションに対応するイメージのこと である. これら動的なイメージは動的情報 (動的に変化する情報) がアクション毎や 時間毎に与えられるため, 描画画像は刻々と変化していく. 図 2.3 は DBN を用いて

描いた動的なイメージ (アニメーション) をタイミングをずらしてスクリーン上から キャプチャしたものである. また, Processing を用いて描いたマウスアクションに対 応する動的なイメージを 2.4 に示す. 四角いつまみをマウスでドラッグして移動さ せることで表示画像に対する処理を変えることができる. また, 処理を施す画像も 下方のイメージ一覧より取得することができる. 図 2.3: 動的なイメージサンプル 図 2.4: 動的なイメージサンプル

2.2. 4つの着目点

2.2.3

出力形式

出力形式はベクター形式とラスター形式の 2 種類に分けられる. 各出力形式の特徴を以 下にまとめる. • ラスター形式 利点 イメージを構成するピクセル毎に色階調を表しているため微妙な階調を表現するこ とができる. そのためグラデーションやぼかし効果を利用する際や, 風景画のような 階調変化の激しい作品を作成するのに向いている. また, 紙と鉛筆を持つ感覚で描 画できるため, 初心者でも簡単に描画することが可能である. 欠点 コンピュータ内での画像をピクセルと呼ばれる画像を構成する最小単位で管理して いるため, 画像が大きくなれば, またピクセルの密度を表す解像度 dpi(dot per inch) が高いほど容量が増大する. そのため大きな作品作成はマシンのスペック的に困難 である場合がある. ラスター形式は解像度低落時, 画像拡大時, 変形処理を施す際に 画素が粗くなる, ジャギが発生し, 二次加工が困難になる等の問題が生じる. • ベクター形式 利点 ベクター形式において各オブジェクトはパス, 制御点, 制御線, その他パラメータか ら成り立つ. その他パラメータには図形/文字オブジェクトの情報 (色, 線の太さ) 等 が含まれる. ラスター形式とは異なり全てのデータを数値によって管理しているた め, 変形処理に強く, 場合によってはラスター形式より少ないデータ容量で保存でき る. また, 拡大してもその大きさの情報が変化するだけで済むため, グラフィック自 体の画質を下げることがなく拡大することもできる. 欠点 連続的な配色 (グラデーション) の様に繊細な表現を実現するためには細かな設定が 必要となるため, ラスター形式の様に容易に描くことはできない. そのため風景画等 色の階調変化の激しい作品には不向きである. また細かすぎるパスの描画やコーナー ポイントの多すぎるイメージはラスター形式よりも容量が大きくなることもある.

図 2.5 にそれぞれの形式で表示されたイメージが示されている. ラスター形式ではジャ ギが目立つが, ベクター形式では特に目立たないことが見て取れる. ただし, ベクターデー タを取扱っていてもクリップボードを経由して他のアプリケーションへ描画データを送る 場合や, 紙媒体に印刷する際はベクター形式のデータはラスター形式に変換されてしまう ため注意が必要である. 図 2.5: ラスター形式とベクター形式の比較

2.2.4

二次利用の可能性

二次利用とは, 視覚化環境より出力された図形に対して追加作業を行うことである. こ の作業はラスター形式ではオブジェクトを分割して処理することができないため簡単に 執り行うことはできない. ラスター形式で追加作業を擬似的に行う場合はレイヤーを用い る等の工夫が必要とされる. 図 2.6 にベクター形式のデータに追加作業を施した例を示す. 追加作業はベクター形式の取扱いが可能な Adobe Systems 社の Illustrator を利用してい る. 図中で適用した処理以外にも拡大縮小等変形等様々な処理を施すことができる.

第

3

_{章 視覚化を目的とした既存システム}

本章ではプログラミングを利用してデータの視覚化, イメージの描画を行うシステムのう ち, 本研究で注目した 3 種類のアプリケーションについて次の項目に従ってまとめる. 項 目順序は各システムの特徴, システム起動時の状態・方法, プログラム例とその実行結果, システムの利点欠点の順である.

3.1

DBN

本節では現在デザイナーのためのプログラミング言語の開発を行っている米国 MIT メ ディアラボの John Maeda 教授が考案, 作成した Design By Numbers (DBN)[1] について 調査した結果をまとめる.

3.1.1

数字を用いてデザインする

DBN

Maedaによって開発された Design By Numbers (DBN) はデジタルメディアの新しい デザイン技法として, またプログラムの知識が乏しいデザイナーがプログラムのアルゴリ ズムを学ぶために研究開発されたアプリケーションである. プログラムの記述や実行結果 はブラウザシステムを利用しているため, WEB 上で動作する Java アプリケーションとし ても利用できる. 他のシステムと異なる点として, プログラムの作成方法やアルゴリズム を丁寧に解説した教科書の存在が挙げられる. DBNはアニメーションの作成やマウスイベントに反応する動的な平面図形の表示が可

能である. しかし, コマンド数が少ないため他のシステムに比べ表現能力が劣るという欠 点がある. また, ブラウザを利用するシステムのためラスター形式で画像は出力される. プログラム実行後の出力画像はブラウザ上に表示された状態のまま直接切り出すことは できないため, 二次利用は困難である.

3.1.2

DBN

の起動と実行

DBNを起動する方法は 2 通りある. 一つは Web 上の DBN のサイトへからシステムを 利用する方法, もう一つは直接自分のマシンにダウンロードして起動する方法である. 起 動した状態は図 3.1 に示す. 図 3.1: DBN 起動時 プログラムエディタにプログラムを入力し, 実行ボタンを押せば記述したプログラムが 実行される. プログラムエラーが生じる場合は整列ボタンの右側にエラーメッセージが表 示され, エラー部分の文字色が反転してユーザにエラーを知らせる. 実行結果は 101 × 101 pxに固定されたサイズ上に表示される. 以下の図 3.2 から図 3.1.2 に DBN を利用して描いたサンプルを, また以下に利用したプ

3.1. DBN の内プログラムが得ることのできた点に黒い点を描いている. 図 3.1.2(サンプル 3) は長方 形を描くコマンドを作成し,  そのコマンドを繰り返し使うことで複雑な模様を作り出し ている.   // #1 sample : bokasi Paper 0 Repeat A 0 100 { Repeat B 0 100 { Set [A B] (A+B) } } // #2 sample : mouse Paper 0 Forever {

Set [<Mouse 1> <Mouse 2>] 100 } // #3 sample : kousi Command Rectangle L B R T { Line L B R B Line R B R T Line R T L T Line L T L B } Command RectInRect H V N S { Repeat B 0 N { Set A (B*S)

Rectangle (H-A) (V-A) (A+H) (A+V) } } Paper 0 RectInRect 26 26 12 4 RectInRect 74 26 12 4 RectInRect 26 74 12 4 RectInRect 74 74 12 4   図 3.2: DBN サンプル 1 図 3.3: DBN サンプル 2 図 3.4: DBN サンプル 3

3.1.3

DBN

の利点欠点

2002年 4 月と 2003 年 4 月より名古屋市立大学視覚情報デザイン学科の学生に対し, 各 年約 4ヶ月に渡る DBN の講義が中部大学藤吉助教授指導の元行われた. その際に学生らに 配付したアンケート結果より得られた DBN の利点と欠点を以下にまとめる. なお, DBN は現在も進化を続けているためここに挙げた欠点も改善される可能性もある. DBN の最 新情報は直接サイトへ赴いて確認する必要がある. 1. DBNの利点 • コマンド名が予測しやすく, アルゴリズムや構文ルールが簡単に学べる. • 関数や数値の表示を視覚的に見ることができる. • 表現の基礎である白黒のみのシンプルかつ奥の深い表現方法が学べる. • 単純なアニメーションやインタラクティブデザインをすぐに作成できる. • 制限された枠の中で限界まで自分の理想に挑戦する楽しみができる. • 教科書が存在する. 2. DBNの欠点 • 言語的にも保存形式的にも他のアプリケーションとの互換性がないため他のプ ログラムに移行しにくい. • 画板のサイズを変えることができない.

• C 言語の様に数学で使用される主な関数 (sin, cos, tan) や小数が使用できない. • 処理スピードが低速, ソフトとしての安定性が無いため作業が中断される. • 時間制御, 音や映像等外部データを取り扱う事ができない. これらの集計結果をまとめる際に興味深く思えたことは, 一度 C 言語の講義を受けても 尚プログラムを苦手とする学生の意識に変化が生じていたことである. 表 3.1 で示す様に, 講義を受講する前後でプログラムに対する意識が変化した学生が多いことが分かる. DBN の特徴でもある学習用のシステムとしての役割はここでも果たされている.

3.2. Processing 表 3.1: プログラムに対する意識調査 2002年度 プログラムに対する意識 前期講義開始時 前期講義終了時 (選択式回答) (人) (人) 得意/好き 3 12 苦手/嫌い 14 2 その他 2 5 2003年度 プログラムに対する意識 前期講義開始時 前期講義終了時 (選択式回答) (人) (人) 得意/好き 6 12 苦手/嫌い 9 4 その他 2 2

3.2

Processing

本節では現在教育を目的としたプログラミング環境として米国 MIT メディアラボが開 発を行っている Processing について調査した結果をまとめる.

3.2.1

Java

を基調とした

Processing

Maedaの元で学んだ Fry と Reas は, DBN の欠点の多くを改善したデザインアプリケー ションシステム Processing を開発した. このシステムは DBN と同じく静的なイメージ, 動的なイメージを表示することが可能である. さらに, DBN において表現不可能であった 図形の 3 次元表示や外部データ (JPEG, GIF イメージ, カメラ映像等) の取扱いが実装さ れている.

DBNでは描画イメージをプリントスクリーン等で取得する以外に二次利用は行えなかっ たが, Processing は出力ファイルを Java Applet に変換し, Web への掲載を容易に行うこ とができる様に改善された. しかし, 出力形式はラスター形式のため二次利用の可能性は まだ低い.

3.2.2

Processing

の起動と実行

Processingは Processing のサイトからダウンロードして実行する必要がある. 入手時期 に合った最新バージョンをインストールし, Java アプリケーションとしてコンピュータ上 で起動させる. 図 3.5 に起動した Proce55ing のインタフェイスを示す. 左上に並ぶボタン の使用方法は以下にまとめて記載する. • 実行ボタン : プログラムを実行する際に使用. • 停止ボタン : プログラムを停止する際に使用. • 新規作成ボタン : 新しいスケッチを用意する際に使用. • 読込みボタン : ファイルを読み込む際に使用. • 保存ボタン : ファイルに保存する際に使用. • 出力ボタン : Java アプレットに出力する際に使用. (出力結果は Java アプレット表示のための簡単な html ファイルとして出力される) 図 3.5: Processing 起動時

3.2. Processing ■ 描画モード選択 Processingはプログラムエディタに記載されたプログラムの記述に応じ, 以下の 3 種類 のモードで描画を行う. • Basic Mode : 静的な描画を行う際に使用. • Standard Mode : 動的な描画, インタラクティブアクションを取り扱う際に使用. • Advanced Mode : 通常の JAVA を用いてプログラミングを行う.

初心者は Basic Mode よりプログラミングを学び, Standard Mode へと移行していく. 先 に DBN を学んだものであれば Standard Mode より開始することも可能であると Processing のサイトでは記載されている. モードの変更はプログラムの記述方法により自動的に決定 される. Basic Mode を用いて円を描いたプログラムサンプル, 並びに Standard Mode を 用いたマウスドラッグ時に線が描かれるプログラムサンプルを以下に, また実行結果を図 3.6に示す.

 

//Basic Mode sample size(200, 200); background(255); noStroke();

color inside = color(143, 149, 229); color middle = color(90, 102, 242); color outside = color(12, 17, 76); fill(inside); ellipse(0, 0, 200, 200); fill(middle); ellipse(0, 0, 100, 100); fill(outside); ellipse(0, 0, 55, 55);

//Standard Mode sample void setup() { size(200, 200); noBackground(); refresh(); } void refresh(){ fill(251, 182, 218); noStroke();

rect(0, 0, width, height); }

void loop() {

stroke(255, 0, 0);

if(mousePressed && pmouseX != 0 && pmouseY != 0) { line(mouseX,mouseY,pmouseX,pmouseY);

}

図 3.6: Processing サンプル

■ プログラムの記述方法の比較

次に Java と Processing で同じイメージを描画した際のプログラムを比較する. Process-ingでは Java の import ファイルの宣言等ユーザが記述しなければならない部分を記述し なくても良い様に, ユーザが直感的に図形を描画することが出来る様にシステムが構築さ れている. 比較することにより Processing のプログラムが Java のプログラムよりも簡潔 で直感的あるかを見て取ることができる. また, Processing の方が直感的に何の図形を描 画しているかをプログラムより見ることができる.

3.2. Processing   //programmed by JAVA //object.java import java.applet.Applet; import java.awt.*; import java.lang.Object;

public class objects extends Applet{ public void init(){

createImage(150,100); setBackground(Color.gray); }

public void paint(Graphics g){ int line_x[] = {12,120,125}; int line_y[] = {50,15,60}; g.setColor(Color.white); g.fillRect(10,10,60,60); g.setColor(Color.black); g.drawRect(10,10,60,60); g.setColor(Color.white); g.fillOval(80,10,60,60); g.setColor(Color.black); g.drawOval(80,10,60,60); g.setColor(Color.white); g.fillPolygon(line_x, line_y, 3); g.setColor(Color.black); g.drawPolygon(line_x, line_y, 3); } } //programmed by Processing size(150,100); rect(10,10,60,60); ellipse(80,10,60,60); triangle(12,50, 120,15, 125,60);  

3.2.3

Processing

の利点欠点

2003年 5 月から約 2ヶ月に渡り名古屋市立大学視覚情報デザイン学科の学生に対し中部 大学藤吉助教授の指導の元 Processing の講義が行なわれた. この講義で集計されたアン ケート結果より得られた Processing の利点と欠点を以下にまとめる. 1.利点 • ビジュアル的な実行結果をその場で見ることができる. • コマンドは描画に必要な要素から直感的に理解できるものが多い. • 予めシステム内で予約されている関数には (正しい綴で記載された場合) 文字色 が変化するため, スペルミスを防ぐことができる. • Java を取り入れているため, プログラム面での Java ヘの移行も可能である. • Java Applet に出力されるため, 二次利用の実現が容易になった. • DBN とは異なり, 簡単な立体形状を描画することができる. • DBN とは異なりスケッチ (イメージ) の大きさは自由に決めることができる. • 三角関数や乱数にも対応できる. 2.欠点 • 他のソフトとの互換性が無い. • 表示されて画面内で微調整ができない. • 音の対応が未だなされていない. DBNに比べ多くの欠点が改善されているため, また C 言語や Java を学んだ時には感じ られなかったプログラムの面白さ, 有益にプログラムを利用する方法を得ることができた ことが Processing の利点であると言う学生らの意見が得られた. Processingは現在開発段階中であるため, 今後 Java で実現可能な機能 (ネットワークを 介した操作, 音声の利用等) の多くが Processing 上で実現できると期待される.

3.3. Adobe Scripting

3.3

Adobe Scripting

Adobe Scriptingは Adobe Systems 社が開発・販売を行っている Illustrator, Photoshop 上で動作するスクリプト言語の総称である. アニメーションの再生やマウスイベントへの 対応等の動的な情報を用いる描画を扱うことはできないが, 静的なイメージを作成する際 に Illustrator, Photoshop の機能を利用することができるため, 複雑な図形の加工を容易に 行うことができる. また, 先のシステムとは異なり Illustrator 上ではベクター形式の画像 を取り扱う事ができる.

3.3.1

3

種類の言語を選べる

Adobe Scripting

スクリプトを用いてデザインする機能が Adobe Illustrator 10, Adobe Photoshop 7 より 組み込まれた. これらのアプリケーションで利用できるスクリプティング機能を総称して Adobe Scriptingと呼ぶ. 使用できる言語は Windows 環境では Visual Basic, Macintosh 環 境では AppleScript, そして両プラットフォームを対象とした JavaScript の 3 種類である. 今回はその中でも機種依存の無い JavaScript に注目して実際に描画を行う. ただし, 今回 Adobe Scriptingを実行させるアプリケーションは, ベクターデータを取り扱うことので きる Illustrator に限定する. ■ JavaScript について JavaScriptは Netscape 社が開発した機種依存の無い, オブジェクト言語ベースのスクリ プト言語である. 単独で動く他の言語に比べ実用性は低いが, 小さく軽いため他の製品や アプリケーションに埋め込むことが簡単な言語である. 例として HTML に埋め込み WEB ブラウザで逐次処理を行う方法がよく知られている. 自らの作品を Web 上に展示するデ ザイナーが増加するにつれ, その使用頻度も増加している.

3.3.2

Adobe Scripting

の起動と実行

Adobe Scriptingは Illustrator の一機能であるため, Illustrator を起動させれば利用する ことが可能である. 外部エディタを利用して記述したスクリプトは Illustrator ツールバー 内の [ファイル→ スクリプト → 参照...] を選択していく必要がある. 参照でスクリプトの

記述されているファイルを選択すれば Illustrator 上で表示される. またエラーメッセージ も Illustrator 上で表示される.

JavaScriptを用いて作成したスクリプトで外部ファイルの数値データを利用して線を引 いている例を以下に, また実行結果を 3.9 に示す.

 

// Adobe Scripting sample 1 var N = 5120;

var doc = documents.add(DocumentColorSpace.RGB, N/2, 1000); if(documents.length > 0){

var srcPath = "Macintosh HD:Users:populi:AS_Sample:raw.txt"; var theFile = new File(srcPath);

var isOpen = theFile.open("r"); if(isOpen){

theFile.seek(0, 0);

line = activeDocument.pathItems.add(); var points = new Array(N);

for(var i = 0; i < N; i++){ points[i] = new Array(2); }

for(i = 0; i < N; i++){

var contents = theFile.readln(); points[i][0] = i/2; points[i][1] = contents * 5000 +500; } line.setEntirePath(points); } theFile.close(); }  

3.3. Adobe Scripting

また, JavaScript を用いて Illustrator で表示した他のサンプルを示す. 図 3.10 は図形を 三角関数の数値を用いて配置したサンプル, 3.11 は元画像である写真に画像処理を施し, 各ピクセルにおける色データを利用してイメージをベクター形式で表示している.

 

// Adobe Scripting sample 2 if (documents.length > 0 ){

 var star = activeDocument.pathItems.star(300, 230, 200, 150, 7);

 var myColor = new Color();

 var myRGB = new RGBColor();   myRGB.red = 255;

       myRGB.green = 110;        myRGB.blue = 30;  myColor.rgb = myRGB;  star.fillColor = myColor;    star.strokeColor = myColor;  for(t=0;t<500;t+=5){  var x= Math.cos(t)*Math.cos(t)*500 + 50;  var y= Math.sin(t)*Math.sin(t)*500 + 50;  var z=t-100;

 var star1 = activeDocument.pathItems.star(x, z, 20, 12, 7);

 var myColor = new Color();

 var myColor2 = new Color();

 var myRGB = new RGBColor();    myRGB.red = 230 - 0.3*t;

        myRGB.green = 255 - 0.5*t;

        myRGB.blue = 80;

 var myRGB2 = new RGBColor();   myRGB2.red = 0;

        myRGB2.green = 255;         myRGB2.blue = 80;  myColor.rgb = myRGB;     myColor2.rgb = myRGB2;  star1.fillColor = myColor;     star1.strokeColor = myColor2;  } }  

図 3.10: Scripting サンプル 2

3.3. Adobe Scripting

 

// Adobe Scripting sample 3 var IE = 480;

var JE = 640;

var doc = documents.add(DocumentColorSpace.RGB, (JE * 10)/10, (IE * 10)/10); function plot(i, j, red, green, blue){

var circle = activeDocument.pathItems.ellipse((i+1)*10, (j+1)*10, 8, 8); myColor = new Color();

myRGB = new RGBColor(); myRGB.red = parseInt(red); myRGB.green = parseInt(green); myRGB.blue = parseInt(blue); myColor.rgb = myRGB; circle.fillColor = myColor; circle.strokeColor = myColor; return; } if(documents.length > 0){

var srcPath = "Macintosh HD:Users:populi:AS_Sample:dots_color.dat"; var theFile = new File(srcPath);

var isOpen = theFile.open("r"); if(isOpen){

theFile.seek(0, 0);

for(var i = 0; i < IE; i++){ for(var j = 0; j < JE; j++){ var red = theFile.readln(); var green = theFile.readln(); var blue = theFile.readln(); if(i%10 == 0 && j%10 == 0){

var dots = plot((i), (j)-1, red, green, blue); } } } } theFile.close; }  

3.3.3

Adobe Scripting

の利点欠点

Adobe Scriptingを用いて作業する場合の問題点を以下に挙げる. 1.利点 • ベクター形式の出力を得ることができる. • ポイント数の指定を行うことができるため, メートル単位等日常に用いる単位で 出力することができる. 2.欠点 • Illustrator 上でエディット作業を行なうことができない. • スクリプトファイルのドラッグ＆ドロップでイメージを表示させることができ ないため不便である. • スクリプト機能を使用する際は [ファイル → スクリプト → 参照 → ファイルの 選択] の手順をスクリプトの変更の度に行う必要がある.

Adobe Scriptingは 2004 年に発売された illustrator CS にも搭載されている. 今後も Illustratorのバージョンが上がるにつれ機能が追加されていくと考えられる. また, 2004 年度に名古屋市立大学で行われる講義には Adobe Scripting を採用する方向で現在検討し ており, ユーザのアンケートはその際に実施する予定である.

3.4

その他のシステム

先に紹介したシステムは現在もバージョンアップが予定され, 尚且つ一般ユーザへの配 布が行われているシステムである. これら以外にも同様のシステムを持つものは世界中に 多く存在する. しかしその多くはシステムの配布やソースの公開はしておらず, 出力結果 のみを表している. そしてその出力形式は Web サイトで公開しているものが多いことか らラスター形式で表示されている. 中には Macromedia 社の Fash を用いてベクターデータ を表示しているものもあるが, 二次利用を考えているものは現段階では発見されていない. しかし今後研究段階から実用段階に入るシステムが出現する可能性も十分あるため, 関 連情報の収集は欠かせない.

3.5. 既存システムの問題点

3.5

既存システムの問題点

今回は既存のシステムにの問題点として出力形式と動的なイメージの表示機能の 2 項目 に注目する. 表 3.2 に既存の視覚化システムとして紹介したシステムの特徴をまとめたも のを示す. 表 3.2: 既存システム比較 システム 出力形式 静的な描画 動的な描画 二次利用の可能性 DBN ラスター ○ ○ × Processing ラスター ◎ ○ × Adobe Scriptng ベクター ◎ × ◎ 表より DBN と Processing は表示形式の面では動的なイメージの表示ができ, また Pro-cessingは立体形状の描画も可能であるという特徴が見て取れる. しかし, DBN や Processing の出力はラスター形式である. そのため, 拡大縮小や変形の 際に生じるジャギが発生し, 紙媒体等での二次利用が困難となる場合が多い. 一方, Adobe Scripting の出力はベクター形式であるため, 二次利用が可能である. しか し, 動的な要素を含むグラフィックの作成ができないという問題点がある.

第

4

_{章 視覚化のためのプログラミング}

環境

本研究では, 図 4.1 に示すような動的な入力情報をプログラムを用いて視覚化し, そのイ メージを手作業の介入により二次利用・加工することが可能となるプログラミング環境 を実現する. 入力には, 動的な情報としてマウス動作や音声, 動画等を扱い, ユーザの作 成したプログラムの実行により情報の視覚化を行う. プログラムの実行結果はベクター形 式に出力され Illustrator 上に表示される. 次に, Illustrator 上で手作業による加工を施す ことで, プログラミングにより出力された図形に人間の曖昧な感覚を付加することができ る. このように, プログラミングと手作業による加工を融合することで新しい表現が可能 となる. 図 4.1: 提案する視覚化プログラミング環境

4.1

プロトタイプシステムの作成

今回は, 動的な情報としてマウス座標を基に図形を描画するプロトタイプシステムを作 成した (図 4.2 参照). ユーザは動的情報としてマウス描画領域内のドラッグによりマウス 座標を入力し, その座標を利用するプログラムを入力部のプログラムエディタに入力する. 次に, 実行ボタンを押すとプログラムの構文チェックを行い, 描画結果を Illustrator 上に表 示する. 図 4.2: プロトタイプシステム 図 4.2 に示すユーザが記述したプログラムは, 大きく２つの処理に分けられる. 1 つは １回目のドラッグ時に得たマウス座標に対して色調を変化させた円を描画する. もう 1 つ は 2 回目のドラッグ時に得たマウス座標からある点までを直線で描く. 次いで同マウス座 標に対して色調を変化させた円を描画する. このように, 本プロトタイプでは動的情報と してマウス座標を容易に扱うことができ, 直感的に理解し易いコマンドを用意している. さらに, ベクター形式の出力を得ることができるため, プログラムにより表示した図形を Illustrator上で手作業で加工することが容易である.

4.2. プロトタイプシステムのプログラム

4.2

プロトタイプシステムのプログラム

現在利用可能なコマンドの一覧を以下表 4.1 に示す. 現在細かなシンタックス等を設け てはいないため, 今後言語としての枠組みも考えなければならない. 今後ここに記載され ていない図形や, 曲線, 関数等を追加していく予定である. 表 4.1: プロトタイプシステム用コマンド一覧 コマンド名 記述方法 説明 図形の描画

Rect Rect ( x, y, width, height ) ; 長方形の枠線を描画する.

FillRect() FillRect ( x, y, width, height ) ; 塗り潰された長方形を描画する. Square() Square ( x, y ) ; 正方形の枠線を描画する.

FillSquare() FillSquare ( x, y) ; 塗り潰された正方形を描画する. Circle() Circle ( x, y, r ) ; 円の枠線を描画する.

FillCircle() fillCircle(x, y, r ) ; 塗り潰された円を描画する. Line() Line( x1, y1, x2, y2 ) ; 線を引く

ペンプロパティ 決定用コマンド

PenColor() PenColor ( r, g, b ) ; 線を描く色の指定 PenKind() PenKind( thickness ) ; 線の太さの指定 塗り潰し色 決定用コマンド FillColor FillColor ( r, g, b ) ; 塗り潰す色の指定 関数 Repeat Repeat n 内のコマンドを n 回分繰り返し行う. マウス座標関連

MousePoint MousePoint0 Mousepoint1 マウスドラッグ時に得た座標数が格納. MouseX MouseX0 MouseX1 マウスドラッグ時の y 座標が格納. MouseY MouseY0 MouseY1 マウスドラッグ時の y 座標が格納.

4.3

プロトタイプシステムの描画例

プロトタイプシステムを用いて描画した例を以下に示す. 図 4.3 は同じプログラムを利 用し, 異なるマウス入力を動的データとして利用した場合のサンプルである. この時利用 したプログラムは以下に示す.   r = 0; Repeat MousePoint { FillColor(r, 0, 0); FillCircle(MouseX, MouseY, 10); r++; } b = 150; Repeat MousePoint1 { FillColor(0, 0, b); Line(MouseX1, MouseY1, 300, 250); b--; }   図 4.3: プロトタイプサンプル 1

4.3. プロトタイプシステムの描画例 図 4.4 は保存しておいた同じ動的データを利用し, 異なるプログラムを実行した場合の 結果である. この様に一度入力したプログラムやマウス座標を再利用することも出来る. 図 4.4: プロトタイプサンプル 2 図 4.5 は図 4.4 のマウス座標を用いている. 記述したプログラムは各マウス座標に対して 円を描くだけのプログラムであったが, プロトタイプシステムで出力した後に Illustrator の機能を利用して手作業で加工した. このような二次利用以外にも多くの表現の可能性が ある. 図 4.5: プロトタイプサンプル 3

第

5

_{章 おわりに}

本研究では, グラフィックデザイナーのための視覚化プログラミング環境に関する基礎検 討として, マウスによる動的情報の視覚化を目的としたプログラミング環境のプロトタイ プを構築した. 今後は, 動的情報の入力として音声, 動画に対応するシステムを構築する 予定である.

謝 辞

本論文の作成にあたり終始適切な助言を賜り, また指導して下さいました中部大学工学 部情報工学科藤吉弘亘助教授に深く感謝致します。 次に, コンパイラ部の作成にあたりご助言を頂きました中部大学工学部情報工学科奥居 哲助教授に感謝致します. さらに, 既存の視覚化プログラミングシステムを利用したサンプル作成, 並びにアンケー トに御協力頂きました名古屋市立大学芸術工学部視覚情報デザイン学科の皆様に感謝い たします. 最後に, プログラム作成にあたり数多くの助言を頂きました田中佑典さん, 水野宏基さ んを始めとする藤吉研究室の皆様に深く感謝いたします.

参考文献

[1] Jhon, M.(1999):“Design By Numbers”, MIT Press [2] Proce55ing案内サイトhttp://proce55ing.net/

[3] Matt, W.(2002):”Digital Information Graphics”,Thames & Hudson Ltd, 郷司 陽子訳 「Digital Information Graphics」株式会社毎日コミュニケーションズ, 2003年3月

[4] 情報デザインアソシエイツ編, “情報デザインソースブックInformation Desighn Source Book”,

株式会社グラフィック社, 2003年10月

[5] David, E. P. et al.(2003):“Adobe Scripting”, Wiley Publishing, Inc.

[6] Adobe illustrator version 9.0, “Plug-in Software Development Kit Programmer’s Guide for Machintosh and Windows” , Revised: October 1999

[7] Adobe illustrator version 9.0, “Plug-in Software Development Function Reference for Mach-intosh and Windows” , Revised: October 1999

[8] Netscape, “netscape devedge”, http://devedge.netscape.com/

[9] 升屋 正人, “はじめてのJavaScript”, ソフトバンクパブリッシング株式会社, 2002年1月

[10] Sun Microsystems, “Sun Microsystems”, http://www.sun.com/index.xml [11] Sun Microsystems, “The Source for Java Technology”, http://java.sun.com/ [12] 林 正幸, “Javaプログラミング入門”,共立出版株式会社, 2001年1月

[13] “Java2 Platform Std.Ed.v1.3” http://java.sun.com/

(http://java.sun.com/j2se/1.3/ja/docs/ja/api/java/util/jar/package-summary.html) [14] 久野 靖,久野 禎子 共著, “Javaによるプログラミング入門”,共立出版株式会社, 2001年6月 [15] 戸松 豊和, “JAVAプログラムデザイン”,ソフトバンク株式会社, 1997年3月 [16] 小森良隆, “CodeWarrior Cプログラミング入門”,技術評論社, 1996年12月25日 [17] 矢沢久雄, “C++クラスと継承完全制覇”,技術評論社, 2002年10月 [18] 岡田稔, “Cによるプログラミング演習”, 近代科学社, 1993年11月 [19] B.W.カーニハン, D.M.リッチー, “プログラミング言語C第2版ANSI規格準拠”,共立出版 株式会社, 1989年6月

[20] 林晴比古, “新Visual C++6.0入門 ビギナー編”,ソフトバンクパブリッシング, 1998年11月

[21] 林晴比古, “新Visual C++6.0入門-スーパービギナー編-”,

ソフトバンクパブリッシング, 1999年6月

[22] 疋田輝雄,石畑清 著, “コンパイラの理論と実現”, 共立出版株式会社, 1988年11月

[23] 中部大学情報工学科 編集兼発行, “情報工学実験1, 2”, 2001年4月

[24] N.Matthew, R.Stones著, 葛西 重夫 訳, “Linuxプログラミング 例題で学ぶUNIXプログ ラミング環境の全て”,ソフトバンクパブリッシング株式会社, 1999年3月

[25] Jhon R.Levine, Tony Mason, Doug Brown共著,村上列 訳, “lex and yacc”, 1994年11月

[26] Microsoft Corporation, “UNIX Applcation Migration Guide”, October 2002

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnucmg/html/ucmgch07.asp

[27] Microsoft Corporation, “Services fot UNIX Home”,

http://www.microsoft.com/japan/windows/SFU/default.asp [28] MKS Inc, “MKS Toolkit”

http://www.mkssoftware.com/

[29] TK, “Visual C++でbisonおよび、flexを使うには” http://homepage1.nifty.com/hp tk prg/tip1.htm [30] にとよん, “nitoyon.com/VC++の使い方” ,

グラフィックデザイナーのための視覚化

プログラミング環境に関する基礎検討

高畠綾子

（中部大学工学部情報工学科）