[JS]画像にモザイクをかけたり、点描状にするちょっと面白いスクリプト -SeuratJS

あなたの画像を点描やモザイク状にアニメーション（あり・なし）で変更するHTML5 Canvasを使ったスクリプトを紹介します。
点描はサイト左の肖像画にある新印象派の画家『スーラ』のような感じです。

SeuratJS

[ad#ad-2]

SeuratJSはHTML5 Canvasを使ってカラーデータを解析し、クライアントサイドで画像にエフェクトを与えます。実装にはRaphaëlが必要です。

下記に、SeuratJSの面白いデモを紹介します。
まずは、スクリプト名にもなっているスーラの点描から。

クリックで画像を点描に

paper.seurat({ imageSource: 'gray-weather.png' });

続いて、モザイク。

クリックで画像をモザイクに

paper.seurat({ imageSource: 'fort-samson.png', shape: "rect"});

[ad#ad-2]

ここからはアニメーションを伴ったデモです。

アニメーションで点描に

paper.seurat({ imageSource: 'circus.png',
  attributes: {r: 2, stroke: "none"},
  animator: function(elm, x,y,step){
	var anim = Raphael.animation({r: 7}, 350);
	elm.animate(anim.delay(35*y));
  });

点描をアニメーションで動かします。

点描のアニメーション

paper.seurat({ imageSource: 'eiffle-tower.png',
  animator: function(elm,x,y,step){
	var anim = Raphael.animation({cx: 2, cy: 2, r: 1}, 2e3,
	  function(){
		var anim = Raphael.animation({cx: (x+step/2), 
		  cy: (y+step/2), r: (step/2-1)}, 2e3);
		elm.animate(anim.delay(500+x*5+y*7))
	});
	elm.animate(anim.delay(500+x*10+y*10)); 
  }});

点描のサイズをアニメーションで変更します。

点描のアニメーション

paper.seurat({ imageSource: 'circus-sideshow.png',
  animator: function(elm,x,y,step){
  var anim = Raphael.animation({cx: (Math.random()*720), 
    cy: (Math.random()*180), r: (Math.random()*15)}, 2e3, 
    function(){
	  var anim2 = Raphael.animation({cx: (x+4), cy: (y+4), 
		  r: (step/2-1)}, 2e3);
		elm.animate(anim2.delay(500));
	}).delay(Math.random()*2000);
	elm.animate(anim);
  }});

モザイクのアニメーションもあります。

モザイクのアニメーション

paper.seurat({ imageSource: 'laborers.png',
  step: 6,
  generator: function(ppr,x,y,color,step,attributes){
	return ppr.circle(x, 1, step/2-1)
		.attr({fill: color}).attr(attributes);
	},
  animator: function(elm,x,y,step){
	var anim = Raphael.animation({cx: x, cy: y, r: 4}, 2e3);
	elm.animate(anim.delay(500));
	}
  });