| license: gpl-3.0 | |
| height: 650 |
Two-part drawing. The two walls are each divided horizontally and vertically into four equal parts. First wall: 12-inch (30 cm) bands of lines in four directions, one direction in each part, drawn in black India ink. Second wall: Same, but with four colors drawn in India ink and color ink washes.
April 1983
| <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/textures@1.0.4/textures.js"></script> | |
| <style type="text/css"> | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| .drawing { | |
| margin: 0 auto; | |
| text-align: center; | |
| width: 1332px; | |
| } | |
| #grid { | |
| margin-left: 24px; | |
| display: inline-block; | |
| } | |
| #grid-black { | |
| display: inline-block; | |
| } | |
| .description { | |
| width:600px; | |
| margin: 36px 24px; | |
| text-align: left; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="drawing"> | |
| <div id="grid-black"></div> | |
| <div id="grid"></div> | |
| </div> | |
| <script type="text/javascript"> | |
| function gridData() { | |
| var data = new Array(); | |
| var id = 1; | |
| var xpos = 36; //starting xpos and ypos at 1 so the stroke will show when we make the grid below | |
| var ypos = 36; | |
| var width = 288; | |
| var height = 288; | |
| // 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 | |
| }) | |
| // increment the x position. I.e. move it over by 50 (width variable) | |
| xpos += width; | |
| id += 1; | |
| } | |
| // reset the x position after a row is complete | |
| xpos = 36; | |
| // increment the y position for the next row. Move it down 50 (height variable) | |
| ypos += height; | |
| } | |
| return data; | |
| } | |
| var gridData2 = gridData(); | |
| var gridData = gridData(); | |
| // I like to log the data to the console for quick debugging | |
| console.log(gridData); | |
| var grid = d3.select("#grid") | |
| .append("svg") | |
| .attr("width","648px") | |
| .attr("height","648px"); | |
| var t1 = textures.lines() | |
| .size(72) | |
| .orientation("vertical") | |
| //.background("#111") | |
| .strokeWidth(36) | |
| .stroke("#111"), | |
| t2 = textures.lines() | |
| .size(72) | |
| .orientation("horizontal") | |
| .strokeWidth(36) | |
| .stroke("#FDCB2F"), | |
| t3 = textures.lines() | |
| .size(108) | |
| //.heavier() | |
| //.thinner(3) | |
| //.orientation("diagonal") | |
| .orientation("2/8") | |
| .strokeWidth(37) | |
| .stroke("#E21D39") | |
| //.background("#E21D39"), | |
| t4 = textures.lines() | |
| .size(108) | |
| .orientation("6/8") | |
| .strokeWidth(37) | |
| .stroke("#0066d8"); | |
| 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()} | |
| ;}) | |
| .style("stroke","#111") | |
| .style("stroke-width", "36px") | |
| //////////////////// | |
| var gridBlack = d3.select("#grid-black") | |
| .append("svg") | |
| .attr("width","648px") | |
| .attr("height","648px") | |
| .style("stroke", "#111"); | |
| var t1 = textures.lines() | |
| .size(72) | |
| .orientation("vertical") | |
| //.background("#111") | |
| .strokeWidth(36) | |
| .stroke("#111"), | |
| t2 = textures.lines() | |
| .size(72) | |
| .orientation("horizontal") | |
| .strokeWidth(36) | |
| .stroke("#111"), | |
| t3 = textures.lines() | |
| .size(108) | |
| //.heavier() | |
| //.thinner(3) | |
| .orientation("2/8") | |
| .strokeWidth(36) | |
| .stroke("#111"), | |
| t4 = textures.lines() | |
| .size(108) | |
| .orientation("6/8") | |
| .strokeWidth(36) | |
| .stroke("#111"); | |
| gridBlack.call(t1); | |
| gridBlack.call(t2); | |
| gridBlack.call(t3); | |
| gridBlack.call(t4); | |
| var row = gridBlack.selectAll(".row") | |
| .data(gridData2) | |
| .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("stroke-width", "36px") | |
| .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> |
