CSSのmatrix3dはホント奥深いのよ

まだ世の中に無いツールを、命をかけて作っている、ユゲタです。 今作っているツールでは、１つの画像をセグメント分割する事で、好きな形に変型できるというものなのですが、 cssに詳しい人であっても、なかなかこれをどうやってやっているのか難しい領域だと思います。 ユゲタも正直、数日間学習をしたのち、計算式の箇所のみライブラリを持ってくるぐらいの内容でした。

ツール紹介

そのツールというのは、アイキャッチの画像そのままなんですが、 画像を読み込んで、縦横のセグメントを好きな数だけ分割して、それぞれ分割された頂点を動かして画像を自由に変型させるというモノです。 実際に頂点を移動させてみると、こんな感じになります。 これ、１つの画像だけから変型させているので、実際にホームページなどで、いろいろな効果を出すことが可能なのではないかと考えて作ってみました。 そして、なんとこの変型ツール、アニメーションまでさせることができるので、インタラクティブな使い方、無限大ですよね。

問題勃発

このツールの根本技術は、cssのmatrix3dというプロパティを使って実現させているんですが、以前ブログで紹介した技術の応用です。 静的HTMLの限界を超えた画像を台形変換するツールを作ったよ。 台形変換というホモグラフィの計算式を使って画像を歪めているんですが、 １つの画像を擬似的に分割した画像分歪めることで、ポリゴン分けされた画像のような見え方を２次元表示しているというような感じですね。 しかし、このツール作ってみて、いくつかの問題点が見つかりました。 自由な形に歪められるんですが、隣接する点においては、平行移動をするか、並んでいる頂点をなるべく一直線に揃えないと、上のキャプチャ画像のように、セグメントラインでズレが生じてしまいます。 また、画像内の基点を左上に設置しているんですが、ここからの距離に応じて、変型率が高くなると、画像の計算式が細かくなりすぎて破綻して画像が消えてしまうという事象も見つけてしまいました。 まあ、この点を注意しながら使えば、使えなくも無いので、今後改善するベータ版としてツールを公開しておこうと思います。 おそらく、台形変換ではなく、三角変換でやらないと行けないのかもな〜とか、考えながら、しばらく寝かせておくことにする。

ツール紹介

Github https://github.com/yugeta/image-motion デモ画面 https://image-motion.mynt.work