LoginSignup
1
1

More than 1 year has passed since last update.

Canvas2D 4点グラデーショングリッドの実装実験

Posted at

この記事は Web グラフィックス Advent Calendar 2022 の14日目の記事です。

自作お絵かきツールで線をはみ出さないでブラシ塗りがしたい

個人的に今年のアドベントカレンダーでは自作ツールでブラシ塗りがしたいということで色々やっていて、前回は4点グラデーションを実装してみました。

今回はそれをグリッド状に並べ、ブラシ塗りをしてみたいと思います。

描画処理の概要

色情報を持った点をグリッド状に並べ、点4つごとに4点グラデーションを描画します。
image.png
上の図はグリッドのセルを極端に大きくしています。

セルを小さくしてグリッドの解像度を上げると、ビットマップをバイリニア補間で拡大した感じ(原理的にはそのもの)になっていきます。ジャギーのようなものが見えますね。
image.png
そこで本題の、グリッドを変形させていい感じにするのをやりたいところです、が・・・。

明度の勾配をもとにしたシミュレーションのようなことをしたら良さそうなのですが、残念ながら具体的なアイデアが出ないまま12月になってしまいました。

簡易な方法として、ブラシで描く部分のグリッドを魚眼レンズ風に歪めることでジャギーを軽減できないか試してみました。魚眼レンズはブラシ塗りとは全く関係ないものですが、ひとまず円形にグリッドを変形させることができますから、もしかしたら何かしら良い効果があるかもしれません。
image.png

実装したもの

See the Pen Canvas2D 4点グラデーショングリッドの実装実験 by 柏崎ワロタロ (@warotarock) on CodePen.

image.png
うにょうにょと塗ることができます。楽しいです。
image.png
このサイバー空間みたいな感じがたまらん(馬鹿)。
image.png
半径を大きくすれば簡易なグラデーションツールにくらいはなるかも・・・いやいらんか・・・。

考察

魚眼レンズ風に歪めることがどれだけ効果があるかについて考えます。

放射型グラデーションのままではわかりづらかったので、三角関数で波を出せるようにしました。これで見ると、魚眼レンズの縁の部分は他の部分よりジャギーが低減しているように見えます。表現したい絵に合うようになんらかの方法でグリッドを変形させられれば、それなりに効果があるのではないかと思います。

image.png

まとめ

  • 4点グラデーションをグリッド状に並べてブラシ塗りを実装してみた。
  • 魚眼レンズでグリッドを歪める実験の結果から、うまくグリッドを変形できれば効果がありそうに感じた
  • 個人的には背景とかのグラデーションに使えそう。
  • 楽しかった。

なんとまだ続きます。次回、マスクを使ったアプローチ。今度こそ実用になるかも!?

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1