Skip to content

Instantly share code, notes, and snippets.

@cagrimmett
Last active November 22, 2016 22:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cagrimmett/a5bb1f4c2f7076f6ca72e5e97052591f to your computer and use it in GitHub Desktop.
Save cagrimmett/a5bb1f4c2f7076f6ca72e5e97052591f to your computer and use it in GitHub Desktop.
Sol LeWitt 852
license: gpl-3.0
height: 960

Sol LeWitt Wall Drawing 852

A wall divided from the upper left to the lower right by a curvy line; left: glossy yellow; right: glossy purple.

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

<html>
<head>
<title>Sol LeWitt 852</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;
background: #453276;
/*border: 40px solid #111;*/
}
#chart {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
function sol852() {
var ww = window.innerWidth,
wh = window.innerHeight;
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
function lineData() {
var data = new Array();
for (var point = 0; point < 5; point++) {
var x = getRandomArbitrary(ww/10, ww-ww/10); // Constrains within the middle 80%
var y = getRandomArbitrary(wh/10, wh-wh/10);
data.push({
x: x,
y: y
})
}
// Starting point upper left
data.push({
x: 0,
y: 0
});
// End point lower right
data.push({
x: ww,
y: wh
})
return data;
}
var lineData = lineData();
console.log(lineData);
console.log(lineData.sort(function(a,b) { return +a.x - +b.x; }));
var area = 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(area);
var chart = d3.select("#chart").append("svg")
.attr("width", ww)
.attr("height", wh)
.append("path")
.datum(lineData)
.attr("class", "area")
.attr("d", area)
.attr("fill","#FDD330");
}
// run on load
sol852();
$(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();
sol852();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment