So I was playing around with the code for inkblot and was curious if i could make it 2 way mirrored instead of just 1. Ill walk through the changes and the reasoning behind them.

Initially I thought it would be just easy like mirroring the vertical axis, until i realized that instead of having a mirrored pair, I would have quadrants to mirror. So I went with something like this.
B | C
- + -
A | D

Then I had to reflect those changes in the CSS:
    .row{             /*basic rows*/
    float:left;
    clear:left;
}

.box {          /*columns in row to form a grid*/
    float:left;
    width:20px;
    height:20px;
      background-color:white;
    /*border:1px solid;*/
}
    /*
    B | C
    - + -
    A | D
    */

.t1a, .t1b, .t1c, .t1d {    /*creates a box*/
    width:20px;
    height:20px;
    background-color:black;
}
.t2a, .t3d, .t4b, .t5c {  /*Top Left Triangle*/
    width:0px;
    height:0xpx;
    border-top: 20px solid black;
    border-right: 20px solid transparent;
}
.t2d, .t3a,.t4c, .t5b  {    /*Top Right Triangle*/
    width:0px;
    height:0xpx;
    border-top: 20px solid black;
    border-left: 20px solid transparent;
}
.t2b, .t3c, .t4a, .t5d  {  /*Bottom Left Triangle*/
    width:0px;
    height:0xpx;
    border-bottom: 20px solid black;
    border-right: 20px solid transparent;
}
.t2c, .t3b, .t4d, .t5a {     /*Bottom Right Triangle*/
    width:0px;
    height:0xpx;
    border-bottom: 20px solid black;
    border-left: 20px solid transparent;
}

And Consequently there had to be 4 calls per block in the javascript:
//Build Grid
var rows = 30; //set number of rows
var columns = 30; //set number of columns
function build(){
  for (var r = -(rows/2); r < (rows/2)+1; r++){
        if (r != 0){
          var newdiv = "<div class='row' id=row_"+r+"></div>";  //create new row
          $('#blotspace').append(newdiv);
        }
	    for (var c= -(columns/2); c < (columns/2)+1;c++){
        if (c != 0){
          //create new box, ranging from negative to positive skipping 0
          $('#row_'+r).append("<div class='box' id=box_"+r+"."+c+"></div>");
        }
	    }
	}
}
//draw inkblots
function draw(){
	$('.ink').remove();
  for (var r = 1; r < (rows/2)+1; r++){
		for (var c = 1; c < (columns/2)+1;c++){
			var n = Math.floor(Math.random() * 6) //randomly generate number between 0 and 5 which will reference css
			document.getElementById('box_'+r+'.-'+c).innerHTML = "<div class='ink t"+n+"a'></div>";
			document.getElementById('box_-'+r+'.-'+c).innerHTML = "<div class='ink t"+n+"b'></div>";
                        document.getElementById('box_-'+r+'.'+c).innerHTML = "<div class='ink t"+n+"c'></div>";
                        document.getElementById('box_'+r+'.'+c).innerHTML = "<div class='ink t"+n+"d'></div>";
		}
	}
}
$(document).ready(function(){
	build();
	draw();
  var repeat = setInterval(draw,500); // redraw ever second
})