Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
601 lines (458 sloc) 20.6 KB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>No Comply</title>
<link rel="stylesheet" href="css/no-comply-styles.css" />
</head>
<body>
<script type='text/javascript'>
(function() {
var canvas_w, canvas_h, aspect;
aspect = 1280/720;
canvas_w = window.innerWidth;
canvas_h = canvas_w*(1.0/aspect);
var toppx,leftpx;
if (canvas_h>window.innerHeight) {
canvas_h = window.innerHeight;
canvas_w = window.innerHeight*aspect;
toppx = 0;
leftpx = (window.innerWidth/2)-(canvas_w/2);
} else {
toppx = (window.innerHeight/2)-(canvas_h/2);
leftpx = 0;
}
document.write("<canvas id='cubicvr-canvas' style='border: none; top:"+toppx+"px' width='"+window.innerWidth+"' height='"+(canvas_h)+"'></canvas>");
})();
</script>
<video id="intro-sleep" src="videos/intro-sleep.webm" preload="auto" oncanplaythrough="this.canPlayThrough=true;"></video>
<video id="portal-video" src="videos/portal.webm" style="display:none" width="720" height="416" preload="auto"></video>
<video id="ending-video" src="videos/kraddy-ending.webm" style="display:none" width="720" height="416" preload="auto"></video>
<audio id="no-comply" tabindex="0" src="music/no-comply.ogg" controls="true" preload="auto"></audio>
<audio id="mono" src="music/1.Mono.ogg" preload="auto"></audio><!-- !muted -->
<script src="CubicVR/CubicVR.js"></script>
<script id="core-shader-vs" src="CubicVR/CubicVR_Core.vs" type="x-shader/x-vertex"></script>
<script id="core-shader-fs" src="CubicVR/CubicVR_Core.fs" type="x-shader/x-fragment"></script>
<script src="lib/processing-1.0.0.min.js"></script>
<script src="lib/dsp.js"></script>
<script src="lib/beatdetektor.js"></script>
<script src="lib/CubicVR-bitmap_cube_array.js" type="text/javascript"></script>
<script src="lib/CubicVR-bitwall.js" type="text/javascript"></script>
<script src="lib/sprite-viking-blitr.js"></script>
<script src="banks.js" type="text/javascript"></script>
<script src="lib/banks_tools.js"></script>
<script src="lib/mesh_tunnel.js"></script>
<script src="sequencer.js"></script>
<script src="sequences.js"></script>
<script src="lib/burst-core.js"></script>
<script src="models/burst.data.timelines.json.lol.js"></script>
<script>
var seizureWarningEnabled = true;
(function(window) {
this.gfxData = { frameCounter: 0 };
this.timerData = {
timerMilliseconds: 0,
timerSeconds: 0,
timerLastSeconds: 0,
};
/**
* Audio analysis
*/
var audio = document.getElementById('no-comply');
audio.bufferSize = 1024;
audio.channels = 1;
var audioContext = new AudioContext();
audio.rate = audioContext.sampleRate;
var audioSource = audioContext.createMediaElementSource(audio);
var audioSourceData = audioContext.createScriptProcessor(audio.bufferSize, 2, 1);
audioSource.connect(audioSourceData);
audioSourceData.connect(audioContext.destination);
audioSource.connect(audioContext.destination);
var audioData = this.audioData = (function() {
var
bassdrum = {
name: "bassdrum",
source: false,
val: 0
},
clap = {
name: "clap",
source: false,
val: 0
},
crash = {
name: "crash",
source: false,
val: 0
},
boom = {
name: "boom",
source: false,
val: 0
},
glitch = {
name: "glitch",
source: false,
val: 0
},
stab = {
name: "stab",
source: false,
val: 0
},
triggers = [bassdrum,
clap,
crash,
boom,
glitch,
stab];
return {
channels: 0,
rate: 0,
frameBufferLength: 0,
bufferSize: 0,
timestamp: 0,
audioPositionInSeconds: 0,
audioDurationInSeconds: 0,
audioPositionInRadians: 0,
audioDurationInRadians: 2 * Math.PI,
signal: null,
fft: null,
bd: null,
kick_det: null,
vu: null,
m_BeatTimer: 0,
m_BeatCounter: 0,
m_NormBeatTimer: 0,
m_HalfBeatCounter: 0,
m_QuarterBeatCounter: 0,
clearClr: [1, 1, 1],
ftimer: 0,
bassdrum: bassdrum,
clap: clap,
crash: crash,
boom: boom,
glitch: glitch,
stab: stab,
update: function (event) {
if (!audioData.fft || audio.paused) {
return;
}
var signalLeft = event.inputBuffer.getChannelData(0);
var signalRight = event.inputBuffer.getChannelData(1);
if (!audioData.signal) {
audioData.signal = new Float32Array(signalLeft.length);
}
for (var i = 0, fbl = audioData.bufferSize; i < fbl; i++) {
audioData.signal[i] = signalLeft[i] + signalRight[i] / 2;
}
audioData.audioPositionInSeconds = audioContext.currentTime;
audioData.audioPositionInRadians = audioData.audioPositionInSeconds /
audioData.audioDurationInSeconds *
audioData.audioDurationInRadians;
// audioData.signal = DSP.getChannel(DSP.MIX, audio.signal);
audioData.fft.forward(audioData.signal);
audioData.timestamp = audioContext.currentTime;
audioData.bd.process(audioData.timestamp, audioData.fft.spectrum);
for (var i=0, tl=triggers.length; i<tl; i++) {
var t = triggers[i];
t.source = findActiveTrack(t.name, audioData.audioPositionInRadians);
if (findActiveTrack(t.name, audioData.audioPositionInRadians) !== null) {
t.val += 0.35;
} else {
t.val = t.val * 0.85;
}
if (t.val != t.val) t.val = 0; // NaN?
if (!t.val) t.val = 0;
if (t.val < 0) t.val = 0;
if (t.val > 1.0) t.val = 1.0;
}
if (audioData.bd.win_bpm_int_lo) {
audioData.m_NormBeatTimer += audioData.bd.last_update;
if (audioData.m_NormBeatTimer > (60.0/audioData.bd.win_bpm_int_lo)) {
audioData.m_NormBeatTimer -= (60.0/audioData.bd.win_bpm_int_lo);
audioData.clearClr[0] = 0.5+Math.random()/2;
audioData.clearClr[1] = 0.5+Math.random()/2;
audioData.clearClr[2] = 0.5+Math.random()/2;
} //if
} //if
if (audioData.bd.win_bpm_int_lo) {
audioData.m_BeatTimer += audioData.bd.last_update;
if (audioData.m_BeatTimer > (60.0/audioData.bd.win_bpm_int_lo)/4) {
audioData.m_BeatTimer -= (60.0/audioData.bd.win_bpm_int_lo)/4;
audioData.m_QuarterBeatCounter++;
audioData.m_HalfBeatCounter = Math.floor(audioData.m_QuarterBeatCounter/2);
audioData.m_BeatCounter = Math.floor(audioData.m_QuarterBeatCounter/4);
} //if
} //if
audioData.ftimer += audioData.bd.last_update;
if (audioData.ftimer > 1.0 / 24.0) {
audioData.vu.process(audioData.bd, audioData.ftimer);
audioData.ftimer = 0;
} //if
}, //update
init: function(audio) {
this.audioDurationInSeconds = audio.duration;
this.channels = audio.channels;
this.rate = audio.rate;
this.frameBufferLength = audio.bufferSize;
this.bufferSize = audio.bufferSize;
this.fft = new FFT(audio.bufferSize, audio.rate);
this.signal = new Float32Array(this.bufferSize);
this.bd = new BeatDetektor(75, 85);
this.kick_det = new BeatDetektor.modules.vis.BassKick();
this.vu = new BeatDetektor.modules.vis.VU();
audioSourceData.onaudioprocess = this.update;
}
};
})();
function initGL(canvas) {
try {
gl = canvas.getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
} catch(e) {
}
if (!gl) {
alert("Could not initialise WebGL, sorry :-(");
}
CubicVR.GLCore.init(gl, "core-shader-vs", "core-shader-fs");
CubicVR.setGlobalAmbient([0,0,0]);
gl.clearColor(0.0, 0.0, 1.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
return gl;
}
function postMessage(msg) {
if (window.parent === window) {
return;
}
window.parent.postMessage(msg, '*');
}
function handleMessage(e) {
if ('start_demo' === e.data) {
init();
} else if ('stop_demo' === e.data) {
DemoState.running = false;
music.pause();
window.parent.postMessage('finished_exit', targetOrigin);
}
}
var initialized = false;
function init() {
if (initialized) {
return;
}
var canvas = document.getElementById('cubicvr-canvas');
var gl = initGL(canvas);
var video = document.getElementById('intro-sleep');
window.updateSprites=null;
var sequencer = createSequencer({canvas: canvas,
video: video,
audio: document.getElementById('no-comply'),
gl: gl},
function() {
postMessage('exiting');
}
);
function startDemo() {
canvas.removeEventListener('click', startDemo, false);
intro.stop();
sequencer.start();
}
canvas.addEventListener('click', startDemo, false);
intro.start(canvas, gl, video);
intro.resize();
postMessage('loaded');
initialized = true;
if (seizureWarningEnabled) {
canvas.style.visibility = 'hidden';
}
}
window.addEventListener('DOMContentLoaded', function() { init(); }, false);
window.addEventListener('message', function(e) { handleMessage(e); }, false);
window.addEventListener('resize', function() { setSize(); }, false);
})(window);
</script>
<div id="audio-controls">
<img id="audio-controls-play" class="audio-controls-buttons" src="images/pauseplay-play.png" />
<img id="audio-controls-pause" class="audio-controls-buttons" src="images/pauseplay-pause.png" />
</div>
<div id="subway-gui" style="color: #fff; font-size: 18pt; position: absolute; left: 0px; top: 30px; z-index: 20; display: none;">
<img id="subway-gui-console" src="scene_images/subway-gui.png" />
<img id="subway-gui-arrow" src="scene_images/subway-gui_arrow.png" style="position: absolute; z-index: 21;"/>
<img id="subway-gui-red-left" src="scene_images/subway-gui_red-left.png" style="position: absolute; z-index: 22;"/>
<img id="subway-gui-red-up" src="scene_images/subway-gui_red-up.png" style="position: absolute; z-index: 22;"/>
<img id="subway-gui-red-right" src="scene_images/subway-gui_red-right.png" style="position: absolute; z-index: 22;"/>
<img id="subway-gui-green-left" src="scene_images/subway-gui_green-left.png" style="position: absolute; z-index: 23;"/>
<img id="subway-gui-green-up" src="scene_images/subway-gui_green-up.png" style="position: absolute; z-index: 23;"/>
<img id="subway-gui-green-right" src="scene_images/subway-gui_green-right.png" style="position: absolute; z-index: 23;"/>
</div>
<div id="scene-edit">
<div id="currentTime" class="rounded-box">currentTime: <input class="i200 rounded-input"></div>
<button id="toggle-burst">Burst: ON</button><br /><br />
<div id="bitWallSpriteList" class="rounded-box">
<table>
<tr><th>Name</th><th>Position</th><th>Scale</th><th>Rotation</th><th>Action</th><th>Key</th></tr>
</table>
</div>
</div>
<div id="time-slider-container">
<div id="time-slider"></div>
</div>
<div id='creditRoll' class='creditRoll' style='display:none'><pre>
<div class='spacer2'>&nbsp;</div>
<div class='spacer2'>&nbsp;</div>
<div class='spacer2'>&nbsp;</div>
<div class='spacer1'>&nbsp;</div>
<span class='titletext'>- No Comply -</span>
<div class='spacer1'>&nbsp;</div>
This has been
a presentation by
the Mozilla Audio API
and WebGL team.
<div class='spacer1'>&nbsp;</div>
<span class='titletext'>- Creators -</span>
<img src="scene_images/graffiti-minotaur.png" width="128" height="128" alt="Graffiti Minotaur">
<img src="scene_images/posters-07.png" width="64" height="89" alt="Wanted: Seth Bindernagel" title="Wanted: Seth Bindernagel">
Seth Bindernagel (<a href="http://www.twitter.com/binder" target='creditWindowLink'>@binder</a>)
<span class='subtext'>Director, Manager</span>
<img src="scene_images/posters-06.png" width="64" height="86" alt="Wanted: Corban Brook" title="Wanted: Corban Brook">
Corban Brook (<a href="http://www.twitter.com/corban" target='creditWindowLink'>@corban</a>)
<span class='subtext'>Code, Audio Sequencing</span>
<img src="scene_images/posters-02.png" width="64" height="89" alt="Wanted: Charles J. Cliffe" title="Wanted: Charles J. Cliffe">
Charles J. Cliffe (<a href="http://www.twitter.com/ccliffe" target='creditWindowLink'>@ccliffe</a>)
<span class='subtext'>Code, 3D Modelling, Animation</span>
<img src="scene_images/poster-lost-cat.png" width="64" height="64" alt="Wanted: Brett Gaylor" title="Wanted: Brett Gaylor">
Brett Gaylor (<a href="http://www.twitter.com/remixmanifesto" target='creditWindowLink'>@remixmanifesto</a>)
<span class='subtext'>Video Editing</span>
<img src="scene_images/posters-05.png" width="64" height="86" alt="Wanted: David Humphrey" title="Wanted: David Humphrey">
David Humphrey (<a href="http://www.twitter.com/humphd" target='creditWindowLink'>@humphd</a>)
<span class='subtext'>Code, Director, Manager</span>
<img src="scene_images/posters-01.png" width="64" height="89" alt="Wanted: Alistair MacDonald" title="Wanted: Alistair MacDonald">
Alistair MacDonald (<a href="http://www.twitter.com/F1LT3R" target='creditWindowLink'>@F1LT3R</a>)
<span class='subtext'>Code, Sprites, Animation</span>
<img src="scene_images/posters-04.png" width="64" height="89" alt="Wanted: Omar Noory" title="Wanted: Omar Noory">
Omar Noory (<a href="http://www.twitter.com/thesearethings" target='creditWindowLink'>@thesearethings</a>)
<span class='subtext'>2D Artwork</span>
<img src="scene_images/posters-03.png" width="64" height="89" alt="Wanted: Bobby Richter" title="Wanted: Bobby Richter">
Bobby Richter (<a href="http://www.twitter.com/secretrobotron" target='creditWindowLink'>@secretrobotron</a>)
<span class='subtext'>Code, 3D Modelling, Gameplay</span>
<div class='spacer1'>&nbsp;</div>
<span class='titletext'>- Music -</span>
<img src="scene_images/boombox.png" width="100" alt="Boombox">
Produced by and used with permission from:
Kraddy
<span class='subtext'>Labyrinth EP</span>
<span class='subtext'><a href="http://kraddyodaddy.com/">http://kraddyodaddy.com/</a></span>
Featured Tracks:
Introduction - Mono
Demonstration - No Comply
<img src="scene_images/skeleton-hanging.png" width="64" height="128" alt="Skeleton Hanging">
<div class='spacer1'>&nbsp;</div>
<span class='titletext'>- Technology Utilized -</span>
<img src="scene_images/buried-treasure.png" width="128" height="126" alt="Traffic Light">
BeatDetektor.js
<span class='subtext'>Beat Detection Library</span> (<a href="http://www.twitter.com/ccliffe" target='creditWindowLink'>@ccliffe</a>)</span>
Blender
<span class='subtext'>3D Modelling and Animation</span>
Burst.js
<span class='subtext'>JS Animation Engine (<a href="http://www.twitter.com/F1LT3R" target='creditWindowLink'>@F1LT3R</a>)</span>
COLLADA
<span class='subtext'>Asset Exchange Format</span>
CubicVR.js
<span class='subtext'>3D Engine (<a href="http://www.twitter.com/ccliffe" target='creditWindowLink'>@ccliffe</a>)</span>
DSP.js
<span class='subtext'>Signal Processing (<a href="http://www.twitter.com/corban" target='creditWindowLink'>@corban</a>)</span>
HTML5 &lt;audio&gt;, &lt;canvas&gt;, &lt;video&gt;
JSON
<span class='subtext'>Data Encapsulation Format</span>
Mozilla Audio Data API
mozRequestAnimationFrame :-)
OGG Theora
<span class='subtext'>Audio Format</span>
Processing.js
<span class='subtext'>Visualization Library</span>
SpriteViking.js
<span class='subtext'>Sprite Engine (<a href="http://www.twitter.com/F1LT3R" target='creditWindowLink'>@F1LT3R</a>)</span>
GML
<span class='subtext'>Graffiti Markup Language</span>
WebGL
<span class='subtext'>3D API</span>
WebM
<span class='subtext'>Video Format</span>
<img src="scene_images/subway-ad-firefox.jpg" width="128" height="64" alt="Subway Ad Firefox"> <img src="scene_images/subway-ad-cubicvr.jpg" width="128" height="64" alt="Subway Ad Cubicvr"> <img src="scene_images/subway-ad-bocoup.jpg" width="128" height="64" alt="Subway Ad Bocoup">
<div class='spacer1'>&nbsp;</div>
<img src="scene_images/firefox.png" width="128" height="156" alt="Firefox">
<span class='titletext'>Special thanks to Mozilla </span>
<span class='titletext'>for their hard work, hospitality and support </span>
<span class='titletext'>which made this demo possible.</span>
<div class='spacer1'>&nbsp;</div>
<span class='titletext'>Thank you for watching, </span>
<span class='titletext'>Hope you enjoyed the ride.</span>
<div class='spacer2'>&nbsp;</div>
<div class='spacer2'>&nbsp;</div>
</pre></div>
<script type="text/javascript">
function center_div() {
var div = document.getElementById('subway-gui');
var img = document.getElementById('subway-gui-console');
var img_arrow = document.getElementById('subway-gui-arrow');
var img_red_left = document.getElementById('subway-gui-red-left');
var img_red_up = document.getElementById('subway-gui-red-up');
var img_red_right = document.getElementById('subway-gui-red-right');
var img_green_left = document.getElementById('subway-gui-green-left');
var img_green_up = document.getElementById('subway-gui-green-up');
var img_green_right = document.getElementById('subway-gui-green-right');
var x = window.innerWidth/2 - img.width/2;
var y = window.innerHeight - img.height + 10;
div.style.left = x + "px";
div.style.top = y + "px";
img_arrow.style.left = "77px";
img_arrow.style.top = "125px";
img_red_left.style.left = "220px";
img_red_left.style.top = "50px";
img_red_right.style.left = "343px";
img_red_right.style.top = "50px";
img_red_up.style.left = "281px";
img_red_up.style.top = "50px";
img_green_left.style.left = "220px";
img_green_left.style.top = "50px";
img_green_right.style.left = "343px";
img_green_right.style.top = "50px";
img_green_up.style.left = "281px";
img_green_up.style.top = "50px";
} //center_div
center_div();
window.addEventListener('resize', center_div, false);
</script>
<div id="seizure-warning">
<b>Warning:</b> The following demo contains flashing lights and patterns.<br />
Please consider this before viewing if you are sensitive to these visual effects.<br /><br />
<a class="seizure-warning-continue" id="seizure-warning-continue">CONTINUE</a>
</div>
<script type="text/javascript">
if (seizureWarningEnabled) {
function positionWarning(e) {
var warning = document.getElementById('seizure-warning');
var t = (window.innerHeight/2 - warning.offsetHeight/2) + "px";
warning.style.top = t;
}; //positionWarning
window.addEventListener('resize', positionWarning, false);
positionWarning();
document.getElementById('seizure-warning').style.visibility = 'visible';
setTimeout(function() {
document.getElementById('seizure-warning-continue').style.visibility = 'visible';
}, 2000);
function onWarningClick(e) {
var canvas = document.getElementById('cubicvr-canvas');
document.getElementById('seizure-warning').style.display = 'none';
document.getElementById('seizure-warning-continue').removeEventListener('click', onWarningClick, false);
canvas.style.visibility = 'visible';
window.removeEventListener('resize', positionWarning, false);
} //onWarningClick
document.getElementById('seizure-warning-continue').addEventListener('click', onWarningClick, false);
}
</script>
</body>
</html>