var cubeSize = 50; var cubeWidth = cubeSize; var cubeHeight = cubeSize; var cubeLength = cubeSize; var yOffSet = 150; var xOffSet = 120; var zOffSet = 50; var worldWidth=1; var worldHeight=1; var worldLength=1; var up = false, right = false, down = false, left = false, forward = false, backward = false, r1 = false, r2 = false, r3 = false; var x = 0, y = 0, z = 0, rx = 0, ry = 0, rz = 0, fps = 0; var speed = 3; var width, height, length, screenPoints; var d = {}; var canvas, ctx; //cubePoints array var cubePoints = new Array(worldWidth); for (var i = 0; i < cubePoints.length; i++) { cubePoints[i] = new Array(worldHeight); for (var j = 0; j < cubePoints[i].length; j++) { cubePoints[i][j] = new Array(worldLength); } } window.onload = function() { canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); width = canvas.width; height = canvas.height; length = 500; xOffSet = width / 2; yOffSet = height / 2; //generate world for(var i = 0; i < worldWidth; i++) for(var j = 0; j < worldHeight; j++) for(var k = 0; k < worldLength; k++) newWorld(i, j, k, cubeWidth, cubeHeight, cubeLength); //displays go here d.x = document.getElementById("x"); d.y = document.getElementById("y"); d.z = document.getElementById("z"); d.rx = document.getElementById("rx"); d.ry = document.getElementById("ry"); ctx.translate(xOffSet, yOffSet); (function drawFrame () { fps = Date.now(); window.requestAnimationFrame(drawFrame, canvas); ctx.clearRect(-xOffSet, -yOffSet, canvas.width, canvas.height); ctx.strokeRect(-xOffSet, -yOffSet, canvas.width, canvas.height); d.x.value = x; d.y.value = y; d.z.value = z; d.rx.value = rx; d.ry.value = ry; // animation code goes here for(var i = 0; i < worldWidth; i++) for(var j = 0; j < worldHeight; j++) for(var k = 0; k < worldLength; k++) { screenPoints = convertPoints(cubePoints[i][j][k], {x:rx, y:ry, z:0}); shape(screenPoints); } //drawText(1, "SoloLearn"); if(up) y -= speed; if(down) y += speed; if(left) x -= speed; if(right) x += speed; if(forward) z += speed; if(backward) z -= speed; if(r1) rx += speed; if(r2) ry += speed; document.getElementById("fps").value = 1000 / (Date.now() - fps); }()); } function newWorld(x, y, z, w, h, l) { var i = x, j = y, k = z; x*=w; y*=h; z*=l; cubePoints[i][j][k] = makeVertices(x, y, z, w, h, l); } function makeVertices(x, y, z, w, h, l) { var vertexes = []; vertexes[0] = make3DPoint(x, y, z); vertexes[1] = make3DPoint(x, y + h, z); vertexes[2] = make3DPoint(x + w, y + h, z); vertexes[3] = make3DPoint(x + w, y, z); vertexes[4] = make3DPoint(x, y, z + l); vertexes[5] = make3DPoint(x, y + h, z + l); vertexes[6] = make3DPoint(x + w, y + h, z + l); vertexes[7] = make3DPoint(x + w, y, z + l); return vertexes; } function convertPoints(points, r){//from 3D to 2D var TransformedPointsArray = []; var radx = (Math.PI / 180) * r.x; var rady = (Math.PI / 180) * r.y; var radz = (Math.PI / 180) * r.z; var sinx = Math.sin(radx); var siny = Math.sin(rady); var sinz = Math.sin(radz); var cosx = Math.cos(radx); var cosy = Math.cos(rady); var cosz = Math.cos(radz); var x, y, z, xx, xy, xz, yx, yy, yz, zx, zy, zz, xxx, yyy, zzz; var tx, ty, tz; var i = points.length; //X axis xx = cosy*cosz; xy = -cosy*sinz*cosx+siny*sinx; xz = cosy*sinz*sinx+siny*cosx; //Y axis yx = sinz; yy = cosz*cosx; yz = -cosz*sinx; //Z axis zx = -siny*cosz; zy = siny*sinz*cosx+cosy*sinx; zz = -siny*sinz*sinx+cosy*cosx; while (i--){ tx = points[i].x - this.x; ty = points[i].y - this.y; tz = points[i].z - this.z; xxx = tx*xx + ty*xy + tz*xz ; yyy = tx*yx + ty*yy + tz*yz ; zzz = tx*zx + ty*zy + tz*zz ; z = length/(length + zzz); x = xxx*z; y = yyy*z; TransformedPointsArray[i] = make2DPoint(x, y); } return TransformedPointsArray; } function shape(points) { //square("black", "transparent", points[], points[], points[], points[]); //front square("black", "purple", points[0], points[1], points[2], points[3]); //back square("black", "cyan", points[5], points[4], points[7], points[6]); //left square("black", "green", points[4], points[5], points[1], points[0]); //right square("black", "red", points[3], points[2], points[6], points[7]); //top square("black", "yellow", points[4], points[0], points[3], points[7]); //bottom square("black", "blue", points[1], points[5], points[6], points[2]); } function square(stroke,fill,p1,p2,p3,p4) { if(isVisibleBetween(p1, p2, p3)) { begin(); color(stroke, fill); draw("move", p1); draw("line", p2); draw("line", p3); draw("line", p4); draw("line", p1); end(); } } function draw(type, p) { if(type==="move") ctx.moveTo(p.x, p.y); else if(type==="line") ctx.lineTo(p.x, p.y); } function isVisibleBetween(A, B, C) { var visibility; if (((B.y-A.y)/(B.x-A.x) - (C.y-A.y)/(C.x-A.x) < 0) ^ (A.x <= B.x == A.x > C.x)) { visibility = false; } else { visibility = true; } return visibility; } function color(stroke, fill) { ctx.strokeStyle = "none"; ctx.fillStyle = fill; } function begin() { ctx.beginPath(); } function stroke() { ctx.stroke(); } function end() { ctx.closePath(); ctx.fill(); ctx.stroke(); } function make3DPoint(x, y, z) { var point = {}; point.x = x; point.y = y; point.z = z; return point; } function make2DPoint(x, y){ var point = {}; point.x = x; point.y = y; return point; } function toggleMove(dir) { switch(dir) { case 1: up = !up; break; case 2: right = !right; break; case 3: down = !down; break; case 4: left = !left; break; case 5: forward = !forward; break; case 6: backward = !backward; break; case 7: r1 = !r1; break; case 8: r2 = !r2; break; case 9: r3 = !r3; break; } } function reset() { up = false, right = false, down = false, left = false, forward = false, backward = false, r1 = false, r2 = false, r3 = false; x = 0, y = 0, z = 0, rx = 0, ry = 0, rz = 0; } /*function drawText(pos, msg) { font("15px Arial"); text(0, cubeHeight, 0, pos, msg.charAt(0)); text(0, 0, 0, pos, msg.charAt(1)); text(cubeWidth, 0, 0, pos, msg.charAt(2)); text(cubeWidth, cubeHeight, 0, pos, msg.charAt(3)); text(0, cubeHeight, cubeLength, pos, msg.charAt(4)); text(0, 0, cubeLength, pos, msg.charAt(5)); text(cubeWidth, 0, cubeLength, pos, msg.charAt(6)); text(cubeWidth, cubeHeight, cubeLength, pos, msg.charAt(7)); } function text(x, y, z, py, s) { var px = xOffSet; py *= cubeHeight + yOffSet; x = (x + z/2) + px; y = (y - z/2) + py; ctx.fillText(s, x, y); } function font(font) { ctx.font = font; ctx.fillStyle = "blue"; }*/

Dani 3D Test Game #2 [Colours and Backface Culling]