流体シェイプの解析(後編)

前回はborder-radiusプロパティについて取り扱いましたが、
今回は時間経過と共に形が変化する流体図形(流体シェイプ)について解説します。

一般的にCSSのキーフレームで作りますが、今回は値を表示したいので、
JavaScriptを用いて作りました。

流体シェイプ(6パターン変化)

隣接する線分の合計が100%になっている事が分かります。
x1 = 30%,x2 = 70%となっている場合、流体図形と辺1-2との接点は、
x1の左端から30%、x2の右端から70%の点となります。

同じ線分の合計が100%になる事によって、全て曲線で描かれた、
独特の形や動作を再現する事が出来ます。

こちらは、30～70の4つからなる乱数を2.5秒ごとに設定しています。
隣の数は100から引いた残りなので、発生させる乱数は4つです。

「確変！！」ボタンを押した場合、一辺ごとのborder-radiusの合計値が
1.1～2倍(110～200%)に変化します。

しかし、合計値が100%を超えた場合は、80:120=40:60のように、
自動的に約分してくれるようです。

では、一辺の合計値が全て50%となるように指定します。
表示の都合上、元々の四角形は「長方形」ではなく「正方形」となっていますが、
一辺の絶対的な長さを問わず、曲線25:直線50:曲線25となっています。
25%という値では、楕円と長方形の中間の図形になります。

x1とy1,x2とy2,x3とy3,x4とy4は、それぞれ曲線の視点と終点を共有し合う関係です。
%は相対的な値なので、図形の比率に応じて、値を調節しましょう。

25%

図形