Skip to content

Instantly share code, notes, and snippets.

@cagrimmett
Last active December 26, 2019 23:15
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save cagrimmett/4a639fc79bbaa038849c865b99b1ddcc to your computer and use it in GitHub Desktop.
Make Your Own Sol LeWitt 614
license: gpl-3.0
height: 900

Make Your Own Sol LeWitt Wall Drawing 614

Here are Sol's original instructions for Wall Drawing 614:

Wall Drawing 614: Rectangles formed by 3-inch (8 cm) wide India ink bands, meeting at right angles.

Shout out to Harry Stevens for showing me a quicker way to trigger the rebuilds with on("change input")!

<html>
<head>
<!-- Implemented by Chuck Grimmett http://cagrimmett.com -->
<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>
<title>Make Your Own Sol LeWitt Wall Drawing 614</title>
<style>
body {
margin: 0;
padding:0;
position: relative;
background: #000;
}
#controls {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 85px;
background: #fff;
text-align: center;
}
#controls .inputs form {
font-size: 20px;
line-height: 20px;
padding-top: 15px;
}
#controls .inputs input:first-of-type {
margin-right: 30px;
}
.node {
box-sizing: border-box;
position: absolute;
overflow: hidden;
}
.node-value {
color: rgba(0,0,0,0.8);
font-size: 9px;
margin-top: 1px;
}
</style>
</head>
<body>
<div id="controls">
<div class="inputs">
<form>
Black band width: <output name="paddingOutput" id="paddingOutputId">15</output>px <input type="range" name="paddingInput" id="paddingInputId" value="15" min="1" max="50" oninput="paddingOutputId.value = paddingInputId.value">
Number of rectangles: <output name="rectOutput" id="rectOutputId">40</output> <input type="range" name="rectInput" id="rectInputId" value="40" min="5" max="300" oninput="rectOutputId.value = rectInputId.value">
</form>
</div>
</div>
<script>
var padding = document.getElementById("paddingInputId");
var rectNumber = document.getElementById("rectInputId");
function sol614() {
var width = window.innerWidth,
height = window.innerHeight - 85;
var format = d3.format(",d");
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
function treeData() {
var obj = {name: "rect"};
var children = [];
for (var row = 0; row < rectNumber.value; row++) {
children.push({id: row, value: getRandomArbitrary(60, 1000)})
}
obj['children'] = children;
return obj;
}
var tree = treeData();
console.log(tree);
var treemap = d3.treemap()
.size([width, height])
.padding(padding.value)
.round(true)
.tile(d3.treemapBinary);
var tree = d3.hierarchy(tree);
tree.sum(function(d) { return d.value; });
console.log(tree);
treemap(tree);
d3.select("body")
.selectAll(".node")
.data(tree.leaves())
.enter().append("div")
.attr("class", "node")
.attr("title", function(d) { return d.data.id; })
.style("left", function(d) { return d.x0 + "px"; })
.style("top", function(d) { return d.y0+85 + "px"; })
.style("width", function(d) { return d.x1 - d.x0 + "px"; })
.style("height", function(d) { return d.y1 - d.y0 + "px"; })
.style("background", "#fff");
}
//Run on first load
sol614();
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
//resize on resizeEnd function
$(window).bind('resizeEnd', function() {
d3.selectAll("div.node").remove();
sol614();
});
$( "#paddingInputId" ).on("change input", function() {
d3.selectAll("div.node").remove();
sol614();
});
$( "#rectInputId" ).on("change input", function() {
d3.selectAll("div.node").remove();
sol614();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment