var cubeSize = 50; var cubeWidth = cubeSize; var cubeHeight = cubeSize; var cubeLength = cubeSize; var yOffSet = 150; var xOffSet = 120; var zOffSet = 50; var worldWidth=40; var worldHeight=20; var worldLength=40; var up = right = down = left = forward = backward = r1 = r2 = r3 = isPaused = false; var x = -150, y = 150, z = -150, rx = 20, ry = -45, rz = -20; var speed = 3; var width, height, length, screenPoints; var d = {}, rtr= []; 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); } } //cubeTypes array var cubeTypes = new Array(worldWidth) for (var i = 0; i < cubeTypes.length; i++) { cubeTypes[i] = new Array(worldHeight); for (var j = 0; j < cubeTypes[i].length; j++) { cubeTypes[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 = worldWidth-1; i >= 0; i--) for(var j = worldHeight-1; j >= 0; j--) for(var k = worldLength-1; k >= 0; k--) newWorld(i, j, k, cubeWidth, cubeHeight, cubeLength); ctx.translate(xOffSet, yOffSet); generateWorld(); } function rand(number) { return Math.round(Math.random() * number); } function typeToColour(type) { colour = new Array(6); switch(type) { case "air": colour = ["transparent", "transparent", "transparent", "transparent", "transparent", "transparent"]; break; case "dirt": colour = ["#DEB887", "#DEB887", "#DEB887", "#DEB887", "#DEB887", "#DEB887"]; break; case "grass": colour = ["#DEB887", "#DEB887", "#DEB887", "#DEB887", "#228B22", "#DEB887"]; break; case "sand": color = ["#F5DEB3", "#F5DEB3", "#F5DEB3", "#F5DEB3", "#F5DEB3", "#F5DEB3"]; break; case "stone": colour = ["#A9A9A9", "#A9A9A9", "#A9A9A9", "#A9A9A9", "#A9A9A9", "#A9A9A9"]; break; case "wood": colour = ["#a76b29", "#a76b29", "#a76b29", "#a76b29", "#DAA520", "#DAA520"]; break; case "leaf": colour = ["#4da83b", "#4da83b", "#4da83b", "#4da83b", "#4da83b", "#4da83b"]; break; case "water": //colour = ["#74e7ee", "#74e7ee", "#74e7ee", "#74e7ee", "#74e7ee", "#74e7ee"]; var alp = 0.8; colour = ["rgba(116, 231, 238, "+alp+")", "rgba(116, 231, 238, "+alp+")", "rgba(116, 231, 238, "+alp+")", "rgba(116, 231, 238, "+alp+")", "rgba(116, 231, 238, "+alp+")", "rgba(116, 231, 238, "+alp+")"]; break; } return colour; } 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); rtr[i] = zzz; } return TransformedPointsArray; } function shape(points, col) { //square("black", "transparent", points[], points[], points[], points[]); //front square("black", col[0], points[0], points[1], points[2], points[3]); //back square("black", col[1], points[5], points[4], points[7], points[6]); //left square("black", col[2], points[4], points[5], points[1], points[0]); //right square("black", col[3], points[3], points[2], points[6], points[7]); //top square("black", col[4], points[4], points[0], points[3], points[7]); //bottom square("black", col[5], points[1], points[5], points[6], points[2]); } function square(stroke,fill,p1,p2,p3,p4) { if(isVisibleBetween(p1, p2, p3) && fill!="transparent") { 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 = stroke; ctx.fillStyle = fill; } function begin() { ctx.beginPath(); } function stroke() { ctx.stroke(); } function end() { ctx.closePath();ctx.stroke(); ctx.fill(); // } 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 = right = down = left = forward = backward = r1 = r2 = r3 = isPaused = false; x = -150, y = 150, z = -150, rx = 20, ry = -45, rz = -20; } /*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"; }*/ function generateWorld() { var x, y, z, i; //clearing world for(x = 0; x < worldWidth; x++) for(y = 0; y < worldHeight; y++) for(z = 0; z < worldLength; z++) cubeTypes[x][y][z] = typeToColour("air"); //generating dirt for(y = 0; y < worldHeight; y++) for(x = 0; x < worldWidth; x++) for(z = 0; z < worldLength; z++) { if(y > worldHeight / 3) { if(rand(100) <30) try { if(sameType(cubeTypes[x][y-1][z-1],typeToColour("dirt"))) cubeTypes[x][y][z] = typeToColour("dirt"); } catch(e) {} if(rand(100) < 40) try { if(sameType(cubeTypes[x][y-1][z+1],typeToColour("dirt"))) cubeTypes[x][y][z] = typeToColour("dirt"); } catch(e) {} if(rand(100) < 30) try { if(sameType(cubeTypes[x-1][y-1][z],typeToColour("dirt"))) cubeTypes[x][y][z] = typeToColour("dirt"); } catch(e) {} if(rand(100) < 40) try { if(sameType(cubeTypes[x+1][y-1][z],typeToColour("dirt"))) cubeTypes[x][y][z] = typeToColour("dirt"); } catch(e) {} try { if(sameType(cubeTypes[x][y][z],typeToColour("air")) && sameType(cubeTypes[x][y-1][z],typeToColour("dirt"))) cubeTypes[x][y][z] = typeToColour("dirt"); } catch(e) {} if(rand(100) < 5) { cubeTypes[x][y][z] = typeToColour("dirt"); } } } //making wood for(y = 0; y < worldHeight; y++) for(x = 0; x < worldWidth; x++) for(z = 0; z < worldLength; z++) { try { if(sameType(cubeTypes[x][y + 1][z],typeToColour("dirt")) && sameType(cubeTypes[x][y][z], typeToColour("air"))) { if(rand(100) < 2) { var j = y; var k = rand(4) + 3; for(i = 0; i < k; i++) { cubeTypes[x][y-i][z] = typeToColour("wood"); if(i==(k-1)) { y -= i; try { //center cubeTypes[x][y-1][z] = typeToColour("leaf"); //center fill (with points) cubeTypes[x-1][y-1][z] = typeToColour("leaf"); cubeTypes[x-1][y-1][z-1] = typeToColour("leaf"); cubeTypes[x][y-1][z-1] = typeToColour("leaf"); cubeTypes[x+1][y-1][z-1] = typeToColour("leaf"); cubeTypes[x+1][y-1][z] = typeToColour("leaf"); cubeTypes[x+1][y-1][z+1] = typeToColour("leaf"); cubeTypes[x][y-1][z+1] = typeToColour("leaf"); cubeTypes[x-1][y-1][z+1] = typeToColour("leaf"); cubeTypes[x-2][y-1][z] = typeToColour("leaf"); cubeTypes[x+2][y-1][z] = typeToColour("leaf"); cubeTypes[x][y-1][z-2] = typeToColour("leaf"); cubeTypes[x][y-1][z+2] = typeToColour("leaf"); //1 layer down (with points) cubeTypes[x-1][y][z] = typeToColour("leaf"); cubeTypes[x-1][y][z-1] = typeToColour("leaf"); cubeTypes[x][y][z-1] = typeToColour("leaf"); cubeTypes[x+1][y][z-1] = typeToColour("leaf"); cubeTypes[x+1][y][z] = typeToColour("leaf"); cubeTypes[x+1][y][z+1] = typeToColour("leaf"); cubeTypes[x][y][z+1] = typeToColour("leaf"); cubeTypes[x-1][y][z+1] = typeToColour("leaf"); cubeTypes[x-2][y][z] = typeToColour("leaf"); cubeTypes[x+2][y][z] = typeToColour("leaf"); cubeTypes[x][y][z-2] = typeToColour("leaf"); cubeTypes[x][y][z+2] = typeToColour("leaf"); //2 layer down (except for edges) cubeTypes[x-1][y+1][z] = typeToColour("leaf"); cubeTypes[x][y+1][z-1] = typeToColour("leaf"); cubeTypes[x+1][y+1][z] = typeToColour("leaf"); cubeTypes[x][y+1][z+1] = typeToColour("leaf"); //1 layer up (with center and points) cubeTypes[x][y-2][z] = typeToColour("leaf"); cubeTypes[x-1][y-2][z] = typeToColour("leaf"); cubeTypes[x-1][y-2][z-1] = typeToColour("leaf"); cubeTypes[x][y-2][z-1] = typeToColour("leaf"); cubeTypes[x+1][y-2][z-1] = typeToColour("leaf"); cubeTypes[x+1][y-2][z] = typeToColour("leaf"); cubeTypes[x+1][y-2][z+1] = typeToColour("leaf"); cubeTypes[x][y-2][z+1] = typeToColour("leaf"); cubeTypes[x-1][y-2][z+1] = typeToColour("leaf"); cubeTypes[x-2][y-2][z] = typeToColour("leaf"); cubeTypes[x+2][y-2][z] = typeToColour("leaf"); cubeTypes[x][y-2][z-2] = typeToColour("leaf"); cubeTypes[x][y-2][z+2] = typeToColour("leaf"); //2 layer up (with center except for edges) cubeTypes[x][y-3][z] = typeToColour("leaf"); cubeTypes[x-1][y-3][z] = typeToColour("leaf"); cubeTypes[x][y-3][z-1] = typeToColour("leaf"); cubeTypes[x+1][y-3][z] = typeToColour("leaf"); cubeTypes[x][y-3][z+1] = typeToColour("leaf"); } catch(e) {} } } y = j; } } } catch(e) {} } //making grass for(x = 0; x < worldWidth; x++) for(y = 0; y < worldHeight; y++) for(z = 0; z < worldLength; z++) if( sameType(cubeTypes[x][y][z], typeToColour("dirt")) && sameType(cubeTypes[x][y-1][z], typeToColour("air"))) cubeTypes[x][y][z] = typeToColour("grass"); //making water for(x = 0; x < worldWidth; x++) for(y = 0; y < worldHeight; y++) for(z = 0; z < worldLength; z++) if(y > worldHeight - worldHeight / 2) if(sameType(cubeTypes[x][y][z],typeToColour("air"))) cubeTypes[x][y][z] = typeToColour("water"); ctx.clearRect(-xOffSet, -yOffSet, canvas.width, canvas.height); ctx.strokeRect(-xOffSet, -yOffSet, canvas.width, canvas.height); //show world for(var i = worldWidth-1; i >= 0; i--) for(var j = worldHeight-1; j >= 0; j--) for(var k = worldLength-1; k >= 0; k--) { screenPoints = convertPoints(cubePoints[i][j][k], {x:rx, y:ry, z:rz}); shape(screenPoints, cubeTypes[i][j][k]); } } function sameType(a, b) { a = a.toString(); b = b.toString(); return a==b; } function togglePause() { isPaused = !isPaused; } function readme() { alert("This is the 3rd published 3D test I am working on. The results are terrible."); alert("I made a 2D version a long time ago, and attempted to copy paste that code for 3D.\n\n\nUpsides:\n- I remember how to implement everything\n\nDownsides:\n- 3D brings in a whole new dimension, so time to generate with this algorithm increases by the third power.\n- Code is very messy and hard to read.\n-Code is easily exploited and breaks as features shouldn't.\n-The algorithm generator is messy."); alert("Unfortunately, I had to remove some core features of gameplay, such as rotations and movements, because rendering frame by frame takes too long (large worlds take very long)\n\nDue to my lack of knowledge occlusion and frustrum culling, I end up drawing the cubes furthest to the back and then drawing the closer ones on top. I have no idea how to only draw the cubes visible by camera yet, and as a result it is resource intensive."); alert("Luckily, I'm learning new forms of 3D algorithms (the perlin and simplex specifically) which hacks generation down so it's over 100 times faster. I still have to figure out the culling though, but I hope this world generator is visually pleasing to the eye."); alert("Don't forget to upvote if you like it! (even though it's trash) 😎\n\n\nStay tuned for Danidre's 3D Test #4!\n\n\nThanks for playing!"); }

Dani 3D Test Game #3 [World Generation Fail]