Sol LeWitt 853

Sol LeWitt Wall Drawing 853

Wall Drawing 853: A wall bordered and divided vertically into two parts by a flat black band. Left part: a square is divided vertically by a curvy line. Left: glossy red; right: glossy green; Right part: a square is divided horizontally by a curvy line. Top: glossy blue; bottom: glossy orange.

Using D3.js's area() and random number generation to create unique implementations of 853. Learn more at cagrimmett.com.

<html>
<head>
	<title>Sol LeWitt 853</title>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
			border: 40px solid #111;
			min-width: 600px;
		}
		#left {
			width: calc(50% - 20px);
			height: 100%;
			margin: 0;
			padding: 0;
			border-right: 20px solid #111;
			background: #169A52;
			display: inline-block;
		}
		#right {
			width:calc(50% - 20px);
			height: 100%;
			margin: 0;
			padding: 0;
			border-left: 20px solid #111;
			background: #1174B8;
			display: inline-block;			
		}
	</style>
</head>
<body>

function sol853() {	
var ww = window.innerWidth,
	wh = window.innerHeight - 80,
	halfwidth = ww/2 - 60;

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

var fillLeft = fillLeft();
console.log(fillLeft);
console.log(fillLeft.sort(function(a,b) { return +a.y - +b.y; }));

var fillRight = fillRight();
console.log(fillRight);
console.log(fillRight.sort(function(a,b) { return +a.x - +b.x; }));

var areaLeft = d3.area()
	.x0(0)
    .x1(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .curve(d3.curveBasis);
	
console.log(areaLeft);

var chart = d3.select("#left").append("svg")
	.attr("width", halfwidth)
	.attr("height", wh)
	.append("path")
    .datum(fillLeft)
    .attr("class", "areaLeft")
    .attr("d", areaLeft)
    .attr("fill","#AE1F26");

var chart = d3.select("#right").append("svg")
	.attr("width", halfwidth)
	.attr("height", wh)
	.append("path")
    .datum(fillRight)
    .attr("class", "areaRight")
    .attr("d", areaRight)
    .attr("fill","#F5361D");

}

// run on load
sol853();

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 300);
});

//resize on resizeEnd function
$(window).bind('resizeEnd', function() {
	 d3.selectAll("svg").remove();
	 sol853();
});
	
</script>

https://d3js.org/d3.v4.min.js

https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js