[CreateJS] モザイク

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

createjs_mosaic

BitmaData for EaselJS を使ってみちゃうよ。 :boy:

参考資料「BitmapData for EaselJS」(リファレンス)

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mosaic | CreateJS</title>
<script src="js/easeljs-0.8.1.min.js"></script>
<script src="js/preloadjs-0.6.1.min.js"></script>
<script src="js/libs/bitmapdata-1.0.2.min.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
  #canvas{
    display:block;
    width:640px;
    height:500px;
    margin-top:40px;
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
  }
</style>
<script>
var canvas, stage, stats;
var images;
var bw = 600, bh = 450;
var photo;
var bitmapData, container;
var matrix;
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);

  canvas = document.getElementById("canvas");

  stage = new createjs.Stage(canvas);

  background();

  images = images||{};
  var loader = new createjs.LoadQueue(false);
  loader.addEventListener("fileload", fileload);
  loader.addEventListener("complete", complete);
  loader.loadFile({src: "assets/photo.jpg", id: "photo"});

  stage.update();

  createjs.Ticker.setFPS(30);
  createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
  createjs.Ticker.addEventListener("tick", update);
}
function update(event) {
  stage.update();

  stats.update();
}
function fileload(event) {
  if (event.item.type == "image") {
    images[event.item.id] = event.result;
  }
}
function complete(event) {
  event.target.removeEventListener("fileload", fileload);
  event.target.removeEventListener("complete", complete);

  initialize();
  start();
}
function initialize() {
  photo = new createjs.Bitmap(images["photo"]);
  photo.cache(0, 0, bw, bh);

  bitmapData = new createjs.BitmapData(null, bw, bh, 0xFF000000);
  container = new createjs.Bitmap(bitmapData.canvas);
  stage.addChild(container);
  container.x = 20;
  container.y = 30;

  matrix = new createjs.Matrix2D();

  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;

  var scale = 1/dot;
  var bd = new createjs.BitmapData(null, bw*scale, bh*scale, 0xFF000000);

  matrix.identity();
  matrix.scale(scale, scale);
  bd.draw(createjs.BitmapData.getBitmapData(photo), matrix);

  matrix.identity();
  matrix.scale(dot, dot);
  bitmapData.draw(bd, matrix);

  bd.dispose();
}
function start() {
  timer = setInterval(transit, interval);
}
function transit() {
  id = (id + 1)%max;
  mosaic(dots[id]);
}
function background() {
  var basic = new createjs.Text("HTML5 / CreateJS [0.8.1]", "14px Arial", "#000000");
  stage.addChild(basic);
  basic.textAlign = "left";
  basic.textBaseline = "top";
  basic.x = 24;
  basic.y = 8;
  basic.alpha = 0.6;
  var subtitle = new createjs.Text("Mosaic", "20px Arial", "#000000");
  stage.addChild(subtitle);
  subtitle.textAlign = "right";
  subtitle.textBaseline = "top";
  subtitle.x = canvas.width 30;
  subtitle.y = 2;
  subtitle.alpha = 0.6;
  var publish = new createjs.Text("authoring: Sublime Text 2 + Flash CC [CreateJS]", "14px Arial", "#000000");
  stage.addChild(publish);
  publish.textAlign = "right";
  publish.textBaseline = "top";
  publish.x = canvas.width 20;
  publish.y = 480;
  publish.alpha = 0.6;
}
</script>
</head>
<body onload="init();" style="background-color:#FFFFFF">
  <canvas id="canvas" width="640" height="500" style="background-color:#FFFFFF"></canvas>
</body>
</html>


[修正] (15/09/21 Mon 01:46)
CreateJS 0.8.1 にバージョンアップ。