Skip to content

Instantly share code, notes, and snippets.

@cagrimmett
Last active December 26, 2019 23:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save cagrimmett/001699690c06042121fdc2f553f451b9 to your computer and use it in GitHub Desktop.
Save cagrimmett/001699690c06042121fdc2f553f451b9 to your computer and use it in GitHub Desktop.
Sol LeWitt 853
license: gpl-3.0

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>
<div id="left"></div><div id="right"></div>
<script>
function sol853() {
var ww = window.innerWidth,
wh = window.innerHeight - 80,
halfwidth = ww/2 - 60;
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
function fillLeft() {
var data = new Array();
for (var point = 0; point < 3; point++) {
var x = getRandomArbitrary(halfwidth/10, halfwidth-halfwidth/10);
var y = getRandomArbitrary(wh/10, wh-wh/10);
data.push({
x: x,
y: y
})
}
data.push({
x: halfwidth/2,
y: 0
});
data.push({
x: halfwidth/2,
y: wh
})
return data;
}
var fillLeft = fillLeft();
console.log(fillLeft);
console.log(fillLeft.sort(function(a,b) { return +a.y - +b.y; }));
function fillRight() {
var data = new Array();
for (var point = 0; point < 3; point++) {
var x = getRandomArbitrary(halfwidth/10, halfwidth-halfwidth/10); // Keeps within the middle 80%
var y = getRandomArbitrary(wh/10, wh-wh/10);
data.push({
x: x,
y: y
})
}
data.push({
x: 0,
y: wh/2
});
data.push({
x: halfwidth,
y: wh/2
})
return data;
}
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 areaRight = d3.area()
.x(function(d) { return d.x; })
//.y0(function(d) { return d.y + 100; })
.y0(wh)
.y1(function(d) { return d.y; })
.curve(d3.curveBasis);
console.log(areaRight);
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment