Fork
0
Fav
0
View
196
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 54 lines
  • HTML 39 lines
  • CSS 17 lines
rgba画像をhsla画像とし,canvas画像(≒PNG画像)として保存し,
更にそれをSVGフィルタを用いて元のrgba画像に復元してみたもの.

動作はFireFoxでのみ確認
(動作原理上ChromeではSVGフィルタの適用部を書き換える必要がある.)
→計算式の見直しによりrgb→hsl部でのSVGフィルタによる処理が不必要となったため, Chormeでも動作

※hsla変換アルゴリズムと復元SVGフィルタの構成に非常に苦労しているので
「このようにすれば成功する」コードとして貴重

なぜこんなものを?
減色アルゴリズムに応用できないかと考えたもの.

bit数減によるRGB減色処理だと処理結果がきれいに見えないので
hsl値を基準とした減色を試す前の下準備

注意点
・生成したHSL画像を拡大・縮小するとR値に無理くり押し込んだ色相値が線形補間され意図しない色相値が発生する場合がある.
理由)赤色には彩度「+0°」と「(360-0)°」の場合があり, 本アルゴリズムによりそれぞれ整数値0と255に割り当てられているので
もし彩度1と254のピクセルが隣接していたとすると, 線形補間により128辺りの色相値が生まれてしまう.

NOTE:
SVG仕様feColorMatrixのluminosityToAlphaとCSS仕様mix-blend-mode:luminosityにおける輝度値の計算式が異なる
SVG:
| R' | | 0 0 0 0 0 | | R |
| G' | | 0 0 0 0 0 | | G |
| B' | = | 0 0 0 0 0 | * | B |
| A' | | 0.2125 0.7154 0.0721 0 0 | | A |
| 1 | | 0 0 0 0 1 | | 1 |
CSS:Lum(C) = 0.3 x Cred + 0.59 x Cgreen + 0.11 x Cblue
そのため, 混同して使ってしまうとこの値の違いが微細なピクセルの色の違いとして現れてしまう
  • RGBA画像をHSLA画像に変換してSVGフィルタで元画像を復元
  • RGBA画像をHSLA画像に変換してSVGフィルタで元画像を復元

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

defghi1977

Author

svgはいんすぴれーしょん http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo.htm 重箱の隅っこをつっついて,にんまり. ドキュメントにまとめて,にっこり.

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags