ベジエ曲線を用いたシンプルな植物描画によるエンタテインメント性の検討

全文

(1)情報処理学会研究報告 IPSJ SIG Technical Report. Vol.2012-EC-23 No.2 2012/3/26. 1. はじめに. ベジエ曲線を用いたシンプルな植物描画によるエンタテインメント性の検討塩尻実里†. 植物は，人間の生活空間において身近な存在である．植物をモチーフにしたグッズは，インテリア，テキスタイル，玩具など生活のありとあらゆる面で見受けられ，オフィスではデスクの上に小さな観葉植物を置いたり，家庭ではガーデニングとして植物を庭で育てたりしている．人は，植物が風に吹かれてそよぐ時の動きや，成長して茎が伸びる過程等の予測不可能な動きを生き物のようにとらえることがある．それは「自然の美」とされたり，面白いと思って観察されたりする．植物は生活に潤いと癒しをもたらしてくれる．本研究ではベジエ曲線を利用した植物描画システムを提案する．ベジエ曲線とは，コンピュータ上で滑らかな曲線を描くのに利用されている手法である．本システムをパソコン上で動作させ，マウス操作で植物を描くことで，コンピュータに親しんでもらうことをねらいとしている．同時にアニメーションを付加し，より現実の植物に近づけることをねらった．人にあまり馴染みがないベジエ曲線を利用することで，どのように描画されるか予測できない面白さを与え，ベジエ曲線そのものについて学ぶことができると考えた．また，今後システムをタッチパネルタブレット上で動作させることにより，生成した植物を鑑賞できるようにすることも視野に入れる．ブラウザ上で動作させることによって，世話をする必要もなく，場所の制約も実物に比べ受けにくい．実際に提案システムを展示した際に，マウス入力のデータを取得し，ユーザがどのように本システムを利用したかを調査した．. 米澤朋子†. 本論文では，ユーザがマウス操作によってディスプレイ上に植物を描画するシステムについて述べる．マウス操作によって，植物の生える向きを操作したり，葉の付く位置・向きを操作でき，描かれた植物は風になびくようにアニメーションする．本システムの狙いは，ＣＧ初心者をターゲットに，マウス操作を通じて植物を描いてもらうことで，コンピュータに親しんでもらうことである．植物を描く際には，ベジエ曲線を利用しているが，ＣＧ初心者等にとってベジエ曲線は馴染みがないため，システムを操作し始めてすぐの段階では，植物がどのように描画されるかわからない面白さを提供でき，マウス操作により植物を描画することを通じて，ＣＧの基礎を体験してもらうことを目指している．オープンキャンパスにおいて展示を行い，その際の一般参加者の描画データを基に，本システムのエンタテイメント性等について考察する．. Simple Drawing Plants System By Using Bezier Curve. 2. システム概要. Misato Shiojiri†. and Tomoko Yonezawa †. 2.1 システム構造本システムの初期画面を図1に示す．システムのプログラミングは全てProcessingにより行い，背景と葉は既存の画像を使用している．操作は大きく分けて，1.茎の生成のためのベジエ曲線参照ポイントの入力，2.葉の生成として葉の中心位置を入力，であり，それぞれを左クリックと右クリックにより実装した．以下に詳細を示す． (1) 左クリック画面上で左クリック操作を行うと，クリック時のマウスポインタの X 座標と Y 座標を取得し，クリックした場所にポインタを表示する(図 2)．このポインタの座標を，クリックした順番にベジエ曲線の制御点の座標に代入する．Process ing では三次ベジエ曲線を 4 点の座標を定めて生成することができる．4 点クリックすることで，ポインタが消え，ベジエ曲線で茎を描画する(図 3)．. In this paper, we describe a plant drawing system that users can draw plants by user's mouse operation. In our system, the user can manipulate the direction of plants growth and positions of leafs. The aim of our system is to get CG beginners accustomed to CG and computers through drawing plants. To draw the plants, our system employs the Bezier curves. Since the CG beginners are unfamiliar with the Bezier curves, the user can experiences unexpected drawing of plants. We exhibited our system in an open campus. Based on the obtained draw data by the visitors, we discuss about effectiveness of our system.. †. 1. 関西大学総合情報学部 Kansai University Faculty of Informatics. ⓒ 2012 Information Processing Society of Japan.

(2) 情報処理学会研究報告 IPSJ SIG Technical Report. Vol.2012-EC-23 No.2 2012/3/26. (2) 右クリック画面上に茎が描画された状態で左クリック操作を行うと，マウスポインタでクリックした場所の X 座標と Y 座標を取得し，外部データとしてあらかじめ用意されている葉のイラストを表示する(図 4，5)．この時，左クリック操作時に代入したベジエ曲線の最初の制御点と最後の制御点の 2 点を通る直線を仮定し，その直線の左右どちら側で右クリック操作が行われたかを判定する．右クリック操作時の座標が，仮定された直線より左ならば左向き，右ならば右向きの葉を表示する．. 図 2. 図 1. 左クリック操作. 初期画面. 図 3. 2. 茎の描画. ⓒ 2012 Information Processing Society of Japan.

(3) 情報処理学会研究報告 IPSJ SIG Technical Report. Vol.2012-EC-23 No.2 2012/3/26. 植物のアニメーションアニメーションは回転行列を利用している(図 6，7)．回転行列とは，二次元や三次元上で原点を軸として点やベクトルを反時計回りに移動させる際に使われる行列である．本システムでは二次元空間における回転行列の式に一定のランダムな数値を代入し，茎や葉が曲線的な動きをするように実装している．また，各茎と葉の動きに統一性を持たせるために，表示した葉を最後に描画した茎の動きと連動させている．茎が複数本の場合は各茎が異なる動きをするように実装している． 2.2. 図 4. 右クリック操作（左）. 図 6. アニメーション. 3. 検証 3.1 検証方法. 図 5. 検証は関西大学総合情報学部のオープンキャンパスにて行った．ブラウザは 600× 500 ピクセルで，オフライン状態の M acBookPro でシステムを動作させ，机の上に置き，ユーザは立位状態で机上のシステムを操作した(図 7)．検証用のユーザ操作の記録を開始する前に，システムの操作方法を実演を交えて説. 右クリック操作（右）. 3. ⓒ 2012 Information Processing Society of Japan.

(4) 情報処理学会研究報告 IPSJ SIG Technical Report. Vol.2012-EC-23 No.2 2012/3/26. 明し，その後自由に操作してもらうように指示した．システムにはブラウザ画面の保存機能とリセット機能を追加し，各ユーザがどのようにして本システムを操作したかを記録できるようにした．. 図8. 図7. 色によるエリア分け. 検証の様子. 3.2 検証内容，結果. 検証の際に追加しておいた保存機能で保存されたデータを集計した．ブラウザ画面を図 8 のように背景の植物の色に合わせて 5 つのエリアに分け，A を pink，B を blue，C を green，D を beige，E を black とし，生成された植物が各エリアの何パーセント上に描かれているか(図 9)，さらに葉の枚数(図 10)，茎の本数(図 11)，茎 1 本あたりに何枚の葉を付けたか(図 12)を目視で調べてヒストグラムに表した．なお，空白の部分は無効とした．. 図9. 4. 背景のエリア別の植物描画率分布. ⓒ 2012 Information Processing Society of Japan.

(5) 情報処理学会研究報告 IPSJ SIG Technical Report. 図10. Vol.2012-EC-23 No.2 2012/3/26. 図 12. 一度のシステム指向における葉の枚数の分布. 茎 1 本あたりの葉の枚数. 3.3 考察. まず色別分布だが，green の部分に生成されたものが最も多く，次点で blue，pink， beige，black であった．これは，「植物描画システム」だという事前知識を与えたうえで検証を行ったため，一般的に植物の色として連想される green の上で操作を行ったと考えられる．しかし，中央に green があるだけで，色は意識していなかったという可能性もあるので，色の配置を変えた場合でも同様の結果が出るか検証したい．次に葉の枚数と茎の本数だが，葉の枚数は 1～10 枚，茎は 1～2 本が最も多かった．茎 1 本あたりの葉の枚数と照合して考えると，実際の植物に比べデフォルメされたシンプルなものを求めていると言える．ただし背景が植物の模様であるため，背景とのバランスを考慮した可能性も考えられる．今回の検証はオープンキャンパスで行ったため，ユーザに統一性が無く，さらに緊張していたとも考えられる．そのため，次回は条件を設定し，検証を行いたい．. 4. 今後の展望図 11. 茎の描画本数の度数分布. 今回開発したシステムは，目的である，マウス操作を通じて植物を描画することによりコンピュータに親しむシステムとしてはまだ不十分である．. 5. ⓒ 2012 Information Processing Society of Japan.

(6) 情報処理学会研究報告 IPSJ SIG Technical Report. Vol.2012-EC-23 No.2 2012/3/26. 改善点としては，まずアニメーションの改良である．現在のアニメーションは動きがぎこちなく，機械的な動きしかしないため植物としては不自然である．したがって，植物らしいよりゆっくりとしたランダムな動きをするように改善する必要がある．次に，本システムで生成できる植物のバリエーションは 1 種類であるが，植物の色や茎の太さ，背景，葉の形等にバリエーションを持たせ，様々な植物が生成できるようにしたい．そして最終的に完成したシステムの検証を行い，改良を重ねていく．. 6. ⓒ 2012 Information Processing Society of Japan.

(7)