[
{
"path": "LICENSE",
"content": "Copyright 2019 Shaun Lebron\n\nPermission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.\n"
},
{
"path": "README.md",
"content": "Isometric Blocks\n================\n\n[A tutorial on how to render isometric blocks in the correct order](http://shaunlebron.github.io/IsometricBlocks)\n\n[](http://shaunlebron.github.io/IsometricBlocks)\n"
},
{
"path": "index.htm",
"content": "\n\n\n\n\t\n\t\n\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\n\n\n\n\n\t
Drawing isometric boxes in the correct order
\n\n\t
\nIn an isometric\ndisplay, it can be tricky to draw boxes of various sizes in the correct order\nto keep them appropriately in front of or behind one another. The figure below\nshows an example. The blue box should be drawn first, then green, then red.\n\t
\n\n\t\n\t\t\n\t\t\n\t\t\nFigure 1: The boxes on the left are not drawn in the correct order, whereas the\nboxes on the right are drawn correctly.\n\t\t\n\t\t\n\t\n\n\t
\nWe will explore a simple solution for determining the correct order to draw a\ngiven set of boxes. But first, we must define what we mean by boxes.\n\t
\n\n\t
What do we mean by boxes?
\n\n\t
\nWe define boxes as axis-aligned and non-intersecting\nrectangular prisms. Take a look at the above Figure 1 again. Each box is\nparallel to the x, y, and z axis (i.e.\naxis-aligned). Also, note that the boxes are next to each other but do not\nintersect.\n\t
\n\n\t
Determine if boxes overlap on screen.
\n\n\t
\nFirst of all, if two boxes do not overlap on the screen, then we do not have to\nworry about which one is drawn first. This is the first test we must perform,\nwhich we explore in this section.\n\t
\n\n\t\n\t\t\n\t\t\n\t\t\nFigure 2: No overlap on the left; overlap on the right. (Note: we are talking\nabout overlap on screen, not intersection in space.)\n\t\t\n\t\t\n\t\n\n\t
\nThe silhouettes of the 3D boxes become 2D hexagons in the isometric view, as seen below. We use the\noutline of these silhouettes to test for overlap.\n\t
\n\n\t\n\t\t\n\t\t\n\t\t\nFigure 3: The box silhouettes in an isometric view are simple hexagons. Note\nthat their sides are always parallel to the vertical and two diagonal axes.\n\t\t\n\t\t\n\t\n\n\t
\nWe take advantage of the fact that the hexagon sides are always parallel to\nsome axis. This allows us to easily determine if the hexagons overlap by\nchecking for intersection of their regions on each axis. We add an h\n(horizontal) axis to help.\n\t
\n\n\t\n\t\t\n\t\t\n\t\t\nThe red and blue boxes do not overlap on the h axis, therefore they do not overlap.\nThe green and blue boxes do overlap since their region on every axis overlap.\n\t\t\n\t\t\n\t\n\n\t
\nNow that we have outlined our concept for determining if two boxes overlap\non the screen, we will fill in the details necessary for implementing it.\n\t
\n\n\t
\nThe act of flattening the 3D box into a 2D hexagon involves getting rid of the\nZ coordinate. Notice that increasing a point's Z coordinate by 1 is the same\nas incrementing both X and Y coordinates by 1. Thus, we can add Z to both X\nand Y and drop Z completely. Shown below is the source code for a function\nthat performs this conversion.\n\t
\n\n// Convert a 3D space position to a 2D isometric position.\nfunction spaceToIso(spacePos) {\n\n // New XY position simply adds Z to X and Y.\n var isoX = spacePos.x + spacePos.z;\n var isoY = spacePos.y + spacePos.z;\n\n return{\n x: isoX,\n y: isoY,\n\n // Compute horizontal distance from origin.\n h: (isoX - isoY) * Math.cos(Math.PI/6),\n\n // Compute vertical distance from origin.\n v: (isoX + isoY) / 2;\n };\n}\n\n\t
\nAnd finally, after determining the bounds of each hexagon, we can determine if\nthey overlap by using the source code below.\n\t
\n\nfunction doHexagonsOverlap(hex1, hex2) {\n // Hexagons overlap if and only if all axis regions overlap.\n return (\n\n // test if x regions intersect.\n !(hex1.xmin >= hex2.xmax || hex2.xmin >= hex1.xmax) &&\n\n // test if y regions intersect.\n !(hex1.ymin >= hex2.ymax || hex2.ymin >= hex1.ymax) &&\n\n // test if h regions intersect.\n !(hex1.hmin >= hex2.hmax || hex2.hmin >= hex1.hmax));\n}\n\n\t
\nNow that we have determined if two boxes overlap on the screen, we can begin exploring how to determine which box is in front of the other.\n\t
\n\n\t
Determine which box is in front.
\n\n\t
\nRecall that our boxes do not intersect each other. we can visualize their separation\nas a thin plane between them (see Figure 5 below). After identifying this\nplane, we can determine which box is in front by selecting the one on the\ncorrect side of this plane.\n\t
\n\n\t\n\t\t\n\t\t\n\t\t\n\t\t\nFigure 5: A pair of blocks can be separated in one of three ways shown here.\nThe dark glass illustrates this separation.\n\t\t\n\t\t\n\t\n\n\t
\nWe can find this plane of separation by looking at each axis individually. In\nparticular, we look for an axis which has non-intersecting box ranges (see\nFigure 6 below).\n\t
\n\n\t\n\t\t\n\t\t\n\t\t\nFigure 6: On the left, the blocks are separated on the y-axis. On the right,\nthe blocks are separated on the x-axis. (The z-axis is omitted for simplicity.)\n\t\t\n\t\t\n\t\n\n\t
\nIn Figure 6 above, we have chosen a coordinate system which make lesser values\nof x and y to be closer to the camera. Though not shown, the\nz axis is positive in the up direction, so a greater value makes it\ncloser to the camera.\n\t
\n\n\t
\nThe following is a javascript function for determining if the first block is in\nfront of the second:\n\t
\n\n\tfunction isBoxInFront(box1, box2) {\n\n // test for intersection x-axis\n // (lower x value is in front)\n if (box1.xmin >= box2.xmax) {returnfalse; }\n elseif (box2.xmin >= box1.xmax) {returntrue; }\n\n // test for intersection y-axis\n // (lower y value is in front)\n if (box1.ymin >= box2.ymax) {returnfalse; }\n elseif (box2.ymin >= box1.ymax) {returntrue; }\n\n // test for intersection z-axis\n // (higher z value is in front)\n if (box1.zmin >= box2.zmax) {returntrue; }\n elseif (box2.zmin >= box1.zmax) {returnfalse; }\n\n}\n\n\t
Draw boxes in the correct order.
\n\n\t
\nIn general, a box should not be drawn until all the ones behind it are\ndrawn. Thus, we begin by drawing the boxes that have nothing behind them.\nThen, we can draw the boxes that are only in front of those that are already\ndrawn. This process continues until all boxes are drawn. (See Figure 4 below\nfor an example.)\n\t
\n\n\t\n\t\t\n\t\t\nFigure 4: (1) Nothing is behind blue, so draw it first. (2) Draw green next\nsince blue was the only one behind it and is already drawn. (3) Then draw red,\nsince both blocks that were behind it have been drawn.\n\t\t\n\t\t\n\t\n\n\t
\nTo implement this algorithm, each box must know exactly which boxes are behind\nit. We have already determined how to do this in the last section. A search\nmust be implemented so that each box has a list of boxes behind it.\n\t
\n\n\t
\nYou are now armed with everything you need to know to render isometric boxes in\nthe correct order.\n\t
\n\n\t
A conundrum
\n\n\t
\nIt is possible to have a situation seen in the figure below. The aforementioned drawing\nmethods dictate that we first draw the box with nothing behind it, but this example illustrates\na case where this cannot be done.\n\t
\n\n\t\n\t\t\n\t\t\nHere are three boxes intertwined in a way such that one is always behind\nanother. This prevents us from drawing a first box.\n\t\t\n\t\t\n\t\n\n\t
\nThe figure above cheats by segmenting the orange box into two.\nThis is one method of breaking this type of cycle.\n\t
\n\n\t
\nThere are formal methods used for detecting\nsuch cycles mentioned in the appendix. After detection of a cycle, the blocks in that cycle\ncould be drawn with special clipping regions to respect front boxes or to segment a block or blocks\nthat will break the cycle. These are solutions that I will be exploring and updating this article as\nmy experiments progress.\n\t
\n\n\t\n\t
Appendix
\n\n\t
A formal description of the solution
\n\n\t
\nThis is a special case of the Painter's Algorithm,\nwhich handles occlusion by drawing back-to-front.\n\t
\n\n\t
\nFor those who are interested, our method for determining if hexagons and boxes\nare overlapping is a result of the hyperplane separation theorem.\n\t
\n\n\t
\nAlso, the way in which we determined the drawing order of the boxes is known in graph theory as a topological sort,\nwhich is essentially a depth-first search of a directed graph.\n\t
\n\n\t
\nYou can build a directed graph of the boxes, with directed edges to\nthe boxes that are behind it. Topologically sorting this graph will produce an\nordered list of boxes that can be drawn in that exact order.\n\t
\n\n\t
\nMathematicians will recognize this directed graph as a partially ordered\nset.\n\t
\n\n\t
\nFinally, to prevent the aforementioned cycle conundrum, we can use Tarjan's\nstrongly connection components algorithm. After computing these cycles,\none could either split a block to prevent a cycle, or to use a clipping region\nto prevent drawing over any blocks that are supposed to be in front of it.\n\t
\n\n\t
Alternative Solutions
\n\n\t
\nYou may be able to just use Z-buffering,\nthough drawing order is still important for transparent sprites. Also, if all\nbounding boxes are unit cubes, sorting is much simpler.\n\t
\n\n\t
Full example of working code
\n\n\t
\nAll the diagrams above were created using a simple isometric box renderer\nwritten in Javascript, which applies all the techniques described in this\narticle. You can study the fully annotated source code on IsometricBlocks project on\nGitHub.\n\t
\nThanks to Ted Suzman at buildy for\nintroducing this problem and solution to me. And thanks to adamhayek for further\ninsight on a general solution. And thanks to Slime0 at reddit for pointing out errors in this article by illustrating the cycle example shown in this article, and for illustrating why we cannot deduce relative drawing order between two non-overlapping boxes.\nThanks to Mark Nelson for extra context on painter's algorithm and z-buffering.\n\t
\n\n\t\n\n\t\n\t\t\n\t\t\n\t\n\n\n\n"
},
{
"path": "src/block.js",
"content": "\n//\nIsoBlock.Block = function(pos,size,color) {\n\n\t// position in 3d space (obj with attrs x,y,z)\n\tthis.pos = pos;\n\n\t// size of each dimension (obj with attrs x,y,z)\n\tthis.size = size;\n\n\t// an array of 3 color shades (light,medium,dark - see colors.js)\n\t// (used for pseudo lighting)\n\tthis.color = color || IsoBlock.colors.red;\n};\n\nIsoBlock.Block.prototype = {\n\tgetBounds: function() {\n\t\tvar p = this.pos;\n\t\tvar s = this.size;\n\t\treturn {\n\t\t\txmin: p.x,\n\t\t\txmax: p.x + s.x,\n\t\t\tymin: p.y,\n\t\t\tymax: p.y + s.y,\n\t\t\tzmin: p.z,\n\t\t\tzmax: p.z + s.z,\n\t\t};\n\t},\n};\n"
},
{
"path": "src/camera.js",
"content": "\nIsoBlock.Camera = function(origin,scale) {\n\n\t// the pixel location of the isometric origin.\n\tthis.origin = origin;\n\n\t// number of pixels per isometric unit.\n\tthis.scale = scale;\n\n};\n\n/*\n\nWe have three separate coordinate systems used for different things:\n\n1. Space (3D)\n\n\tWe apply the usual 3D coordinates to define the boxes using x,y,z.\n\n2. Isometric (2D)\n\n\tWhen the 3D space is flattened into an isometric view, we use oblique x and y\n\taxes separated by 120 degrees.\n\n\tAll this does is treat all 3d coordinates as if they are at z=0.\n\n\tFor example, if use have a box at (0,0,0) and we raised it to (0,0,1), it would\n\tlook to be in the exact same position as a box at (1,1,0), so the 2d isometric\n\tcoordinates are (1,1). This is a side effect of the isometric perspective. So\n\tthe isometric 2D coordinates gets the \"apparent\" coordinates for all boxes if\n\tthey were at z=0.\n\n\tThis is accomplished by adding z to x and y. That is all.\n\n\t(Isometric coordinates are useful for determining when boxes overlap on the\n\tscreen.)\n\n3. Screen (2D)\n\n\tBefore drawing, we convert the isometric coordinates to the usual x,y screen\n\tcoordinates.\n\n\tThis is done by multiplying each isometric 2D coordinate by its respective\n\toblique axis vector and taking the sum.\n\n\tWe then multiply this position by \"scale\" value to implement zoom in/out\n\tfeatures for the camera.\n\n\tThen we add to an \"origin\" to implement panning features for the camera.\n\n*/\n\nIsoBlock.Camera.prototype = {\n\n\t// Determine if the given ranges are disjoint (i.e. do not overlap).\n\t// For determining drawing order, this camera considers two\n\t// ranges to be disjoint even if they share an endpoint.\n\t// Thus, we use less-or-equal (<=) instead of strictly less (<).\n\tareRangesDisjoint: function(amin,amax,bmin,bmax) {\n\t\treturn (amax <= bmin || bmax <= amin);\n\t},\n\n\t// Convert 3D space coordinates to flattened 2D isometric coordinates.\n\t// x and y coordinates are oblique axes separated by 120 degrees.\n\t// h,v are the horizontal and vertical distances from the origin.\n\tspaceToIso: function(spacePos) {\n\t\tvar z = (spacePos.z == undefined) ? 0 : spacePos.z;\n\n\t\tvar x = spacePos.x + z;\n\t\tvar y = spacePos.y + z;\n\n\t\treturn {\n\t\t\tx: x,\n\t\t\ty: y,\n\t\t\th: (x-y)*Math.sqrt(3)/2, // Math.cos(Math.PI/6)\n\t\t\tv: (x+y)/2, // Math.sin(Math.PI/6)\n\t\t};\n\t},\n\n\t// Convert the given 2D isometric coordinates to 2D screen coordinates.\n\tisoToScreen: function(isoPos) {\n\t\treturn {\n\t\t\tx: isoPos.h * this.scale + this.origin.x,\n\t\t\ty: -isoPos.v * this.scale + this.origin.y,\n\t\t};\n\t},\n\n\t// Convert the given 3D space coordinates to 2D screen coordinates.\n\tspaceToScreen: function(spacePos) {\n\t\treturn this.isoToScreen(this.spaceToIso(spacePos));\n\t},\n\t\n\t// Get a block's vertices with helpful aliases.\n\t// Each vertex is named from its apparent position in an isometric view.\n\tgetIsoNamedSpaceVerts: function(block) {\n\t\tvar p = block.pos;\n\t\tvar s = block.size;\n\t\t\n\t\treturn {\n\t\t\trightDown: {x:p.x+s.x, y:p.y, z:p.z},\n\t\t\tleftDown: {x:p.x, y:p.y+s.y, z:p.z},\n\t\t\tbackDown: {x:p.x+s.x, y:p.y+s.y, z:p.z},\n\t\t\tfrontDown: {x:p.x, y:p.y, z:p.z},\n\t\t\trightUp: {x:p.x+s.x, y:p.y, z:p.z+s.z},\n\t\t\tleftUp: {x:p.x, y:p.y+s.y, z:p.z+s.z},\n\t\t\tbackUp: {x:p.x+s.x, y:p.y+s.y, z:p.z+s.z},\n\t\t\tfrontUp: {x:p.x, y:p.y, z:p.z+s.z},\n\t\t};\n\t},\n\n\t// Get the given block's vertices in flattened 2D isometric coordinates.\n\tgetIsoVerts: function(block) {\n\t\tvar verts = this.getIsoNamedSpaceVerts(block);\n\t\treturn {\n\t\t\tleftDown: this.spaceToIso(verts.leftDown),\n\t\t\trightDown: this.spaceToIso(verts.rightDown),\n\t\t\tbackDown: this.spaceToIso(verts.backDown),\n\t\t\tfrontDown: this.spaceToIso(verts.frontDown),\n\t\t\tleftUp: this.spaceToIso(verts.leftUp),\n\t\t\trightUp: this.spaceToIso(verts.rightUp),\n\t\t\tbackUp: this.spaceToIso(verts.backUp),\n\t\t\tfrontUp: this.spaceToIso(verts.frontUp),\n\t\t};\n\t},\n\n\t// For the given block, get the min and max values on each isometric axis.\n\tgetIsoBounds: function(block) {\n\t\tvar verts = this.getIsoVerts(block);\n\t\treturn {\n\t\t\txmin: verts.frontDown.x,\n\t\t\txmax: verts.backUp.x,\n\t\t\tymin: verts.frontDown.y,\n\t\t\tymax: verts.backUp.y,\n\t\t\thmin: verts.leftDown.h,\n\t\t\thmax: verts.rightDown.h,\n\t\t};\n\t},\n\n\t// Try to find an axis in 2D isometric that separates the two given blocks.\n\t// This helps identify if the the two blocks are overlap on the screen.\n\tgetIsoSepAxis: function(block_a, block_b) {\n\t\tvar a = this.getIsoBounds(block_a);\n\t\tvar b = this.getIsoBounds(block_b);\n\n\t\tvar sepAxis = null;\n\t\tif (this.areRangesDisjoint(a.xmin,a.xmax,b.xmin,b.xmax)) {\n\t\t\tsepAxis = 'x';\n\t\t}\n\t\tif (this.areRangesDisjoint(a.ymin,a.ymax,b.ymin,b.ymax)) {\n\t\t\tsepAxis = 'y';\n\t\t}\n\t\tif (this.areRangesDisjoint(a.hmin,a.hmax,b.hmin,b.hmax)) {\n\t\t\tsepAxis = 'h';\n\t\t}\n\t\treturn sepAxis;\n\t},\n\n\t// Try to find an axis in 3D space that separates the two given blocks.\n\t// This helps identify which block is in front of the other.\n\tgetSpaceSepAxis: function(block_a, block_b) {\n\n\t\tvar sepAxis = null;\n\n\t\tvar a = block_a.getBounds();\n\t\tvar b = block_b.getBounds();\n\n\t\tif (this.areRangesDisjoint(a.xmin,a.xmax,b.xmin,b.xmax)) {\n\t\t\tsepAxis = 'x';\n\t\t}\n\t\telse if (this.areRangesDisjoint(a.ymin,a.ymax,b.ymin,b.ymax)) {\n\t\t\tsepAxis = 'y';\n\t\t}\n\t\telse if (this.areRangesDisjoint(a.zmin,a.zmax,b.zmin,b.zmax)) {\n\t\t\tsepAxis = 'z';\n\t\t}\n\t\treturn sepAxis;\n\t},\n\n\t// In an isometric perspective of the two given blocks, determine\n\t// if they will overlap each other on the screen. If they do, then return\n\t// the block that will appear in front.\n\tgetFrontBlock: function(block_a, block_b) {\n\n\t\t// If no isometric separation axis is found,\n\t\t// then the two blocks do not overlap on the screen.\n\t\t// This means there is no \"front\" block to identify.\n\t\tif (this.getIsoSepAxis(block_a, block_b)) {\n\t\t\treturn null;\n\t\t}\n\n\t\t// Find a 3D separation axis, and use it to determine\n\t\t// which block is in front of the other.\n\t\tvar a = block_a.getBounds();\n\t\tvar b = block_b.getBounds();\n\t\tswitch(this.getSpaceSepAxis(block_a, block_b)) {\n\t\t\tcase 'x': return (a.xmin < b.xmin) ? block_a : block_b;\n\t\t\tcase 'y': return (a.ymin < b.ymin) ? block_a : block_b;\n\t\t\tcase 'z': return (a.zmin < b.zmin) ? block_b : block_a;\n\t\t\tdefault: throw \"blocks must be non-intersecting\";\n\t\t}\n\t},\n};\n"
},
{
"path": "src/colors.js",
"content": "\n// Tango Color Palette\n// http://en.wikipedia.org/wiki/Tango_Desktop_Project#Palette\nIsoBlock.colors = {\n\tyellow: {light:\"#fce94f\", medium:\"#edd400\", dark:\"#c4a000\"},\n\torange: {light:\"#fcaf3e\", medium:\"#f57900\", dark:\"#ce5c00\"},\n\tbrown: {light:\"#e9b96e\", medium:\"#c17d11\", dark:\"#8f5902\"},\n\tgreen: {light:\"#8ae234\", medium:\"#73d216\", dark:\"#4e9a06\"},\n\tblue: {light:\"#729fcf\", medium:\"#3465a4\", dark:\"#204a87\"},\n\tpurple: {light:\"#ad7fa8\", medium:\"#75507b\", dark:\"#5c3566\"},\n\tred: {light:\"#ef2929\", medium:\"#cc0000\", dark:\"#a40000\"},\n\twhite: {light:\"#eeeeec\", medium:\"#d3d7cf\", dark:\"#babdb6\"},\n\tblack: {light:\"#888a85\", medium:\"#555753\", dark:\"#2e3436\"},\n};\n\n// from David at http://stackoverflow.com/a/11508164/142317\nfunction hexToRgb(hex) {\n\n\t// strip out \"#\" if present.\n\tif (hex[0] == \"#\") {\n\t\thex = hex.substring(1);\n\t}\n\n var bigint = parseInt(hex, 16);\n var r = (bigint >> 16) & 255;\n var g = (bigint >> 8) & 255;\n var b = bigint & 255;\n\n return r + \",\" + g + \",\" + b;\n}\n"
},
{
"path": "src/main.js",
"content": "\nvar IsoBlock = IsoBlock || {};\n\nIsoBlock.makeFigure = function(options) {\n\n\t// extract options\n\tvar canvasId = options.canvas;\n\tvar blocks = options.blocks;\n\tvar shouldSortBlocks = (options.sortBlocks == undefined) ? true : options.sortBlocks;\n\tvar shouldDrawAxes = options.drawAxis;\n\tvar shouldDrawPlane = options.drawPlane;\n\tvar axisLen = options.axisLen;\n\tvar silhouette = options.silhouette;\n\n\t// set canvas and context.\n\tvar canvas = document.getElementById(canvasId);\n\tvar ctx = canvas.getContext('2d');\n\n\t// extract scale and origin (camera attributes)\n\tvar scale = (options.scale && options.scale(canvas.width,canvas.height)) || (canvas.height / 8);\n\tvar origin = (options.origin && options.origin(canvas.width,canvas.height)) || {x: canvas.width/2, y: canvas.height };\n\n\t// compute appropriate axis length (assuming origin is horizontally centered)\n\tif (!axisLen) {\n\t\t// make sure the axis extends to the edge of the canvas\n\t\taxisLen = Math.floor((canvas.width - origin.x) / scale / Math.cos(Math.PI/6)) - 0.5;\n\t}\n\n\t// Get horizontal axis' vertical displacement from origin.\n\tvar hAxisV = origin.y/scale - 1;\n\n\t// create camera and painter.\n\tvar camera = new IsoBlock.Camera(origin, scale);\n\tvar painter = new IsoBlock.Painter(camera);\n\n\t// draw the xy grid\n\tfunction drawGrid() {\n\n\t\t// grid step\n\t\tvar step = 1;\n\n\t\t// grid range\n\t\tvar maxx = 15;\n\t\tvar maxy = 15;\n\n\t\t// plot x lines\n\t\tctx.beginPath();\n\t\tfor (x=-maxx; x<=maxx; x+=step) {\n\t\t\tpainter.moveTo(ctx, {x:x, y:-maxy});\n\t\t\tpainter.lineTo(ctx, {x:x, y:maxy});\n\t\t}\n\n\t\t// plot y lines\n\t\tfor (y=-maxy; y<=maxy; y+=step) {\n\t\t\tpainter.moveTo(ctx, {x:-maxx, y:y});\n\t\t\tpainter.lineTo(ctx, {x:maxx, y:y});\n\t\t}\n\n\t\t// draw grid lines\n\t\tctx.strokeStyle = \"#d7d7d7\";\n\t\tctx.lineWidth = 1;\n\t\tctx.stroke();\n\n\t};\n\n\t// draw the xy axes and range bars for each block.\n\tfunction drawAxes() {\n\n\t\tvar axisColor = \"#444\";\n\t\tctx.lineWidth = 1;\n\t\tctx.strokeStyle = axisColor;\n\t\tctx.fillStyle = axisColor;\n\t\tvar arrowSize = 0.3;\n\n\t\t// draw x,y axes (and h axis if silhouette)\n\t\tvar xAxisStart = camera.spaceToIso({x:-axisLen, y:0});\n\t\tvar xAxisEnd = camera.spaceToIso({x:axisLen, y:0});\n\t\tvar yAxisStart = camera.spaceToIso({x:0, y:-axisLen});\n\t\tvar yAxisEnd = camera.spaceToIso({x:0, y:axisLen});\n\t\tvar hAxisStart = {h:yAxisEnd.h, v:hAxisV};\n\t\tvar hAxisEnd = {h:xAxisEnd.h, v:hAxisV};\n\t\tctx.beginPath();\n\t\tpainter.moveTo(ctx, xAxisStart);\n\t\tpainter.lineTo(ctx, xAxisEnd);\n\t\tpainter.moveTo(ctx, yAxisStart);\n\t\tpainter.lineTo(ctx, yAxisEnd);\n\t\tif (silhouette) {\n\t\t\tpainter.moveTo(ctx, hAxisStart);\n\t\t\tpainter.lineTo(ctx, hAxisEnd);\n\t\t}\n\t\tctx.stroke();\n\n\t\t// draw x-axis arrow\n\t\tctx.beginPath();\n\t\tpainter.moveTo(ctx, {x:axisLen, y:0});\n\t\tpainter.lineTo(ctx, {x:axisLen-arrowSize, y:-arrowSize});\n\t\tpainter.lineTo(ctx, {x:axisLen-arrowSize, y:arrowSize});\n\t\tctx.closePath();\n\t\tctx.fill();\n\n\t\t// draw y-axis arrow\n\t\tctx.beginPath();\n\t\tpainter.moveTo(ctx, {y:axisLen, x:0});\n\t\tpainter.lineTo(ctx, {y:axisLen-arrowSize, x:-arrowSize});\n\t\tpainter.lineTo(ctx, {y:axisLen-arrowSize, x:arrowSize});\n\t\tctx.closePath();\n\t\tctx.fill();\n\n\t\t// draw h-axis arrow\n\t\tif (silhouette) {\n\t\t\tctx.beginPath();\n\t\t\tpainter.moveTo(ctx, hAxisStart);\n\t\t\tpainter.lineTo(ctx, {h:hAxisStart.h+arrowSize, v:hAxisV+arrowSize});\n\t\t\tpainter.lineTo(ctx, {h:hAxisStart.h+arrowSize, v:hAxisV-arrowSize});\n\t\t\tctx.closePath();\n\t\t\tctx.fill();\n\t\t\tctx.beginPath();\n\t\t\tpainter.moveTo(ctx, hAxisEnd);\n\t\t\tpainter.lineTo(ctx, {h:hAxisEnd.h-arrowSize, v:hAxisV+arrowSize});\n\t\t\tpainter.lineTo(ctx, {h:hAxisEnd.h-arrowSize, v:hAxisV-arrowSize});\n\t\t\tctx.closePath();\n\t\t\tctx.fill();\n\t\t}\n\n\t\t// draw axis labels\n\t\tvar p = painter.transform({x:axisLen-1, y:-1});\n\t\tctx.font = \"italic 1em serif\";\n\t\tctx.textBaseline='middle';\n\t\tctx.textAlign='right';\n\t\tctx.fillText(\"x\",p.x,p.y);\n\t\tp = painter.transform({x:-1, y:axisLen-1});\n\t\tctx.textAlign='left';\n\t\tctx.fillText(\"y\",p.x,p.y);\n\t\tif (silhouette) {\n\t\t\tp = painter.transform({h:hAxisEnd.h, v:hAxisV-1});\n\t\t\tctx.textAlign='right';\n\t\t\tctx.fillText(\"h\",p.x,p.y);\n\t\t}\n\t\t\n\t\t// draw axis ranges for each block\n\t\tvar i,len,bounds,color,rgb,minp,maxp;\n\t\tvar s = 0.25;\n\t\tfor (i=0, len=blocks.length; i0 && i==len-1) {\n\t\t\tdrawSeparationPlane(blocks[i], blocks[i-1]);\n\t\t}\n\n\t\t// draw block\n\t\tdrawBlock(blocks[i]);\n\t}\n\n};\n\n"
},
{
"path": "src/painter.js",
"content": "\n// Allows us to paint shapes using isometric coordinates transformed by a given camera.\n// It's basically a wrapper for the canvas context.\nIsoBlock.Painter = function(camera) {\n\tthis.camera = camera;\n};\n\nIsoBlock.Painter.prototype = {\n\n\t// This function allows us to draw using different coordinate systems.\n\t// It accepts a nondescript position vector and tries to detect\n\t// what coordinate system it is in by looking at its properties.\n\t//\t\t(x,y,z) <- treated as a space coordinate\n\t//\t\t(x,y) <- treated as a space coordinate at z=0\n\t// (same as 2D isometric XY)\n\t//\t\t(h,v) <- treated as a special 2D isometric coordinate\n\t// (with horizontal and vertical distance from origin)\n\ttransform: function(pos) {\n\t\tvar x,y,z;\n\t\tif (pos.x != undefined && pos.y != undefined) {\n\t\t\tx = pos.x;\n\t\t\ty = pos.y;\n\t\t\tz = (pos.z == undefined) ? 0 : pos.z;\n\t\t\treturn this.camera.spaceToScreen({x:x, y:y, z:z});\n\t\t}\n\t\telse if (pos.h != undefined && pos.v != undefined) {\n\t\t\treturn this.camera.isoToScreen(pos);\n\t\t}\n\t\telse {\n\t\t\tconsole.log(\"x\",pos.x,\"y\",pos.y,\"z\",pos.z,\"h\",pos.h,\"v\",pos.v);\n\t\t\tthrow \"painter.transform: Unable to detect coordinate system of given vector\";\n\t\t}\n\t},\n\tmoveTo: function(ctx, pos) {\n\t\tvar v = this.transform(pos);\n\t\tctx.moveTo(v.x,v.y);\n\t},\n\tlineTo: function(ctx, pos) {\n\t\tvar v = this.transform(pos);\n\t\tctx.lineTo(v.x,v.y);\n\t},\n\tquad: function(ctx, p1, p2, p3, p4) {\n\t\tthis.moveTo(ctx, p1);\n\t\tthis.lineTo(ctx, p2);\n\t\tthis.lineTo(ctx, p3);\n\t\tthis.lineTo(ctx, p4);\n\t},\n\tfillQuad: function(ctx, p1, p2, p3, p4, color, lineWidth) {\n\t\tctx.beginPath();\n\t\tthis.quad(ctx,p1,p2,p3,p4);\n\t\tctx.closePath();\n\t\tctx.fillStyle = color;\n\t\tctx.fill();\n\t\tif (lineWidth) {\n\t\t\tctx.lineWidth = lineWidth;\n\t\t\tctx.strokeStyle = color;\n\t\t\tctx.stroke();\n\t\t}\n\t},\n\tfillQuadGradient: function(ctx, p1, p2, p3, p4, color1, color2) {\n\t\tvar v1 = this.transform(p1);\n\t\tvar v4 = this.transform(p4);\n\t\tvar v2 = this.transform(p2);\n\t\tvar dx = v4.x-v1.x;\n\t\tvar dy = v4.y-v1.y;\n\t\tvar dist = Math.sqrt(dx*dx+dy*dy);\n\t\tdx /= dist;\n\t\tdy /= dist;\n\t\tvar dx2 = v2.x-v1.x;\n\t\tvar dy2 = v2.y-v1.y;\n\t\tdist = Math.sqrt(dx2*dx2+dy2*dy2);\n\t\tdx *= dist;\n\t\tdy *= dist;\n\t\t\n\t\t\n\t\t//var grad = ctx.createLinearGradient(v1.x, v1.y, v2.x, v2.y);\n\t\tvar grad = ctx.createLinearGradient(v1.x,v1.y, v1.x-dy, v1.y+dx);\n\t\tgrad.addColorStop(0, color1);\n\t\tgrad.addColorStop(1, color2);\n\t\tthis.fillQuad(ctx, p1,p2,p3,p4, grad);\n\t},\n\tstrokeQuad: function(ctx, p1, p2, p3, p4, color, lineWidth) {\n\t\tctx.beginPath();\n\t\tthis.quad(ctx,p1,p2,p3,p4);\n\t\tctx.closePath();\n\t\tctx.strokeStyle = color;\n\t\tctx.lineWidth = lineWidth;\n\t\tctx.lineJoin = \"round\";\n\t\tctx.stroke();\n\t},\n\tline: function(ctx, p1, p2, color, lineWidth) {\n\t\tctx.beginPath();\n\t\tthis.moveTo(ctx, p1);\n\t\tthis.lineTo(ctx, p2);\n\t\tctx.strokeStyle = color;\n\t\tctx.lineCap = 'butt';\n\t\tctx.lineWidth = lineWidth;\n\t\tctx.stroke();\n\t},\n\tfillCircle: function(ctx, p1, radius, color) {\n\t\tvar v = this.transform(p1);\n\t\tctx.beginPath();\n\t\tctx.arc(v.x,v.y,radius,0,2*Math.PI);\n\t\tctx.fillStyle = color;\n\t\tctx.fill();\n\t},\n\tstrokeCircle: function(ctx, p1, radius, color) {\n\t\tvar v = this.transform(p1);\n\t\tctx.beginPath();\n\t\tctx.arc(v.x,v.y,radius,0,2*Math.PI);\n\t\tctx.fillStyle = color;\n\t\tctx.fill();\n\t},\n};\n"
},
{
"path": "src/sortBlocks.js",
"content": "// From kennebec at http://stackoverflow.com/a/3955096/142317\n// Add a remove value function to the Array class.\nArray.prototype.remove = function() {\n var what, a = arguments, L = a.length, ax;\n while (L && this.length) {\n what = a[--L];\n while ((ax = this.indexOf(what)) !== -1) {\n this.splice(ax, 1);\n }\n }\n return this;\n};\n\n// Sort blocks in the order that they should be drawn for the given camera.\nIsoBlock.sortBlocks = function(blocks, camera) {\n\n\tvar i, j, numBlocks=blocks.length;\n\n\t// Initialize the list of blocks that each block is behind.\n\tfor (i=0; i 0) {\n\n\t\t// Draw block by removing one from \"to draw\" and adding\n\t\t// it to the end of our \"drawn\" list.\n\t\tvar block = blocksToDraw.pop();\n\t\tblocksDrawn.push(block);\n\n\t\t// Tell blocks in front of the one we just drew\n\t\t// that they can stop waiting on it.\n\t\tfor (j=0; j
![\"Fork](\"https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png\")