WO2017002727A1

WO2017002727A1 - ユーザ・インタフェース・プログラムおよびコンピュータ実装方法

Info

Publication number: WO2017002727A1
Application number: PCT/JP2016/068838
Authority: WO
Inventors: 巌村松
Original assignee: Colopl Inc
Current assignee: Colopl Inc
Priority date: 2015-06-30
Filing date: 2016-06-24
Publication date: 2017-01-05
Anticipated expiration: 2017-12-30
Also published as: JP5856343B1; JP2017016303A

Abstract

（課題）物体によるスライド操作に応答してユーザ・インタフェース（ＵＩ）として生成されるオブジェクトについて、スライド操作にわたる多様且つ柔軟な変形処理を動的に実現すること。（解決手段）タッチパネル上のスライド操作に連動してユーザ・インタフェース（ＵＩ）画像を前記タッチパネルに出力するＵＩプログラムである。当該ＵＩプログラムは、それぞれが複数のポリゴンを有する複数のメッシュを互いに対応づけてメッシュの組を形成する形成部と、メッシュの組に基づいて混合メッシュを形成する混合部と、混合メッシュの形状に基づいてＵＩ画像を生成し表示する出力部としてタッチパネルを具備するコンピュータに機能させる。

Description

ユーザ・インタフェース・プログラムおよびコンピュータ実装方法

　本発明は、物体によるタッチパネルへのスライド操作に連動して、ユーザ・インタフェース（ＵＩ）画像を出力するユーザ・インタフェース・プログラム（ＵＩプログラム）およびそのコンピュータ実装方法に関するものである。

　スマートフォンをはじめとしたタッチパネルを具備する昨今のユーザ端末には、タッチパネル上で様々なＵＩが用いられる。例えば、特許文献１の従来技術では、タッチパネル上のスライド操作に応じて、該スライド操作の始点から終点へと伸び、始点側の一端部と終点側の他端部とで大きさ又は形状が異なるカーソルを表示するＵＩが開示される（特許文献１の〔要約〕参照）。ここでは、特に、スライド操作にわたり、カーソルが長くなるほどカーソルの面積が一定となるようにカーソルの幅を細くするような変形処理も実施される（特許文献１の段落〔００１８〕参照）。

特開２０１２－３３０６０号公報

　本発明は、物体（ユーザの指等）によるスライド操作に連動してＵＩ画像として生成されるオブジェクトについて、多様且つ柔軟な変形処理を動的に実現するＵＩプログラムおよびそのコンピュータ実装方法を提供することを目的とする。

　上記の課題を解決するために、第１発明は、タッチパネル上のスライド操作に連動してユーザ・インタフェース（ＵＩ）画像を前記タッチパネルに出力するＵＩプログラムである。当該ＵＩプログラムは、それぞれが複数のポリゴンを有する複数のメッシュを互いに対応づけてメッシュの組を形成する形成部と、メッシュの組に基づいて混合メッシュを形成する混合部と、混合メッシュの形状に基づいてＵＩ画像を生成し表示する出力部としてタッチパネルを具備するコンピュータに機能させる。

　また、第２発明は、タッチパネル上のスライド操作に連動してユーザ・インタフェース（ＵＩ）画像を出力するコンピュータ実装方法である。当該コンピュータ実装方法は、前記タッチパネル上で、それぞれが複数のポリゴンを有する複数のメッシュを互いに対応づけてメッシュの組を形成するステップと、メッシュの組に基づいて混合メッシュを形成するステップと、混合メッシュの形状に基づいてＵＩ画像を生成するステップと、生成したＵＩ画像を表示するステップとを含む。

図１は、本発明の実施の形態によるＵＩプログラムを実行可能な一例のユーザ端末の模式図である図２は、図１のユーザ端末の物理的構成を示す模式図である。図３は、図１のユーザ端末における入出力について示す模式図である。図４は、本発明の実施の形態により、初期状態のオブジェクト構成について示すＵＩ画像の模式図である。図５は、本発明の実施の形態によるＵＩプログラムを用いて実現されるポリゴン構成について示す模式図である。図６は、本発明の実施の形態によるＵＩプログラムを用いて実現されるポリゴン構成について示す模式図である。図７は、本発明の実施の形態により、スライド操作に連動して形成される弾性オブジェクトおよびポリゴン構成について示す模式図である。図８は、本発明の実施の形態により、混合対照となる例示の２つの弾性オブジェクトについて示す模式図である。図９は、本発明の実施の形態によるＵＩプログラムを用いて実現される混合オブジェクト生成について示す模式図である。図１０は図９に対応して生成される各オブジェクトのポリゴン（メッシュ）構成について示す模式図である。図１１は、図９の混合オブジェクト生成において用いられる混合比率関数のグラフである。図１２は、図１１に対応して混合比率関数を用いた混合オブジェクト形成の様子について示す模式図である。図１３は、本発明の実施の形態によるＵＩプログラムを用いて実装される機能ブロック図である。図１４は、図１３の機能ブロック図を用いて実施されるＵＩ画像生成に関する一連の処理フロー図である。

　［本発明の実施形態の説明］
　最初に、本発明の実施形態の内容を列記して説明する。本発明の実施の形態によるコンピュータ・プログラムは、以下のような構成を備える。

　（項目１）
　タッチパネル上のスライド操作に連動してユーザ・インタフェース（ＵＩ）画像を前記タッチパネルに出力するＵＩプログラムであって、
　それぞれが複数のポリゴンを有する複数のメッシュを互いに対応づけてメッシュの組を形成する形成部と、
　前記メッシュの組に基づいて混合メッシュを形成する混合部と、
　前記混合メッシュの形状に基づいてＵＩ画像を生成し表示する出力部と
として前記タッチパネルを具備するコンピュータに機能させる、ＵＩプログラム。

　（項目２）
　項目１の記載のＵＩプログラムにおいて、
　前記形成部が、前記複数のメッシュの組の間において、前記ポリゴンの任意の頂点同士を互いに対応づけて頂点の組を形成し、
　前記混合部が、前記頂点の組に対し、所定の混合比率関数に基づいて、前記混合メッシュにおける前記ポリゴンの対応する任意の頂点を決定する、ＵＩプログラム。

　（項目３）
　前記混合比率関数が前記スライド操作の距離に従って規定される、項目２記載のＵＩプログラム

　（項目４）
　前記混合比率関数が更に前記スライド操作の時間に従って規定される、項目２または３記載のＵＩプログラム。
　本項目のＵＩプログラムによれば、上記混合比率関数を時間に従うものとすることにより、更に視覚的にダイナミックで多様性のあるオブジェクト変形を表現することができる。

　（項目５）
　前記混合比率関数が前記距離の周期関数を含む、項目２から４のいずれか一項記載のＵＩプログラム。
　本項目のＵＩプログラムによれば、上記混合比率関数を周期関数とすることにより、周期的な動きを有するように変形可能なオブジェクトを表現することができる。

　（項目６）
　前記周期関数が減衰特性を有する、項目５記載のＵＩプログラム。
　本項目のＵＩプログラムによれば、減衰特性により特定の１つのオブジェクト形状に徐々に移行するように変形可能なオブジェクトを表現することができる。

　（項目７）
　前記減衰特性が前記スライド操作の時間に基づいて規定される、項目６記載のＵＩプログラム。
　本項目のＵＩプログラムによれば、上記減衰特性を時間に従うものとすることにより、特定時間に限定した、よりダイナミックな変形によるオブジェクト移行を表現することができる。

　（項目８）
　前記複数のメッシュが、第１メッシュおよび第２メッシュからなり、
　前記形成される混合メッシュが、前記スライド操作に連動して、前記第１および第２メッシュの内の一方から他方へと移行するように形成される、項目１から７のいずれか一項記載のＵＩプログラム。
　本項目のＵＩプログラムによれば、１つのオブジェクト形状から他のオブジェクト形状に明確に移行するように変形可能なオブジェクトを表現することができる。

　（項目９）
　タッチパネル上のスライド操作に連動してユーザ・インタフェース（ＵＩ）画像を出力するコンピュータ実装方法であって、前記タッチパネル上で、
　それぞれが複数のポリゴンを有する複数のメッシュを互いに対応づけてメッシュの組を形成するステップと、
　前記メッシュの組に基づいて混合メッシュを形成するステップと、
　前記混合メッシュの形状に基づいてＵＩ画像を生成するステップと、
　前記生成したＵＩ画像を表示するステップと
を含む、コンピュータ実装方法。

　（項目１０）
　項目９の記載のコンピュータ実装方法において、
　前記メッシュの組を形成する前記ステップが、前記複数のメッシュの組の間において、前記ポリゴンの任意の頂点同士を互いに対応づけて頂点の組を形成するステップを含み、
　前記混合メッシュを形成する前記ステップが、前記頂点の組に対し、所定の混合比率関数に基づいて、前記混合メッシュにおける前記ポリゴンの対応する任意の頂点を決定するステップを含む、コンピュータ実装方法。

　（項目１１）
　前記混合比率関数が前記スライド操作の距離に従って規定される、項目１０記載のコンピュータ実装方法。

　（項目１２）
　前記混合比率関数が、減衰特性を有する前記距離の周期関数を含む、項目１０または１１記載のコンピュータ実装方法。

　（項目１３）
　前記減衰特性が前記スライド操作の時間に基づいて規定される、項目１２記載のコンピュータ実装方法。

　（項目１４）
　前記複数のメッシュが、第１メッシュおよび第２メッシュからなり、
　前記形成される混合メッシュが、前記スライド操作に連動して、前記第１および第２メッシュの内の一方から他方へと移行するように形成される、項目９から１３のいずれか一項記載のコンピュータ実装方法。

　［本発明の実施形態の詳細］
　以下に図面を参照して、本発明の実施形態による、物体によるタッチパネルへのスライド操作に連動してユーザ・インタフェース（ＵＩ）画像を前記タッチパネルに出力するＵＩプログラムおよびそのコンピュータ実装方法について説明する。図中、同一の構成要素には同一の符号を付してある。

　本発明の実施の形態によるＵＩプログラムは、スマートフォン等のユーザ端末が具備するタッチパネル上でのユーザ操作に応じて実行される。図１に示すように、スマートフォン１は、タッチパネル２を備え、ユーザは当該タッチパネル２上でのユーザ操作を介してユーザ端末の動作（例えば、スマートフォン・ゲームの進行）を制御することができる。なお、本実施の形態によるＵＩプログラムを実行するユーザ端末はスマートフォン１に限定されず、例えば、ＰＤＡ、タブレット型コンピュータのデバイスなど、タッチパネルを備える端末であれば如何なるデバイスにもすることができる。

　図２に示すように、スマートフォン１は、互いにバス接続されたＣＰＵ３、主記憶４、補助記憶５、送受信部６、表示部７および入力部８を備える。このうち主記憶４は例えばＤＲＡＭなどで構成され、補助記憶５は例えばＨＤＤなどで構成されている。補助記憶５は、本実施の形態によるＵＩプログラム等を記録可能な記録媒体である。補助記憶４に格納されたＵＩプログラムは、主記憶４上に展開されてＣＰＵ３によって実行される。なお、主記憶４上には、ＣＰＵ３がＵＩプログラムに従って動作している間に生成したデータやＣＰＵ３によって利用されるデータも一時的に格納される。送受信部６はＣＰＵ３の制御によりスマートフォン１とネットワークとの間の接続（無線接続および／または有線接続）を確立して各種情報の送受信を行う。表示部７は、ＣＰＵ３による制御の下でユーザに提示することになる各種情報を表示する。入力部８は、ユーザのタッチパル２に対する入力操作を検知する。

　表示部７及び入力部８は、上述したタッチパネル２に相当する。図３に示すように、タッチパネル２は、入力部８に相当するタッチセンシング部３０１、および表示部７に相当する液晶表示部３０２を有する。タッチパネル２は、ＣＰＵ３による制御の下で、画像を表示して、ユーザによるインタラクティブなタッチ操作（主に、タッチ操作、スライド（スワイプ）操作およびタップ操作等の物理的接触操作）を受け、制御部３０３による制御処理に基づいてそれに対応するグラフィックを液晶表示部３０２に表示する。

　より具体的には、上記タッチセンシング部３０１は、ユーザによるタッチ操作に応じた操作信号を制御部３０３に供給する。タッチ操作は、何れの物体によるものとすることができる。例えば、ユーザの指によりなされてもよいし、スタイラス等の装置を使用してもよい。タッチセンシング部３０１はタッチパネルの構造上、液晶パネル、有機ＥＬ、プラズマディスプレイ等のような液晶表示部３０２の上層に配置される。また、タッチセンシング部３０１は、圧力検出方式、抵抗膜方式、静電容量方式や電磁誘導方式等を採用することができる。タッチセンシング部３０１上で物体の接触による入力を受けた際に、その接触位置において押圧、電気抵抗、電気容量や弾性波のエネルギー等の変化量を検知し、液晶表示部３０２上の対応する接触座標が特定される。制御部３０３は、タッチセンシング部３０１からの操作信号を検出すると、ユーザ操作命令として、当該操作に応じたＵＩ画像を含むグラフィック（図示せず）を液晶表示部へ表示信号として送信する処理を行う。液晶表示部３０２は、表示信号に応じたグラフィックを表示する。

　（１）ポリゴン（メッシュ）形成に基づく各オブジェクトの形成処理
　以下、図４から図７を参照して、本実施の形態によるＵＩプログラムによってＵＩ画像を生成するために実施される、ポリゴン（メッシュ）形成に基づく各オブジェクトの形成処理について説明する。本実施の形態によって生成されるＵＩ画像は、大きくは（ｉ）弾性オブジェクト形成処理、および（ｉｉ）複数の弾性オブジェクトのセットを混合して、混合弾性オブジェクトを形成する混合弾性オブジェクト形成処理に基づく。なお、以下において、複数のポリゴンからなるセットのことをメッシュと称する。即ち、メッシュは複数のポリゴンから構成されるものである。

　（１－ａ）弾性オブジェクト形成処理の概要
　図４は、タッチパネル２への物体の接触時に初期状態として形成される、円形状を有する一例のオブジェクトのＵＩ画像を模式的に示したものである。図４（ａ）に示すように、弾性オブジェクトは、画面表示に際して略正方形状のＵＩ画像７５０として画像生成がされる。ＵＩ画像７５０は、半透明領域７６０および透明領域７７０から成り、半透明領域７６０がオブジェクトの基本表示領域として画面表示領域に重畳され、画面表示される。

　より詳細には、弾性オブジェクトは、略正方形のメッシュ領域に収容され、複数のポリゴン７１０に分割される。図４（ｂ）の例では、ＵＩ画像７５０を４×４＝１６個のポリゴンに分割し、ポリゴンのセット（メッシュ）全体で弾性オブジェクトを収容する。なお、図４（ｂ）の例ではポリゴンの形状を正方形としているが、これに限定されず、例えば各々が３点からなる３角形状として形成してもよいし、何れの形状にもすることができる。また、分割するポリゴン数も限定的でないことが理解される。

　更に、図４の円形状のような半透明領域７６０は、全ポリゴンの頂点の座標のセットを用いて、所与の数式から数学的に一意に規定することができる。図４（ｂ）の場合は、各ポリゴンが正方形となるように各頂点が配置されており、ポリゴンの各頂点座標を所与の数式に代入することによって円形状の半透明領域７６０が規定されて、円形状のオブジェクトが表示される。ポリゴンが他の形状を有するように配置される場合も、同様に当該所与の数式に各座標を代入することにより、オブジェクト形状が数学的に一意に定まる。なお、図４（ｂ）のような円形状を形成する所与の数式は一般に３角関数を用いた数式であることが知られる。

　タッチパネルに対するスライド操作に伴い、当該初期円形状のオブジェクトを連続的に徐々に変形させることができる。より具体的には、ユーザ・インタフェース画像７５０をゴムシートの如く弾性的に伸張する処理、特に、次のようにポリゴン毎にその頂点を伸張させる物理演算処理を仮想的に実施することにより実現される。図５および図６は、ユーザのスライド操作に伴って、オブジェクトの一部のポリゴンの頂点を移動させる様子を模式的に示す。図６における白丸は、対応する移動前の（即ち、図５の）頂点の位置を表す。メッシュを構成する複数のポリゴンの各頂点７２０の座標をそれぞれ移動させることによって、図４に示した初期円形状のオブジェクトに対する弾性変形が表現される。

　より具体的には、図５は、図４の初期状態に対応し、各頂点７２０は各ポリゴンが正方形状となるようにメッシュ状に配置される。他方、図６では、物体のスライド操作に伴い、任意の頂点７２０Ａの座標が７２０Ａ’に移動した場合に他の頂点７２０もこれに追従するように移動して配置される。例えば、ユーザのスライド操作に連動する形で、所与の移動規則にしたがって、頂点７２０Ａに関する移動ベクトル（例えば、移動方向および移動距離を有する）を決定し、これに応じて移動先の各座標を決定することができる。当該移動規則について、図６の例では、頂点７２０Ａ’以外の頂点７２０’の移動距離は、頂点７２０Ａからの距離によって重み付けをするようなものとしている。即ち、図示するように、頂点７２０Ａから離れた位置に配置される頂点ほどその移動距離が小さくなるようにしている。

　ポリゴンの各頂点に関する移動規則は、図６の例に限定されず、様々なものを設定することができる。他の例を図７に示す。図７の（ｉ）の例では、ユーザの指によるスライド操作（スライド操作距離Ｌ）に連動して、各頂点を、各ポリゴンが同一の大きさを有するように長方形状を成してスライド操作方向（ｙ軸方向）に移動させる。また（ｉｉ）の例では、（ｉ）の例に加えて、スライド操作距離Ｌにしたがって、スライド操作方向と直角方向（ｘ軸方向）にも各頂点を移動させて、メッシュ全体が台形状を有するように形成する。

　上記のとおり、各ポリゴンが決定されると、それら頂点座標を所与の数式に代入することによってオブジェクト形状を数学的に一意に定めることができる。即ち、（ｉ）の例では楕円形状のオブジェクトが、（ｉｉ）の例では下半分に厚みのある略卵形状のオブジェクトが形成される。ユーザの指のスライド操作に連動して、連続的にこのような形状を形成することにより、図４の初期形状から図７の距離Ｌだけ移動後の形状に柔軟に弾性変形するオブジェクトを表現することができる。

　（１－ｂ）混合弾性オブジェクト形成処理
　本実施の形態によって生成されるＵＩ画像は、上記で形成したオブジェクトを２つ以上用意して、それらを組として更に混合する（ブレンド処理を実施する）ことで生成される。ここでは、図８に例示するような２つのパターン（パターンｉおよびパターンｉｉ）のオブジェクトの混合を想定する。両パターンのオブジェクトは、共に図４のような初期円形状を有し、スライド操作と連動して、スライド操作距離Ｌでは、底部が丸い涙滴形状のもの（パターンｉ）、および底部が丸く先端に向けて細くなる棒形状のもの（パターンｉｉ）となるように、スライド操作と共に弾性変形をしながら形成される。

　図９は、このような２つのパターンの弾性オブジェクトを混合することにより形成される混合オブジェクトの例を示す。図９の例は、スライド操作距離ｌ（＜図８のＬ）の場合であり、スライド操作は図８と比べて比較的初期段階にある。また、図９の例では、混合のための配分比率を「１：１」としている。即ち、パターンｉの涙滴形状のオブジェクトを５０％、およびパターンｉｉの棒形状のオブジェクトを５０％として混合（ブレンド）することにより、混合パターンを有する混合オブジェクトが図示のようにボトル形状を有して形成される。

　図１０は、図９の各オブジェクトに対応するメッシュ構成例を示す。上記のように、所定の数式に基づくことにより、オブジェクトの形状とメッシュの構成は一対一に対応する。また、パターンｉおよびパターンｉｉの各メッシュを構成する各ポリゴンは、３角形状を有し、パターン毎に各頂点の関数がスライド操作距離関数として規定されている。図１０の例では、ポリゴン数は設定値であり、パターン１とパターン２の各ポリゴン数は一致し、パターン１の各ポリゴンの頂点座標とパターン２の各ポリゴンの頂点座標は一対一で対応付け可能であるものを想定する。より具体的には、所定の基準点（ｘｙ座標の原点）を基準として各頂点までの頂点ベクトルＵｉ（ｘｉ，ｙｉ）（パターン１）およびＶｉ（ｘｉ，ｙｉ）（パターン２）がそれぞれ対応付けられて記憶部に格納される。そして、混合処理によって生成される混合頂点ベクトルＷｉ（ｘｉ，ｙｉ）は、頂点ベクトルＵｉ，Ｖｉ，および混合比率ｗに基づいて次のように規定することができる。
Ｗｉ＝Ｕｉ ×ｗ＋Ｖｉ ×（１－ｗ）
　このようにして、パターン１およびパターン２の各ポリゴンの頂点座標から、対応する混合パターンの各ポリゴンの頂点座標を算出することができる。本発明の実施の形態によれば、図７に示したように単に初期円形状のオブジェクトを引き伸ばすように弾性変形させるのみならず、複数のパターンのオブジェクトを混合することを通じて、弾性変形の態様をより多様なものとすることができる。なお、図８から図１０では、簡単のために２つのオブジェクトの混合処理について例示したが、混合するオブジェクトのパターンは２つに限定されず、３つ以上でもよいことが理解されるべきである。

　（１－ｃ）混合比率関数の適用
　本実施の形態によって形成される混合オブジェクトに対し、更に、ユーザのスライド操作の距離および／または時間の関数として規定される混合比率関数を適用する。これにより、混合オブジェクトに対し、視覚的によりダイナミックな動きを持たせることができる。

　図１１は、本実施の形態により適用される、混合比率関数の一例のグラフである。図１１のグラフでは、横軸がスライド操作距離（Ｌ）、縦軸がパターンｉの混合比率（Ｗ（Ｌ），ただし、０＜Ｗ（Ｌ）＜１）である。図示のように、スライド操作距離が０からＬ０の範囲およびＬ０からＬ１の範囲では、混合比率は「１．０」、即ちパターンｉが１００％の混合オブジェクトで形成される。また、スライド操作距離がＬ１からＬ２の範囲では、混合比率が三角関数に基づく関数として規定される。即ち、図１１の例では混合比率Ｗ（Ｌ）は、
Ｗ（Ｌ）＝ｃ×ｃｏｓ｛（Ｌ－Ｌ１）／２π｝
として規定される。

　上記数式のように、Ｌ１からＬ２の範囲では、混合比率は、スライド操作距離の周期関数としてコサイン・カーブを採用するのみならず、更に減衰させるのがよい。つまり、上記数式におけるｃは減衰特性を示し、例えばｃ＝ｔ－１（０＜ｔ＜１）として規定するのがよい。この例の場合、減衰特性は、スライド操作時間ｔの関数として規定され、スライド距離Ｌ１の時点をｔ＝０として、その時点から１秒間だけ、上記混合比率Ｗ（Ｌ）の振幅を減衰させながら混合比率関数を適用するように構成することができる。

　図１１の例の混合比率関数を、図８に示したパターンｉおよびパターンｉｉの弾性オブジェクトの混合処理に適用した場合は、次の図１２に示すように、スライド操作距離にしたがって混合オブジェクト（あ）～（く）が生成される。この内、混合オブジェクト（あ）（い）は、パターンｉの混合比率「１」（１００％）であり、他方、混合オブジェクト（え）（か）（く）は、パターンｉの混合比率「０」（０％。パターンｉの混合比率１００％）である。これらに対し、混合オブジェクト（う）（お）（き）は、図示のようにそれぞれ混合比率が略「０．８」（８０％），「０．６」（６０％），「０．４」（４０％）であるため、上記の数式に基づいて２つを混合したボトル形状が形成されることが理解される。

　更に、図１１のように、混合比率関数としてスライド操作距離の周期関数を用いることにより、図１２のような混合オブジェクトの弾性変形を実施させることがきる。特に、スライド操作距離が増えるにつれ、弾性オブジェクトがぶるぶる振るえるように幅方向に振動するといったダイナミックな視覚効果を供することが可能となる。なお、当該混合比率関数は、図１１や図１２の例に限定されないことが理解されるべきである。例えば、周期関数以外の特性を有する混合比率関数としてもよく、また、横軸に操作時間を採用してもよい。総じて、パターンｉ（混合比率「１．０」）からパターンｉｉ（混合比率「０」）の弾性オブジェクトへと移行するものであれば、如何なる数学関数を適用することができる。また、パターンを３種類以上用いる場合でも、移行前のパターンおよび移行後のパターンを選択し、任意の数学関数を用いて減衰特性を有する混合比率関数を規定することができる。

　なお、上記の実施の形態においては、混合比率関数に用いるパラメータとして、スライド操作の距離及びスライド操作の時間を採用していたが、これ以外にも、例えば、スライド操作の加速度を採用することとしてもよい。また。これらの組み合わせからなる任意の変数を採用してもよい。

　（２）ＵＩプログラムの主要機能および処理フロー
　図１３および図１４を参照して、本実施の形態によるＵＩプログラムで実装される主要機能のセット、および該機能に基づいて実施される処理フローについて説明する。図１３の機能セットでは、図３の制御部８０において、操作信号としての入力を処理し表示信号としての出力を生成する。図１３に示すように、主要機能のセットは、制御部８０として、タッチパネルを通じたユーザ入力操作に関連するユーザ操作部８００、およびユーザ入力操作に応答してＵＩ画像を生成するＵＩ制御部９００を含む。

　ユーザ操作部８００は、タッチパネルへの物体の接触判定部８２０、およびタッチパネル上のスライド操作判定部８４０を含む。また、ＵＩ制御部９００は、初期円形状を生成するための初期円形状オブジェクト形成部９２０、メッシュ方向を調整するためのメッシュ方向調整部９４０、スライド操作に連動して操作距離に基づくメッシュの組を形成するメッシュ形成部９５０、複数のメッシュの組を混合するメッシュ混合部９７０、および形成した混合ポリゴンに関する混合オブジェクトのＵＩ画像を生成するＵＩ画像生成出力部９９０を含む。

　続いて図１４の処理フローに示すように、混合オブジェクトのＵＩ画像を生成するための一連の処理において、まずステップＳ１０２で接触判定部８２０での物体の接触判定がされると、ステップＳ１０３で、初期円形状オブジェクト形成部９２０においてタッチパネル上の接触開始点の周囲に初期円形状の弾性オブジェクト、および対応するポリゴンの初期セット（初期メッシュ）を形成する（図４も参照のこと）。引き続き、ステップＳ１０４では、スライド操作判定部８４０においてタッチパネル上のスライド操作判定を実施する。そして、スライド操作が実施されているものと判定されると、該スライド操作に連動するように、ステップＳ１０５では、メッシュ方向調整部９４０においてスライド操作方向に沿うようにメッシュの向きを調整する（図７も参照のこと）と共に、メッシュ形成部９５０において、それぞれが複数のポリゴンを有する第１メッシュおよび第２メッシュの組を形成する。ステップＳ１０６では、メッシュ形成部９５０において引き続き、第１および第２メッシュを互いに対応付けて記憶部に格納する。即ち、第１および第２メッシュの組の間において、それぞれを構成するポリゴンの任意の頂点同士を互いに対応付けて頂点の組を形成する。

　次いで、ステップＳ１０７では、メッシュ混合部９７０において、上記第１メッシュおよび第２メッシュの組に基づいて対応する混合メッシュを形成する。ここでは、第１メッシュおよび第２メッシュ間で対応付けられた各ポリゴンの任意の頂点の座標の組に対し、スライド操作の距離に従って規定される混合比率関数を適用して、対応する混合メッシュを構成するポリゴンの任意の頂点座標を算出する。

　最後にステップＳ１０８では、生成した混合メッシュの全体形状に基づいて混合オブジェクトのＵＩ画像を生成して、該ＵＩ画像を表示する。なお、ステップＳ１０４からＳ１０８までの一連の処理は、スライド操作が実施されている間、連続的に繰り返される。これにより、スライド操作の間、混合オブジェクトがダイナミックかつ柔軟な伸縮変形や振動変形を通じて弾性変形されるものとして表現できる。そして、ユーザによるスライド操作の結果、第１メッシュおよび第２メッシュの内の一方のポリゴン・セット（例えば第１メッシュ。図１２のパターンｉ）から他方（例えば第２メッシュ。図１２のパターンｉｉ）へとオブジェクト形状が移行するように形成されるものとなる。

　上記の実施の形態によるパターンｉ、パターンｉｉ、および混合パターンを各々構成するポリゴン数は同一のものとした（図１０等参照）。しかしながら、ポリゴン数が異なるものであっても本発明は適用可能である。この場合、各ポリゴン・セット間においては、互いに近似する頂点座標同士を対応付ければよいことが理解される。

　また、上記の実施の形態においては、全ての頂点座標の組に対して混合比率関数が適用されていたが、一部の頂点座標の組に対してのみ混合比率関数を適用することとしてもよい。

　以上、本発明の実施形態による、物体によるタッチパネルへのスライド操作に連動してＵＩ画像を出力するＵＩプログラムおよびそのコンピュータ実装方法について、幾らかの例示と共に説明した。上述した実施の形態は、本発明の理解を容易にするための例示に過ぎず、本発明を限定して解釈するためのものではない。本発明は、その趣旨を逸脱することなく、変更、改良することができると共に、本発明にはその均等物が含まれることは言うまでもない。

Claims

　タッチパネル上のスライド操作に連動してユーザ・インタフェース（ＵＩ）画像を前記タッチパネルに出力するＵＩプログラムであって、
　それぞれが複数のポリゴンを有する複数のメッシュを互いに対応付けてメッシュの組を形成する形成部と、
　前記メッシュの組に基づいて混合メッシュを形成する混合部と、
　前記混合メッシュの形状に基づいてＵＩ画像を生成し表示する出力部と
として前記タッチパネルを具備するコンピュータに機能させる、ＵＩプログラム。
　請求項１の記載のＵＩプログラムにおいて、
　前記形成部が、前記複数のメッシュの組の間において、前記ポリゴンの任意の頂点同士を互いに対応付けて頂点の組を形成し、
　前記混合部が、前記頂点の組に対し、所定の混合比率関数に基づいて、前記混合メッシュにおける前記ポリゴンの対応する任意の頂点を決定する、ＵＩプログラム。
　前記混合比率関数が前記スライド操作の距離に従って規定される、請求項２記載のＵＩプログラム。
　前記混合比率関数が更に前記スライド操作の時間に従って規定される、請求項２または３記載のＵＩプログラム。
　前記混合比率関数が前記距離の周期関数を含む、請求項２から４のいずれか一項記載のＵＩプログラム。
　前記周期関数が減衰特性を有する、請求項５記載のＵＩプログラム。
　前記減衰特性が前記スライド操作の時間に基づいて規定される、請求項６記載のＵＩプ
ログラム。
　前記複数のメッシュが、第１メッシュおよび第２メッシュからなり、
　前記形成される混合メッシュが、前記スライド操作に連動して、前記第１および第２メッシュの内の一方から他方へと移行するように形成される、請求項１から７のいずれか一項記載のＵＩプログラム。
　タッチパネル上のスライド操作に連動してユーザ・インタフェース（ＵＩ）画像を出力するコンピュータ実装方法であって、前記タッチパネル上で、
　それぞれが複数のポリゴンを有する複数のメッシュを互いに対応付けてメッシュの組を形成するステップと、
　前記メッシュの組に基づいて混合メッシュを形成するステップと、
　前記混合メッシュの形状に基づいてＵＩ画像を生成するステップと、
　前記生成したＵＩ画像を表示するステップと
を含む、コンピュータ実装方法。
　請求項９の記載のコンピュータ実装方法において、
　前記メッシュの組を形成する前記ステップが、前記複数のメッシュの組の間において、前記ポリゴンの任意の頂点同士を互いに対応付けて頂点の組を形成するステップを含み、
　前記混合メッシュを形成する前記ステップが、前記頂点の組に対し、所定の混合比率関数に基づいて、前記混合メッシュにおける前記ポリゴンの対応する任意の頂点を決定するステップを含む、コンピュータ実装方法。
　前記混合比率関数が前記スライド操作の距離および／または時間に従って規定される、請求項１０記載のコンピュータ実装方法。
　前記混合比率関数が、減衰特性を有する前記距離の周期関数を含む、請求項１０または１１記載のコンピュータ実装方法。
　前記減衰特性が前記スライド操作の時間に基づいて規定される、請求項１２記載のコンピュータ実装方法。
　前記複数のメッシュが、第１メッシュおよび第２メッシュからなり、
　前記形成される混合メッシュが、前記スライド操作に連動して、前記第１および第２メッシュの内の一方から他方へと移行するように形成される、請求項９から１３のいずれか一項記載のコンピュータ実装方法。