[pixi.js] モザイク

pixijsを使って、モザイク表現してみよう! :bouzu:

pixijs_mosaic

PixelateFilterクラスを使ったよ。 :boy:

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mosaic | pixi.js</title>
<script src="js/pixi.min.js"></script>
<script src="js/stats.min.js"></script>

<style type="text/css">
  body {
    margin: 0;
    padding: 0;
  }
</style>

<script>
var stage, renderer, stats;
var loader;
var photo;
var container;
var filter;
var timer;
var interval = 100;
var dots;
var id = 0;
var max = 22;

function init() {
  stats = new Stats();
  stats.setMode(0);
  stats.domElement.style.position = "fixed";
  stats.domElement.style.right = "0px";
  stats.domElement.style.top = "0px";
  document.body.appendChild(stats.domElement);

  stage = new PIXI.Container();
  renderer = PIXI.autoDetectRenderer(640, 500, {backgroundColor: 0xFFFFFF});
  document.body.appendChild(renderer.view);
  renderer.view.style.display = "block";
  renderer.view.style.width = "640px";
  renderer.view.style.marginTop = "40px";
  renderer.view.style.marginLeft = "auto";
  renderer.view.style.marginRight = "auto";
  renderer.view.style.paddingLeft = "0";
  renderer.view.style.paddingRight = "0";

  background();

  loader = new PIXI.loaders.Loader();
  loader.add("photo", "assets/photo.jpg");
  loader.on("complete", complete);
  loader.load();

  update();
}
function update() {
  renderer.render(stage);
  requestAnimationFrame(update);

  stats.update();
}
function complete() {
  initialize();
  start();
}
function initialize() {
  container = new PIXI.Container();
  stage.addChild(container);
  container.position.x = 20;
  container.position.y = 30;

  var texture = PIXI.Texture.fromImage("assets/photo.jpg");
  photo = new PIXI.Sprite(texture);
  container.addChild(photo);

  filter = new PIXI.filters.PixelateFilter();
  container.filters = [filter];

  dots = [1, 2, 3, 5, 6, 10, 15, 25, 30, 50, 75, 150, 75, 50, 30, 25, 15, 10, 6, 5, 3, 2];

  mosaic(1);
}
function mosaic(dot) {
  if (dot < 1) return;

  filter.size.x = dot;
  filter.size.y = dot;
}
function start() {
  timer = setInterval(transit, interval);
}
function transit() {
  id = (id + 1)%max;
  mosaic(dots[id]);
}
function background() {
  var version = PIXI.VERSION;
  var rendererType;
  switch (renderer.type) {
    case PIXI.RENDERER_TYPE.WEBGL :
      rendererType = "WebGL";
      break;
    case PIXI.RENDERER_TYPE.CANVAS :
      rendererType = "Context2D";
      break;
  }
  var txt = "HTML5 / pixi.js [" + version + "] (" + rendererType + ")";
  var basic = new PIXI.Text(txt, {"font": "14px Arial", "fill": "#000000", "align": "left"});
  stage.addChild(basic);
  basic.position.x = 24;
  basic.position.y = 8;
  basic.alpha = 0.6;
  var subtitle = new PIXI.Text("Mosaic", {"font": "20px Arial", "fill": "#000000", "align": "right"});
  stage.addChild(subtitle);
  subtitle.position.x = 610 - subtitle.width;
  subtitle.position.y = 2;
  subtitle.alpha = 0.6;
  var publish = new PIXI.Text("authoring: Sublime Text 2 + Flash CC", {"font": "14px Arial", "fill": "#000000", "align": "right"});
  stage.addChild(publish);
  publish.position.x = 620 - publish.width;
  publish.position.y = 480;
  publish.alpha = 0.6;
}
</script>
</head>
<body onload="init();" style="background-color:#FFFFFF">
</body>
</html>


[修正] (15/05/10 Sun 19:04)
pixi.js v3.0.3 にバージョンアップ。