ITエンジニア/デザイナ向けにオープンソースを毎日紹介

グリッチは画像などのバイナリデータをわざと壊すことで、映像に乱れを起こす加工技術です。乱れによってちょっとした不安感を感じさせたり、空気の乱れやSF的な効果を呼び起こせます。

そんなグリッチを任意の画像に適用できるライブラリがglitch-imageです。

glitch-imageの使い方

適用した画像です。

使い方はとても簡単です。恐らくCORSの関係で、ローカルにあるファイルしか使えないでしょう。

<script src="https://unpkg.com/@uit/glitch-image/dist/glitch-image.js"
  type="module"
></script>

<div style="width: 250px; height: 250px;">
  <glitch -image src="/path/to/image"></glitch>
</div>

glitch-imageでは実際に画像のバイナリデータをランダムに見出すことでグリッチ加工を起こしています。単に壊せばいいという訳ではなく、いい感じのグリッチにするのがポイントです。なお、ブランドロゴなどではこういった加工を嫌がるケースも多いので、適用範囲にはご注意ください。

glitch-imageはTypeScript製のオープンソース・ソフトウェア(MIT License)です。

uit-community/glitch-image

 

MOONGIFTの関連記事

  • DevRel
  • Com2