Fire JS Bin - Worlds-of-WebGL

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

GL.controllers.galaxyControl = function(scene, gl, programs) {

var mouseX = 0;
var mouseY = 0;

var zoomActive = false;
var zoomStartTime = 0;
var zoomInitTime = 1500;
var zoomAcc = 0;

return {

keydown : function(keyCode) {
    switch (keyCode) {
      case 37:
      case 100:
        scene.setRotation(scene.getRotation() + 1 * Math.PI / 180);
        worldRotation += 1 * Math.PI / 180;
        break;
      case 39:
      case 102:
        scene.setRotation(scene.getRotation() - 1 * Math.PI / 180);
        worldRotation -= 1 * Math.PI / 180;
        break;
      case 38:
      case 104:
        if (!zoomActive) {
          zoomStartTime = new Date().getTime();
          zoomActive = true;
          zoomDirection = -1;
        }
        break;
      case 40:
      case 98:
        if (!zoomActive) {
          zoomStartTime = new Date().getTime();
          zoomActive = true;
          zoomDirection = 1;
        }
        break;
      case 107:
      case 187:
        var n = Math.min(100000, scene.getNumPlanets() * 2);
        scene.setNumPlanets(n);
        break;
      case 109:
      case 189:
        var n = Math.max(1, (scene.getNumPlanets() * 0.5)>>0);
        scene.setNumPlanets(n);
        break;
    }
  },

keyup : function(keyCode) {
    zoomActive = false;
  },

mousemove : function(x, y) {
    mouseX = x;
    mouseY = y;
  },

mousedown : function(button) {
    zoomStartTime = new Date().getTime();
    zoomActive = true;
    zoomDirection = (button == 0) ? -1 : 1;
    
  },

mouseup : function(button) {
    zoomActive = false;
  },

mousewheel : function(delta) {
    scene.setRotation(scene.getRotation() + 3 * delta * Math.PI / 180);
  },

draw : function() {
    var viewPos = scene.camera.position;

var target = scene.camera.target;
    var up = scene.camera.up;
    var out = target.subtract(viewPos).toUnitVector();
    var side = out.cross(up);

if (zoomActive) {
      var zoomTime = zoomInitTime - (new Date().getTime() - zoomStartTime);
      zoomAcc = Math.max(zoomAcc, Math.min(1, (zoomInitTime - zoomTime) / zoomInitTime));
    }

if (zoomAcc > 0) {

var mx = mouseX / scene.width - 0.5;
      var my = mouseY / scene.height - 0.5;

viewPos = viewPos.add($V([
        -10 * mx * zoomAcc,
        -10 * my * zoomAcc,
        -5 * zoomAcc * zoomDirection
      ]));

zoomAcc *= 0.9;
      if (zoomAcc < 0.01) zoomAcc = 0;
    }

viewPos.elements[1] = Math.max(100, viewPos.elements[1]);

scene.camera.position = viewPos;
    scene.camera.target = viewPos.add(out);
  }
}

};
  
GL.scenes.manyworld = function(gl, programs, settings) {

var planets;
var screen;
var cube;
var floor;
var defaultTexture;

var worldRotation = 2 - Math.PI * 0.5;
var startTimeOffset = -4000;

var numPlanets = 10000;

var lineUp = $L($V([0,0,0]),$V([0,1,0]));
var startTime = 0;
var lastDrawTime = 0;
var lastCameraPosition;

var cameraTime = 0;

function setPlanetData(data) {

var program = programs["planets"];
  gl.useProgram(program);

var random = [];
  var sphere = [];
  var khronos = [];
  var khronosColor = [];
  var webgl = [];
  var webglColor = [];
  var radii = [];

for (var i=0;i<numPlanets;i++) {
    var planet = data[i];
    random.push.apply(random, planet.random);
    sphere.push.apply(sphere, planet.sphere);
    khronos.push.apply(khronos, planet.khronos);
    khronosColor.push.apply(khronosColor, planet.khronosColor);
    webgl.push.apply(webgl, planet.webgl);
    webglColor.push.apply(webglColor, planet.webglColor);
    radii.push(planet.radius);
  }

planets = {
    random : random,
    sphere : sphere,
    khronos : khronos,
    khronosColor : khronosColor,
    webgl : webgl,
    webglColor : webglColor,
    radius : radii,

randomBuffer : gl.createBuffer(),
    sphereBuffer : gl.createBuffer(),
    khronosBuffer : gl.createBuffer(),
    khronosColorBuffer : gl.createBuffer(),
    webglBuffer : gl.createBuffer(),
    webglColorBuffer : gl.createBuffer(),
    radiusBuffer : gl.createBuffer(),

count : numPlanets,
    earthTexture : GL.createTexture("earth"),
    khronosTexture : GL.createTexture("khronos")
  };

var aRandomVertex = gl.getAttribLocation(program, "aRandomVertex");
  var aSphereVertex = gl.getAttribLocation(program, "aSphereVertex");
  var aKhronosVertex = gl.getAttribLocation(program, "aKhronosVertex");
  var aKhronosColor = gl.getAttribLocation(program, "aKhronosColor");
  var aWebglVertex = gl.getAttribLocation(program, "aWebglVertex");
  var aWebglColor = gl.getAttribLocation(program, "aWebglColor");
  var aRadius = gl.getAttribLocation(program, "aRadius");

gl.bindBuffer(gl.ARRAY_BUFFER, planets.randomBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(random), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(aRandomVertex);
  gl.vertexAttribPointer(aRandomVertex, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, planets.sphereBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(sphere), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(aSphereVertex);
  gl.vertexAttribPointer(aSphereVertex, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, planets.khronosBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(khronos), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(aKhronosVertex);
  gl.vertexAttribPointer(aKhronosVertex, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, planets.khronosColorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(khronosColor), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(aKhronosColor);
  gl.vertexAttribPointer(aKhronosColor, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, planets.webglBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(webgl), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(aWebglVertex);
  gl.vertexAttribPointer(aWebglVertex, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, planets.webglColorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(webglColor), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(aWebglColor);
  gl.vertexAttribPointer(aWebglColor, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, planets.radiusBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(radii), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(aRadius);
  gl.vertexAttribPointer(aRadius, 1, gl.FLOAT, false, 0, 0);

gl.activeTexture(gl.TEXTURE0);
        setUniform1i(program, "uEarthTexture", 0);
  gl.bindTexture(gl.TEXTURE_2D, planets.earthTexture);
}

var planetTime = 0;
var planetRotationTime = 0;

function drawPlanets(time, timeFactor, modelMatrix, viewport) {

gl.enable(gl.BLEND);
  gl.depthMask(false);
  gl.blendFunc(gl.SRC_ALPHA, gl.ONE);

var program = programs["planets"];
  gl.useProgram(program);

gl.viewport.apply(gl, viewport);
        setUniform4fv(program, "uViewport", viewport);

setUniform1f(program, "uPixelsPerRadian", settings.height / (me.camera.fov * Math.PI / 180.0) );

planetRotationTime += time / 2000;

var planetRotation = Matrix.Rotation(planetRotationTime, $V([0,1,0])).ensure4x4();
  setUniformMatrix4fv(program, "uPlanetRotation", false, new WebGLFloatArray(planetRotation.flatten()));

planetTime += time / 1000 * timeFactor;

setUniform1f(program, "uTime", planetTime);

var lookat = Matrix.LookAt(me.camera.position, me.camera.target, me.camera.up);

var lookatInverse = lookat.inverse().transpose();
  setUniformMatrix4fv(program, "uPlanetNormalMatrix", false, new WebGLFloatArray(lookatInverse.flatten()));

var rotMatrix = Matrix.Rotation(worldRotation, $V([0,1,0])).ensure4x4();

setUniformMatrix4fv(program, "uRotationMatrix", false, new WebGLFloatArray(rotMatrix.flatten()));

GL.setModelView(modelMatrix, program);
  GL.setProjection(me.camera, program);

GL.setNormalMatrix(modelMatrix, program);

gl.bindBuffer(gl.ARRAY_BUFFER, planets.randomBuffer);
  gl.vertexAttribPointer(gl.getAttribLocation(program, "aRandomVertex"), 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, planets.sphereBuffer);
  gl.vertexAttribPointer(gl.getAttribLocation(program, "aSphereVertex"), 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, planets.khronosBuffer);
  gl.vertexAttribPointer(gl.getAttribLocation(program, "aKhronosVertex"), 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, planets.khronosColorBuffer);
  gl.vertexAttribPointer(gl.getAttribLocation(program, "aKhronosColor"), 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, planets.webglBuffer);
  gl.vertexAttribPointer(gl.getAttribLocation(program, "aWebglVertex"), 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, planets.webglColorBuffer);
  gl.vertexAttribPointer(gl.getAttribLocation(program, "aWebglColor"), 3, gl.FLOAT, false, 0, 0);

gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, planets.earthTexture);

gl.drawArrays(gl.POINTS, 0, numPlanets);

gl.disable(gl.BLEND);
  gl.depthMask(true);
  gl.viewport(0,0,settings.width,settings.height);

}

function setBlurKernel() {
  return;

var kernel = [
    1.0,   4.0,   7.0,   4.0,  1.0,
    4.0,  20.0,  33.0,  20.0,  4.0,
    7.0,  33.0,  55.0,  33.0,  7.0,
    4.0,  20.0,  33.0,  20.0,  4.0,
    1.0,   4.0,   7.0,   4.0,  1.0
  ];

// generate kernel (x,y) offsets
  var kernelOffsets = [];
  for (var i=0;i<25;i++) {
    kernelOffsets.push(
      (i % 5 - 2) / settings.width,
      (((i / 5)>>0) - 2) / settings.height
    );
  }

var kernelSum = 0;
  for (var k=0;k<kernel.length;k++)
    kernelSum += kernel[k];
  for (var k=0;k<kernel.length;k++)
    kernel[k] = kernel[k] / kernelSum;

gl.useProgram(programs["floor"]);
  setUniform1fv(programs["floor"], "uKernel", kernel);
  setUniform2fv(programs["floor"], "uKernelOffsets", kernelOffsets);
}

var me = {

programs : {
    "planets" : {
      fragment : ["particle-planet-color"],
      vertex : ["particle-planet"]
    },
    "solid-color" : {
      fragment : [
        "color"
      ],
      vertex : [
        "transform.inc",
        "default"
      ]
    },

"floor" : {
      fragment : [
        "floor"
      ],
      vertex : [
        "floor"
      ]
    }
  },

textures : {
    "earth" : "earthmap1k.jpg",
    "khronos" : "khronos.png",
    "webgl" : "webgl_small.png",
    "metal" : "metal.jpg"
  },

controllers : [
    GL.controllers.galaxyControl
  ],

camera : {
    fov : 60,
    position : $V([0,150,-500]),
    target : $V([0,150,0]),
    up : $V([0,1,0])
  },

setup : function() {

if (settings.backgroundColor) {
      var c = settings.backgroundColor;
      gl.clearColor(c[0], c[1], c[2], 1.0);
    } else {
      gl.clearColor(0.1, 0.1, 0.1, 1.0);
    }

var program = programs["planets"];
    gl.useProgram(program);

var uRadius = gl.getUniformLocation(program, "uRadius");

if (uRadius != null) {
                    gl.uniform1f(uRadius, settings.sphereRadius);
                }

// setup point data

var khronosImage = GL.getTextureImage("khronos");
    var khronosCanvas = document.createElement("canvas");
    var kw = khronosImage.width, kh = khronosImage.height;
    khronosCanvas.width = kw;
    khronosCanvas.height = kh;
    var khronosCtx = khronosCanvas.getContext("2d");
    khronosCtx.drawImage(khronosImage, 0, 0);
    var khronosData = khronosCtx.getImageData(0, 0, kw, kh).data;

var webglImage = GL.getTextureImage("webgl");
    var webglCanvas = document.createElement("canvas");
    var ww = webglImage.width, wh = webglImage.height;
    webglCanvas.width = ww;
    webglCanvas.height = wh;
    var webglCtx = webglCanvas.getContext("2d");
    webglCtx.drawImage(webglImage, 0, 0);
    var webglData = webglCtx.getImageData(0, 0, ww, wh).data;

var data = [];
    while (data.length < numPlanets) {
      var x = (Math.random() - 0.5) * 2;
      var y = (Math.random() - 0.5) * 2;
      var z = (Math.random() - 0.5) * 2;

var dist = Math.sqrt(x*x+y*y+z*z);
      if (dist > 1) 
        continue;

var sx = x / dist * 100 + Math.random() * 5.0 - 2.5;
      var sy = y / dist * 100 + Math.random() * 5.0 - 2.5;
      var sz = z / dist * 100 + Math.random() * 5.0 - 2.5;

x *= 100;
      y *= 100;
      z *= 100;

var p = Math.random() * Math.PI * 2;
      var t = Math.random() * Math.PI;
      var r = 100;

// find a random pixel in the khronos logo
      var ka = 0, p;
      var kx, ky, kr, kg, kb;
      while (!ka) {
        kx = (Math.random() * kw) >> 0;
        ky = (Math.random() * kh) >> 0;
        p = kw*ky*4 + kx*4;
        ka = khronosData[p + 3];
        if (ka) {
          if (khronosData[p] > 160) {
            kr = 255;
            kg = 100;
            kb = 100;
          } else {
            kr = 50;
            kg = 70;
            kb = 100;
          }
        }
      }

// and a pixel in the webgl logo
      var wa = 0;
      var wx, wy, wr, wg, wb;
      while (!wa) {
        wx = (Math.random() * ww) >> 0;
        wy = (Math.random() * wh) >> 0;
        p = ww*wy*4 + wx*4;
        wa = webglData[p + 3];
        if (wa) {
          if (webglData[p] > 100) {
            wr = 255;
            wg = 100;
            wb = 100;
          } else {
            wr = 50;
            wg = 70;
            wb = 100;
          }
        }
      }

data.push({
        random : [x,y,z],
        sphere : [sx,sy,sz],
        khronos : [-(kx - kw * 0.5) * 0.7, -(ky - kh * 0.5) * 0.7 - 70, Math.random() * 10.0],
        khronosColor : [kr/255,kg/255,kb/255],
        webgl : [-(wx - ww * 0.5) * 0.7, -(wy - wh * 0.5) * 0.7 - 50, Math.random() * 10.0],
        webglColor : [wr/255,wg/255,wb/255],
        radius : 1.0 + Math.random() * 0.5
      });
    }

setPlanetData(data);

// floor

floor = GL.shapes.makeQuad(gl, 600);

var program = programs["floor"];
    gl.useProgram(program);

gl.bindBuffer(gl.ARRAY_BUFFER, floor.vertexObject);
    gl.enableVertexAttribArray(gl.getAttribLocation(program, "aVertex"));
    gl.vertexAttribPointer(gl.getAttribLocation(program, "aVertex"), 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, floor.texCoordObject);
    gl.enableVertexAttribArray(gl.getAttribLocation(program, "aTexCoord"));
    gl.vertexAttribPointer(gl.getAttribLocation(program, "aTexCoord"), 2, gl.FLOAT, false, 0, 0);

floor.texture = GL.createTexture("metal");

gl.activeTexture(gl.TEXTURE0);
                defaultTexture = gl.createTexture();
                gl.bindTexture(gl.TEXTURE_2D, defaultTexture);
                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    setUniform1i(program, "uRenderTexture", 0);
    gl.bindTexture(gl.TEXTURE_2D, null);

/*
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, null);
    gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, settings.width, settings.height, 0);
    gl.generateMipmap(gl.TEXTURE_2D);
*/

gl.activeTexture(gl.TEXTURE1);
    setUniform1i(program, "uTexture", 1);
    gl.bindTexture(gl.TEXTURE_2D, floor.texture);

setBlurKernel();

// end of setup

startTime = new Date().getTime() - startTimeOffset;

draw : function(gl, programs) {

// reset the viewport
    gl.viewport(0,0,settings.width,settings.height);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

var time = (new Date().getTime() - startTime);

var camDist = me.camera.position.distanceFrom($V([0,0,0]));

var deltaFactor = Math.min(1, Math.max(0, (camDist - 200) / 300));
    var deltaTime = (time - lastDrawTime);

cameraTime += (time - lastDrawTime) * (0.2 + deltaFactor);
    me.camera.position = $V([
      -300 * Math.sin(cameraTime / 3000) + 300 * Math.cos(cameraTime / 4000),
      150,
      -700 * Math.sin(cameraTime / 3000)
    ]);
    me.camera.target = $V([10,150,10]);

//worldRotation -= deltaTime / 2000;

// render floor

var floorHeight = 50;

var program = programs["planets"];
    gl.useProgram(program);

var reflMatrix = $M([
      [1, 0, 0, 0],
      [0, -1, 0, -2 * floorHeight],
      [0, 0, 1, 0],
      [0, 0, 0, 1]
    ]);

var model = Matrix.Rotation(worldRotation, $V([0,1,0])).ensure4x4();
    var view = Matrix.LookAt(this.camera.position, this.camera.target, this.camera.up);

var proj = GL.setProjection(this.camera, program);

var reflView = model.x(reflMatrix)

drawPlanets(deltaTime, deltaFactor, reflView, [0,0,settings.width,settings.height]);

var program = programs["floor"];
    gl.useProgram(program);

setUniform1f(program, "uBlurAmount", 1.0);

var proj = GL.setProjection(this.camera, program);

var floorMatrix = Matrix.I(4)
      .x(Matrix.Rotation(worldRotation, $V([0,1,0])).ensure4x4())

.x(Matrix.Rotation(Math.PI * 0.5, $V([1,0,0])).ensure4x4())
      .x(Matrix.Translation($V([0,0,-floorHeight])))
    ;

GL.setModelView(floorMatrix, program, true);

var projTex = $M([
      [0.5,  0,    0,    0.5],
      [0,    0.5,  0,    0.5],
      [0,    0,    0.5,  0.5],
      [0,    0,    0,    1  ]
    ]).x(proj);

setUniformMatrix4fv(program, "uProjTexMatrix", false, new WebGLFloatArray(projTex.flatten()));

gl.frontFace(gl.CW);

gl.bindBuffer(gl.ARRAY_BUFFER, floor.vertexObject);
    gl.vertexAttribPointer(gl.getAttribLocation(program, "aVertex"), 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, floor.texCoordObject);
    gl.vertexAttribPointer(gl.getAttribLocation(program, "aTexCoord"), 2, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, floor.indexObject);

gl.activeTexture(gl.TEXTURE0);
    //gl.bindTexture(gl.TEXTURE_2D, null);
    gl.bindTexture(gl.TEXTURE_2D, defaultTexture);
    gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, settings.width, settings.height, 0);

gl.activeTexture(gl.TEXTURE1);
    gl.bindTexture(gl.TEXTURE_2D, floor.texture);

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
    gl.drawElements(gl.TRIANGLE_STRIP, floor.numIndices, gl.UNSIGNED_SHORT, 0);

var rotMatrix = Matrix.Rotation(worldRotation, $V([0,1,0])).ensure4x4();

var mv = Matrix.Translation($V([0,200,0])).x(rotMatrix);

drawPlanets(deltaTime, deltaFactor, mv, [-50,-50,settings.width+100,settings.height+100]);

lastDrawTime = time;

// scene specific methods

getRotation : function() {
    return worldRotation;
  },

setRotation : function(t) {
    worldRotation = t;
  }

}

return me;

}

<html> 
<head>
<title>Worlds of WebGL</title> 
 
  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
  <script type="text/javascript" src="/js/vendor/jquery.mousewheel.js"></script> 
  <script type="text/javascript" src="/attach/webgl/sylvester.js"></script> 
  <script type="text/javascript" src="/attach/webgl/gl.js"></script> 
  <script type="text/javascript" src="/attach/webgl/shapes.js"></script>

</head> 
<body> 
   
  <div class="main"> 
    <div id="title-vertical" class="title"> 
      Worlds of
    </div> 
  </div> 
   
  <div id="title" class="main title"> 
    WebGL
  </div> 
   
   
  <div id="main" class="main"> 
   
    <canvas id="screen" width=800 height=600></canvas> 
   
    <div id="log"></div> 
   
    <div id="nocanvas" style="display:none;"> 
      <h3>Sorry, you need a canvas- and WebGL-enabled browser.</h3> 
    </div> 
   
  </div> 
  <div id="footer" class="main"> 
  A WebGL experiment by Jacob Seidelin 
    <a href="http://blog.nihilogic.dk/2010/03/worlds-of-webgl.html">[blog]</a> 
    <a href="http://www.nihilogic.dk/labs">[labs]</a> 
    <a href="http://feeds2.feedburner.com/nihilogic">[rss]</a> 
  </div>

</body> 
</html>

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* end css reset */
/* ---------------------------- */

body {
  font-family : arial;
  font-size : 13px;
  background-color : rgb(25,25,25);
  color : white;
  padding : 20px;
}

h2 {
  font-size : 24px;
  margin-bottom : 10px;
}

h3 {
  font-size : 18px;
  margin-bottom : 10px;
}

#screen {
/*  border : 1px solid grey;*/
}

#log {
  font-family : "Lucida console", "Courier new";
  font-size : 12px;
  color : grey;
  display : block;
  width : 500px;
  position : absolute;
  top : 0;
/*
  right : 0;
  text-align : right;
*/
  margin : 20px;
}

#log a {
  color : rgb(192,192,192);
}

#nocanvas {
  
  color : rgb(200,152,152);
}

.main {
  width : 800px;
  position : relative;
  margin : 0 auto;
}

#main {
  border : 1px dashed rgb(50,50,50);
}

.title {
  color : rgb(50,50,50);
  font-family : arial black;
  font-size : 32px;
  text-transform : uppercase;
  letter-spacing : 2pt;
}

#title {
   margin : 10px auto 5px;
  padding-left : 5px;
}

#title-vertical {
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg); 
  position : absolute;
  width : 250px;
  left : -147px;
  top : 140px;
}

#footer {
  text-align : center;
  font-size : 11px;
  color : rgb(50,50,50);
  margin-top : 10px;
}

#footer a {
  color : rgb(50,50,50);
  text-decoration : none;
  margin-right : 5px;
  margin-left : 5px;
}

#footer a:hover {
  background-color : rgb(50,50,50);
  color : rgb(25,25,25);

}

Pop out