Wormhole JAM

index.html

 <div>
	<canvas id="testCanvas" width="550" height="500" tabIndex="1"></canvas>
</div>

script.js

var canvas, stage;

var total = 12, 
    shapes = [],
    cont,
    k,
    bg,
    canv,
    playing=false,
    textInterval;

var j = null;
setTimeout(function() {
  j = new JustAddMusic({
    ontick:function(){},

    onstart: start,
    onended: end,
  });
}, 3000);

LabTemplate.loadComplete();

function start() {
  playing = true;
  clearInterval(textInterval);
}
function end() {
  playing = false;
  clearInterval(textInterval);
}

function init() {
  canvas = document.getElementById("testCanvas");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  stage = new createjs.Stage(canvas);
  stage.autoClear = false;
  
  var w = h = Math.min(window.innerWidth, window.innerHeight),
      randColor = Math.random()*360|0;
  cont = new createjs.Container();
  
  
  for(var i=0;i<total;i++) {
    var s = new createjs.Shape(),
        _w = w - w/total*i,
        color = s.color = createjs.Graphics.getHSL(randColor, 100, i/total*100|0);
    s.fillCmd = s.graphics.f(color).command
    s.rectCmd = s.graphics.dr(0, 0, _w, _w).command;
    s.regX = s.regY = _w/2;
    s.alpha = i/total;
    shapes.push(s);
    cont.addChild(s);
  }
  
  bg = new createjs.Shape().set({alpha:0.04});
  bg.fillCmd = bg.graphics.f("black").dr(0,0,window.innerWidth,window.innerHeight).command;
  
  canv = new createjs.Bitmap(canvas)
    .set({regX:canvas.width/2, regY:canvas.height/2,x:canvas.width/2,y:canvas.height/2, alpha:0.8})
  
  k = new Kaleidoscope(800, cont, 9, [2,5,3]);
  k.scale = 0.4;
  stage.addChild(k, canv, bg);
  k.x = canvas.width >> 1;
  k.y = canvas.height >> 1;
  
  createjs.ColorPlugin.install();  
  createjs.Ticker.on("tick", tick);
  createjs.Ticker.timingMode = "raf";
}

function changeColor() {
  var randColor = Math.random()*360|0;
  for (var i=shapes.length-1; i>=0; i--) {
    var s = shapes[i];
    var color = s.color = createjs.Graphics.getHSL(randColor, 100, i/total*100|0);
    createjs.Tween.get(s.fillCmd)
      .wait(i*1000/shapes.length)
      .to({style:color}, 1000, createjs.Ease.quadOut);
  }
}
function setColor(brightness) {
  for (var i=shapes.length-1; i>=0; i--) {
    var s = shapes[i];
    var color = createjs.Graphics.getHSL(s.color, 100, i/total*100*brightness|0);
    s.fillCmd.style = color;
  }
}

var MIN_TIME = 1000 * 10; // 10 seconds
var r = 0, active = 0.02, lastChange = new Date() + MIN_TIME, shouldChange = false;
function tick(event) {
  canv.scale *= 1.1;
  
   var o = j == null ? null : j.audioData;
  if (o != null && !j.audioData.paused) {
    
    r+=0.0025;
    canv.rotation -= o.low.avg;
    cont.rotation+=o.all.avg;
    cont.scale = Math.pow(o.mid.val,3) + 0.4 + Math.sin(r)*0.25;
    
    if (o.low.hit) { cont.scale = 3; }
    k.rotation-=o.high.avg*0.8 + 0.3;
    
    for (var i=0, l=shapes.length; i<l; i++) {
      var s = shapes[i];
      s.rotation += o.all.avg * i/l*5;
      s.scale = 1-i/l * o.all.val + 0.75;
    }
    k.y += o.all.trend * 10; // Bounce
    active *= 1.1 + o.all.avg;
  } else {
    active *= 0.9;
  }
  k.y -= (k.y - canvas.height/1.8)/1000; // Drift to center
 
  shouldChange = shouldChange = new Date().getTime() > (lastChange + MIN_TIME);
  if (o && o.low.hit && o.mid.hit && o.high.hit || (shouldChange && (o.low.hit || o.mid.hit || o.high.hit))) { 
    lastChange = new Date().getTime();
    shouldChange = false;
    changeColor();
  }
  
  stage.update(event);
  
  //Reset
  canv.scale = 1;
  canv.rotation = 0;  
}

var motivate = ["Let's Jam", "Groovy!", "Made with CreateJS!", "Good Stuff!", "Bam!"]
function showText() {
  var r = Math.random()*50+100,
      a = Math.random() * Math.PI*2,
      x = canvas.width/2 + Math.cos(a)*r,
      y = canvas.height/2 + Math.sin(a)*r,
      t = new createjs.Text(motivate[Math.random()*motivate.length|0], "24px Arial", shapes[shapes.length-2].color).set({textAlign:"center", x:x, y:y,alpha:0});
  stage.addChild(t);
  // Fade in
  createjs.Tween.get(t).to({alpha:1}, 800, createjs.Ease.quadIn);
  //Drift towards mouse
  createjs.Tween.get(t, {loop:true}).to({}, 1200, createjs.Ease.quadInOut)
      .to({}, 1200, createjs.Ease.quadInOut).on("change", function() {
    t.x -= (t.x-stage.mouseX)/50;
    t.y -= (t.y-stage.mouseY)/40;
    t.y -= j.audioData.all.trend * 3; // Bounce
    
  });
  setTimeout(function() {
    createjs.Tween.removeTweens(t);
    stage.removeChild(t);
  }, 2000);
}

window.addEventListener("resize", draw);

function draw() {  
  canvas.width = bg.fillCmd.w = window.innerWidth;
  bg.fillCmd.h = canvas.height = window.innerHeight;

  canv.set({regX:canvas.width/2,regY:canvas.height/2,x:canvas.width/2,y:canvas.height/2});
  var w = h = Math.min(window.innerWidth, window.innerHeight);
  for(var i=0;i<total;i++) {
    var s = shapes[i];
    var _w = w - w/total*i;
    s.rectCmd.w = s.rectCmd.h = _w;
    s.regX = s.regY = _w/2; 
  }
  
  k.x = canvas.width >> 1;
  k.y = canvas.height >> 1;
}


init();

scripts

<script src="https://rawgit.com/CreateJS/EaselJS/master/lib/easeljs.min.js"></script>
<script src="https://rawgit.com/CreateJS/TweenJS/master/lib/tweenjs.min.js"></script>
<script src="https://rawgit.com/CreateJS/TweenJS/master/src/tweenjs/plugins/ColorPlugin.js"></script>
<script src="https://rawgit.com/CreateJS/sandbox/master/Kaleidoscope/Kaleidoscope.js"></script>
<script src="https://rawgit.com/lannymcnie/JustAddMusic/master/js/JustAddMusic.min.js"></script>
<script src="https://lab.gskinner.com/content/assets/template.min.js"></script>

style.css

html, body {
  margin:0px;
  padding:0px;
  background-color:#000000;
  font-family:sans-serif;
  font-size:16px;
  overflow:hidden;
}

code {
  font-family: monospace, serif;
  font-size: 1em;
  color:#FFFFFF
}

h1 {
  font-family:sans-serif;
  color:#FFFFFF
}

#logo { 
	position: absolute;
  right:0px;
  bottom:0px;
}
p {
  color:#aeb7c0;
}
canvas {
  background-color:#000000;
}

#badge {
  width:60px;
  height:70px;
  position: absolute;
  left:10px;
  bottom:40px;
  cursor: default;
}

wormhole-jam.markdown

Wormhole JAM

A ride down the CreateJS Kaleido-wormhole, with the JAM music visualizer library.

https://github.com/gskinner/JustAddMusic https://codepen.io/createjs/full/QqRxQN/

A Pen by Leetcodes on CodePen.

License.