Skip to content

Instantly share code, notes, and snippets.

@cagrimmett

cagrimmett/.block

Last active October 20, 2016 22:15
Show Gist options
  • Save cagrimmett/bfeac448ed4b096b4aecc7a6ca30027a to your computer and use it in GitHub Desktop.
Save cagrimmett/bfeac448ed4b096b4aecc7a6ca30027a to your computer and use it in GitHub Desktop.
Download ZIP
Sol LeWitt's Wall Drawing 11
Raw
.block
license: gpl-3.0
height: 810
Raw
README.md

Sol LeWitt Wall Drawing 11

A wall divided horizontally and vertically into four equal parts. Within each part, three of the four kinds of lines are superimposed.

Learn more at cagrimmett.com

Raw
index.html
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:360,600" rel="stylesheet">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/[email protected]/textures.js"></script>
<style type="text/css">
body {
font-family: 'Open Sans', sans-serif;
}
.drawing {
margin: 0 auto;
text-align: center;
width: 1310px;
margin-top: 40px;
}
#grid {
display: inline-block;
}
.description {
width:600px;
margin: 36px 4px;
text-align: left;
}
a {color: #F76B48;}
a:hover {
text-decoration: underline;
color: #e8370a;
}
</style>
</head>
<body>
<div class="drawing">
<div id="grid"></div>
<div class="description">
<h2>Sol LeWitt Wall Drawing 11</h2>
<p>A wall divided horizontally and vertically into four equal parts. Within each part, three of the four kinds of lines are superimposed.</p>
<p><em>Implemented by Chuck Grimmett.</em> <a href="https://cagrimmett.com/sol-lewitt/2016/10/10/sol-lewitt-11.html">Learn more &rarr;</a></p>
</div>
</div>
<script type="text/javascript">
function gridData() {
var data = new Array();
var id = 1;
var xpos = 4.5;
var ypos = 4.5;
var width = 650.5;
var height = 400.5;
// iterate for rows
for (var row = 0; row < 2; row++) {
data.push( new Array() );
// iterate for cells/columns inside rows
for (var column = 0; column < 2; column++) {
data[row].push({
id: id,
x: xpos,
y: ypos,
width: width,
height: height
})
xpos += width;
id += 1;
}
xpos = 4.5;
ypos += height;
}
return data;
}
var gridData = gridData();
var grid = d3.select("#grid")
.append("svg")
.attr("width","1310px")
.attr("height","810px");
var size = 10;
var strokewidth = 1;
var stroke = "#111"
var t1 = textures.lines()
.size(size)
.orientation("vertical", "horizontal", "diagonal")
.strokeWidth(strokewidth)
.stroke(stroke),
t2 = textures.lines()
.size(size)
.orientation("vertical", "horizontal", "6/8")
.strokeWidth(strokewidth)
.stroke(stroke),
t3 = textures.lines()
.size(size)
.orientation("vertical", "horizontal", "6/8")
.strokeWidth(strokewidth)
.stroke(stroke),
t4 = textures.lines()
.size(size)
.orientation("vertical", "horizontal", "diagonal")
.strokeWidth(strokewidth)
.stroke(stroke);
grid.call(t1);
grid.call(t2);
grid.call(t3);
grid.call(t4);
var row = grid.selectAll(".row")
.data(gridData)
.enter().append("g")
.attr("class", "row");
var column = row.selectAll(".square")
.data(function(d) { return d; })
.enter().append("rect")
.attr("class","square")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("width", function(d) { return d.width; })
.attr("height", function(d) { return d.height; })
.style("fill", function(d) {
if (d.id == 1) {return t1.url()}
if (d.id == 2) {return t2.url()}
if (d.id == 3) {return t3.url()}
if (d.id == 4) {return t4.url()}
;})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment