WISS2008

Sequential Graphics: 描画時の臨場感を再現するペイントソフト
Sequential Graphics: A Drawing Tool for Representing Drawing Sensations

櫻井稔

江渡浩一郎

∗Summary. 描画時の手の動きを保持した線を多数積み重ねることによって，描画時の臨場感を再現する
ペイントソフト “Sequential Graphics” を開発した．ユーザは，循環する時間軸を持つキャンバスに，時間軸上のどの時点に配置するかを考えながら線を描画する．描画は常にループ再生され，表示結果を見ながらリアルタイムに線を追加していくことができる．表現された絵は，画家の手の動きを感じさせるものになり，描画時の臨場感を伝えることができる．これにより，静止画と動画の特徴を兼ね備えた「動く静止画」を表現できるようになった．

1

はじめにペイントソフトによって生み出される創作物は，その技術的な限界によって制限される．つまり，画家は，そのソフトウェアの技術的な制約の範囲内でしか創造力を発揮することができない．
従来のペイントソフトは，主として現実世界のメディアの再現を目指している．例えば絵の具の隆起，水分量の低下による擦れなど，紙やキャンバスにおける質感をシミュレートし，再現しようとしている[3, 6, 7]．技術の進歩によって再現力は飛躍的に向上したが，物理世界の再現を目指している以上，物理世界のメディアの表現力を超えることはない．

Ryokai らによるによる I/O Brush[10] では，カメラを備えた筆型デバイスからの入力画像をテクスチャとして使うことによって，カメラとペイントソフトの融合を実現した．Cassinelli らによる Khronos
Projector [5] では，時空間を自分の手で操るデバイスを実現した．これらの研究はコンピュータによる新しい表現手法を開拓したものとして評価できるが，従来の絵画技法に精通したプロの画家が，新しい表現を発展させる土台として考えられるようなものではない．それは，画家が絵を描く際の心理的作用に着目していなかったからではないかと考える．
本研究では，画家が絵画を描く際の心理的な働きに着目し，線を描く際の手の動きの情報を保持することによって，描画時の臨場感を再現するペイント
ソフト “Sequential Graphics” を開発した．背景，基本設計，構成，実装，実践例から得られた知見について述べる．

∗Copyright is held by the author(s).
Minoru Sakurai, 東京藝術大学美術学部デザイン学科，Kouichirou Eto, 独立行政法人産業技術総合研究所

2

背景

画家は絵を描く際に，単に目で見た風景をそのまま再現するのではなく，一旦自分自身の主観的な意識として認識し，その主観的な意識を観客に伝えられるように描く．例えば，日本画における表現を考えてみる．二本の太い墨による輪郭に節が刻まれることによって，見事に竹を感じさせる表現がある．
これは，画家が竹を見た時に感じた竹の力強さという主観的な意識を，勢いのある手の動きによって，力強い線という物理的な表現として定着させたものである．古来，日本ではこのような画家の主観的な認識のことを心景と呼び，絵画は心景が物理的な表現として定着されたものとして考えてきた．
そのような表現物が，見る人の心の中に力強い竹の様子としてよみがえるのは，その太い墨の線による表現と，これまでに様々な事物を見てきた経験とのマッチングを行い，竹を見たときの心理的な認識とマッチすることから生じると考える．このように，見る人の心に，画家と同じような心景が生まれることを共感と呼び，絵画技法はこのような共感を生じさせるために発達してきた．
二本の太い墨の線が竹の心景を伝えるのは，単に線の太さや色だけではなく，その二本の線が，画家が描いたときの勢いのある手の動きを保持しているからである．手の動きの勢いは，具体的には，紙と筆との接触による線の擦れとして表現される．つまり，線の擦れという表現技法は，手の動きの勢いを線に保持させるために存在しているのである．
近代に入り，紙やキャンバスという静的な表現技法の枠を超える表現の模索が続けられてきた．画家が絵画を描画する際の勢いをより直接的に伝えるため，画家が絵画を描いている様子をそのまま観客に見せるライブペインティングという技法が考えだされた．観客は絵画が描かれている様子を目撃することによって，表現物としての絵画を見たときにも，よりリアルに画家の心景を感じとれるようになった．

WISS 2008

図 1. ストローク描画時の時間変化

3.2

図 2. a:開始・終了時点を重ねた二本のストロークb:一本目と二本目のストロークを接続する

しかし，このように目の前で絵を描くことは一度しか行えない体験であり，その体験を伝えたければ，もう一度目の前で絵を描くしかない．
このような目の前で絵画が描かれているような感覚を臨場感と呼ぶならば，臨場感を保持し，伝えることができるシステムを作りたいと考えた．

3

基本設計

臨場感を保持し，伝えるためのシステムとして，下記の要素を持つこととした．

3.1

ストローク情報の保持

絵を描く様子をそのまま再現するために，入力デバイスとしてタブレットを用いて筆圧情報を得られるようにし，線を描く際の手の動きをできるだけ保持することにした．
図 1 に，一本の線が描かれる様子を示す．左下の始点から右上の終点へと，およそ 0.5 秒間手が動き，図 1d で線が完成している．描き始めは弱く，途中から強くと筆圧も変化している．このように一本の線の描画には，始めから終わりにかけての時間変化がある．このような時間変化を伴う一本の線の描画をストロークと呼ぶことにする．後述する理由により，ストロークは描画後に，図 1e から図 1f のように始点から終点へと消えていく．
本システムでは，描画における全てのストロークにおいて，位置・筆圧などの時間変化情報を保持することとした．

ループする時間軸への配置

一枚の絵を完成させるには通常非常に長い時間がかかる．その長い時間をコマ落とし撮影によって，短時間で再現する動画を作ることがある．これにより画家が絵を描き始めてから描き終わるまでの一連の作業自体を作品化し，画家の思い描く世界をより新鮮な状態で観客に届けることができる．
本システムでは，長時間繰り返される描画作業を，約 1.5 秒という比較的短い時間軸上への線の描画という行為の蓄積として記録し，繰り返し表示することで，一連の動作を再現することにした．このように繰り返される時間軸をループする時間軸と呼ぶことにする．
本システムでは，このループする時間軸上に全てのストロークが配置される．先程のストロークは，1.5 秒でループする時間軸1 に配置されることによって，線が描画されてはまた消えるという，1.5 秒でループするアニメーションが形成されることになる．
このように，ユーザはループする時間軸上のどの時点にストロークを配置するかを考えながら描画する．例えば二本目のストロークを追加する際に，図2a のように，始点と終点をわずかにずらしつつ開始時点と終了時点を揃えて描画すると，あたかも二本のストロークを同時に描画したかのような表現となる．図 2b のように，一本目の終点に始点を合わせ，一本目の終了時点に開始時点を合わせるように描画すると，一本のストロークが長くなったかのような表現となる．

3.3

リアルタイムシステムとしての設計

通常のペイントソフトでは，各々の線は描画時にラスターグラフィックスとして展開される．そのため，描画後は二次元の静止した画像として扱われる．
それに対して本システムでは，全てのストロークはベクトルデータで扱われ，1.5 秒のループする時間軸において常にループ再生される．そのため，描画
1

一周のループ完了とストロークを連続して描画する際の手の速度を考慮し，一周毎に一本のストロークを楽に描画できることから 1.5 秒をデフォルトとした．

Sequential Graphics: A Drawing Tool for Representing Drawing Sensations

図 4. パイメニュー

図 3. 起動時の画面
図 5. スライダーするストロークが増加すると，毎フレームの描画に要する時間も増大してしまう．
これを解消するため，グラフィックカード上のフレームバッファに，ループする時間軸の全フレームをラスタライズすることとした2 ．これにより，ストロークを増加させても動作が重くならないようにし，多数の線を積み重ねた本格的な絵の描画に耐えうるものとした．
描画における手の動きを保持することが本システ
ムの肝であるため，システムの動作全てにおいてリアルタイム性を意識した設計にし，手の動きの情報をとりこぼさないようにした．また，ストロークは，色，太さ，透明度なども選択できるようにし，その選択インタフェースにおいても，できるだけ描画時の勢いを妨げないような工夫をすることとした．

4構成

本章では，システムの構成，インタフェースの詳細について述べる．

4.1

キャンバス

ストロークの太さ，色，透明度などの選択，コピー&ペースト，成果物のセーブ，ロードなど，全ての操作を数回のペンの動作で選択できるようにしている．図 4 では，パイメニューが二階層になっており，「編集」を選択した後に「クリア」を選択した状況を示している．
ストロークの太さを変化させる場合は，パイメニューより「ツール→太さ」を選択すると，図 5 のような円形のスライダーが表示される．ストロークの透明度も同様な方法で選択できる．
色を選択する場合，パイメニューから「カラー」を選択すると，図 6 に示すカラーピッカーが表示される．ユーザはペンタブレットの筆圧で色相，上下左右で明度・彩度を選択する4 ．
このように，一本のストロークは，キャンバス上の位置，時間軸上の時点，タブレットからの筆圧などの時間変化情報と，太さ，色，透明度等の選択された情報を保持し，それらが統合されたものとして存在している．

本システム起動時の画面を図 3 に示す．画面下部に，ループする時間軸を表すインジケータが表示される．描画は常にループ再生され，赤線により現在時点が示される．通常のアニメーションソフトなどとは異なり，時間軸の左右は完全に接続されており，開始・終了の概念は無い．時間軸の長さは通常 1.5秒だが，新規作成時に任意の長さを指定できる3 ．

4.2

勢いを妨げないインタフェース

本システムでは，描画の勢いを妨げないインタフェースとするためにパイメニュー[4] を採用した．

図 6. キューブピッカー

2

最新の 10 本のストロークのみベクトルデータで保持し，削除・変形操作を可能としている．
3
グラフィックカード上のメモリによって制限を受ける．

4

キューブと色選択の対応関係は設定で変更できる．

WISS 2008

図 7. リプレイペンの使用例

4.3

リプレイペン

リプレイペンは，図 7 のようにストロークを複製して配置できる機能である．通常のペイントソフトにおけるスタンプ機能とほぼ同等だが，位置だけでなく，時間軸上の時点も変化させながらコピーすることができる．

図 8. バックバッファ描画プロセス実装

5

本システムは，Visual C++により Windows 用アプリケーションとして実装されている．リアルタイム性の確保を最優先に設計されており，Direct Xの利用によりグラフィックカード上のハードウェアの支援を受けて動作することとしている．

5.1

バックバッファ描画による再生負荷の均衡化

本システムは，常時描画データを再生しながら新しい描画を重ねる必要があるため，負荷の均衡化が極めて重要となる．ここではバックバッファテクスチャへの描画処理により負荷を一定に保っている．キャンバス新規作成の際，設定された時間分のフレーム数のテクスチャをグラフィックカード上のメモリに確保し，描画されたデータはこれらのテクスチャに対し記録される．作業中は，グラフィックメモリ上から随時呼び出しながら画面表示している．
まず描画されたストロークは図 8 のようにヒストリーバッファに蓄積される．ヒストリーバッファ上のストロークは，Direct X によりリアルタイム描画しているため，アンドゥや変形操作が可能である．
10 本を超えたストローク5 は古いものから順にバックバッファテクスチャに対しレンダリングされ，ヒストリーバッファから削除される．画面表示の際は，バックバッファテクスチャ上にヒストリーバッファをリアルタイム描画し，重ね合わせて表示する．

5.2

レンダリング処理の高速化

本システムは，常に画面が再生されながら描画を記録するため，再生と記録のバランスが重要である．
5

設定により変更可能である．

図 9. カードへの転送

前節におけるヒストリーバッファからバックバッファテクスチャへのレンダリング速度が重要な要素となる．レンダリングはストロークの描画終了後ペンが離された時に，ループ一周分のバックバッファテクスチャに対し実行されるため，レンダリング速度が遅い場合は，ストローク描画毎に数秒間の画面停止が起こってしまい，大きな支障をきたす．
システムメモリ上にバックバッファテクスチャを保持する場合，GPU で描画されたストロークのテクスチャ情報をシステムメモリにコピーするか，もしくは GPU でストロークを描画したテクスチャとシステムテクスチャを GPU で合成する必要がある．
前者の場合，CPU による合成処理が必要で，非常に CPU 負荷が高い．
本システムの実装では，図 9 のようにストローク描画後に，ストロークの頂点情報を配列に格納してGPU へ渡し，各頂点の色を計算し，そのまま GPU上で現状のバックバッファへと合成する．これにより，CPU と GPU 間での通信が頂点情報のみとなり，転送処理等の負荷のかかる処理が不要となる．

Sequential Graphics: A Drawing Tool for Representing Drawing Sensations

重ねたものであり，ストロークの流れによって画面全体が大きく揺らめいている．ストロークの描画方向にも気が使われており，画面内での流れの秩序がゴッホの原画を見たときに受けるニュアンスと近く，非常にインパクトの強い作品となった．

6.2

「炎」

図 11 は燃え上がる炎が描かれている．炎は燃え上がると表現するように，大きな炎が力強く天上へと登っていく様子は，多くの人が心景として持っていることだろう．ユーザが炎を描いたとき，そのストロークもまた天に昇るように表現され，観客との間に強い共感が生まれる．図 11 下部において，炎の一部分を拡大して時間順に表示している．風で揺らめき，大きく形を変える炎の様子が表現されている．

7

図 10. 「ゴッホ：糸杉と星月夜へのオマージュ」

5.3

スキップフレームによる再生スピードの均衡化

ヒストリーバッファ分のリアルタイムレンダリン
グをしている際，ストロークデータが多くなる事で負荷率が上がり，フレームレートを一定に保てなくなることがある．
そこで，0 フレーム目の再生開始時間から，現在の再生時間で表示するテクスチャを計算し表示することで，負荷率が変動しても表示しきれないテクスチャをスキップして現在表示すべきフレームを表示することとした．これにより描画時は必ず一定の速度で再生されるキャンバスへの描画が可能となる．

6

実践例

2007 年度に一般公開の機会があり，多数の人に本システムを触ってもらった．一般ユーザによる操作では，開始直後は操作の不慣れによるツール選択ミスが目立った．しかし，時間経過に従い，選択ミスは残るものの，選択までの時間短縮が確認できた．
子供の反応としては，ペンを勢いよく走らせて画面一杯に曲線を描き，その後高速道路や新幹線などの勢いのある物質に例えて作品化することが多かった．
他，様々な年代の方の利用から生まれた手法の一部を紹介する．
6.1「ゴッホ：糸杉と星月夜へのオマージュ」

図 10 はゴッホによる「糸杉と星月夜」へのオマージュである．過去の作家による作品を本システムで再現するだけで，不思議な質感へと変化する．描画は細いストロークを一定の流れに沿って大量に積み関連研究

Maeda による TimePaint[9] は，時間軸を持つペイントソフトであり，描画後にフレームを掴んで動かすことでフレーム間の関係性を奥行きを持って見せることができる．ペイントソフトの形式を借りたソフトウェア・アート作品であり，コンピュータ上の動的な表現を模索した先駆的な作品である．それに対して本提案は，画家が表現活動の基盤として使える新しいメディアを目指したものであり，その点が大きく異なる．
Levin による FLONG[8] は，キャンバスに対し時間軸を持つ線を描画できるアート作品である．線は描画時の加速度情報を持ち，加速度とベクトル情報によって描画した時のタッチと同じ動きを再生しながら画面内を移動する．描画時の加速度情報の保持という共通点を持つが，ペイントソフトではない．
Chronodraw [1] は，画面上に動く線を描画できるアート作品である．画面は複数のボックスに分割され，各々が繰り返される時間軸を持つ．一つのボックスに描画した線は，その他のボックスに順に出現し，描画した線は画面内を飛び回ることになる．繰
り返される時間軸という共通点を持つが，ペイントソフトではない．
こくばん.in[2] は，黒板をモチーフとしたキャンバスに絵を描き，Web 上で共有するシステムである．作品が描画される過程を記録・再生できるため，絵を描く過程の作品化という点が共通しているが，ループする時間軸は持たない．

8

まとめ

本稿では画家の思い描く心景を伝達する手法として，ループする時間軸上に加速度情報を保持するストロークを多数配置可能とすることで，描画時の臨場感を伝達できる新しいメディア “SequentialGraphics” を提案した．グラフィックカードのハーWISS 2008

ドウェアの支援により，最大限にリアルタイム性を優先した実装とした．実際に本システムを利用した描画例を示し，ユーザの考えた様々な手法の紹介から，描画の経緯が保存・再現されることで，広いキャパシティを保持する情報伝達の可能性を示した．今後は，携帯電話上での動作など，コミュニケーションの幅を広げるような利用方法を検討している．映像再生メディアの発達により，さらに表現媒体の自由度が増し，その中でより新しい映像表現の可能性を求めるユーザが多数現れることを期待する．今後はコンピュータグラフィックスを，さらに自由な媒体として構築できるような表現環境を実現していきたい．

謝辞
本研究は，独立行政法人情報処理推進機構「IPA」，未踏ソフトウェア創造事業における採択の支援により行いました．感謝の意を表します．

参考文献[1] Chronodraw.
http://www.ertdfgcvb.ch/p1/chronodraw/[2] こくばん.in. http://kokuban.in/[3] W. V. Baxter, V. Scheib, and M. C. Lin.
dAb: Interactive Haptic Painting With 3D Virtual Brushes. In SIGGRAPH 2001, Computer
Graphics Proceedings, pp. 461–468, 2001.
[4] J. Callahan, D. Hopkins, M. Weiser, andB. Shneiderman. An Empirical Comparison ofPie vs. Linear Menus. In CHI ’88, pp. 95–100,
1988.
[5] A. Cassinelli and M. Ishikawa. Khronos Projector. In SIGGRAPH ’05: ACM SIGGRAPH
2005 Emerging technologies, p. 10, 2005.
[6] Corel. Painter.
http://apps.corel.com/painterix/[7] C. J. Curtis, S. E. Anderson, J. E. Seims,K. W. Fleischer, and D. H. Salesin. ComputerGenerated Watercolor. In SIGGRAPH ’97, pp.
421–430, 1997.
[8] G. Levin. FLONG. http://www.flong.com/[9] J. Maeda. TimePaint.
[10] K. Ryokai, S. Marti, and H. Ishii. I/O Brush:
Drawing with Everyday Objects as Ink. In CHI’04, pp. 303–310, 2004.

図 11. 「炎」