Inverse Evaluation
概要
プロ向けツールの多くは、パラメーターに数式を入力することができます。映像ソフトをお使いの方にはAfterEffectsの「エクスプレッション」機能としてお馴染みかもしれません。しかし多くの場合、数式入力されたパラメーターは自動的に数値計算されてしまうために、その結果の値を直接操作することが出来なくなってしまいます。例えば円の半径に2 × 4を設定した場合、自動的に半径8の円を描くことはできますが、今度はハンドルの半径を直接ドラッグ操作することは出来なくなります。
Glispでは、パラメーターに数式を入力した場合も、計算結果が「ある値」になるような数式を逆算する仕組みを用意しています。プログラミング用語では双方向評価(Bi-directional evaluation)などと呼ばれる概念ですが、ここでは分かりやすく「逆算編集」と表現してみました。この仕組みによって、パラメトリックに造作をした後もなお、マウス操作などで直接編集することができます。
https://baku89.com/wp-content/uploads/2020/06/bidirectonal-evaluation-3.gif
たとえば、上の例ではターコイズ色の円の半径に r * 2という数式が設定されています。この場合、ターコイズ色の円の半径を100に設定したいとなったら、頭の中で50を逆算して大本のrに設定するほかありません。
そこで、ある演算子や関数にその逆関数を定義してやることで、パラメーターに式が設定されている場合も、ユーザーはそのパラメーターをDirect Manipulationしつづけることができます。 このような機能は、部分的には既に実現されています。
手の位置を設定すると、肩と肘関節の角度が定まってくれる、キャラクタアニメーションにおけるIK機能
親子関係にあるシェイプの子要素をアートボード上で移動させたとき、親要素のトランスフォーム分が差し引かれて、その要のローカル座標が算出・設定される仕組み
このような逆算機能を一般化し、ユーザー自身が自由につくりあげることができるのが、逆算編集の便利なところです。
単位
多くのグラフィックプログラミング環境では、角度指定にラジアンを用いますが、人間にとってはあまり直感的な単位とは言い難です。そこで、単位変換のための関数を用意することで、度数法や「○回転半」といった好きな単位系を使うことができます。その逆関数を実装することで、単位換算したパラメーターを直接編集しつづけることができます。
https://scrapbox.io/files/632530669b0f250021ae8c19.gif
リンケージ
1点を端点、もう1点を通過点とする、ある長さの線分を描くカスタムシェイプに逆算編集を実装することで、どちらの端点からもドラッグ操作で動かすことができます。
https://baku89.com/wp-content/uploads/2020/06/linkage.gif
ロック
https://scrapbox.io/files/63252fc1a153c9002346853e.gif
逆算させたくないパラメーターを指定することで、直接編集を無効化することもできます。いわゆる、レイヤーロック、トランスフォームロックといったロック機能をより抽象的にしたイメージです。下の例では、信号機のX座標には逆算が有効になっていますが、Y方向はドラッグしても動かないようになっています。
真偽値
https://scrapbox.io/files/63252fa09ad006001d8fa0df.gif
真と偽、はいといいえ、0と1 のような2つ組を真偽値と呼びます。この例では、否定演算子(「はい」なら「いいえ」、「いいえ」なら「はい」のように値を反転させる)の逆算をしています。つまり「否定した結果『はい』になるようなパラメーター」 = 「いいえ」を勝手に計算してくれます。
文字列
https://scrapbox.io/files/63252f8d69e6a2001dfd1288.gif
文字列にも逆算編集をすることができます。例えば、ある文字列タイプのパラメーターに、「文字の並びを反転させる」数式が入力されていた場合にも、その値を編集することで「『反転させた結果『Hello』になるような文字列」を自動的に逆算してくれます。
色
https://scrapbox.io/files/63252f7841c976002146c0b7.gif
「反対色の計算」といった色を扱う関数もまた逆関数を定義することができるので、直接編集が可能になります。