The Artist


Javascript abstract art! Click on the canvas for another masterpiece.

The current implementation uses a recursive function to split the canvas up into mini boxes. This is then ajusted to add a random factor in splitting and corrected to ensure that the boxes are of a minimum size.

 // globals
var minWidth, minHeight; var render = function(canvasId) { var canvas = document.getElementById(canvasId); var cWidth = canvas.width; var cHeight = canvas.height; var depth = 4; if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, cWidth, cHeight); try { splitGrid(ctx, depth, 0, 0, cWidth, cHeight); } catch (err) { console.error(err); } }
} /** * Split a given bounding box width-wise randomly and * for each width split, create 2 vertical bounding boxes. * * Depending on the depth, recursively call to split the grid further * or simply fill the bounding box using a similar algorithm */
var splitGrid = function(ctx, depth, gx, gy, cWidth, cHeight) { if (depth % 2 !== 0 || depth < 2) { throw new Error('depth needs to be a multiple of 2 (min 2)'); } var x = 0, y = 0, width = 0, height = 0; // // start at 0 and then loop until the width has been reached, splitting on each loop // // note that while the algorithm works on x, y, width and height as a bounding box // the actual values that need to be passed along need to be corrected via gx and gy // so that the final drawing on the context knows where to go. // while (x < cWidth) { // reset y to 0, we split our box vertically only once y = 0; // get the minimum width (relative to the depth) // then correct for overflow to keep it smooth // also need to check for shady widths if (cWidth <= width="cWidth;"> cWidth) { width = cWidth - x; } // similar concept with height except no last box correction required as we only split it once if (cHeight <= height="cHeight;" width=""> cWidth) { width = cWidth - x; } if (cHeight <= height="cHeight;"> 

See also JavaScript Art: Triangles for a simpler concept.

Feel free to send me an email with a screenshot of your favorite canvas :)