画像を印象的なドット絵にしてくれるjQueryプラグイン「Breathing Halftone」

画像を印象的に加工するのは面倒ですが、breathing-halftoneを利用すればそんな心配も不要です。
あっという間にカラフルなドット絵が完成します。

sponsors

使用方法

breathing-halftoneからファイル一式をダウンロード。

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="vector.js"></script>
<script type="text/javascript" src="particle.js"></script>
<script type="text/javascript" src="breathing-halftone.js"></script>
<script>
$(function(){
  var img = $('#id名')[0];
  new BreathingHalftone( img, {
    dotSize: 1/40, //ドットサイズ
    initVelocity: 0.1, //速度
    oscPeriod: 3, //動きの速度
    isRadial: true //グリッド状に整列させる
  });
});
</script>
  
上記を記述したらあとは画像を上記のid名で書けば完成です。
<img src="画像パス" id="id名">

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors