Highcharts Demo

author(s): Torstein Hønsi

HTML

<head>
<title>Emberwind</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" >
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" >
<link rel="apple-touch-icon-precomposed" href="icon_57x57.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon_72x72.png" >
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon_114x114.png" >

<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Allan:700&v2' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Meddon&v2' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Cuprum:700italic&subset=latin,cyrillic,latin-ext' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="src/Common.js"></script>
<script type="text/javascript" src="src/Perlin.js"></script>
<script type="text/javascript" src="src/ChaikinCurve.js"></script>

<script type="text/javascript" src="src/render/Render.js"></script>
<script type="text/javascript" src="src/render/RenderCanvas.js"></script>
<script type="text/javascript" src="src/render/RenderWebGL.js"></script>
<script type="text/javascript" src="src/render/Utils.js"></script>
<script type="text/javascript" src="src/render/glMatrix.js"></script>
<script type="text/javascript" src="src/render/webgl-utils.js"></script>

<script type="text/javascript" src="src/Audio.js"></script>
<script type="text/javascript" src="src/Animation.js"></script>
<script type="text/javascript" src="src/Collision.js"></script>
<script type="text/javascript" src="src/Movement.js"></script>
<script type="text/javascript" src="src/Trigger.js"></script>
<script type="text/javascript" src="src/ParticleSystem.js"></script>
<script type="text/javascript"...

CSS

body{
margin: 0px; padding: 0px; overflow: hidden;
background: #000;
}
#canvas-holder.active {
position: absolute;
padding: 0px;
left: 50%;
top: 50%;
}

#canvas-holder.inactive {
position: absolute;
top:50%;
width: 100%;
text-align: center;
}

#canvas {
padding: 0px;
width: 100%;
height: 100%;
color: #fff;
font-family: Allan, Arial;
font-size: 40px;
}

JavaScript

var app = null;

window.onload = function() {
utils.loadShaderXml("src/render/shaders.xml", null, function(shaders) {
if (shaders instanceof Exception) {
app = shaders;
} else {
try {
app = new App('canvas', shaders, null);
} catch (e) {
app = e;
}
}
});

            document.onselectstart = function () {
                return false;
            };
};

function application() {
if (app == null) {
alert("Application is absent");
throw "no application";
} else if (app instanceof Exception) {
alert("An exception occured while creating the application:\n" + app.message);
throw app;
} else {
return app;
}
}