A square divided horizontally and vertically into four equal parts, each with lines and colors in four directions superimposed progressively.
Last active
October 21, 2016 14:44
-
-
Save cagrimmett/89af82fc71f19ecc522080924a972407 to your computer and use it in GitHub Desktop.
Sol Lewitt's Wall Drawing 87
This file contains 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 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> | |
| <title>Sol LeWitt Wall Drawing 87</title> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://unpkg.com/textures@1.0.4/textures.js"></script> | |
| <style type="text/css"> | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| .drawing { | |
| 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.1; | |
| var ypos = 4.5; | |
| var width = 500.6; | |
| var height = 500.5; | |
| 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 += height; | |
| } | |
| 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("#7c7c7c"), | |
| t2 = textures.lines() | |
| .size(size) | |
| .orientation("horizontal") | |
| .strokeWidth(strokewidth) | |
| .stroke("#ffef81"), | |
| t3 = textures.lines() | |
| .size(size) | |
| .orientation("diagonal") | |
| .strokeWidth(strokewidth) | |
| .stroke("#e07b44"), | |
| t4 = textures.lines() | |
| .size(size) | |
| .orientation("6/8") | |
| .strokeWidth(strokewidth) | |
| .stroke("#a1520b"); | |
| grid.call(t1); | |
| grid.call(t2); | |
| grid.call(t3); | |
| grid.call(t4); | |
| var t = d3.transition() | |
| .duration(750) | |
| .ease(d3.easeLinear); | |
| 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").transition(t) | |
| .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", t1.url()); | |
| var column = row.selectAll(".second-square") | |
| .data(function(d) { return d; }) | |
| .enter().append("rect").transition(t).delay(1000) | |
| .attr("class","second-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 "none"} | |
| if (d.id == 2) {return t2.url()} | |
| if (d.id == 3) {return t2.url()} | |
| if (d.id == 4) {return t2.url()} | |
| ;}); | |
| var column = row.selectAll(".third-square") | |
| .data(function(d) { return d; }) | |
| .enter().append("rect").transition(t).delay(2000) | |
| .attr("class","third-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 "none"} | |
| if (d.id == 2) {return "none"} | |
| if (d.id == 3) {return t3.url()} | |
| if (d.id == 4) {return t3.url()} | |
| ;}); | |
| var column = row.selectAll(".fourth-square") | |
| .data(function(d) { return d; }) | |
| .enter().append("rect").transition(t).delay(3000) | |
| .attr("class","fourth-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 "none"} | |
| if (d.id == 2) {return "none"} | |
| if (d.id == 3) {return "none"} | |
| if (d.id == 4) {return t4.url()} | |
| ;}); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment