A square is divided horizontally and vertically into four equal parts, each with lines in four directions superimposed progressively.
Last active
October 20, 2016 22:19
-
-
Save cagrimmett/f5213aa01b819fa47059fb3ff4ea074a to your computer and use it in GitHub Desktop.
Sol LeWitt's Wall Drawing 56
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 | |
| height: 1020 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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: 1010px; | |
| } | |
| #grid { | |
| display: inline-block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="drawing"> | |
| <div id="grid"></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 = 450.5; | |
| var height = 451; | |
| var click = 0; | |
| // 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 += 450; | |
| } | |
| return data; | |
| } | |
| var gridData = gridData(); | |
| var grid = d3.select("#grid") | |
| .append("svg") | |
| .attr("width","1010px") | |
| .attr("height","1010px"); | |
| var size = 10; | |
| var strokewidth = 1; | |
| var stroke = "#111" | |
| var t1 = textures.lines() | |
| .size(size) | |
| .orientation("vertical") | |
| .strokeWidth(strokewidth) | |
| .stroke(stroke), | |
| t2 = textures.lines() | |
| .size(size) | |
| .orientation("vertical", "horizontal") | |
| .strokeWidth(strokewidth) | |
| .stroke(stroke), | |
| t3 = textures.lines() | |
| .size(size) | |
| .orientation("vertical", "horizontal", "diagonal") | |
| .strokeWidth(strokewidth) | |
| .stroke(stroke), | |
| t4 = textures.lines() | |
| .size(size) | |
| .orientation("vertical", "horizontal", "diagonal", "6/8") | |
| .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