dan's blog

The idea at first was to make a 3D menuing system in Javascript where you choose from potentially hundreds of elements by mousing over an interactive 3D environment. This proof-of-concept is a cube with 64 (4x4x4) elements in it.

For now it's a basic 3D object inspection applet that uses your browser's DOM to store and manipulate a 3D object by plotting a set of points in 3D space using only rectangular DIVs. The 'closer' elements are rendered bigger than the farther ones and use z-indexing for hiding obscured elements. This doesn't use any trigonometric functions -- just integer arithmetic -- so this should be pretty fast even on a slow browser.

Mouse over the applet and see for yourself. Seems to work on every modern browser I've tested except for IE8 -- it seems IE8 particularly has a lot of problems like this in the wild, so I'm not fixing it for this browser yet.

<!-- HERE'S THE SOURCE --> <style> .menu-item {overflow: hidden; border-color: #222244; border-style: solid; border-width: 1px; font-size: 9px; top: -100px; left: 100px;} .menu-item:hover {overflow: hidden; border-color: #222244; border-style: solid; border-width: 3px; font-size: 9px; background-color: #0000ff;} #menu-container {position: relative; top: 0px; left: 0px; width: 600px; height: 400px; overflow: hidden; background-color: #5577cc;} </style> <script type='text/javascript'> n = 4; // Number of elements on the side of the cube, cube will contain n^3 elements; originX = 300; // Half the container height originY = 200; // half the container width d2hx = new Array(); i=0; d2hx[i++]='0'; d2hx[i++]='1'; d2hx[i++]='2'; d2hx[i++]='3'; d2hx[i++]='4'; d2hx[i++]='5'; d2hx[i++]='6'; d2hx[i++]='7'; d2hx[i++]='8'; d2hx[i++]='9'; d2hx[i++]='a'; d2hx[i++]='b'; d2hx[i++]='c'; d2hx[i++]='d'; d2hx[i++]='e'; d2hx[i++]='f'; // Handle mouse events differently for IE and non-IE. var IE = document.all?true:false if (!IE) document.getElementById('menu-container').captureEvents(Event.MOUSEMOVE) function resetMenu() { for (i=0;i<n*n*n;i++) { createElement(document.getElementById('menu-container'), i); } containerX = findPosX(document.getElementById('menu-container')); containerY = findPosY(document.getElementById('menu-container')); document.getElementById('menu-container').onmousemove = moveMenu; } function findPosX(obj) { var curleft = 0; if (obj.offsetParent) { while (1) { curleft+=obj.offsetLeft; if (!obj.offsetParent) { break; } obj=obj.offsetParent; } } else if (obj.x) { curleft+=obj.x; } return curleft; } function findPosY(obj) { var curtop = 0; if (obj.offsetParent) { while (1) { curtop+=obj.offsetTop; if (!obj.offsetParent) { break; } obj=obj.offsetParent; } } else if (obj.y) { curtop+=obj.y; } return curtop; } function createElement(parent, elementId) { // create element on DOM tree under container this.div = document.createElement('div'); parent.appendChild(this.div); this.div.setAttribute('id','menu' + elementId); this.div.className = 'menu-item'; this.div.style.backgroundColor = '#' + d2hx[Math.floor(elementId)%5+11] + d2hx[Math.floor(elementId*3)%15] + d2hx[Math.floor(elementId*5)%4+12] + d2hx[Math.floor(elementId*7)%15] + d2hx[Math.floor(elementId*11)%3+13] + d2hx[Math.floor(elementId*13)%15]; //this.div.style.backgroundColor = '#eeeeff'; //this.div.style.zIndex = 1000 - Math.floor(elementId); this.div.style.position = 'absolute'; //this.div.style.width = '40px'; //this.div.style.height = '40px'; this.div.innerHTML = elementId; //this.div.onmouseover = function(){ this.className += 'hover'; }; //this.div.onmouseout = function(){ this.className = this.className.replace(/\bhover\b/, ''); }; this.div.onmouseover = function(){ this.className = 'menu-item:hover'; }; this.div.onmouseout = function(){ this.className = 'menu-item'; }; } function moveMenu(evt) { var e = new Object(); if (IE) { // Get absolute mouse coordinates mouseX = event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); mouseY = event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); } else { mouseX = evt.pageX; mouseY = evt.pageY; } containerMouseX = mouseX-containerX-originX; //translate to coordinates relative to center of container containerMouseY = mouseY-containerY-originY; //document.getElementById('MouseX').innerHTML = containerMouseX; //display coordinates for debugging //document.getElementById('MouseY').innerHTML = containerMouseY; screenX = containerMouseX; screenY = containerMouseY; var obj = new Array(); for (i=0;i<n;i++) { for (j=0;j<n;j++) { for (k=0;k<n;k++) { index = i*n*n+j*n+k; obj[index] = document.getElementById('menu' + index); ii = i-(n-1)/2; // 3D Coordinates for each element jj = j-(n-1)/2; kk = k-(n-1)/2; X=(0-ii-ii-jj+kk+kk)/2; // Rotate 3D coordinates Y=(0+ii+jj+jj+kk+kk)/2; Z=(0-ii-ii+jj+jj-kk)/2; distortX = screenX+X; // Crude, fast, 'good-enough' distortions for rendering perspective distortY = screenY+Y; screenZ = ((distortX*distortX/100000)+(distortY*distortY/100000)-(Z-5))*50; size = Math.floor(10000/(screenZ+150)) + 'px'; obj[index].style.left = Math.floor(((X*50)-screenX)/(screenZ+150)*350)+originX + 'px'; obj[index].style.top = Math.floor(((Y-0)*50-screenY)/(screenZ+150)*350)+originY + 'px'; obj[index].style.zIndex = Math.floor(2000-screenZ); obj[index].style.width = size; obj[index].style.height = size; //innerHTML } } } } </script> <div id='menu-container'></div> <!-- END SOURCE -->

A Javascript for calculating and running a simple ASCII movie.

It uses the setTimeout and clearTimeout methods in Javascript as well as Javascript's built in integer arithmetic functions and arrays -- all the calculating, arithmetic and data storage are done by your browser, so it is very scalable and lightweight (for the server at least).

This is a web application proof-of-concept for visualization of data and mathematical concepts. It has 80x20 'pixels' in it with 2-bit 'color' -- 4 values for each pixel.