[CreateJS] MagicLight

CreateJSを使って、MagicLightをやってみるよ。 :boy:

createjs_magiclight

ColorFilter.js を使ってみちゃうよ。 :boy:

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MagicLight | 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/magiclight.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
  html {
    overflow:hidden;
  }
  body {
    margin:0;
    padding:0;
    background-color:#333333;
  }
  #canvas{
    display:block;
    color:#666666;
    background-color:#000000;
    font-size:100%;
    border:1px solid #333333;
    margin:100px auto 0px;
    padding:0px;
  }
</style>
<script>
var canvas, stage, root, stats;

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");
  images = images||{};

  var sw = window.innerWidth;
  var sh = window.innerHeight;
  canvas.width = sw;
  canvas.height = sh;
  canvas.style.top = "0px";
  canvas.style.left = "50%";
  canvas.style.marginTop = "0px";
  canvas.style.marginLeft = - sw * 0.5 + "px";
  canvas.style.position = "absolute";

  var manifest = [
    {src: "images/circle_base.png", id: "circle_base"}
  ];

  var loader = new createjs.LoadQueue(false);
  loader.addEventListener("fileload", handleFileLoad);
  loader.addEventListener("complete", handleComplete);
  loader.loadManifest(manifest);
}
function handleFileLoad(event) {
  if (event.item.type == "image") {
    images[event.item.id] = event.result;
  }
}
function handleComplete(event) {
  event.target.removeEventListener("fileload", handleFileLoad);
  event.target.removeEventListener("complete", handleComplete);

  root = new lib.magiclight();

  stage = new createjs.Stage(canvas);
  stage.addChild(root);
  stage.update();

  createjs.Ticker.setFPS(30);
  createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

  initialize();
  start();
}

var MAX = 3;
var deceleration == 0.95;
var container;
var fingerPos = {x: 0, y: 0, vx: 0, vy: 0};
var power = 0;
var head, tail;

function initialize() {
  container = new createjs.Container();
  stage.addChild(container);
  container.compositeOperation = "lighter";

  if (createjs.Touch.isSupported()) {
    createjs.Touch.enable(stage);
  }
}
function start() {
  createjs.Ticker.addEventListener("tick", tick);
  update(canvas.width / 2, canvas.height / 2);
  update(canvas.width, canvas.height);
}
function tick() {
  update(stage.mouseX, stage.mouseY);
  stage.update();

  stats.update();
}
function update(px, py) {
  var circle;
  for (var n = 0; n < MAX; n++) {
    fingerPos.vx *= 0.75;
    fingerPos.vy *= 0.75;
    fingerPos.vx += (px - fingerPos.x) * 0.2 * (n + 1) / MAX;
    fingerPos.vy += (py - fingerPos.y) * 0.2 * (n + 1) / MAX;
    fingerPos.x += fingerPos.vx;
    fingerPos.y += fingerPos.vy;
    var vx = fingerPos.vx;
    var vy = fingerPos.vy;
    power += Math.sqrt(vx * vx + vy * vy) * 1.6 * n / MAX;
    power *= 0.85;
    if (power > 256) power = 256;
    circle = new lib.circle();
    container.addChild(circle);
    colorize(circle);
    circle.scaleX = circle.scaleY = power / 128;
    circle.live = true;
    circle.x = fingerPos.x - fingerPos.vx * n / MAX + (Math.random() - 0.5) * 30;
    circle.y = fingerPos.y - fingerPos.vy * n / MAX + (Math.random() - 0.5) * 30;
    circle.vx = fingerPos.vx * 0.3;
    circle.vy = fingerPos.vy * 0.3;
    if (head == null) {
      head = tail = circle;
    } else {
      circle.prev = tail;
      tail = tail.next = circle;
    }

    circle = head;
    while (circle != null) {
      grow(circle);
      if (!circle.live) {
        container.removeChild(circle);
        if (circle.prev == null) {
          head = circle.next;
        } else {
          circle.prev.next = circle.next;
        }
        if (circle.next == null) {
          tail = circle.prev;
        } else{
          circle.next.prev = circle.prev;
        }
      }
      circle = circle.next;
    }
  }
}
function grow(circle) {
  if (circle.scaleX < 0.01) {
    circle.live = false;
    return;
  }
  circle.scaleX = circle.scaleY *= deceleration;
  circle.vx *= deceleration;
  circle.vy *= deceleration;
  circle.x += circle.vx;
  circle.y += circle.vy;
}
function colorize(circle) {
  var r = Math.random();
  var g = Math.random();
  var b = Math.random();
  var filter = new createjs.ColorFilter(r, g, b, 1);
  circle.filters = [filter];
  circle.cache(-128, -128, 256, 256);
}
</script>
</head>
<body onload="init();" style="background-color:#000000">
  <canvas id="canvas" width="640" height="480" style="background-color:#000000"></canvas>
</body>
</html>


[修正] (13/10/30 Wed 18:35)
CreateJS 0.7.0 にバージョンアップ。
[修正] (14/08/11 Mon 14:18)
CreateJS 0.7.1 にバージョンアップ。
[修正] (14/12/17 Wed 12:26)
CreateJS 0.8.0 にバージョンアップ。
[修正] (15/09/20 Sun 20:22)
CreateJS 0.8.1 にバージョンアップ。