├── 118
    ├── amiccolis
    │   └── index.html
    ├── eesur
    │   └── index.html
    ├── instructions.md
    └── y-a-v-a
    │   └── index.html
├── 122
    ├── instructions.md
    └── y-a-v-a
    │   ├── index.html
    │   └── script.js
├── 130
    ├── instructions.md
    ├── llimllib
    │   └── index.html
    └── nitriques
    │   └── index.html
├── 132
    └── instructions.md
├── 138
    ├── instructions.md
    └── y-a-v-a
    │   └── index.html
├── 146
    ├── OgAstorga
    │   └── index.html
    ├── instructions.md
    └── wttdotm
    │   └── index.html
├── 164
    ├── instructions.md
    └── pavellishin
    │   └── index.html
├── 232
    └── instructions.md
├── 237
    ├── instructions.md
    └── invisiblemaze
    │   └── index.html
├── 238
    ├── instructions.md
    └── invisiblemaze
    │   └── index.html
├── 273
    ├── instructions.md
    └── matthewlein
    │   ├── 273.js
    │   └── index.html
├── 289
    ├── cagrimmett
    │   └── index.html
    ├── grahamalama
    │   ├── index.html
    │   └── index.js
    └── instructions.md
├── 295
    ├── instructions.md
    ├── nitriques
    │   └── index.html
    ├── pavellishin
    │   └── index.html
    └── y-a-v-a
    │   └── index.html
├── 328
    ├── amiccolis
    │   └── index.html
    └── instructions.md
├── 335
    ├── OgAstorga
    │   └── index.html
    └── instructions.md
├── 340
    ├── instructions.md
    └── shawnbot
    │   └── index.html
├── 349
    ├── instructions.md
    └── y-a-v-a
    │   └── index.html
├── 366
    ├── diagram.png
    └── instructions.md
├── 391
    ├── amiccolis
    │   └── index.html
    ├── cagrimmett
    │   └── index.html
    └── instructions.md
├── 392
    ├── 1wheel
    │   └── index.html
    ├── instructions.md
    └── mcshiz
    │   └── index.html
├── 396
    ├── instructions.md
    └── y-a-v-a
    │   └── index.html
├── 541
    ├── 541.jpg
    └── instructions.md
├── 579
    ├── instructions.md
    └── y-a-v-a
    │   └── index.html
├── 614
    ├── cagrimmett
    │   └── index.html
    ├── instructions.md
    └── pavellishin
    │   └── index.html
├── 630
    ├── instructions.md
    └── kevinleedrum
    │   └── index.html
├── 766
    ├── instructions.md
    └── karanmhatre1
    │   └── index.html
├── 797
    ├── doolittle
    │   └── index.html
    ├── instructions.md
    └── y-a-v-a
    │   └── index.html
├── 852
    ├── cagrimmett
    │   └── index.html
    ├── instructions.md
    └── y-a-v-a
    │   └── index.html
├── 853
    ├── cagrimmett
    │   └── index.html
    └── instructions.md
├── 959
    ├── doodybrains
    │   └── index.html
    └── instructions.md
├── 1136
    ├── instructions.md
    └── llimllib
    │   └── index.html
├── 1180
    ├── OgAstorga
    │   └── index.html
    └── instructions.md
├── .gitignore
├── 011
    ├── AlbertCarreras
    │   ├── helpers.js
    │   ├── index.html
    │   ├── readme.md
    │   ├── script.js
    │   └── style.css
    ├── SureshPradhana
    │   └── index.html
    ├── blinkylights23
    │   └── index.html
    ├── cagrimmett
    │   └── index.html
    ├── instructions.md
    ├── llimllib
    │   └── index.html
    └── y-a-v-a
    │   └── index.html
├── 016
    ├── doolittle
    │   └── index.html
    ├── instructions.md
    ├── llimllib
    │   └── index.html
    └── y-a-v-a
    │   └── index.html
├── 017
    ├── Dusch4593
    │   └── index.html
    ├── instructions.md
    └── y-a-v-a
    │   └── index.html
├── 033
    ├── instructions.md
    └── wttdotm
    │   └── index.html
├── 045
    ├── OgAstorga
    │   └── index.html
    └── instructions.md
├── 046
    ├── ashkan-sarlak
    │   ├── index.html
    │   ├── sketch.js
    │   └── style.css
    ├── instructions.md
    ├── kubamarkiewicz
    │   └── index.html
    ├── llimllib
    │   └── index.html
    └── ustina
    │   └── index.html
├── 049
    ├── aaortiz-tinsley
    │   └── index.html
    ├── diagram.jpg
    ├── instructions.md
    └── llimllib
    │   └── index.html
├── 050A
    ├── instructions.md
    └── wttdotm
    │   └── index.html
├── 051
    ├── instructions.md
    └── maxbittker
    │   └── index.html
├── 056
    ├── Soreine
    │   ├── index.html
    │   └── index.js
    ├── cagrimmett
    │   └── index.html
    ├── instructions.md
    ├── sohampod
    │   └── sol56.html
    └── y-a-v-a
    │   └── index.html
├── 065
    ├── instructions.md
    └── lwiiii
    │   └── index.html
├── 085
    ├── alessbell
    │   └── index.html
    ├── instructions.md
    └── y-a-v-a
    │   └── index.html
├── 086
    ├── cagrimmett
    │   └── index.html
    └── instructions.md
├── 087
    ├── cagrimmett
    │   └── index.html
    ├── instructions.md
    └── y-a-v-a
    │   └── index.html
├── 088
    ├── instructions.md
    └── sgallese
    │   └── index.html
├── 091
    ├── doolittle
    │   └── index.html
    └── instructions.md
├── 097
    ├── instructions.md
    ├── nitriques
    │   ├── 097-canvas.html
    │   └── index.html
    └── y-a-v-a
    │   ├── MersenneTwister.js
    │   ├── PerlinNoise.js
    │   └── index.html
├── 415D
    └── alicepiva
    │   ├── 415D preview.png
    │   ├── 415D.js
    │   ├── index.html
    │   └── readme.md
├── LICENSE
├── README.md
├── gulpfile.js
├── instructions.json
├── package.json
├── solutions.json
└── templates
    ├── paper.js
        └── index.html
    └── processing.js
        └── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/*
3 | 


--------------------------------------------------------------------------------
/011/AlbertCarreras/helpers.js:
--------------------------------------------------------------------------------
  1 | //basic line draw function
  2 | function line(ctx, x1, y1, x2, y2, color="black") {
  3 |     ctx.beginPath();
  4 |     ctx.moveTo(x1, y1);
  5 |     ctx.lineTo(x2, y2);
  6 |     ctx.strokeStyle = color;
  7 |     ctx.stroke();
  8 |   }
  9 |   
 10 |   function perspective(ctx, height, width, margin) {
 11 |     let color = "#EAECEE"
 12 |     //draw corners
 13 |     line(ctx, 0, 0, margin, margin, color)
 14 |     line(ctx, width, 0, width-margin, margin, color)
 15 |     line(ctx, 0, height, margin, height-margin, color)
 16 |     line(ctx, width, height, width-margin, height-margin, color);
 17 |   
 18 |     //draw floor poligon
 19 |     ctx.fillStyle = color;
 20 |     ctx.beginPath();
 21 |     ctx.moveTo(0, height);
 22 |     ctx.lineTo(margin,height-margin);
 23 |     ctx.lineTo(width-margin, height-margin);
 24 |     ctx.lineTo(width, height);
 25 |     ctx.closePath();
 26 |     ctx.fill();
 27 |   }
 28 |   
 29 |   function grid(ctx, height, width, gridw, margin) {
 30 |   
 31 |     var midx = (width/2);
 32 |     var midy = (height/2);
 33 |     var netHeight = height-margin;
 34 |     var netWidth = width-margin;
 35 |   
 36 |     //draw vertical lines to the right and left
 37 |     for (var i=0; midx + gridw * i < netWidth; i++) {
 38 |       var rightMid = midx + gridw*i;
 39 |       var leftMid = midx - gridw*i;
 40 |       line(ctx, rightMid, margin, rightMid, netHeight);
 41 |       line(ctx, leftMid, margin, leftMid, netHeight);
 42 |     }
 43 |   
 44 |     //draw horizontal lines above and below
 45 |     for (var i=0; midy + gridw * i < netHeight; i++) {
 46 |       var aboveMid = midy + gridw*i;
 47 |       var belowMid = midy - gridw*i;
 48 |       line(ctx, margin, aboveMid, netWidth, aboveMid);
 49 |       line(ctx, margin, belowMid, netWidth, belowMid);
 50 |     }
 51 |   }
 52 |   
 53 |   function diag(ctx, linew, w, h, quadrant, margin) {
 54 |     
 55 |     let midH = h/2
 56 |     let midW = w/2
 57 |     let netH = midH - margin
 58 |     let netW = midW - margin
 59 |     let len = (h+w)/2 - (2 * margin)
 60 |   
 61 |     if (quadrant%2 !== 0) {
 62 |       for (var i=0; i * linew <= len; i++) {
 63 |         let accLength = i * linew
 64 |         let startX = 0
 65 |         let startY = accLength
 66 |         let endX = accLength
 67 |         let endY = 0
 68 |   
 69 |         if(startY > netH) {
 70 |           startY = netH
 71 |           startX =  accLength - midH + margin
 72 |         }
 73 |   
 74 |         if(endX > netW) {
 75 |             endX = netW
 76 |             endY = accLength - midW + margin
 77 |         }
 78 |   
 79 |         line(ctx, startX,startY, endX, endY);
 80 |       }
 81 |       
 82 |     } else {
 83 |       for (var i=0; i * linew <= len; i++) {
 84 |         let accLength = i * linew
 85 |         let startY = 0
 86 |         let startX = accLength
 87 |         let endY = accLength
 88 |         let endX = 0
 89 |   
 90 |         if(startX > netH) {
 91 |           startX = netH
 92 |           startY = accLength - (h/2) + margin
 93 |         }
 94 |   
 95 |         if(endY > netW) {
 96 |             endY = netW
 97 |             endX = accLength - (w/2) + margin
 98 |         }
 99 |   
100 |         line(ctx, startX,startY, endX, endY);
101 |       }
102 |     }
103 |   }
104 |   
105 |   function draw(canvas, linew, gridw, margin) {
106 |   
107 |     var ctx = canvas.getContext("2d"),
108 |         h = canvas.height,
109 |         w = canvas.width;
110 |   
111 |     //clears canvas
112 |     ctx.clearRect(0,0,w,h);
113 |   
114 |     // Sol LeWitt's drawing of #11 shows that he means a grid throughout the whole piece
115 |     grid(ctx, h, w, gridw, margin);
116 |     perspective(ctx, h, w, margin);
117 |     ctx.save();
118 |   
119 |     // Move to the center
120 |     ctx.translate(w/2, h/2);
121 |     diag(ctx, linew, w, h, 1, margin);
122 |   
123 |     for(var i=2; i <= 4; i++){
124 |       ctx.rotate(Math.PI/2);
125 |       diag(ctx, linew, w, h, i, margin);
126 |     }
127 |   }


--------------------------------------------------------------------------------
/011/AlbertCarreras/index.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | ## Wall Drawing #11 (1969)
 3 | A wall divided horizontally and vertically into four equal parts. Within each part, three of the four kinds of lines are superimposed.
 4 | -->
 5 | <html>
 6 |     <head>
 7 |       <title>Sol LeWitt Wall Drawing #11</title>
 8 |       <link href="style.css" rel="stylesheet" type="text/css" />
 9 |     </head>
10 | 
11 |   <body>
12 |     <script src="helpers.js"></script>
13 |     <script src="script.js"></script>
14 | 
15 |     <canvas id="wall"></canvas>
16 |     <span id="Q">?</span>
17 |     <pre id="A">Sol Lewitt Wall Drawing #11 (1969)
18 |       A wall divided horizontally and vertically into four equal parts.
19 |       Within each part, three of the four kinds of lines are superimposed.
20 | 
21 |       Click + Drag in the x direction changes grid width, in the y
22 |       direction changes diagonal width. Press 'r' to reset</pre>
23 | 
24 |   </body>
25 | </html>


--------------------------------------------------------------------------------
/011/AlbertCarreras/readme.md:
--------------------------------------------------------------------------------
1 | Repl with code
2 | https://repl.it/@AlbertCarreras/Sol-Lewitt-11
3 | 
4 | Note: I fixed a problem with llimllib solution. 
5 | Presented the canvas as if it was a wall in a room, drawing perspectives.


--------------------------------------------------------------------------------
/011/AlbertCarreras/script.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function() {
 2 | 
 3 |     var canvas = document.getElementById("wall"),
 4 |         linew = 15,
 5 |         gridw = 15,
 6 |         margin = 100
 7 |   
 8 |     function resizeCanvas() {
 9 |       let h = window.innerHeight;
10 |       let w = window.innerWidth;
11 |   
12 |       canvas.width = w;
13 |       canvas.height = h;
14 |       if ((margin*2) < w && (margin*2) < h) draw(canvas, linew, gridw, margin);
15 |     }
16 |   
17 |     window.onresize = resizeCanvas;
18 |     
19 |     resizeCanvas(canvas);
20 |   
21 |     window.addEventListener("mousedown", function(evt) {
22 |       mousemove = false;
23 |       mousedown = evt;
24 |     }, false);
25 |   
26 |     //Info toggle display
27 |     var A = document.getElementById("A");
28 |     var Q = document.getElementById("Q");
29 |   
30 |     A.style["visibility"] = "hidden";
31 |   
32 |     document.getElementById("Q").addEventListener("mouseover", function() {
33 |       A.style["visibility"] = "";
34 |       Q.style["visibility"] = "hidden";
35 |     });
36 |   
37 |     document.getElementById("A").addEventListener("mouseout", function() {
38 |       A.style["visibility"] = "hidden";
39 |       Q.style["visibility"] = "";
40 |     });
41 |   
42 |   });
43 |   


--------------------------------------------------------------------------------
/011/AlbertCarreras/style.css:
--------------------------------------------------------------------------------
 1 | body { 
 2 |     margin: 0; 
 3 |   }
 4 |   
 5 |   #Q { 
 6 |     position: absolute;
 7 |     bottom: 5px; 
 8 |     right: 5px; 
 9 |     color: blue; 
10 |     background-color: white; 
11 |     font-size: 24px; 
12 |   }
13 |   
14 |   #A { 
15 |     position: absolute; 
16 |     bottom: 5px; 
17 |     right: 5px; 
18 |     background-color: white; 
19 |   }
20 |   


--------------------------------------------------------------------------------
/011/cagrimmett/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | 	<title>Sol LeWitt Wall Drawing 11</title>
  4 | 	
  5 | 	<script src="https://d3js.org/d3.v4.min.js"></script>
  6 | 	<script src="https://unpkg.com/textures@1.0.4/textures.js"></script>
  7 | 	<style type="text/css">
  8 | 		.drawing {
  9 | 			margin: 0 auto;
 10 | 			text-align: center;
 11 | 			width: 1310px;
 12 | 			margin-top: 40px;
 13 | 		}
 14 | 		#grid {
 15 | 			display: inline-block;
 16 | 		}
 17 | 	</style>
 18 | </head>
 19 | <body>
 20 | 
 21 | <div class="drawing">
 22 | 	<div id="grid"></div>
 23 | </div>
 24 | 
 25 | <script type="text/javascript">
 26 | function gridData() {
 27 | 	var data = new Array();
 28 | 	var id = 1;
 29 | 	var xpos = 4.5; 
 30 | 	var ypos = 4.5;
 31 | 	var width = 650.5;
 32 | 	var height = 400.5;
 33 | 	
 34 | 	// iterate for rows	
 35 | 	for (var row = 0; row < 2; row++) {
 36 | 		data.push( new Array() );
 37 | 		
 38 | 	// iterate for cells/columns inside rows
 39 | 		for (var column = 0; column < 2; column++) {
 40 | 			data[row].push({
 41 | 				id: id,
 42 | 				x: xpos,
 43 | 				y: ypos,
 44 | 				width: width,
 45 | 				height: height
 46 | 			})
 47 | 			xpos += width;
 48 | 			id += 1;
 49 | 		}
 50 | 		xpos = 4.5;
 51 | 		ypos += height;	
 52 | 	}
 53 | 	return data;
 54 | }
 55 | 
 56 | var gridData = gridData();	
 57 | 
 58 | var grid = d3.select("#grid")
 59 | 	.append("svg")
 60 | 	.attr("width","1310px")
 61 | 	.attr("height","810px");
 62 | 
 63 | var size = 10;
 64 | var strokewidth = 1;
 65 | var stroke = "#111"
 66 | 
 67 | var t1 = textures.lines()
 68 |           .size(size)
 69 |           .orientation("vertical", "horizontal", "diagonal")
 70 |           .strokeWidth(strokewidth)
 71 |           .stroke(stroke),
 72 |       t2 = textures.lines()
 73 | 	  	  .size(size)
 74 |           .orientation("vertical", "horizontal", "6/8")
 75 |           .strokeWidth(strokewidth)
 76 |           .stroke(stroke),
 77 |       t3 = textures.lines()
 78 |           .size(size)
 79 | 		  .orientation("vertical", "horizontal", "6/8")
 80 |           .strokeWidth(strokewidth)
 81 |           .stroke(stroke),
 82 |       t4 = textures.lines()
 83 |           .size(size)
 84 | 		  .orientation("vertical", "horizontal", "diagonal")
 85 |           .strokeWidth(strokewidth)
 86 |           .stroke(stroke);
 87 |           
 88 |  grid.call(t1);
 89 |  grid.call(t2);
 90 |  grid.call(t3);
 91 |  grid.call(t4);
 92 | 	
 93 | var row = grid.selectAll(".row")
 94 | 	.data(gridData)
 95 | 	.enter().append("g")
 96 | 	.attr("class", "row");
 97 |     	
 98 | var column = row.selectAll(".square")
 99 | 	.data(function(d) { return d; })
100 | 	.enter().append("rect")
101 | 	.attr("class","square")
102 | 	.attr("x", function(d) { return d.x; })
103 | 	.attr("y", function(d) { return d.y; })
104 | 	.attr("width", function(d) { return d.width; })
105 | 	.attr("height", function(d) { return d.height; })
106 | 	.style("fill", function(d) {            
107 |             if (d.id == 1) {return t1.url()}
108 |             if (d.id == 2) {return t2.url()}
109 |             if (d.id == 3) {return t3.url()}
110 |             if (d.id == 4) {return t4.url()}  
111 | 	;})
112 | 	
113 | </script>	
114 | 
115 | 
116 | 


--------------------------------------------------------------------------------
/011/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #11 (1969)
2 | 
3 | A wall divided horizontally and vertically into four equal parts. Within each part, three of the four kinds of lines are superimposed.
4 | 


--------------------------------------------------------------------------------
/011/llimllib/index.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | ## Wall Drawing #11 (1969)
  3 | 
  4 | A wall divided horizontally and vertically into four equal parts. Within each part, three of the four kinds of lines are superimposed.
  5 | -->
  6 | <html><head>
  7 | <title>Sol LeWitt Wall Drawing #11</title>
  8 | <script>
  9 | function line(ctx, x1, y1, x2, y2) {
 10 |   ctx.beginPath();
 11 |   ctx.moveTo(x1, y1);
 12 |   ctx.lineTo(x2, y2);
 13 |   ctx.stroke();
 14 | }
 15 | 
 16 | function grid(ctx, height, width, gridw) {
 17 |   // start with the X midline
 18 |   var midx = (width/2)+.5;
 19 |   line(ctx, midx, 0, midx, height);
 20 |   for (var i=0; midx + gridw*i < width; i++) {
 21 |     var pos = midx+gridw*i;
 22 |     var neg = midx-gridw*i;
 23 |     line(ctx, pos, 0, pos, height);
 24 |     line(ctx, neg, 0, neg, height);
 25 |   }
 26 | 
 27 |   var midy = (height/2)+.5;
 28 |   line(ctx, 0, midy, width, midy);
 29 |   for (var i=0; midy + gridw*i < height; i++) {
 30 |     var pos = midy+gridw*i;
 31 |     var neg = midy-gridw*i;
 32 |     line(ctx, 0, pos, width, pos);
 33 |     line(ctx, 0, neg, width, neg);
 34 |   }
 35 | }
 36 | 
 37 | function diag(ctx, linew, diaglength) {
 38 |   for (var i=0; i*linew < diaglength; i++) {
 39 |     console.log(i*linew);
 40 |     line(ctx, i*linew, 0, 0, i*linew);
 41 |   }
 42 | }
 43 | 
 44 | function draw(canvas, linew, gridw) {
 45 |   var ctx = canvas.getContext("2d"),
 46 |       h = canvas.height,
 47 |       w = canvas.width;
 48 | 
 49 |   ctx.clearRect(0,0,w,h);
 50 | 
 51 |   // Sol LeWitt's drawing of #11 shows that he means a grid throughout the whole piece
 52 |   grid(ctx, h, w, gridw);
 53 | 
 54 |   ctx.save();
 55 | 
 56 |   // Move to the center
 57 |   ctx.translate(w/2, h/2);
 58 | 
 59 |   diag(ctx, linew, w);
 60 |   ctx.rotate(Math.PI/2);
 61 |   diag(ctx, linew, w);
 62 |   ctx.rotate(Math.PI/2);
 63 |   diag(ctx, linew, w);
 64 |   ctx.rotate(Math.PI/2);
 65 |   diag(ctx, linew, w);
 66 | 
 67 |   ctx.restore();
 68 | }
 69 | 
 70 | function clamp(n, min, max) {
 71 |   if (n > min) return Math.min(n, max);
 72 |   return Math.max(n, min);
 73 | }
 74 | 
 75 | document.addEventListener("DOMContentLoaded", function() {
 76 |   var canvas = document.getElementById("wall"),
 77 |       linew = 10,
 78 |       temp_linew = 10,
 79 |       gridw = 10,
 80 |       temp_gridw = 10,
 81 |       mousemove = false,
 82 |       mousedown = undefined;
 83 | 
 84 |   function resizeCanvas() {
 85 |     canvas.width = window.innerWidth;
 86 |     canvas.height = window.innerHeight;
 87 | 
 88 |     draw(canvas, linew, gridw);
 89 |   }
 90 | 
 91 |   window.addEventListener('resize', resizeCanvas);
 92 |   resizeCanvas(canvas);
 93 | 
 94 |   window.addEventListener("mousedown", function(evt) {
 95 |     mousemove = false;
 96 |     mousedown = evt;
 97 |   }, false);
 98 |   window.addEventListener("mousemove", function(evt) {
 99 |     if (mousedown !== undefined) {
100 |       mousemove = true;
101 |       diffX = evt.clientX - mousedown.clientX;
102 |       diffY = evt.clientY - mousedown.clientY;
103 | 
104 |       temp_linew = clamp(linew - diffY/10, 2, 50);
105 |       temp_gridw = clamp(linew - diffX/10, 2, 50);
106 |       draw(canvas, temp_linew, temp_gridw);
107 |     }
108 |   }, false);
109 |   window.addEventListener("mouseup", function(evt) {
110 |     if(mousemove) {
111 |       linew = temp_linew;
112 |       gridw = temp_gridw;
113 |     }
114 |     mousedown = undefined;
115 |   }, false);
116 | 
117 |   window.addEventListener("keypress", function(evt) {
118 |     // r for reset
119 |     if (evt.keyCode == 114) {
120 |       linew = 10;
121 |       gridw = 10;
122 |       draw(canvas, linew, gridw);
123 |     }
124 |   });
125 | 
126 |   var A = document.getElementById("A");
127 |   var Q = document.getElementById("Q");
128 |   A.style["visibility"] = "hidden";
129 |   document.getElementById("Q").addEventListener("mouseover", function() {
130 |     A.style["visibility"] = "";
131 |     Q.style["visibility"] = "hidden";
132 |   });
133 |   document.getElementById("A").addEventListener("mouseout", function() {
134 |     A.style["visibility"] = "hidden";
135 |     Q.style["visibility"] = "";
136 |   });
137 | });
138 | </script>
139 | <style>
140 | body { margin: 0; }
141 | #Q { position: absolute; bottom: 5px; right: 5px; color: blue; background-color: white; font-size: 24px; }
142 | #A { position: absolute; bottom: 5px; right: 5px; background-color: white; }
143 | </style>
144 | <html>
145 |   <canvas id="wall"></canvas>
146 |   <span id="Q">?</span>
147 |   <pre id="A">Sol Lewitt Wall Drawing #11 (1969)
148 | 
149 | A wall divided horizontally and vertically into four equal parts.
150 | Within each part, three of the four kinds of lines are superimposed.
151 | 
152 | Click + Drag in the x direction changes grid width, in the y
153 | direction changes diagonal width. Press 'r' to reset</pre>
154 | </html>
155 | 


--------------------------------------------------------------------------------
/011/y-a-v-a/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 |   <meta charset="utf-8">
 3 |   <title>y_a_v_a ❤︎ Sol LeWitt • #011</title>
 4 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |   <style>
 6 |   html,body {
 7 |     width: 100%;
 8 |     height: 100%;
 9 |     margin: 0;
10 |     padding: 0;
11 |   }
12 |   canvas {
13 |     height: 100%;
14 |     width: 100%;
15 |   }
16 |   </style>
17 |   <canvas></canvas>
18 |   <script>
19 |   function number87() {
20 |     var c = document.getElementsByTagName('canvas')[0];
21 |     var ctx = c.getContext('2d');
22 |     var height = ctx.canvas.height = ctx.canvas.clientHeight;
23 |     var width = ctx.canvas.width = ctx.canvas.clientWidth;
24 | 
25 |     // clear screen on resize
26 |     ctx.clearRect(0, 0, c.width, c.height);
27 | 
28 |     // more pencil gray than black
29 |     ctx.strokeStyle = "#000000";
30 |     ctx.lineWidth = 0.2;
31 | 
32 |     var increment = 20;
33 |     var halfHeight = Math.ceil(height / 2);
34 |     var halfWidth = Math.ceil(width / 2);
35 |     var stepsX = Math.ceil(halfWidth / increment);
36 |     var stepsY = Math.ceil(halfHeight / increment);
37 |     var stepLimit = (stepsX + stepsY) * increment;
38 | 
39 |     for (var i = 0; i < width; i += increment) {
40 |       ctx.beginPath();
41 |       ctx.moveTo(i, 0);
42 |       ctx.lineTo(i, height);
43 |       ctx.stroke();
44 |     }
45 | 
46 |     for (var j = 0; j < height; j += increment) {
47 |       ctx.beginPath();
48 |       ctx.moveTo(0, j);
49 |       ctx.lineTo(width, j);
50 |       ctx.stroke();
51 |     }
52 | 
53 |     var offsetX = offsetY = x1 = x2 = y1 = y2 = 0;
54 |     for (var p = 0; p < 2; p++) {
55 |       for (var q = 0; q < 2; q++) {
56 |         var m = 0;
57 |         var n = 0;
58 |         var r = 0;
59 |         offsetX = p * stepsX * increment;
60 |         offsetY = q * stepsY * increment;
61 |         if (p === q) {
62 |           for (var k = 0; k <= stepLimit; k += increment) {
63 |             x1 = Math.min(k, stepsX * increment) + offsetX;
64 |             y1 = (k >= halfWidth ? m++ * increment : 0) + offsetY;
65 |             x2 = (k >= halfHeight ? n++ * increment : 0) + offsetX;
66 |             y2 = Math.min(k, stepsY * increment) + offsetY;
67 | 
68 |             ctx.beginPath();
69 |             ctx.moveTo(x1, y1);
70 |             ctx.lineTo(x2, y2);
71 |             ctx.stroke();
72 |           }
73 |         }
74 | 
75 |         if (p !== q) {
76 |           m = 0, n = 0, r = 0;
77 |           for (var l = 0; l <= stepLimit; l += increment) {
78 |             x1 = Math.min(l, stepsX * increment) + offsetX;
79 |             y1 = (l < halfWidth ? (stepsY * increment) : (stepsY - m++) * increment) + offsetY;
80 |             x2 = (l < halfHeight ? 0 : n++ * increment) + offsetX;
81 |             y2 = (l < halfHeight ? ((stepsY - r++) * increment) : 0) + offsetY;
82 | 
83 |             ctx.beginPath();
84 |             ctx.moveTo(x1, y1);
85 |             ctx.lineTo(x2, y2);
86 |             ctx.stroke();
87 |           }
88 |         }
89 |       }
90 |     }
91 |   }
92 | 
93 |   window.onresize = number87;
94 | 
95 |   number87();
96 |   </script>
97 | 


--------------------------------------------------------------------------------
/016/doolittle/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 |   <head>
  3 |     <meta>
  4 |       <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.min.js" ></script>
  5 |       <style type="text/css">
  6 | 
  7 |         html, body {
  8 |           width: 100%;
  9 |           height: 100%;
 10 |           overflow: hidden;
 11 |           padding: 0;
 12 |           margin: 0;
 13 |         }
 14 | 
 15 |         canvas {
 16 |           /*
 17 |             With the resize attribute in the canvas tag,
 18 |             paper.js manage the size of the canvas.
 19 |             Sets canvas to 100% of window.
 20 |           */
 21 |         }
 22 | 
 23 |       </style>
 24 |     </meta>
 25 |   </head>
 26 |   <body>
 27 |     <script canvas='solving-sol' type='text/paperscript'>
 28 | 
 29 |       /*
 30 |         Solving Sol #16
 31 |         Bands of lines 12 inches (30 cm) wide, in three directions
 32 |         (vertical, horizontal, diagonal right) intersecting.
 33 |       */
 34 | 
 35 |       var LINE_SPACING = 4,
 36 |           LINE_LENGTH = 360,
 37 |           LINE_COLOR = '#e4e4e4';
 38 | 
 39 |       function drawBand(spacing, num_lines) {
 40 | 
 41 |         var i = -1,
 42 |             group = new Group(),
 43 |             lines = [],
 44 |             basePoint = new Point(0,0),
 45 |             incrementPoint = new Point(spacing,0),
 46 |             borderLength = num_lines*spacing,
 47 |             borderOffset = LINE_LENGTH/2;
 48 | 
 49 |         // Draw lines
 50 |         while (++i < num_lines) {
 51 |           lines.push(
 52 |             LINE_SYMBOL.place(basePoint+(incrementPoint*i))
 53 |           );
 54 |         }
 55 | 
 56 |         //Draw borders on bands
 57 |         var topBorder = new Path.Line([0,-borderOffset], [borderLength,-borderOffset]);
 58 |         topBorder.strokeColor = LINE_COLOR;
 59 | 
 60 |         var bottomBorder = new Path.Line([0,borderOffset], [borderLength,borderOffset]);
 61 |         bottomBorder.strokeColor = LINE_COLOR;
 62 | 
 63 |         lines.push(topBorder, bottomBorder);
 64 | 
 65 |         group.addChildren(lines);
 66 | 
 67 |         group.position = view.center;
 68 |         return group;
 69 | 
 70 |       }
 71 | 
 72 |       function onResize() {
 73 | 
 74 |         //Wipe layer
 75 |         project.activeLayer.removeChildren();
 76 | 
 77 |         draw();
 78 |       }
 79 | 
 80 |       function draw() {
 81 | 
 82 |         console.time("Drawing #16 in");
 83 | 
 84 |         line_path = new Path.Line([0,0], [0, LINE_LENGTH]);
 85 |         line_path.strokeColor = LINE_COLOR;
 86 |         line_path.remove();
 87 | 
 88 |         LINE_SYMBOL = new Symbol(line_path, true);
 89 | 
 90 |         var viewWidth = view.viewSize.width;
 91 |         var viewHeight = view.viewSize.height;
 92 | 
 93 |         var horizontal = drawBand(LINE_SPACING, viewWidth/LINE_SPACING);
 94 | 
 95 |         var vertical = drawBand(LINE_SPACING, viewHeight/LINE_SPACING);
 96 |         vertical.rotate(90);
 97 | 
 98 |         //Hypotenuse
 99 |         var num_diagonal_lines = Math.sqrt(Math.pow(viewWidth,2)+Math.pow(viewHeight,2))/LINE_SPACING;
100 | 
101 |         var diagonal = drawBand(LINE_SPACING, num_diagonal_lines);
102 | 
103 |         //Remember 7th grade geometry to calculate angle...
104 |         var angle = Math.atan(viewHeight / viewWidth);
105 |         angle*=(180/Math.PI); // Convert to angle from radians
106 | 
107 |         diagonal.rotate(-angle); //Angle should divide frame in half.
108 | 
109 |         console.timeEnd("Drawing #16 in");
110 | 
111 |       }
112 | 
113 |       draw();
114 | 
115 |     </script>
116 | 
117 |     <canvas id='solving-sol' resize></canvas>
118 | 
119 |   </body>
120 | </html>


--------------------------------------------------------------------------------
/016/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #16 (1969)
2 | 
3 | Bands of lines 12 inches (30 cm) wide, in three directions (vertical, horizontal, diagonal right) intersecting.


--------------------------------------------------------------------------------
/016/llimllib/index.html:
--------------------------------------------------------------------------------
  1 | <!-- ## Wall Drawing #16 (1969)
  2 | 
  3 | Bands of lines 12 inches (30 cm) wide, in three directions (vertical, horizontal, diagonal right) intersecting.
  4 | 
  5 | http://www.massmoca.org/lewitt/grid.php
  6 | -->
  7 | <html><head>
  8 | <title>Sol LeWitt Wall Drawing #16</title>
  9 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 10 | <script>
 11 | function line(ctx, x1, y1, x2, y2) {
 12 |   ctx.beginPath();
 13 |   ctx.moveTo(x1, y1);
 14 |   ctx.lineTo(x2, y2);
 15 |   ctx.stroke();
 16 | }
 17 | 
 18 | function band(ctx, x1, x2, n, linew) {
 19 |   line(ctx, x1, 0, x2, 0);
 20 |   for (var i=1; i < n; i++) {
 21 |     var y = i*linew;
 22 |     line(ctx, x1, y, x2, y);
 23 |     var ny = -i*linew;
 24 |     line(ctx, x1, ny, x2, ny);
 25 |   }
 26 | }
 27 | 
 28 | function draw(canvas, X, Y, linen, linew) {
 29 |   var ctx = canvas.getContext("2d"),
 30 |       w = canvas.width,
 31 |       h = canvas.height,
 32 |       X = X || w/2,
 33 |       Y = Y || h/2,
 34 |       linen = linen || 100,
 35 |       linew = linew || 3;
 36 | 
 37 |   ctx.clearRect(0,0,w,h);
 38 | 
 39 |   // horizontal band
 40 |   ctx.save();
 41 |   ctx.translate(0, Y);
 42 |   band(ctx, 0, w, linen, linew);
 43 |   ctx.restore();
 44 | 
 45 |   // diagonal band
 46 |   ctx.save();
 47 |   ctx.translate(0, h);
 48 |   ctx.rotate(-Math.atan((h-Y)/X));
 49 |   band(ctx, 0, h*2, linen, linew);
 50 |   ctx.restore();
 51 | 
 52 |   // vertical band
 53 |   ctx.save();
 54 |   ctx.translate(X, 0);
 55 |   ctx.rotate(Math.PI/2);
 56 |   band(ctx, 0, h, linen, linew);
 57 |   ctx.restore();
 58 | }
 59 | 
 60 | function resizeCanvas(canvas) {
 61 |   canvas.width = window.innerWidth;
 62 |   canvas.height = window.innerHeight;
 63 | 
 64 |   draw(canvas);
 65 | }
 66 | 
 67 | function clamp(n, min, max) {
 68 |   if (n > min) return Math.min(n, max);
 69 |   return Math.max(n, min);
 70 | }
 71 | 
 72 | $(function() {
 73 |   var canvas = $("#wall")[0],
 74 |       linew = 3,
 75 |       linen = 100,
 76 |       temp_linew = linew,
 77 |       temp_linen = linen,
 78 |       X = canvas.height/2,
 79 |       Y = canvas.height/2,
 80 |       mousemove = false,
 81 |       mousedown = undefined;
 82 | 
 83 |   window.addEventListener('resize', function() { resizeCanvas(canvas); }, false);
 84 |   resizeCanvas(canvas);
 85 | 
 86 |   X = canvas.width/2;
 87 |   Y = canvas.height/2;
 88 | 
 89 |   window.addEventListener("mousedown", function(evt){
 90 |     mousemove = false;
 91 |     mousedown = evt;
 92 |   }, false);
 93 |   window.addEventListener("mousemove", function(evt){
 94 |     if (mousedown !== undefined) {
 95 |       mousemove = true;
 96 |       diffX = evt.clientX - mousedown.clientX;
 97 |       diffY = evt.clientY - mousedown.clientY;
 98 | 
 99 |       temp_linen = clamp(linen - diffY/5, 4, 200);
100 |       temp_linew = clamp(linew - diffX/20, 2, 20);
101 |       draw(canvas, X, Y, temp_linen, temp_linew);
102 |     }
103 |   }, false);
104 |   window.addEventListener("mouseup", function(evt){
105 |       if(!mousemove) {
106 |         draw(canvas, evt.clientX, evt.clientY, linen, linew);
107 |         X = evt.clientX;
108 |         Y = evt.clientY;
109 |       }
110 |       else {
111 |         linen = temp_linen;
112 |         linew = temp_linew;
113 |       }
114 |       mousedown = undefined;
115 |   }, false);
116 | 
117 |   $("#A").hide();
118 |   $("#Q").bind("mouseover", function() {
119 |     $("#A").show();
120 |     $("#Q").hide();
121 |   });
122 |   $("#A").bind("mouseout", function() {
123 |     $("#A").hide();
124 |     $("#Q").show();
125 |   });
126 | });
127 | </script>
128 | <style>
129 | body { margin: 0; }
130 | #Q { position: absolute; bottom: 5px; right: 5px; opacity: 0.5;}
131 | #A { position: absolute; bottom: 5px; right: 5px; background-color: white; }
132 | </style>
133 | <html>
134 |   <canvas id="wall" width=1000 height=1000></canvas>
135 |   <span id="Q">?</span>
136 |   <pre id="A">Sol Lewitt Wall Drawing #16 (1969)
137 | 
138 | Bands of lines 12 inches (30 cm) wide, in three directions
139 | (vertical, horizontal, diagonal right) intersecting.
140 | 
141 | Try clicking and click-and-drag. The X and Y axes have
142 | different meanings when dragging.</pre>
143 | </html>
144 | 


--------------------------------------------------------------------------------
/016/y-a-v-a/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 |   <meta charset="utf-8">
 3 |   <title>y_a_v_a ❤︎ Sol LeWitt • #16</title>
 4 |   <style>
 5 |     html, body {
 6 |       width: 100%;
 7 |       height: 100%;
 8 |     }
 9 |     body {
10 |       margin: 0;
11 |       position: relative;
12 |       overflow: hidden;
13 |     }
14 |     .\#16 {
15 |       width: 20%;
16 |       margin: 0 40%;
17 |       background: linear-gradient(#AAAAAA 20%, transparent 20%);
18 |       height: 200vh;
19 |       background-size: 5px 5px;
20 |       position: absolute;
21 |       top: -50%;
22 |     }
23 | 
24 |     #sol {
25 |       transform: rotate(45deg);
26 |     }
27 |     #lewitt {
28 |       transform: rotate(90deg);
29 |     }
30 | 
31 |   </style>
32 | 
33 | <div class="#16" id="sol"></div>
34 | <div class="#16" id="lewitt"></div>
35 | <div class="#16" id="walldrawing"></div>
36 | 


--------------------------------------------------------------------------------
/017/Dusch4593/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 |     <meta charset="utf-8">
 3 |     <title>y_a_v_a ❤︎ Sol LeWitt • #017</title>
 4 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
 6 |     <style>
 7 |     html,body {
 8 |         width: 100%;
 9 |         height: 100%;
10 |         margin: 0;
11 |         padding: 0;
12 |     }
13 |     canvas {
14 |         width: 100%;
15 |         height: 100%;
16 |     }
17 |     </style>
18 |     <script>
19 |         function setup() {
20 |             const canvas = createCanvas(1000,500)
21 |             canvas.center()
22 |             background(53,81,92)
23 |             stroke(207,181,59)
24 |         }
25 | 
26 |         function draw() {
27 |             for(let x = 0; x < 250; x+=5) {
28 |                 line(x, 0, x, 500)
29 |             }
30 |             
31 |             for(let y = 0; y <= 500; y+=5) {
32 |                 line(250, y, 500, y)
33 |             }
34 |             
35 |             for (let i = 0; i <= 250; i += 5){
36 |                 line(500, i, 500+i, 0);
37 |                 line(750, i, 500+i, 250);
38 |                 line(500, 250+i, 500+i, 250)
39 |                 line(750, 250+i, 500+i, 500)
40 |             }
41 |             
42 |             for (let i = 0; i <= 250; i += 5){
43 |                 line(750, i, 1000-i, 250);
44 |                 line(1000-i, 0, 1000, i);
45 |                 line(750, 250+i, 1000-i, 500)
46 |                 line(1000-i, 250, 1000, 250+i)
47 |             }
48 |         }
49 |     </script>
50 | 


--------------------------------------------------------------------------------
/017/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #17 (1969)
2 | 
3 | Four-part drawing with a different line direction in each part.


--------------------------------------------------------------------------------
/017/y-a-v-a/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 |     <meta charset="utf-8">
  3 |     <title>y_a_v_a ❤︎ Sol LeWitt • #017</title>
  4 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  5 |     <style>
  6 |     html,body {
  7 |         width: 100%;
  8 |         height: 100%;
  9 |         margin: 0;
 10 |         padding: 0;
 11 |     }
 12 |     canvas {
 13 |         width: 100%;
 14 |         height: 100%;
 15 |     }
 16 |     </style>
 17 |     <canvas></canvas>
 18 |     <script>
 19 |     /**
 20 |      * assumptions
 21 |      * 4 blocks make 5 margins horizontally
 22 |      * margin left is 2 in-between margins
 23 |      * margin right is also 2 in-between margins
 24 |      * each block is 5 margins wide
 25 |      * 4 blocks * 5 margins = 20 margins
 26 |      * 20 margins + 3 margins + 4 margins = 27 margins
 27 |      * hence a margin is 1/27 of width
 28 |      * and a block is 5/27 of width
 29 |      *
 30 |      * a block is 80% of the clientHeight
 31 |      * the vertical margin takes .2 * height
 32 |      * top margin equals bottom margin equals .1 * height
 33 |      */
 34 |     function number017() {
 35 |         var c = document.getElementsByTagName('canvas')[0];
 36 |         var ctx = c.getContext('2d');
 37 |         var width = ctx.canvas.width = ctx.canvas.clientWidth;
 38 |         var height = ctx.canvas.height = ctx.canvas.clientHeight;
 39 | 
 40 |         // clear screen on resize
 41 |         ctx.clearRect(0, 0, c.width, c.height);
 42 |         var cols = 27;
 43 |         var space = 8;
 44 | 
 45 |         var vmargin = (1 / 10) * height;
 46 |         var hmargin = (1 / cols) * width;
 47 |         var hrmargin;
 48 |         var hlmargin = hrmargin = (hmargin * 2);
 49 |         var blockwidth = .25 * (width - hlmargin - hrmargin - (3 * hmargin)); // each block is 4 * margin wide.
 50 |         var blockheight = (8 / 10) * height;
 51 | 
 52 |         ctx.strokeStyle = '#000';
 53 |         ctx.lineWidth = 1.0;
 54 | 
 55 |         var vlineoffset = hlmargin; // vertical
 56 |         var hlineoffset = vlineoffset + blockwidth + hmargin; // horizontal
 57 |         var dupoffset = hlineoffset + blockwidth + hmargin; // diagonal up
 58 |         var ddownoffset = dupoffset + blockwidth + hmargin; // diagonal down
 59 | 
 60 |         var s = 0;
 61 |         // o
 62 |         var ll = 0;
 63 |         // e
 64 |         var w = 0;
 65 |         // i
 66 |         var tt = 0;
 67 | 
 68 |         var vlines = blockwidth / space;
 69 |         for (; s < vlines; s++) {
 70 |             ctx.beginPath();
 71 |             var sx = ((s / vlines) * blockwidth) + vlineoffset;
 72 |             ctx.moveTo(sx, vmargin);
 73 |             ctx.lineTo(sx, blockheight + vmargin);
 74 |             ctx.stroke();
 75 |         }
 76 | 
 77 |         var hlines = blockheight / space;
 78 |         for (; ll <= hlines; ll++) {
 79 |             ctx.beginPath();
 80 |             var lly = ((ll / hlines) * blockheight) + vmargin;
 81 |             ctx.moveTo(hlineoffset, lly);
 82 |             ctx.lineTo(hlineoffset + blockwidth, lly);
 83 |             ctx.stroke();
 84 |         }
 85 | 
 86 |         var points = Math.floor(blockwidth / space);
 87 |         var count = (blockheight / blockwidth) * points + points;
 88 |         var gap = blockheight / (count - points);
 89 | 
 90 |         for (; w < count; w++) {
 91 |             ctx.beginPath();
 92 |             var wy = (w > points) ? ((w * gap) - blockwidth): 0;
 93 |             var wx = (w > (count - points)) ? (w - (count - points)) * gap : 0;
 94 |             ctx.moveTo(Math.min(w * gap, blockwidth) + dupoffset, wy + vmargin);
 95 |             ctx.lineTo(wx + dupoffset, Math.min(w * gap, blockheight) + vmargin);
 96 |             ctx.stroke();
 97 |         }
 98 | 
 99 |         for (; tt <= count; tt++) {
100 |             ctx.beginPath();
101 |             var tty = (tt > points) ? (tt - points) * (blockheight / (count - points)) : 0;
102 |             var ttx = (tt > (count - points)) ? (count - tt) * gap : blockwidth;
103 |             ctx.moveTo(Math.max(blockwidth - (tt * gap), 0) + ddownoffset, tty + vmargin);
104 |             ctx.lineTo(ttx + ddownoffset, Math.min(tt * gap, blockheight) + vmargin);
105 |             ctx.stroke();
106 |         }
107 |     }
108 | 
109 |     window.onresize = number017;
110 | 
111 |     number017();
112 |     </script>
113 | 


--------------------------------------------------------------------------------
/033/instructions.md:
--------------------------------------------------------------------------------
1 | # Wall Drawing #33 (1970)
2 | 
3 | A one-inch (2.5cm) grid covering a square. 
4 | Within each of the one-inch (2.5cm) squares: 
5 | 1: Vertical black lines; 
6 | 2: Horizontal yellow lines; 
7 | 3: Diagonal right red lines; 
8 | or 4: Diagonal left blue lines. 
9 | As many lines as desired, but at least one line in each square.


--------------------------------------------------------------------------------
/045/OgAstorga/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title></title>
 6 |   <style>
 7 |     html, body {
 8 |       overflow: hidden;
 9 |       width: 100%;
10 |       height: 100%;
11 |     }
12 | 
13 |     svg {
14 |       position: absolute;
15 |       background: #f0f0f0;
16 |       top: 0;
17 |       left: 0;
18 |       height: 100%;
19 |       width: 100%;
20 |     }
21 |   </style>
22 | </head>
23 | <body>
24 |   <svg></svg>
25 | </body>
26 | <script src="https://d3js.org/d3.v5.min.js"></script>
27 | <script type="text/javascript">
28 |   const svg = d3.select('svg')
29 | 
30 |   const width = +svg.style('width').replace('px', '')
31 |   const height = +svg.style('height').replace('px', '')
32 |   const base = Math.max(width, height)
33 | 
34 |   const gen = (x, m = 1, c = 0) => m*x + c
35 |   const ortogen = (x, m = 1) => -x/m
36 | 
37 |   const angle = Math.random() * Math.PI / 2
38 |   const pend = Math.tan(angle);
39 | 
40 |   const lines = []
41 |   let sample = 0
42 |   while (true) {
43 |     sample += 12 * Math.cos(angle)
44 |     const point = {
45 |       x: sample,
46 |       y: gen(sample, pend),
47 |     }
48 | 
49 |     lines.push({
50 |       x1: point.x - base,
51 |       y1: point.y + ortogen(-base, pend),
52 |       x2: point.x + base,
53 |       y2: point.y + ortogen(base, pend)
54 |     })
55 | 
56 |     if (point.y > height && point.x > width) {
57 |       break;
58 |     }
59 |   }
60 | 
61 |   svg.selectAll('line')
62 |     .data(lines)
63 |     .enter()
64 |     .append('line')
65 |     .attr('x1', line => line.x1)
66 |     .attr('y1', line => line.y1)
67 |     .attr('x2', line => line.x2)
68 |     .attr('y2', line => line.y2)
69 |     .attr('stroke', 'steelblue')
70 |     .attr('stroke-width', '4px')
71 | </script>
72 | </html>
73 | 


--------------------------------------------------------------------------------
/045/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #45 (1970)
2 | 
3 | Straight lines 10" (25 cm) long, not touching, covering the wall evenly.
4 | 


--------------------------------------------------------------------------------
/046/ashkan-sarlak/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html><html lang="en"><head>
 2 |     <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script>
 3 |     <link rel="stylesheet" type="text/css" href="style.css">
 4 |     <meta charset="utf-8">
 5 | 
 6 |   </head>
 7 |   <body>
 8 |     <script src="sketch.js"></script>
 9 |   
10 | 
11 | </body></html>


--------------------------------------------------------------------------------
/046/ashkan-sarlak/sketch.js:
--------------------------------------------------------------------------------
 1 | function setup() {
 2 |   createCanvas(windowWidth, windowHeight);
 3 |   noLoop();
 4 |   strokeWeight(1.5);
 5 |   colorMode(HSB, 360, 100, 100);
 6 | }
 7 | 
 8 | function draw() {
 9 |   background(155, 90, 50);
10 |   noFill();
11 |   var h = map(mouseX, 0, width, 0, 360);
12 |   stroke(35, 100, 100);
13 |   for (var x=0; x<width; x+=8) {
14 |     bezier(x, 0, 
15 |            x+random(10)-5, height/2, 
16 |            x+random(10)-5, height/2, 
17 |            x, height);
18 |   }
19 | }


--------------------------------------------------------------------------------
/046/ashkan-sarlak/style.css:
--------------------------------------------------------------------------------
1 | html, body {
2 |   margin: 0;
3 |   padding: 0;
4 | }
5 | canvas {
6 |   display: block;
7 | }
8 | 


--------------------------------------------------------------------------------
/046/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #46 (1970)
2 | 
3 | Vertical lines, not straight, not touching, covering the wall evenly.
4 | 


--------------------------------------------------------------------------------
/046/kubamarkiewicz/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
 5 |     <meta charset="utf-8" />
 6 |     <style>
 7 |       html, body {
 8 |         margin: 0;
 9 |         padding: 0;
10 |       }
11 |       canvas {
12 |         display: block;
13 |       }
14 |     </style>
15 |   </head>
16 |   <body>
17 |     <script>
18 |       function setup() {
19 |         createCanvas(windowWidth, windowHeight);
20 |         stroke(0, 200, 200);
21 |         strokeWeight(3);
22 |         noFill(); 
23 |       }
24 |       function draw() {
25 |         background(87,35,100);
26 |         var p1 = 10;
27 |         var p2 = 5;
28 |         var p3 = 130;
29 |         var p4 = 15;
30 | 
31 |         var x;
32 |         for (x = 0; x < width; x=x+p4) {
33 |           var y = random(0, height);
34 |           beginShape();
35 |           vertex(x, 0); 
36 |           vertex(x, y);
37 |           vertex(x+p1, y+p2);
38 |           vertex(x, y+p3);
39 |           vertex(x, height);
40 |           endShape();
41 |         }
42 |         noLoop();
43 |       }
44 |     </script>
45 |   </body>
46 | </html>


--------------------------------------------------------------------------------
/046/llimllib/index.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | ## Wall Drawing #46 (1970)
  3 | 
  4 | Vertical lines, not straight, not touching, covering the wall evenly.
  5 | -->
  6 | <html><head>
  7 | <title>Sol LeWitt Wall Drawing #46</title>
  8 | <script>
  9 | function line(ctx, x1, y1, x2, y2) {
 10 |   ctx.beginPath();
 11 |   ctx.moveTo(x1, y1);
 12 |   ctx.lineTo(x2, y2);
 13 |   ctx.stroke();
 14 | }
 15 | 
 16 | var ptable = {
 17 |   "4": [.01, .099, 0],
 18 |   "3": [.1, .088, .02],
 19 |   "2": [.25, .6, .15],
 20 |   "1": [.4, .4, .2],
 21 |   "0": [.5, .25, .25],
 22 | }
 23 | 
 24 | function lsr(ctx, originalx, curx) {
 25 |   var d = Math.round(Math.abs(originalx - curx)),
 26 |       p_straight = ptable[d.toString()][0],
 27 |       p_turnhome = ptable[d.toString()][1],
 28 |       p_turnaway = ptable[d.toString()][2];
 29 | 
 30 |   var r = Math.random();
 31 |   if (r < p_straight) {
 32 |     return curx;
 33 |   } else if (r > (1-p_turnaway)) {
 34 |     if (originalx == curx)     { return curx + (Math.random() < .5 ? -1 : 1); }
 35 |     else if (originalx > curx) { return curx-1; }
 36 |     else                       { return curx+1; }
 37 |   } else {
 38 |     if (originalx == curx)     { return curx + (Math.random() < .5 ? -1 : 1); }
 39 |     else if (originalx > curx) { return curx+1; }
 40 |     else                       { return curx-1; }
 41 |   }
 42 | }
 43 | 
 44 | function find(pixels, x, y) {
 45 |   return pixels.hasOwnProperty(x.toString()+","+(y.toString()));
 46 | }
 47 | 
 48 | function save(pixels, x, y) {
 49 |   pixels[x.toString()+","+((y-1).toString())] = undefined;
 50 | }
 51 | 
 52 | // Uneven Vertical Line
 53 | function uvl(ctx, x, h, pixels) {
 54 |   ctx.beginPath();
 55 |   var y = 0;
 56 |   var originalx = x;
 57 |   ctx.moveTo(x, y);
 58 |   for (; y<h; y++) {
 59 |     x = lsr(ctx, originalx, x);
 60 |     // If two lines would touch... don't
 61 |     if (find(pixels, x, y-1) || find(pixels, x-1, y+1) ||
 62 |         find(pixels, x-1, y) || find(pixels, x-1, y-1)) {
 63 |       x += 1
 64 |     }
 65 |     save(pixels, x, y);
 66 |     ctx.lineTo(x, y);
 67 |   }
 68 |   ctx.stroke()
 69 | }
 70 | 
 71 | function draw(canvas, linespace, linea) {
 72 |   var ctx = canvas.getContext("2d"),
 73 |       linespace = Math.round(linespace),
 74 |       h = canvas.height,
 75 |       w = canvas.width;
 76 | 
 77 |   ctx.clearRect(0,0,w,h);
 78 |   ctx.strokeStyle = "rgba(0,0,0,"+linea+")";
 79 | 
 80 |   //console.log("drawing", linespace, linea)
 81 | 
 82 |   pixels = {}
 83 |   for (var x=linespace; x < w; x+=linespace) {
 84 |     uvl(ctx, x, h, pixels);
 85 |   }
 86 | }
 87 | 
 88 | function clamp(n, min, max) {
 89 |   if (n > min) return Math.min(n, max);
 90 |   return Math.max(n, min);
 91 | }
 92 | 
 93 | document.addEventListener("DOMContentLoaded", function() {
 94 |   var canvas = document.getElementById("wall"),
 95 |       linespace = 5,
 96 |       linea = .4,
 97 |       mousemove = false,
 98 |       mousedown = undefined;
 99 | 
100 |   function resizeCanvas() {
101 |     canvas.width = window.innerWidth;
102 |     canvas.height = window.innerHeight;
103 | 
104 |     draw(canvas, linespace, linea);
105 |   }
106 | 
107 |   window.addEventListener('resize', resizeCanvas);
108 |   resizeCanvas(canvas);
109 | 
110 |   window.addEventListener("mousedown", function(evt) {
111 |     mousemove = false;
112 |     mousedown = evt;
113 |   }, false);
114 |   window.addEventListener("mousemove", function(evt) {
115 |     if (mousedown !== undefined) {
116 |       mousemove = true;
117 |       diffX = evt.clientX - mousedown.clientX;
118 |       diffY = evt.clientY - mousedown.clientY;
119 | 
120 |       temp_linespace = clamp(linespace - diffY/10, 4, 30);
121 |       temp_linea = clamp(linea - diffX/1000, .3, 1);
122 |       draw(canvas, temp_linespace, temp_linea);
123 |     }
124 |   }, false);
125 |   window.addEventListener("mouseup", function(evt) {
126 |     if(mousemove) {
127 |       linespace = temp_linespace;
128 |       linea = temp_linea;
129 |     }
130 |     mousedown = undefined;
131 |   }, false);
132 | 
133 |   window.addEventListener("keypress", function(evt) {
134 |     // r for reset
135 |     if (evt.keyCode == 114) {
136 |       linea = .3;
137 |       linespace = 5;
138 |       draw(canvas, linespace, linea);
139 |     }
140 |   });
141 | 
142 |   var A = document.getElementById("A");
143 |   var Q = document.getElementById("Q");
144 |   A.style["visibility"] = "hidden";
145 |   document.getElementById("Q").addEventListener("mouseover", function() {
146 |     A.style["visibility"] = "";
147 |     Q.style["visibility"] = "hidden";
148 |   });
149 |   document.getElementById("A").addEventListener("mouseout", function() {
150 |     A.style["visibility"] = "hidden";
151 |     Q.style["visibility"] = "";
152 |   });
153 | });
154 | </script>
155 | <style>
156 | body { margin: 0; }
157 | #Q { position: absolute; bottom: 5px; right: 5px; color: blue; background-color: white; font-size: 24px; }
158 | #A { position: absolute; bottom: 5px; right: 5px; background-color: white; }
159 | </style>
160 | <html>
161 |   <canvas id="wall"></canvas>
162 |   <span id="Q">?</span>
163 |   <pre id="A">Sol LeWitt Wall Drawing #46 (1970)
164 | 
165 | Vertical lines, not straight, not touching, covering the wall evenly.
166 | 
167 | Clicking and dragging in the X changes the line spacing
168 | Clicking and dragging in the Y changes the stroke alpha
169 | Pres "r" to reset
170 | </pre>
171 | </html>
172 | 


--------------------------------------------------------------------------------
/046/ustina/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <meta>
 4 | 
 5 |       <title>Solving Sol</title>
 6 | 
 7 |       <script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.min.js"></script>
 8 | 
 9 |       <style type="text/css">
10 | 
11 |         html, body {
12 |           width: 100%;
13 |           height: 100%;
14 |           overflow: hidden;
15 |           padding: 0;
16 |           margin: 0;
17 |         }
18 | 
19 |       </style>
20 |     </meta>
21 |   </head>
22 |   <body>
23 |     <script type="application/processing" data-processing-target="pjs">
24 | 
25 |       /*
26 | 
27 |         ## Wall Drawing #46 (1970)
28 | 
29 |         Vertical lines, not straight, not touching, covering the wall evenly.
30 | 
31 |       */
32 | 
33 |       void setup() {
34 |         size(window.innerWidth, window.innerHeight);
35 |         background(250);
36 |         noFill();
37 |         stroke(10,200,50,200);
38 |         strokeCap(SQUARE);
39 |         strokeJoin(MITER);
40 |         strokeWeight(3);
41 |         for (int x = 0; x < window.innerWidth; x = x+12) {
42 |           int y = random(2,window.innerHeight);
43 |           beginShape();
44 |           vertex(x, 0);
45 |           vertex(x, y);
46 |           vertex(x+7, y+7);
47 |           vertex(x, y+14);
48 |           vertex(x, window.innerHeight);
49 |           endShape();
50 |         }
51 |       }
52 | 
53 |     </script>
54 | 
55 |     <canvas id="pjs"></canvas>
56 | 
57 |   </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/049/diagram.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wholepixel/solving-sol/112ed0c82f0d830d91cc751b073c62c8d1161dcb/049/diagram.jpg


--------------------------------------------------------------------------------
/049/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #49 (1970)
2 | 
3 | A wall divided equally into fifteen equal parts, each with a different line direction and color, and all combinations.
4 | 
5 | Red, Yellow, Blue, Black pencil
6 | 
7 | ![diagram](diagram.jpg)
8 | 


--------------------------------------------------------------------------------
/050A/instructions.md:
--------------------------------------------------------------------------------
1 | # Wall Drawing #50A (1970)
2 | 
3 | A wall divided into four parts by lines drawn corner to corner. Each section with three different colors made of parallel lines superimposed. Color pencil.


--------------------------------------------------------------------------------
/051/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #51 (1970)
2 | 
3 | All architectural points connected by straight lines.
4 | 
5 | Blue snap lines
6 | 


--------------------------------------------------------------------------------
/056/Soreine/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |     <meta>
 5 |     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.min.js"></script>
 6 |     <style type="text/css">
 7 |         html,
 8 |         body {
 9 |             width: 100%;
10 |             height: 100%;
11 |             overflow: hidden;
12 |             padding: 0;
13 |             margin: 0;
14 |         }
15 | 
16 |         /* Scale canvas with resize attribute to full size */
17 |         canvas[resize] {
18 |             width: 100%;
19 |             height: 100%;
20 |         }
21 |     </style>
22 |     </meta>
23 | </head>
24 | 
25 | <body>
26 |     <script canvas='solving-sol' type='text/paperscript' src="./index.js"></script>
27 | 
28 |     <canvas id='solving-sol' resize="true"></canvas>
29 | 
30 | </body>
31 | 
32 | </html>


--------------------------------------------------------------------------------
/056/Soreine/index.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |   Solving Sol #56 (1970)
  3 | 
  4 |   A square is divided horizontally and vertically into four equal parts, each with lines in four directions superimposed progressively.
  5 |  */
  6 | 
  7 | function onResize(event) {
  8 |   draw();
  9 | }
 10 | 
 11 | // https://coolors.co/fffbe4-264653-2a9d8f-f4a261-ff5e5b
 12 | var COLORS = "fffbe4-264653-2a9d8f-f4a261-ff5e5b".split("-").map(function(c) {
 13 |   return "#" + c;
 14 | });
 15 | 
 16 | var canvasBg = COLORS[0];
 17 | var squareBg = canvasBg;
 18 | 
 19 | function direction(angle) {
 20 |   return new Point(Math.cos(angle), Math.sin(angle));
 21 | }
 22 | 
 23 | function draw() {
 24 |   project.clear();
 25 | 
 26 |   // background
 27 |   new Path.Rectangle(view.bounds).fillColor = canvasBg;
 28 | 
 29 |   // Use golden ratio because art.
 30 |   var phi = (1 + Math.sqrt(5)) / 2;
 31 |   // Size of a small square
 32 |   var height = Math.min(view.size.width, view.size.height) / phi / 2;
 33 | 
 34 |   // Direction of lines for each square
 35 |   var directionSW = direction(Math.PI / 12);
 36 |   var directionNW = direction((2 * Math.PI) / 12);
 37 |   var directionNE = direction((3 * Math.PI) / 12);
 38 |   var directionSE = direction((4 * Math.PI) / 12);
 39 | 
 40 |   // Anchor of each square
 41 |   var topLeft = view.center - height;
 42 |   var pointSW = topLeft + new Point(0, height);
 43 |   var pointNW = topLeft + new Point(0, 0);
 44 |   var pointNE = topLeft + new Point(height, 0);
 45 |   var pointSE = topLeft + new Point(height, height);
 46 | 
 47 |   // Entire square
 48 |   var wholeSquare = new Path.Rectangle(new Rectangle(topLeft, height * 2));
 49 |   wholeSquare.fillColor = squareBg;
 50 | 
 51 |   // South West square
 52 |   fillSquareWithLines(pointSW, height, directionSW, COLORS[1]);
 53 | 
 54 |   // North West square
 55 |   fillSquareWithLines(pointNW, height, directionSW, COLORS[1]);
 56 |   fillSquareWithLines(pointNW, height, directionNW, COLORS[2]);
 57 | 
 58 |   // North East square
 59 |   fillSquareWithLines(pointNE, height, directionSW, COLORS[1]);
 60 |   fillSquareWithLines(pointNE, height, directionNW, COLORS[2]);
 61 |   fillSquareWithLines(pointNE, height, directionNE, COLORS[3]);
 62 | 
 63 |   // South East square
 64 |   fillSquareWithLines(pointSE, height, directionSW, COLORS[1]);
 65 |   fillSquareWithLines(pointSE, height, directionNW, COLORS[2]);
 66 |   fillSquareWithLines(pointSE, height, directionNE, COLORS[3]);
 67 |   fillSquareWithLines(pointSE, height, directionSE, COLORS[4]);
 68 | }
 69 | 
 70 | /**
 71 |  * Draw a line of given width (a strip) so that it can be used
 72 |  * in boolean operations with to other shapes.
 73 |  */
 74 | function strip(start, end, width) {
 75 |   var direction = end - start;
 76 |   var orthogonal = new Point(direction.y, -direction.x).normalize();
 77 |   var stripPath = new Path();
 78 |   stripPath.add(start + (orthogonal * width) / 2);
 79 |   stripPath.add(end + (orthogonal * width) / 2);
 80 |   stripPath.add(end - (orthogonal * width) / 2);
 81 |   stripPath.add(start - (orthogonal * width) / 2);
 82 |   stripPath.closed = true;
 83 | 
 84 |   return stripPath;
 85 | }
 86 | 
 87 | /**
 88 |  * Draw a square and fill it with lines in given direction and given color.
 89 |  */
 90 | function fillSquareWithLines(
 91 |   corner, // Point
 92 |   height, // Number
 93 |   direction, // Vector (Point),
 94 |   color
 95 | ) {
 96 |   // The ratio between line width and line spacing
 97 |   var RATIO = 1 / 3;
 98 |   var LINE_COUNT = 12;
 99 |   // Width of lines
100 |   var strokeWidth = (RATIO * height) / LINE_COUNT;
101 |   // Spacing between lines
102 |   var spacing = ((1 - RATIO) * height) / LINE_COUNT;
103 | 
104 |   var square = new Rectangle(corner, new Size(height, height));
105 | 
106 |   // Use length of diagonal as upper bound when filling the square with lines.
107 |   var diagonalLength = Math.sqrt(2) * height * 2;
108 |   // Orthogonal to the line direction
109 |   var orthogonal = new Point(direction.y, -direction.x).normalize();
110 |   // Center of the square
111 |   var center = corner + height / 2;
112 | 
113 |   var squarePath = new Path.Rectangle(square);
114 | 
115 |   // Draw one strip at given offset orthogonally to the direction of lines
116 |   function drawStrip(offset) {
117 |     var lineCenter = center + orthogonal * offset;
118 |     var lineStart = lineCenter - direction.normalize(diagonalLength / 2);
119 |     var lineEnd = lineCenter + direction.normalize(diagonalLength / 2);
120 | 
121 |     var stripPath = strip(lineStart, lineEnd, strokeWidth);
122 |     var segmentPath = stripPath.intersect(squarePath);
123 |     segmentPath.fillColor = color;
124 |   }
125 | 
126 |   var i = 0;
127 |   do {
128 |     var offset = i * (spacing + strokeWidth);
129 |     drawStrip(offset);
130 |     drawStrip(-offset);
131 |     i++;
132 |   } while (offset <= diagonalLength / 2);
133 | 
134 |   // Draw the square contour
135 |   var contour = new Path.Rectangle(square);
136 |   contour.strokeWidth = strokeWidth;
137 |   contour.strokeColor = COLORS[1];
138 | }
139 | 


--------------------------------------------------------------------------------
/056/cagrimmett/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | 	<title>Sol LeWitt Wall Drawing 56</title>
  4 | 	
  5 | 	<script src="https://d3js.org/d3.v4.min.js"></script>
  6 | 	<script src="https://unpkg.com/textures@1.0.4/textures.js"></script>
  7 | 	<style type="text/css">
  8 | 		.drawing {
  9 | 			margin: 0 auto;
 10 | 			text-align: center;
 11 | 			width: 910px;
 12 | 			margin-top: 40px;
 13 | 		}
 14 | 		#grid {
 15 | 			display: inline-block;
 16 | 			margin: 0 auto;
 17 | 		}
 18 | 	</style>
 19 | </head>
 20 | <body>
 21 | 
 22 | <div class="drawing">
 23 | 	<div id="grid"></div>
 24 | </div>
 25 | 
 26 | <script type="text/javascript">
 27 | function gridData() {
 28 | 	var data = new Array();
 29 | 	var id = 1;
 30 | 	var xpos = 4.5; 
 31 | 	var ypos = 4.5;
 32 | 	var width = 450.5;
 33 | 	var height = 451;
 34 | 	var click = 0;
 35 | 	
 36 | 	// iterate for rows	
 37 | 	for (var row = 0; row < 2; row++) {
 38 | 		data.push( new Array() );
 39 | 		
 40 | 	// iterate for cells/columns inside rows
 41 | 		for (var column = 0; column < 2; column++) {
 42 | 			data[row].push({
 43 | 				id: id,
 44 | 				x: xpos,
 45 | 				y: ypos,
 46 | 				width: width,
 47 | 				height: height
 48 | 			})
 49 | 			xpos += width;
 50 | 			id += 1;
 51 | 		}
 52 | 		xpos = 4.5;
 53 | 		ypos += 450;	
 54 | 	}
 55 | 	return data;
 56 | }
 57 | 
 58 | var gridData = gridData();	
 59 | 
 60 | var grid = d3.select("#grid")
 61 | 	.append("svg")
 62 | 	.attr("width","910px")
 63 | 	.attr("height","910px");
 64 | 
 65 | var size = 10;
 66 | var strokewidth = 1;
 67 | var stroke = "#111"
 68 | 
 69 | var t1 = textures.lines()
 70 |           .size(size)
 71 |           .orientation("vertical")
 72 |           .strokeWidth(strokewidth)
 73 |           .stroke(stroke),
 74 |       t2 = textures.lines()
 75 | 	  	  .size(size)
 76 |           .orientation("vertical", "horizontal")
 77 |           .strokeWidth(strokewidth)
 78 |           .stroke(stroke),
 79 |       t3 = textures.lines()
 80 |           .size(size)
 81 | 		  .orientation("vertical", "horizontal", "diagonal")
 82 |           .strokeWidth(strokewidth)
 83 |           .stroke(stroke),
 84 |       t4 = textures.lines()
 85 |           .size(size)
 86 | 		  .orientation("vertical", "horizontal", "diagonal", "6/8")
 87 |           .strokeWidth(strokewidth)
 88 |           .stroke(stroke);
 89 |           
 90 |  grid.call(t1);
 91 |  grid.call(t2);
 92 |  grid.call(t3);
 93 |  grid.call(t4);
 94 | 	
 95 | var row = grid.selectAll(".row")
 96 | 	.data(gridData)
 97 | 	.enter().append("g")
 98 | 	.attr("class", "row");
 99 |     	
100 | var column = row.selectAll(".square")
101 | 	.data(function(d) { return d; })
102 | 	.enter().append("rect")
103 | 	.attr("class","square")
104 | 	.attr("x", function(d) { return d.x; })
105 | 	.attr("y", function(d) { return d.y; })
106 | 	.attr("width", function(d) { return d.width; })
107 | 	.attr("height", function(d) { return d.height; })
108 | 	.style("fill", function(d) {            
109 |             if (d.id == 1) {return t1.url()}
110 |             if (d.id == 2) {return t2.url()}
111 |             if (d.id == 3) {return t3.url()}
112 |             if (d.id == 4) {return t4.url()}  
113 | 	;})
114 | 	
115 | </script>	
116 | 
117 | 


--------------------------------------------------------------------------------
/056/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #56 (1970)
2 | 
3 | A square is divided horizontally and vertically into four equal parts, each with lines in four directions superimposed progressively.


--------------------------------------------------------------------------------
/056/y-a-v-a/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 |     <meta charset="utf-8">
  3 |     <title>y_a_v_a ❤︎ Sol LeWitt • #056</title>
  4 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  5 |     <style>
  6 |     html,body {
  7 |         width: 100%;
  8 |         height: 100%;
  9 |         margin: 0;
 10 |         padding: 0;
 11 |     }
 12 |     canvas {
 13 |         height: 90%;
 14 |         margin: 2.5% auto;
 15 |         display: block;
 16 |         border: 1px solid #888;
 17 |     }
 18 |     </style>
 19 |     <canvas></canvas>
 20 |     <script>
 21 |     function number56() {
 22 |         var c = document.getElementsByTagName('canvas')[0];
 23 |         var ctx = c.getContext('2d');
 24 |         var height = ctx.canvas.height = ctx.canvas.clientHeight;
 25 |         var width = ctx.canvas.width = ctx.canvas.clientHeight;
 26 | 
 27 |         // clear screen on resize
 28 |         ctx.clearRect(0, 0, c.width, c.height);
 29 | 
 30 |         // more pencil gray than black
 31 |         ctx.strokeStyle = '#444';
 32 |         ctx.lineWidth = 1.0;
 33 | 
 34 |         var preferedGap = 16; // modify this value according to your wishes
 35 |         var suggestedLines = Math.ceil(width / preferedGap);
 36 |         // always have an even amount of lines
 37 |         var lines = suggestedLines % 2 === 1 ? suggestedLines + 1: suggestedLines;
 38 |         var vlines = lines;
 39 |         var hlines = lines;
 40 |         var calculatedGap = width / lines; // change gap to match full width
 41 |         var halfwidth = Math.ceil(lines / 2) * calculatedGap;
 42 |         var halfheight = Math.ceil(lines / 2) * calculatedGap;
 43 | 
 44 |         for (var s = 0; s <= vlines; s++) {
 45 |             var vx1 = s * calculatedGap;
 46 |             var vx2 = vx1;
 47 |             var vy1 = 0;
 48 |             var vy2 = height;
 49 | 
 50 |             ctx.beginPath();
 51 |             ctx.moveTo(vx1, vy1);
 52 |             ctx.lineTo(vx2, vy2);
 53 |             ctx.stroke();
 54 |         }
 55 | 
 56 |         for (var l = 0; l <= hlines; l++) {
 57 |             var hx1 = (l < (hlines / 2)) ? halfheight : 0;
 58 |             var hx2 = width;
 59 |             var hy1 = l * calculatedGap;
 60 |             var hy2 = hy1;
 61 | 
 62 |             ctx.beginPath();
 63 |             ctx.moveTo(hx1, hy1);
 64 |             ctx.lineTo(hx2, hy2);
 65 |             ctx.stroke();
 66 |         }
 67 | 
 68 |         var halflines = Math.floor(.5 * lines);
 69 |         var count = Math.floor(1.5 * lines); // width + half height
 70 | 
 71 |         for (var w = 0; w <= count; w++) {
 72 |             var wx1 = Math.min(w * calculatedGap, width);
 73 |             var wy1 = (w > lines) ? (w * calculatedGap) - (height - halfheight): halfheight;
 74 |             var wx2 = (w > halflines) ? (w - halflines) * calculatedGap : 0;
 75 |             var wy2 = (w < halflines) ? w * calculatedGap + halfheight : height;
 76 | 
 77 |             ctx.beginPath();
 78 |             ctx.moveTo(wx1, wy1);
 79 |             ctx.lineTo(wx2, wy2);
 80 |             ctx.stroke();
 81 |         }
 82 | 
 83 |         // we use lines because the area takes half width + half height
 84 |         for (var tt = 0; tt < lines; tt++) {
 85 |             var x1 = (tt > halflines) ? tt * calculatedGap : halfwidth;
 86 |             var y1 = (tt > halflines) ? halfheight : halfheight + (tt * calculatedGap);
 87 |             var x2 = (tt < halflines) ? width - (tt * calculatedGap) : width ;
 88 |             var y2 = (tt < halflines) ? height : (height + halfheight) - (tt * calculatedGap);
 89 | 
 90 |             ctx.beginPath();
 91 |             ctx.moveTo(x1, y1);
 92 |             ctx.lineTo(x2, y2);
 93 |             ctx.stroke();
 94 |         }
 95 |     }
 96 | 
 97 |     window.onresize = number56;
 98 | 
 99 |     number56();
100 |     </script>
101 | 


--------------------------------------------------------------------------------
/065/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #65 (1971)
2 | 
3 | Lines not short, not straight, crossing and touching, drawn at random, using four colors, uniformly dispersed with maximum density, covering the entire surface of the wall.


--------------------------------------------------------------------------------
/065/lwiiii/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 	<title>Sol Lewitt. Wall Drawing #65. by Max Kolyanov</title>
 4 | 	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.18/paper-full.min.js" ></script>
 5 | 	<style type="text/css">
 6 | 		html, body {
 7 | 		  width: 100%;
 8 | 		  height: 100%;
 9 | 		  padding: 0;
10 | 		  margin: 0;
11 | 		}
12 | 	</style>
13 | </head>
14 | <body>
15 |     <script canvas='wall' type='text/paperscript'>
16 | 
17 |     function randomEl(arr) {
18 |     	return arr[Math.floor(Math.random()*arr.length)];
19 |     }
20 | 
21 |     function createPoint(){
22 | 	    
23 | 		var h = window.innerWidth;
24 | 		var w = window.innerHeight; 
25 | 	    var nh = Math.floor(Math.random() * h);
26 | 	    var nw = Math.floor(Math.random() * w);
27 | 	    
28 | 	    add = [800,-800,0]
29 | 	    var a1 = randomEl(add);
30 | 	    var a2 = randomEl(add);
31 | 	    return [nh+a1,nw+a2]
32 |     
33 | 	}
34 | 
35 | 	function draw() {
36 | 		colors = ["#346FE2","#3D3A3F","#D0222C","#F3F82F"]
37 | 
38 | 	    for(var i=0; i<500; i++) {
39 | 	        var path = new Path();
40 | 			path.strokeColor = randomEl(colors);
41 | 			var point = createPoint()
42 | 			path.add(new Point(point[0],point[1])); 
43 | 			var point = createPoint()
44 | 			path.add(new Point(point[0],point[1])); 
45 | 			var point = createPoint()
46 | 			path.add(new Point(point[0],point[1]));
47 | 			var point = createPoint()
48 | 			path.add(new Point(point[0],point[1]));
49 | 			path.smooth();
50 | 	    }
51 | 	}
52 | 
53 | 	draw();
54 |      
55 |     </script>
56 | <canvas id='wall' resize></canvas>
57 | </body>
58 | </html>


--------------------------------------------------------------------------------
/085/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #85 (1971)
2 | 
3 | A wall is divided into four horizontal parts. In the top row are four equal divisions, each with lines in a different direction. In the second row, six double combinations; in the third row, four triple combinations; in the bottom row, all four combinations superimposed.


--------------------------------------------------------------------------------
/085/y-a-v-a/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 |   <meta charset="utf-8">
  3 |   <title>y_a_v_a ❤︎ Sol LeWitt • #85</title>
  4 |   <style>
  5 |     html, body {
  6 |       width: 100%;
  7 |       height: 100%;
  8 |     }
  9 |     body {
 10 |       margin: 0;
 11 |       position: relative;
 12 |       overflow: hidden;
 13 |     }
 14 |     .number85 {
 15 |       display: flex;
 16 |       flex-wrap: wrap;
 17 |       width: 100%;
 18 |       height: 100%;
 19 |     }
 20 |     .sol {
 21 |       width: calc(100% / 4);
 22 |     }
 23 |     .lewitt {
 24 |       width: calc(100% / 6);
 25 |     }
 26 |     .wall {
 27 |       width: calc(100% / 4);
 28 |     }
 29 |     .drawing {
 30 |       width: 100%;
 31 |     }
 32 |   </style>
 33 | 
 34 |   <script>
 35 |     var valueTemplate = [
 36 |       'repeating-linear-gradient(00deg',
 37 |       ' #FFFFFF 0px',
 38 |       ' transparent 1px',
 39 |       ' transparent 5px',
 40 |       ' #FFFFFF 6px)'
 41 |     ].join(',');
 42 | 
 43 |     var lineVariants = [
 44 |       ['vertical', 90, 'FFFF00'],
 45 |       ['horizontal', 0, '00FF00'],
 46 |       ['diagonal-left', 45, '0000FF'],
 47 |       ['diagonal-right', 135, 'FF0000']
 48 |     ];
 49 | 
 50 |     var mappings = [
 51 |       [[0], [1], [2], [3]],
 52 |       [[0, 1], [0, 3], [0, 2], [1, 3], [1, 2], [3, 2]],
 53 |       [[0, 1, 2], [0, 1, 3], [0, 2, 3], [1, 2, 3]],
 54 |       [[0, 1, 2, 3]]
 55 |     ];
 56 | 
 57 |     var css = '';
 58 |     var property = 'background-image';
 59 |     var index;
 60 |     var selector;
 61 |     var value;
 62 | 
 63 |     for (var s = 0; s < mappings.length; s++) {
 64 |       for(var o = 0; o < mappings[s].length; o++) {
 65 |         selector = [];
 66 |         value = [];
 67 |         for(var l = 0; l < mappings[s][o].length; l++) {
 68 |           index = mappings[s][o][l];
 69 |           selector.push(lineVariants[index][0]);
 70 |           value.push(
 71 |             valueTemplate
 72 |               .replace(/([0]{2})/, lineVariants[index][1])
 73 |               .replace(/[F]{6}/g, lineVariants[index][2])
 74 |           );
 75 |         }
 76 |         selector = '.' + selector.join('-');
 77 |         value = property + ':' + value.join(',');
 78 |         css += [selector, value].join('{') + '}';
 79 |       }
 80 |     }
 81 |     var styleNode = document.createElement('style');
 82 |     styleNode.innerText = css;
 83 |     document.querySelector('head').appendChild(styleNode);
 84 |   </script>
 85 | 
 86 | <div class="number85">
 87 |   <div class="sol vertical"></div>
 88 |   <div class="sol horizontal"></div>
 89 |   <div class="sol diagonal-right"></div>
 90 |   <div class="sol diagonal-left"></div>
 91 | 
 92 |   <div class="lewitt vertical-horizontal"></div>
 93 |   <div class="lewitt vertical-diagonal-right"></div>
 94 |   <div class="lewitt vertical-diagonal-left"></div>
 95 |   <div class="lewitt horizontal-diagonal-right"></div>
 96 |   <div class="lewitt horizontal-diagonal-left"></div>
 97 |   <div class="lewitt diagonal-right-diagonal-left"></div>
 98 | 
 99 |   <div class="wall vertical-horizontal-diagonal-right"></div>
100 |   <div class="wall vertical-horizontal-diagonal-left"></div>
101 |   <div class="wall vertical-diagonal-left-diagonal-right"></div>
102 |   <div class="wall horizontal-diagonal-left-diagonal-right"></div>
103 | 
104 |   <div class="drawing vertical-horizontal-diagonal-left-diagonal-right"></div>
105 | 
106 | </div>
107 | 


--------------------------------------------------------------------------------
/086/cagrimmett/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | 	<!-- Implemented by Chuck Grimmett http://cagrimmett.com/sol-lewitt/2016/10/20/sol-lewitt-86.html -->
  4 | 	<script src="https://d3js.org/d3.v4.min.js"></script>
  5 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
  6 | 	<title>Sol LeWitt Wall Drawing 86</title>
  7 | 	<style type="text/css">
  8 | 		body {
  9 | 			margin: 0;
 10 | 		}
 11 | 		.drawing {
 12 | 			margin: 0;
 13 | 		}
 14 | 		#lines {
 15 | 			width:100%;
 16 | 			height: 100%;
 17 | 		}
 18 | 		line {
 19 | 		  stroke: #111;
 20 | 		  stroke-width: 1;
 21 | 		}
 22 | 	</style>
 23 | </head>
 24 | <body>
 25 | 
 26 | <div class="drawing">
 27 | 	<div id="lines"></div>
 28 | </div>
 29 | </div>
 30 | 
 31 | 
 32 | <script>
 33 | 
 34 | function sol86() {
 35 | 	var svg = d3.select('#lines')
 36 | 		.append('svg')
 37 | 		.attr("width", "100%")
 38 | 		.attr("height", "100%");
 39 | 	
 40 | 
 41 | 	
 42 | 	function lineData() {
 43 | 		function getRandomArbitrary(min, max) {
 44 | 		  return Math.random() * (max - min) + min;
 45 | 		}
 46 | 		var data = new Array();
 47 | 		var id = 1;	
 48 | 		var ww = window.innerWidth; // Width of the window viewing area
 49 | 		var wh = window.innerHeight; // Height of the window viewing area
 50 | 		// iterate for cells/columns inside rows
 51 | 			for (var line = 0; line < 10000; line++) {  // 1000 lines
 52 | 				var x1 = getRandomArbitrary(-50, ww); // initial points can start 100px off the screen to make even distribution work
 53 | 				var y1 = getRandomArbitrary(-50, wh);		
 54 | 					data.push({
 55 | 					id: id, // For identification and debugging
 56 | 					x1: x1,
 57 | 					y1: y1,
 58 | 					x2: x1 + 50, // Move 100 to the right
 59 | 					y2: y1 + 50, // Move 100 up
 60 | 					rotate: getRandomArbitrary(0, 360) // Pick a random angle between 0 and 360
 61 | 				})
 62 | 				id++; // Increment the ID
 63 | 			}
 64 | 		return data;
 65 | 	} 
 66 | 	
 67 | 	var lineData = lineData();
 68 | 	console.log(lineData);
 69 | 	
 70 | 	
 71 | 	var line = svg.selectAll("line")
 72 | 		.data(lineData)
 73 | 		.enter().append('line')
 74 | 		.attr("id", function(d) { return d.id; })
 75 | 		.attr("x1", function(d) { return d.x1; })
 76 | 		.attr("y1", function(d) { return d.y1; })
 77 | 		.attr("transform", function(d) { return "rotate(" + d.rotate + " " + (d.x1 + 25) + " " + (d.y1 + 25) + ")";})
 78 | 		.attr("x2", function(d) { return d.x1; })
 79 | 		.attr("y2", function(d) { return d.y1; }).transition().delay(function(d,i){ return 1.5*i; }).duration(750)
 80 | 		.attr("x2", function(d) { return d.x2; })
 81 | 		.attr("y2", function(d) { return d.y2; });
 82 | }
 83 | 
 84 |  // run on load
 85 | sol86();
 86 | 
 87 | $(window).resize(function() {
 88 |     if(this.resizeTO) clearTimeout(this.resizeTO);
 89 |     this.resizeTO = setTimeout(function() {
 90 |         $(this).trigger('resizeEnd');
 91 |     }, 500);
 92 | });
 93 | 
 94 | //resize on resizeEnd function
 95 | $(window).bind('resizeEnd', function() {
 96 | 	 d3.selectAll("svg").remove();
 97 | 	 sol86();
 98 | });
 99 | 
100 | </script>
101 | 
102 | 


--------------------------------------------------------------------------------
/086/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #86 (1971)
2 | 
3 | Ten thousand lines about 10 inches (25 cm) long, covering the wall evenly.
4 | 


--------------------------------------------------------------------------------
/087/cagrimmett/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | 	<title>Sol LeWitt Wall Drawing 87</title>
  4 | 	
  5 | 	<script src="https://d3js.org/d3.v4.min.js"></script>
  6 | 	<script src="https://unpkg.com/textures@1.0.4/textures.js"></script>
  7 | 	<style type="text/css">
  8 | 		.drawing {
  9 | 			margin: 0 auto;
 10 | 			text-align: center;
 11 | 			width: 1010px;
 12 | 			margin-top: 40px;
 13 | 			margin-bottom: 40px;
 14 | 		}
 15 | 		#grid {
 16 | 			display: inline-block;
 17 | 		}
 18 | 	</style>
 19 | </head>
 20 | <body>
 21 | 
 22 | <div class="drawing">
 23 | 	<div id="grid"></div>
 24 | </div>
 25 | 
 26 | <script type="text/javascript">
 27 | function gridData() {
 28 | 	var data = new Array();
 29 | 	var id = 1;
 30 | 	var xpos = 4.1; 
 31 | 	var ypos = 4.5;
 32 | 	var width = 500.6;
 33 | 	var height = 500.5;
 34 | 	var click = 0;
 35 | 	
 36 | 	// iterate for rows	
 37 | 	for (var row = 0; row < 2; row++) {
 38 | 		data.push( new Array() );
 39 | 		
 40 | 	// iterate for cells/columns inside rows
 41 | 		for (var column = 0; column < 2; column++) {
 42 | 			data[row].push({
 43 | 				id: id,
 44 | 				x: xpos,
 45 | 				y: ypos,
 46 | 				width: width,
 47 | 				height: height
 48 | 			})
 49 | 			xpos += width;
 50 | 			id += 1;
 51 | 		}
 52 | 		xpos = 4.5;
 53 | 		ypos += height;	
 54 | 	}
 55 | 	return data;
 56 | }
 57 | 
 58 | var gridData = gridData();	
 59 | 
 60 | var grid = d3.select("#grid")
 61 | 	.append("svg")
 62 | 	.attr("width","1010px")
 63 | 	.attr("height","1010px");
 64 | 
 65 | var size = 10;
 66 | var strokewidth = 1;
 67 | var stroke = "#111"
 68 | 
 69 | var t1 = textures.lines()
 70 |           .size(size)
 71 |           .orientation("vertical")
 72 |           .strokeWidth(strokewidth)
 73 |           .stroke("#7c7c7c"),
 74 |       t2 = textures.lines()
 75 | 	  	  .size(size)
 76 |           .orientation("horizontal")
 77 |           .strokeWidth(strokewidth)
 78 |           .stroke("#ffef81"),
 79 |       t3 = textures.lines()
 80 |           .size(size)
 81 | 		  .orientation("diagonal")
 82 |           .strokeWidth(strokewidth)
 83 |           .stroke("#e07b44"),
 84 |       t4 = textures.lines()
 85 |           .size(size)
 86 | 		  .orientation("6/8")
 87 |           .strokeWidth(strokewidth)
 88 |           .stroke("#a1520b");
 89 |           
 90 |  grid.call(t1);
 91 |  grid.call(t2);
 92 |  grid.call(t3);
 93 |  grid.call(t4);
 94 |  
 95 |  var t = d3.transition()
 96 |     .duration(750)
 97 |     .ease(d3.easeLinear);
 98 | 	
 99 | var row = grid.selectAll(".row")
100 | 	.data(gridData)
101 | 	.enter().append("g")
102 | 	.attr("class", "row");
103 |     	
104 | var column = row.selectAll(".square")
105 | 	.data(function(d) { return d; })
106 | 	.enter().append("rect").transition(t)
107 | 	.attr("class","square")
108 | 	.attr("x", function(d) { return d.x; })
109 | 	.attr("y", function(d) { return d.y; })
110 | 	.attr("width", function(d) { return d.width; })
111 | 	.attr("height", function(d) { return d.height; })
112 | 	.style("fill", t1.url());
113 | 	
114 | var column = row.selectAll(".second-square")
115 | 	.data(function(d) { return d; })
116 | 	.enter().append("rect").transition(t).delay(1000)
117 | 	.attr("class","second-square")
118 | 	.attr("x", function(d) { return d.x; })
119 | 	.attr("y", function(d) { return d.y; })
120 | 	.attr("width", function(d) { return d.width; })
121 | 	.attr("height", function(d) { return d.height; })
122 | 	.style("fill", function(d) {            
123 |             if (d.id == 1) {return "none"}
124 |             if (d.id == 2) {return t2.url()}
125 |             if (d.id == 3) {return t2.url()}
126 |             if (d.id == 4) {return t2.url()}  
127 | 	;});
128 | 	
129 | var column = row.selectAll(".third-square")
130 | 	.data(function(d) { return d; })
131 | 	.enter().append("rect").transition(t).delay(2000)
132 | 	.attr("class","third-square")
133 | 	.attr("x", function(d) { return d.x; })
134 | 	.attr("y", function(d) { return d.y; })
135 | 	.attr("width", function(d) { return d.width; })
136 | 	.attr("height", function(d) { return d.height; })
137 | 	.style("fill", function(d) {            
138 |             if (d.id == 1) {return "none"}
139 |             if (d.id == 2) {return "none"}
140 |             if (d.id == 3) {return t3.url()}
141 |             if (d.id == 4) {return t3.url()}  
142 | 	;});	
143 | 
144 | var column = row.selectAll(".fourth-square")
145 | 	.data(function(d) { return d; })
146 | 	.enter().append("rect").transition(t).delay(3000)
147 | 	.attr("class","fourth-square")
148 | 	.attr("x", function(d) { return d.x; })
149 | 	.attr("y", function(d) { return d.y; })
150 | 	.attr("width", function(d) { return d.width; })
151 | 	.attr("height", function(d) { return d.height; })
152 | 	.style("fill", function(d) {            
153 |             if (d.id == 1) {return "none"}
154 |             if (d.id == 2) {return "none"}
155 |             if (d.id == 3) {return "none"}
156 |             if (d.id == 4) {return t4.url()}  
157 | 	;});
158 | 	
159 | </script>	
160 | 
161 | 


--------------------------------------------------------------------------------
/087/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #87 (1971)
2 | 
3 | A square divided horizontally and vertically into four equal parts, each with lines and colors in four directions superimposed progressively.


--------------------------------------------------------------------------------
/087/y-a-v-a/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 |     <meta charset="utf-8">
  3 |     <title>y_a_v_a ❤︎ Sol LeWitt • #087</title>
  4 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  5 |     <style>
  6 |     html,body {
  7 |         width: 100%;
  8 |         height: 100%;
  9 |         margin: 0;
 10 |         padding: 0;
 11 |     }
 12 |     canvas {
 13 |         height: 90%;
 14 |         margin: 2.5% auto;
 15 |         display: block;
 16 |     }
 17 |     </style>
 18 |     <canvas></canvas>
 19 |     <script>
 20 |     function number87() {
 21 |         var c = document.getElementsByTagName('canvas')[0];
 22 |         var ctx = c.getContext('2d');
 23 |         var height = ctx.canvas.height = ctx.canvas.clientHeight;
 24 |         var width = ctx.canvas.width = ctx.canvas.clientHeight;
 25 | 
 26 |         // clear screen on resize
 27 |         ctx.clearRect(0, 0, c.width, c.height);
 28 | 
 29 |         var green = '#0f0';
 30 |         var yellow = '#ff0';
 31 |         var red = '#f00';
 32 |         var blue = '#00f';
 33 | 
 34 |         // more pencil gray than black
 35 |         ctx.strokeStyle = green;
 36 |         ctx.lineWidth = 1.0;
 37 | 
 38 |         var preferedGap = 16; // modify this value according to your wishes
 39 |         var suggestedLines = Math.ceil(width / preferedGap);
 40 |         // always have an even amount of lines
 41 |         var lines = suggestedLines % 2 === 1 ? suggestedLines + 1: suggestedLines;
 42 |         var vlines = lines;
 43 |         var hlines = lines;
 44 |         var calculatedGap = width / lines; // change gap to match full width
 45 |         var halfwidth = Math.ceil(lines / 2) * calculatedGap;
 46 |         var halfheight = Math.ceil(lines / 2) * calculatedGap;
 47 | 
 48 |         for (var s = 0; s <= vlines; s++) {
 49 |             var vx1 = s * calculatedGap;
 50 |             var vx2 = vx1;
 51 |             var vy1 = 0;
 52 |             var vy2 = height;
 53 | 
 54 |             ctx.beginPath();
 55 |             ctx.moveTo(vx1, vy1);
 56 |             ctx.lineTo(vx2, vy2);
 57 |             ctx.stroke();
 58 |         }
 59 | 
 60 |         ctx.strokeStyle = yellow;
 61 |         for (var l = 0; l <= hlines; l++) {
 62 |             var hx1 = (l < (hlines / 2)) ? halfheight : 0;
 63 |             var hx2 = width;
 64 |             var hy1 = l * calculatedGap;
 65 |             var hy2 = hy1;
 66 | 
 67 |             ctx.beginPath();
 68 |             ctx.moveTo(hx1, hy1);
 69 |             ctx.lineTo(hx2, hy2);
 70 |             ctx.stroke();
 71 |         }
 72 | 
 73 |         ctx.strokeStyle = red;
 74 |         var halflines = Math.floor(.5 * lines);
 75 |         var count = Math.floor(1.5 * lines); // width + half height
 76 | 
 77 |         for (var w = 0; w <= count; w++) {
 78 |             var wx1 = Math.min(w * calculatedGap, width);
 79 |             var wy1 = (w > lines) ? (w * calculatedGap) - (height - halfheight): halfheight;
 80 |             var wx2 = (w > halflines) ? (w - halflines) * calculatedGap : 0;
 81 |             var wy2 = (w < halflines) ? w * calculatedGap + halfheight : height;
 82 | 
 83 |             ctx.beginPath();
 84 |             ctx.moveTo(wx1, wy1);
 85 |             ctx.lineTo(wx2, wy2);
 86 |             ctx.stroke();
 87 |         }
 88 | 
 89 |         ctx.strokeStyle = blue;
 90 |         // we use lines because the area takes half width + half height
 91 |         for (var tt = 0; tt < lines; tt++) {
 92 |             var x1 = (tt > halflines) ? tt * calculatedGap : halfwidth;
 93 |             var y1 = (tt >= halflines) ? halfheight : halfheight + (tt * calculatedGap);
 94 |             var x2 = (tt < halflines) ? width - (tt * calculatedGap) : width ;
 95 |             var y2 = (tt < halflines) ? height : (height + halfheight) - (tt * calculatedGap);
 96 |             if (tt === (.5 * lines)) { // skip one line halfway
 97 |                 continue;
 98 |             }
 99 | 
100 |             ctx.beginPath();
101 |             ctx.moveTo(x1, y1);
102 |             ctx.lineTo(x2, y2);
103 |             ctx.stroke();
104 |         }
105 |     }
106 | 
107 |     window.onresize = number87;
108 | 
109 |     number87();
110 |     </script>
111 | 


--------------------------------------------------------------------------------
/088/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #88 (1971)
2 | 
3 | A 6-inch (15 cm) grid covering the wall. Within each square, not straight lines in either of four directions. Only one direction in each square but as many as desired, and at least one line in each square.


--------------------------------------------------------------------------------
/088/sgallese/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 |   <head>
  3 |     <meta>
  4 | 
  5 |       <!--
  6 |         Processing.js template for solving a Sol Lewitt instruction.
  7 | 
  8 |         Note: you don't need to use Processing.js for Solving Sol. You can use any library you'd like,
  9 |         or no library at all. The only requirement is that the solution runs in a modern browser.
 10 | 
 11 |         If you have another library you like, please submit a template like this one for other folks to use.
 12 |       -->
 13 | 
 14 |       <title>Solving Sol</title>
 15 | 
 16 |       <script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.min.js"></script>
 17 | 
 18 |       <style type="text/css">
 19 | 
 20 |         html, body {
 21 |           width: 100%;
 22 |           height: 100%;
 23 |           overflow: hidden;
 24 |           padding: 0;
 25 |           margin: 0;
 26 |         }
 27 | 
 28 |       </style>
 29 |     </meta>
 30 |   </head>
 31 |   <body>
 32 |     <script type="application/processing" data-processing-target="pjs">
 33 |  
 34 |       /*
 35 |         ## Wall Drawing #88 (1971)
 36 | 
 37 |         A 6-inch (15 cm) grid covering the wall. Within each square, not straight lines in either of four directions.
 38 |         Only one direction in each square but as many as desired, and at least one line in each square.
 39 | 
 40 |       */
 41 | 
 42 |       color orange = color(240, 120, 32);
 43 |       color teal = color(58, 123, 134);
 44 |       color red = color(213, 64, 50);
 45 |       color yellow = color(255, 209, 0);
 46 |       color green = color(151, 190, 0);
 47 |       color purple = color(79, 79, 141);
 48 | 
 49 |       color getRandomColor() {
 50 |         color[] colorArray = new color[6];
 51 |         // colorArray[0] = orange;
 52 |         colorArray[1] = teal;
 53 |         colorArray[2] = red;
 54 |         colorArray[3] = yellow;
 55 |         colorArray[4] = green;
 56 |         colorArray[5] = purple;
 57 |         return colorArray[int(random(1, 5))]
 58 |       }
 59 | 
 60 |       int firstLineStartX = 0;
 61 |       int firstLineEndX = 0;
 62 |       int firstLineStartY = 0;
 63 |       int firstLineEndY = 0;
 64 | 
 65 |       void setup() {
 66 |         // Size of rectangle on my wall
 67 |         widthInInches = 33.375;
 68 |         heightInInches = 35.3;
 69 |         pixelsPerInch = 20;
 70 |         widthInPixels = widthInInches * pixelsPerInch;
 71 |         heightInPixels = heightInInches * pixelsPerInch;
 72 | 
 73 |         // Color palette for my wall
 74 | 
 75 | 
 76 |         size(widthInPixels, heightInPixels);
 77 |         background(orange);
 78 | 
 79 |         gridLength = 6 * pixelsPerInch;
 80 |         gridStrokeWidth = 0.3 * pixelsPerInch;
 81 | 
 82 |         lineStrokeWidth = 0.6 * pixelsPerInch;
 83 | 
 84 |         for (int i = 0; i < 6; i++) {
 85 |           for (int j = 0; j < 6; j++) {
 86 |             startX = j * gridLength;
 87 |             startY = i * gridLength;
 88 |             endX = startX + gridLength;
 89 |             endY = startY + gridLength;
 90 |             drawGrid(startX, startY, endX, endY)
 91 |           }
 92 |         }
 93 |       }
 94 | 
 95 |       void drawGrid(int startX, int startY, int endX, int endY) {
 96 |           strokeCap(PROJECT);
 97 |           strokeWeight(gridStrokeWidth + 10);
 98 |           
 99 |           stroke(getRandomColor());
100 |           line(startX, startY, endX, startY);
101 | 
102 |           stroke(getRandomColor());
103 |           line(startX, endY, endX, endY);
104 | 
105 |           stroke(getRandomColor());
106 |           line(startX, startY, startX, endY);
107 | 
108 |           stroke(getRandomColor());
109 | 
110 |           line(endX, startY, endX, endY);
111 | 
112 |           lineFromNonVertialOrHorizontalDirection(startX, startY, endX, endY);
113 | 
114 |           strokeCap(SQUARE);
115 |           strokeWeight(lineStrokeWidth);
116 |           line(firstLineStartX, firstLineStartY, firstLineEndX, firstLineEndY);
117 |       }
118 | 
119 |       void lineFromNonVertialOrHorizontalDirection(int startX, int startY, int endX, int endY) {
120 |           int slope = 0;
121 |           while (slope == 0) {
122 |             firstLineStartX = randomXInGrid(startX + gridStrokeWidth, endX - gridStrokeWidth);
123 |             firstLineEndX = randomXInGrid(startX + gridStrokeWidth, endX - gridStrokeWidth);
124 |             firstLineStartY = randomYInGrid(startY + gridStrokeWidth, endY - gridStrokeWidth);
125 |             firstLineEndY = randomYInGrid(startY + gridStrokeWidth, endY - gridStrokeWidth);
126 | 
127 |             slope = (firstLineEndY - firstLineStartY) / (firstLineEndX - firstLineStartX);
128 |           }
129 |       }
130 | 
131 |       int randomXInGrid(int startX, int endX) {
132 |         return int(random(startX, endX))
133 |       }
134 | 
135 |       int randomYInGrid(int startY, int endY) {
136 |         return int(random(startY, endY))
137 |       }
138 | 
139 | 
140 |       void draw() {
141 |       }
142 | 
143 |     </script>
144 | 
145 |     <canvas id="pjs"></canvas>
146 | 
147 |   </body>
148 | </html>


--------------------------------------------------------------------------------
/091/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #91 (1971)
2 | 
3 | A six-inch (15 cm) grid covering the wall. Within each square, not straight lines from side to side, using red, yellow and blue pencils. Each square contains at least one line of each color.


--------------------------------------------------------------------------------
/097/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #97 (1971)
2 | 
3 | Within an 80 inch (200cm) square, 10,000 straight lines. Next to it is an 80 inch (200 cm) square with 10,000 not straight lines.


--------------------------------------------------------------------------------
/097/nitriques/097-canvas.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <title>097 - nitriques - canvas</title>
  6 | 
  7 | 	<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700,800" rel="stylesheet" type="text/css" />
  8 | 	<style>
  9 | html, body {
 10 | 	margin: 0;
 11 | 	padding: 0;
 12 | 	min-width: 100%;
 13 | 	min-height: 100%;
 14 | 	font-family: 'Montserrat';
 15 | 	color: #111;
 16 | }
 17 | body.wall {
 18 |     background-color: white;
 19 |     font-size: 62.5%;
 20 | }
 21 | 
 22 | h1 {
 23 | 	position: absolute;
 24 | 	z-index: 10;
 25 | 	margin: 0;
 26 | 	top: 5px;
 27 | 	left: 5px;
 28 | }
 29 | h1, h1 a {
 30 | 	font-size: 1.6rem;
 31 | 	text-decoration: none;
 32 | 	color: #111;
 33 | }
 34 | 
 35 | #container {
 36 | 	width: 400cm;
 37 | 	height: 200cm;
 38 | }
 39 | 
 40 | canvas {
 41 | 	background-color: transparent;
 42 | 	width: 400cm;
 43 | 	height: 200cm;	
 44 | }
 45 | 	</style>
 46 | </head>
 47 | <body class="wall">
 48 | 	<h1>Sol LeWitt's #097 - <a href="https://twitter.com/nitriques">nitriques</a> - canvas</h1>
 49 |     <div id="container">
 50 |     	<canvas />
 51 |     </div>
 52 | 	
 53 | 	<script src="http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.12/paper.js"></script>
 54 | 	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 55 | 	<script>
 56 | (function _097($, paper) {
 57 | 	
 58 | 	'use strict';
 59 | 	
 60 | 	/* CONST */
 61 | 	
 62 | 	var win = $(window);
 63 | 	
 64 | 	var DEBUG = !!~document.location.toString().indexOf('?debug');
 65 | 	
 66 | 	var LINES = DEBUG ? 10 : 10000;
 67 | 	
 68 | 	var SIZE = 200;
 69 | 	
 70 | 	var PPC = 0;
 71 | 	
 72 | 	var ctn = $('#container');
 73 | 	
 74 | 	
 75 | 	/* UTILS */
 76 | 	
 77 | 	var rnd = function (max, min) {
 78 | 		// random "int"
 79 | 		var i = ~~(Math.random() * 100000);
 80 | 		if (!!max && !!min) {
 81 | 			return (i % (max - min)) + min;
 82 | 		} else if (!!max) {
 83 | 			return i % max;	
 84 | 		}
 85 | 		return i;
 86 | 	};
 87 | 	
 88 | 	var px = function (cm) {
 89 | 		return PPC * cm;	
 90 | 	};
 91 | 	
 92 | 	var color = function () {
 93 | 		var r = rnd(256);
 94 | 		var g = rnd(256);
 95 | 		var b = rnd(256);
 96 | 		return 'rgb(' + [r,b,g].join(',') + ')';
 97 | 	};
 98 | 	
 99 | 	var getter = function (value) {
100 | 		return function _get(i) {
101 | 			if (i !== undefined) {
102 | 				return value[i];	
103 | 			}
104 | 			return value;
105 | 		};
106 | 	};
107 | 	
108 | 	
109 | 	/* DATA */
110 | 	
111 | 	var generateLines = function () {
112 | 		var stack = [];
113 | 		var n = 0;
114 | 		var spx = px(SIZE);
115 | 		
116 | 		for (n; n < LINES; n++) {
117 | 			stack.push({
118 | 				p1: {
119 | 					x: rnd(spx),
120 | 					y: rnd(spx)
121 | 				},
122 | 				p2: {
123 | 					x: rnd(spx),
124 | 					y: rnd(spx)
125 | 				}
126 | 			});
127 | 		}
128 | 		
129 | 		return stack;
130 | 	};
131 | 	
132 | 	var generateCurves = function () {
133 | 		var stack = [];
134 | 		var n = 0;
135 | 		var spx = px(SIZE);
136 | 		
137 | 		for (n; n < LINES; n++) {
138 | 			stack.push({
139 | 				p1: {
140 | 					x: spx + rnd(spx),
141 | 					y: rnd(spx)
142 | 				},
143 | 				p2: {
144 | 					x: spx + rnd(spx),
145 | 					y: rnd(spx)
146 | 				},
147 | 				p3: {
148 | 					x: spx + rnd(spx),
149 | 					y: rnd(spx)
150 | 				},
151 | 				control1: {
152 | 					x: spx + rnd(spx / 2),
153 | 					y: rnd(spx)
154 | 				},
155 | 				control2: {
156 | 					x: spx + rnd(spx, spx / 2),
157 | 					y: rnd(spx)
158 | 				}
159 | 			});
160 | 		}
161 | 		
162 | 		return stack;
163 | 	};
164 | 	
165 | 		
166 | 	/* RENDER */
167 | 	
168 | 	var stylePath = function(path) {
169 | 		path.strokeWidth = 2;
170 |     	path.strokeColor = color();	
171 | 	};
172 | 	
173 | 	var renderCurve = function(p) {
174 | 		var path = new paper.Path();
175 | 		
176 | 		stylePath(path);
177 |         path.moveTo(new paper.Point(p.p1));
178 |         path.quadraticCurveTo(
179 |         		new paper.Point(p.control1),
180 |         		new paper.Point(p.p2)
181 |         	);
182 |         path.quadraticCurveTo(
183 |         		new paper.Point(p.control2),
184 |         		new paper.Point(p.p3)
185 |         	);
186 |     };
187 |     
188 |     var renderLine = function (line) {
189 |     	var path = new paper.Path();
190 |     	
191 |     	stylePath(path);
192 |     	path.moveTo(new paper.Point(line.p1));
193 |     	path.lineTo(new paper.Point(line.p2));
194 |     };
195 |     
196 |     var setup = function () {
197 |     	paper.setup(ctn.find('canvas')[0]);
198 |     };
199 | 	
200 | 	var draw = function (lines, curves) {
201 | 		var n = 0;
202 | 		for (n; n < lines.length; n++) {
203 | 			renderLine(lines[n]);
204 | 		}
205 | 		for (n = 0; n < curves.length; n++) {
206 | 			renderCurve(curves[n]);
207 | 		}
208 | 		paper.view.draw();
209 | 	};
210 | 	
211 | 	/* BOOTSTRAP */
212 | 	
213 | 	var load = function () {
214 | 		setup();
215 | 		var lines = generateLines();
216 | 		var curves = generateCurves();
217 | 		draw(lines, curves);
218 | 	};
219 | 	
220 | 	var init = function () {
221 | 		PPC = ctn.height() / SIZE;
222 | 		win.load(load);
223 | 	};
224 | 	
225 | 	$(init);
226 | 		
227 | })(window.jQuery, window.paper);
228 | 	</script>
229 | </body>
230 | </html>


--------------------------------------------------------------------------------
/097/y-a-v-a/PerlinNoise.js:
--------------------------------------------------------------------------------
 1 | // as taken from https://github.com/processing-js/processing-js/blob/master/src/P5Functions/Math.js
 2 | function PerlinNoise(seed) {
 3 |   var rnd = seed !== undefined ? new Marsaglia(seed) : Marsaglia.createRandomized();
 4 |   var i, j;
 5 |   var perm = new Uint8Array(512);
 6 |   for (i = 0; i < 256; ++i) perm[i] = i;
 7 |   for (i = 0; i < 256; ++i) {
 8 |     var t = perm[j = rnd.nextInt() & 255];
 9 |     perm[j] = perm[i];
10 |     perm[i] = t
11 |   }
12 |   for (i = 0; i < 256; ++i) perm[i + 256] = perm[i];
13 | 
14 |   function grad3d(i, x, y, z) {
15 |     var h = i & 15;
16 |     var u = h < 8 ? x : y,
17 |     v = h < 4 ? y : h === 12 || h === 14 ? x : z;
18 |     return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v)
19 |   }
20 |   function grad2d(i, x, y) {
21 |     var v = (i & 1) === 0 ? x : y;
22 |     return (i & 2) === 0 ? -v : v
23 |   }
24 |   function grad1d(i, x) {
25 |     return (i & 1) === 0 ? -x : x
26 |   }
27 |   function lerp(t, a, b) {
28 |     return a + t * (b - a)
29 |   }
30 |   this.noise3d = function(x, y, z) {
31 |     var X = Math.floor(x) & 255,
32 |       Y = Math.floor(y) & 255,
33 |       Z = Math.floor(z) & 255;
34 |     x -= Math.floor(x);
35 |     y -= Math.floor(y);
36 |     z -= Math.floor(z);
37 |     var fx = (3 - 2 * x) * x * x,
38 |       fy = (3 - 2 * y) * y * y,
39 |       fz = (3 - 2 * z) * z * z;
40 |     var p0 = perm[X] + Y,
41 |       p00 = perm[p0] + Z,
42 |       p01 = perm[p0 + 1] + Z,
43 |       p1 = perm[X + 1] + Y,
44 |       p10 = perm[p1] + Z,
45 |       p11 = perm[p1 + 1] + Z;
46 |     return lerp(fz, lerp(fy, lerp(fx, grad3d(perm[p00], x, y, z), grad3d(perm[p10], x - 1, y, z)), lerp(fx, grad3d(perm[p01], x, y - 1, z), grad3d(perm[p11], x - 1, y - 1, z))), lerp(fy, lerp(fx, grad3d(perm[p00 + 1], x, y, z - 1), grad3d(perm[p10 + 1], x - 1, y, z - 1)), lerp(fx, grad3d(perm[p01 + 1], x, y - 1, z - 1), grad3d(perm[p11 + 1], x - 1, y - 1, z - 1))))
47 |   };
48 |   this.noise2d = function(x, y) {
49 |     const X = Math.floor(x) & 255;
50 |     const Y = Math.floor(y) & 255;
51 |     x -= Math.floor(x);
52 |     y -= Math.floor(y);
53 |     const fx = (3 - 2 * x) * x * x;
54 |     const fy = (3 - 2 * y) * y * y;
55 |     const p0 = perm[X] + Y;
56 |     const p1 = perm[X + 1] + Y;
57 | 
58 |     return lerp(fy, lerp(fx, grad2d(perm[p0], x, y), grad2d(perm[p1], x - 1, y)), lerp(fx, grad2d(perm[p0 + 1], x, y - 1), grad2d(perm[p1 + 1], x - 1, y - 1)))
59 |   };
60 |   this.noise1d = function(x) {
61 |     let X = Math.floor(x) & 255;
62 |     x -= Math.floor(x);
63 |     const fx = (3 - 2 * x) * x * x;
64 |     return lerp(fx, grad1d(perm[X], x), grad1d(perm[X + 1], x - 1))
65 |   }
66 | }
67 | 
68 | function Marsaglia(i1, i2) {
69 |   var z = i1 || 362436069,
70 |     w = i2 || 521288629;
71 |   var nextInt = function() {
72 |     z = 36969 * (z & 65535) + (z >>> 16) & 4294967295;
73 |     w = 18E3 * (w & 65535) + (w >>> 16) & 4294967295;
74 |     return ((z & 65535) << 16 | w & 65535) & 4294967295
75 |   };
76 |   this.nextDouble = function() {
77 |     var i = nextInt() / 4294967296;
78 |     return i < 0 ? 1 + i : i
79 |   };
80 |   this.nextInt = nextInt
81 | }
82 | Marsaglia.createRandomized = function() {
83 |   var now = Date.now();
84 |   return new Marsaglia(now / 6E4 & 4294967295, now & 4294967295)
85 | };
86 | 


--------------------------------------------------------------------------------
/097/y-a-v-a/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 |   <meta charset="utf-8">
  3 |   <title>y_a_v_a ❤︎ Sol LeWitt • #097</title>
  4 |   <meta name="viewport" content="width=device-width, initial-scale=1">
  5 |   <style>
  6 |   html,body {
  7 |     width: 100%;
  8 |     height: 100%;
  9 |     margin: 0;
 10 |     padding: 0;
 11 |   }
 12 |   canvas {
 13 |     width: 100%;
 14 |     height: 100%;
 15 |   }
 16 |   </style>
 17 |   <link rel="shortcut icon" href="favicon.png">
 18 |   <canvas></canvas>
 19 |   <script src="MersenneTwister.js"></script>
 20 |   <script src="PerlinNoise.js"></script>
 21 |   <script>
 22 |     function number097() {
 23 |       const c = document.querySelector('canvas');
 24 |       const ctx = c.getContext('2d');
 25 |       // "Within an 80 inch (200cm) square,"
 26 |       // I decided to use the whole viewport
 27 |       const width = ctx.canvas.width = ctx.canvas.clientWidth;
 28 |       const height = ctx.canvas.height = ctx.canvas.clientHeight;
 29 |       const halfWidth = width / 2;
 30 |       // Drawing 10,000 lines is really heavy for a browser
 31 |       // also, it almost completely fills the screen.
 32 |       // try it with 2,000 or 2e3 for a nice(r) result
 33 |       // const iterations = 1e3;
 34 |       const iterations = width + height;
 35 | 
 36 |       // clear screen on resize
 37 |       ctx.clearRect(0, 0, c.width, c.height);
 38 | 
 39 |       // initialize
 40 |       const seed = Date.now() >> 0;
 41 |       const mersenneTwister = new MersenneTwister(seed);
 42 |       const TWO_PI = Math.PI * 2;
 43 |       mersenneTwister.init_genrand(seed);
 44 | 
 45 |       function getRadius(multiplier) {
 46 |         return Math.round(mersenneTwister.genrand_res53() * multiplier) + 20;
 47 |       }
 48 | 
 49 |       function getAngle() {
 50 |         return mersenneTwister.genrand_res53() * TWO_PI;
 51 |       }
 52 | 
 53 |       function getY() {
 54 |         return Math.round(mersenneTwister.genrand_res53() * height);
 55 |       }
 56 | 
 57 |       function getX(rightSide) {
 58 |         let leftThreshold = rightSide ? halfWidth : 0;
 59 |         return Math.round(mersenneTwister.genrand_res53() * halfWidth) + leftThreshold;
 60 |       }
 61 | 
 62 |       function getDirection() {
 63 |         return Math.round(mersenneTwister.genrand_res53()) === 0 ? -1 : 1;
 64 |       }
 65 | 
 66 |       ctx.strokeStyle = '#333';
 67 |       ctx.lineWidth = .9;
 68 | 
 69 |       // "10,000 straight lines."
 70 |       for(let i = 0; i < iterations; i++) {
 71 |         const angle = getAngle();
 72 |         const radius = getRadius(140);
 73 |         const x1 = getX(false);
 74 |         const y1 = getY();
 75 |         const x2 = Math.min(Math.max(Math.round(x1 + radius * Math.cos(angle)), 0), halfWidth);
 76 |         const y2 = Math.min(Math.max(Math.round(y1 + radius * Math.sin(angle)), 0), height);
 77 |         ctx.beginPath();
 78 |         ctx.moveTo(x1, y1);
 79 |         ctx.lineTo(x2, y2);
 80 |         ctx.stroke();
 81 |       }
 82 | 
 83 |       ctx.strokeStyle = '#444';
 84 |       ctx.lineWidth = .1;
 85 | 
 86 |       // "Next to it is an 80 inch (200 cm) square with 10,000 not straight lines."
 87 |       for(let i = 0; i < iterations; i++) {
 88 |         const radius = getRadius(80);
 89 |         const x1 = getX(true);
 90 |         const y1 = getY();
 91 | 
 92 |         const directionX = getDirection();
 93 |         const directionY = getDirection();
 94 | 
 95 |         ctx.beginPath();
 96 |         ctx.moveTo(x1, y1);
 97 |         let inc = 0.0;
 98 |         const P = new PerlinNoise();
 99 |         const Q = new PerlinNoise();
100 | 
101 |         for(let j = 1; j < radius; j += 2) {
102 |           let y2 = (Math.abs(P.noise2d(inc + (0.00212 * j), inc - (0.00423 * j))) * 100) + y1 + (j * directionY);
103 |           let x2 = (Math.abs(Q.noise2d(inc - (0.00522 * j), inc + (0.00412 * j))) * 100) + x1 + (j * directionX);
104 | 
105 |           if (x2 <= halfWidth || x2 >= width) {
106 |             continue;
107 |           }
108 |           ctx.lineTo(x2, y2);
109 |           ctx.stroke();
110 |           inc += 0.01;
111 |         }
112 |       }
113 |     }
114 | 
115 |     window.onresize = number097;
116 | 
117 |     number097();
118 |   </script>
119 | 


--------------------------------------------------------------------------------
/1136/instructions.md:
--------------------------------------------------------------------------------
 1 | ## Wall Drawing #1136 (2004)
 2 | 
 3 | The actual letter of instruction is unavailable, but the Tate <a href="http://www.tate.org.uk/art/artworks/lewitt-wall-drawing-1136-ar00165/text-summary">provides</a> this
 4 | information:
 5 | 
 6 | The work is composed of both curved and straight solid bands of colour that are
 7 | painted directly onto the surface of a wall using every primary (red, yellow,
 8 | blue) and secondary (green, orange, purple) colour plus grey. The curve, made up
 9 | of nine interlocking bands in these seven colours (there are two bands each of
10 | red and green), snakes along the wall, touching the top and bottom of the wall
11 | at various points. The same seven colours reappear, in an irregular sequence,
12 | as vertical bands that serve as a background pattern for the curve. Every band
13 | in the wall drawing is of the same width and there is no area left empty of
14 | colour.
15 | 
16 | Vertical lines of equal width cover the wall, in this order:
17 | 
18 | GYBOP ERBYG ERPGY BOERB GYPOB GRPEY BGOPY BERPO GBYPR EOGYB OERPB YOPGE BRYBE OPRGB EYRGP OBRGO YEBRG OPYBE RGORB EYBOP GRBPE YBRPE OGBYE PORGE BPYRG OPEYG POREB YPGBR OGYBR
19 | 
20 | On top of the vertical lines is a curve, with colors top to bottom: POGREBGR
21 | 
22 | G Green Y Yellow B Blue O Orange P Purple E Grey R Red
23 | 


--------------------------------------------------------------------------------
/118/amiccolis/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |     <title>Solving Sol #118</title>
 5 |     <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.18/paper-full.min.js"></script>
 6 |     <style type="text/css">
 7 |         html,
 8 |         body {
 9 |             width: 100%;
10 |             height: 100%;
11 |             overflow: hidden;
12 |             padding: 0;
13 |             margin: 0;
14 |         }
15 |     </style>
16 | </head>
17 | 
18 | <body>
19 |     <canvas id='solving-sol' resize></canvas>
20 |     <script canvas='solving-sol' type='text/paperscript'>
21 |         /*            
22 |             
23 |         Wall Drawing #118 (1971)
24 |         On a wall surface, any continuous stretch of wall, using a hard pencil, place fifty points at random. 
25 |         The points should be evenly distributed over the area of the wall. 
26 |         All of the points should be connected by straight lines.        
27 |             
28 |         */
29 | 
30 |         var numberOfPoints = 50;
31 |         var randomness = .75;
32 | 
33 |         function init() {
34 | 
35 |             var width = view.viewSize.width;
36 |             var height = view.viewSize.height;
37 | 
38 |             // Figure out how many columns and rows to have
39 |             var columns = numberOfPoints;
40 |             var rows = 1;
41 |             while ((columns / rows) > (width / height)) {
42 |                 rows += 1;
43 |                 columns = Math.ceil(numberOfPoints / rows);
44 |             }
45 | 
46 |             // Create randomly offset grid of points
47 |             var points = new Array();
48 | 
49 |             for (var col = 0; col < columns; col++) {
50 |                 for (var row = 0; row < rows; row++) {
51 |                     var cell_width = width / columns;
52 |                     var cell_height = height / rows;
53 |                     var x = ((cell_width * col) + (cell_width / 2)) + ((Math.random() - .5) * (randomness * cell_width));
54 |                     var y = (cell_height * row) + (cell_height / 2) + ((Math.random() - .5) * (randomness * cell_height));
55 | 
56 |                     // Keep within bounds
57 |                     if (x > width) x = width;
58 |                     else if (x < 0) x = 0;
59 |                     else if (y > height) y = height;
60 |                     else if (y < 0) y = 0;
61 | 
62 |                     points.push(new Point(x, y));
63 |                 }
64 |             }
65 | 
66 |             // Draw cirlces at each point...
67 |             for (j = 0; j < numberOfPoints; j++) {
68 |                 var dot = new Path.Circle(points[j], 1.5);
69 |                 dot.fillColor = '#666666';
70 |                 // ... then connect them with lines
71 |                 for (k = 0; k < numberOfPoints; k++) {
72 |                     var path = new Path.Line(points[j], points[k]);
73 |                     path.strokeColor = '#999999';
74 |                     path.strokeWidth = .1;
75 |                 }
76 |             }
77 | 
78 |             view.draw();
79 |         }
80 | 
81 |         function onResize() {
82 |             project.activeLayer.removeChildren();
83 |             init();
84 |         }
85 | 
86 |         init();
87 |     </script>
88 | 
89 | </body>
90 | 
91 | </html>
92 | 


--------------------------------------------------------------------------------
/118/eesur/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <style>
 6 |         html {
 7 |             height: 99%;
 8 |         }
 9 |         body { 
10 |             font-family: Consolas, monaco, monospace;
11 |             width: 100%;
12 |             height: 100%;
13 |             margin: 0;
14 |             padding: 0;
15 |             /*a dark wall*/
16 |             background: #130C0E;
17 |         }
18 |         svg {
19 |             width: 100%;
20 |             height: 100%;
21 |         }
22 |         line {
23 |             stroke-opacity: 0.2;
24 |             stroke-width: 0.5;
25 |         }
26 |     </style>
27 | </head>
28 | <body>
29 | 
30 | 
31 | <script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>
32 | <!-- d3 code -->
33 | <script>
34 | (function() {
35 |     var width = window.innerWidth;
36 |     var height = window.innerHeight;
37 |     var svg = d3.select('body')
38 |         .append('svg')
39 |         .attr('width', width)
40 |         .attr('width', height)
41 |     var g = svg.append('g')
42 | 
43 | 
44 |     // create 50 items that have x and y uniformly random
45 |     var data = d3.range(50).map(function (n) {
46 |         return {
47 |             x: Math.floor(d3.randomUniform(1, width-10)()),
48 |             y: Math.floor(d3.randomUniform(1, height-10)()),
49 |             id: n
50 |         }
51 |     })
52 | 
53 |     // want to use a colour pencil :)
54 |     var sequentialScale = d3.scaleSequential()
55 |         .domain([0, 50])
56 |         .interpolator(d3.interpolateRainbow)
57 | 
58 |     // append the 50 circles driven by the data
59 |     g.selectAll('circle')
60 |         .data(data)
61 |         .enter()
62 |         .append('circle')
63 |         .attr('r', 2)
64 |         .attr('cx', function (d) { return d.x; })
65 |         .attr('cy', function (d) { return d.y; })
66 |         .style('fill', function (d, i) { return sequentialScale(i); }) 
67 | 
68 |     // loop 50 times (length of data)
69 |     data.forEach(function (o, n) {
70 |         // append 50 lines driven by the data
71 |         g.selectAll('line.id-' + n)
72 |             .data(data)
73 |             .enter()
74 |             .append('line')
75 |             .attr('class', 'id-' + n)
76 |             // append a line form a reference (point in data)
77 |             .attr('x1', data[n].x)
78 |             .attr('y1', data[n].y)
79 |             // connecting to all other points (all points in data)
80 |             .attr('x2', function (d) { return d.x; })
81 |             .attr('y2', function (d) { return d.y; })
82 |             .style('stroke', function (d, i) { return sequentialScale(i); }) 
83 |     })
84 | })();
85 | </script>
86 | 
87 | 
88 | </body>
89 | </html>
90 | 
91 | 
92 | 


--------------------------------------------------------------------------------
/118/instructions.md:
--------------------------------------------------------------------------------
1 | ##  Wall Drawing #118 (1971)
2 | On a wall surface, any continuous stretch of wall, using a hard pencil, place fifty points at random. The points should be evenly distributed over the area of the wall. All of the points should be connected by straight lines.


--------------------------------------------------------------------------------
/118/y-a-v-a/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 |   <meta charset="utf-8">
 3 |   <title>y_a_v_a ❤︎ Sol LeWitt • #118</title>
 4 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |   <style>
 6 |   html,body {
 7 |     width: 100%;
 8 |     height: 100%;
 9 |     margin: 0;
10 |     padding: 0;
11 |   }
12 |   canvas {
13 |     width: 100%;
14 |     height: 100%;
15 |   }
16 |   </style>
17 |   <canvas></canvas>
18 |   <script>
19 |   function wallDrawing118() {
20 |     // On a wall surface, ...
21 |     var c = document.getElementsByTagName('canvas')[0];
22 |     var ctx = c.getContext('2d');
23 | 
24 |     // ... any continuous stretch of wall, ...
25 |     var sol = ctx.canvas.width = ctx.canvas.clientWidth;
26 |     var lewitt = ctx.canvas.height = ctx.canvas.clientHeight;
27 | 
28 |     ctx.clearRect(0, 0, c.width, c.height);
29 | 
30 |     // ... using a hard pencil, ...
31 |     ctx.strokeStyle = '#000000';
32 |     ctx.lineWidth = 0.1;
33 | 
34 |     var points = [];
35 |     // ... place fifty points at random. ...
36 |     for(var i = 0; i < 50; i++) {
37 |       points.push(newCoord());
38 | 
39 |       ctx.fillRect(points[i][0], points[i][1], 1, 1);
40 | 
41 |       if (i > 0) {
42 |         // ... All of the points should be connected by straight lines.
43 |         for (var j = (points.length - 1); j >= 0; j--) {
44 |           drawStraightLine(points[i][0], points[i][1], points[j][0], points[j][1]);
45 |         }
46 |       }
47 |     }
48 | 
49 |     // ... The points should be evenly distributed over the area of the wall. ...
50 |     function newCoord() {
51 |       // 50 = 10 * 5
52 |       // 84 = (10 + 2) * (5 + 2)
53 |       var limit = Math.sqrt((sol * lewitt) / 84);
54 |       var newCoord;
55 |       var shouldRenew = [];
56 |       do {
57 |         newCoord = randomCoord();
58 |         shouldRenew = points.filter(function(existingCoord, index, array) {
59 |           var distance = Math.round(
60 |             Math.sqrt(
61 |               Math.pow(newCoord[0] - existingCoord[0], 2) +
62 |               Math.pow(newCoord[1] - existingCoord[1], 2)
63 |             )
64 |           );
65 |           return distance < limit;
66 |         });
67 |       } while (shouldRenew.length > 0);
68 | 
69 |       return newCoord;
70 |     }
71 | 
72 |     function randomCoord() {
73 |       return [randomValue(sol), randomValue(lewitt)];
74 |     }
75 | 
76 |     function randomValue(maximum) {
77 |       return Math.round(Math.random() * maximum);
78 |     }
79 | 
80 |     function drawStraightLine(x1, y1, x2, y2) {
81 |       ctx.beginPath();
82 |       ctx.moveTo(x1, y1);
83 |       ctx.lineTo(x2, y2);
84 |       ctx.stroke();
85 |     }
86 |   }
87 | 
88 |   window.onresize = wallDrawing118;
89 | 
90 |   wallDrawing118();
91 |   </script>
92 | 


--------------------------------------------------------------------------------
/1180/OgAstorga/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title></title>
  6 |   <style>
  7 |     html, body {
  8 |       overflow: hidden;
  9 |       width: 100%;
 10 |       height: 100%;
 11 |     }
 12 |     svg {
 13 |       position: absolute;
 14 |       background: white;
 15 |       top: 0;
 16 |       left: 0;
 17 |       height: 100%;
 18 |       width: 100%;
 19 |     }
 20 |   </style>
 21 | </head>
 22 | <body>
 23 |   <svg></svg>
 24 | </body>
 25 | <script src="https://d3js.org/d3.v5.min.js"></script>
 26 | <script type="text/javascript">
 27 |   const svg = d3.select('svg')
 28 |   const width = +svg.style('width').replace('px', '')
 29 |   const height = +svg.style('height').replace('px', '')
 30 |   const center = {
 31 |     x: width/2,
 32 |     y: height/2
 33 |   }
 34 | 
 35 |   // circle
 36 |   const radius = Math.min(width, height) / (2 * Math.sqrt(2))
 37 |   svg.selectAll('circle')
 38 |     .data([{
 39 |       cx: center.x,
 40 |       cy: center.y,
 41 |       r: radius
 42 |     }])
 43 |     .enter()
 44 |     .append('circle')
 45 |     .attr('cx', c => c.cx)
 46 |     .attr('cy', c => c.cy)
 47 |     .attr('r', c => c.r)
 48 |     .attr('fill', 'whitesmoke')
 49 | 
 50 |   // straight lines
 51 |   const slines = []
 52 |   for (var i=0; i<10000; ++i) {
 53 |     const dir = Math.random() * (2 * Math.PI)
 54 | 
 55 |     let x = 1, y = 1;
 56 |     while (x*x + y*y > 1) {
 57 |       x = 2 * Math.random() - 1
 58 |       y = 2 * Math.random() - 1
 59 |     }
 60 | 
 61 |     x *= radius
 62 |     y *= radius
 63 | 
 64 |     slines.push({
 65 |       x: x,
 66 |       y: y,
 67 |       dir: dir
 68 |     })
 69 |   }
 70 | 
 71 |   svg.selectAll('line')
 72 |     .data(slines)
 73 |     .enter()
 74 |     .append('line')
 75 |     .attr('x1', line => center.x + line.x)
 76 |     .attr('y1', line => center.y + line.y)
 77 |     .attr('x2', line => center.x + line.x + 3 * Math.cos(line.dir))
 78 |     .attr('y2', line => center.y + line.y + 3 * Math.sin(line.dir))
 79 |     .attr('stroke', '#333')
 80 | 
 81 |   // non straight lines
 82 |   const nslines = []
 83 |   for (var i=0; i<10000; ++i) {
 84 |     const dir = Math.random() * (2 * Math.PI)
 85 | 
 86 |     let x = 1, y = 1;
 87 |     while (x*x + y*y > 1) {
 88 |       x = 2 * Math.random() - 1
 89 |       y = 2 * Math.random() - 1
 90 |     }
 91 | 
 92 |     x *= radius
 93 |     y *= radius
 94 | 
 95 |     nslines.push({
 96 |       x: x,
 97 |       y: y,
 98 |       dir: dir
 99 |     })
100 |   }
101 | 
102 |   svg.selectAll('path')
103 |     .data(nslines)
104 |     .enter()
105 |     .append('path')
106 |     .attr('d', line => {
107 |       let commands = [
108 |         'M ' + (center.x + line.x) + ',' + (center.y + line.y),
109 |         (Math.random() > .5 ? 'l 0,3' : 'l 3,0'),
110 |         (Math.random() > .5 ? 'l 0,3' : 'l 3,0')
111 |       ]
112 | 
113 |       return commands.join('\n')
114 |     })
115 |     .attr('fill', 'none')
116 |     .attr('stroke', '#333')
117 | </script>
118 | </html>
119 | 


--------------------------------------------------------------------------------
/1180/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #1180 (2005)
2 | 
3 | Within a circle, draw 10,000 black straight lines and 10,000 black not straight lines. All lines are randomly spaced and equally distributed.
4 | 


--------------------------------------------------------------------------------
/122/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #122 (1972)
2 | 
3 | All combinations of two lines crossing, placed at random, using arcs from corners and sides, straight, not straight and broken lines.


--------------------------------------------------------------------------------
/122/y-a-v-a/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 	<head>
 4 | 		<title>y_a_v_a ❤︎ Sol LeWitt • #122</title>
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 		<meta charset="utf-8">
 7 |     <!--
 8 |     yet another visual artist • y-a-v-a.org
 9 |     Vincent Bruijn <vebruijn@gmail.com> - http://www.y-a-v-a.org
10 |     2015 • CC BY SA 3.0
11 |     -->
12 | 		<style>
13 |     html, body {
14 |         width: 100%;
15 |         height: 100%;
16 |         margin: 0;
17 |         padding: 0;
18 |     }
19 |     canvas {
20 |         width: 100%;
21 |         height: 100%;
22 |         display: block;
23 |     }
24 |     </style>
25 | 	</head>
26 | 	<body>
27 | 		<canvas></canvas>
28 | 		<script src="script.js"></script>
29 | 	</body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/130/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #130 (1972)
2 | 
3 | Grid and arcs from four corners.


--------------------------------------------------------------------------------
/130/llimllib/index.html:
--------------------------------------------------------------------------------
  1 | <!-- ## Wall Drawing #130 (1972)
  2 | 
  3 | Grid and arcs from four corners.
  4 | -->
  5 | <html><head>
  6 | <title>Sol LeWitt Wall Drawing #130</title>
  7 | <script>
  8 | function line(ctx, x1, y1, x2, y2) {
  9 |   ctx.beginPath();
 10 |   ctx.moveTo(x1, y1);
 11 |   ctx.lineTo(x2, y2);
 12 |   ctx.stroke();
 13 | }
 14 | 
 15 | function grid(ctx, height, width, gridw) {
 16 |   // Adding .5 gets us sharper lines
 17 |   for (var x=gridw; x < width; x += gridw) {
 18 |     line(ctx, x+.5, 0, x+.5, height);
 19 |   }
 20 |   for (var y=gridw; y < height; y += gridw) {
 21 |     line(ctx, 0, y+.5, width, y+.5);
 22 |   }
 23 | }
 24 | 
 25 | function arc(ctx, x, y, r) {
 26 |   ctx.beginPath();
 27 |   // Just draw the full circle, it'll be 3/4 offscreen
 28 |   ctx.arc(x, y, r, 0, Math.PI*2);
 29 |   ctx.closePath();
 30 |   ctx.stroke();
 31 | }
 32 | 
 33 | function radiate(ctx, x, y, h, w, arcw) {
 34 |   var diag = Math.sqrt(Math.pow(h, 2) + Math.pow(w, 2));
 35 |   for (var r=arcw; r < diag; r += arcw) {
 36 |     arc(ctx, x, y, r);
 37 |   }
 38 | }
 39 | 
 40 | function draw(canvas, gridw, arcw) {
 41 |   var ctx = canvas.getContext("2d"),
 42 |       h = canvas.height,
 43 |       w = canvas.width;
 44 | 
 45 |   ctx.clearRect(0,0,w,h);
 46 | 
 47 |   grid(ctx, h, w, gridw);
 48 |   radiate(ctx, 0, 0, h, w, arcw);
 49 |   radiate(ctx, w, 0, h, w, arcw);
 50 |   radiate(ctx, 0, h, h, w, arcw);
 51 |   radiate(ctx, w, h, h, w, arcw);
 52 | }
 53 | 
 54 | function clamp(n, min, max) {
 55 |   if (n > min) return Math.min(n, max);
 56 |   return Math.max(n, min);
 57 | }
 58 | 
 59 | document.addEventListener("DOMContentLoaded", function() {
 60 |   var canvas = document.getElementById("wall"),
 61 |       gridw = 20,
 62 |       arcw = 20,
 63 |       mousemove = false,
 64 |       mousedown = undefined;
 65 | 
 66 |   function resizeCanvas() {
 67 |     canvas.width = window.innerWidth;
 68 |     canvas.height = window.innerHeight;
 69 | 
 70 |     draw(canvas, gridw, arcw);
 71 |   }
 72 | 
 73 |   window.addEventListener('resize', resizeCanvas);
 74 |   resizeCanvas(canvas);
 75 | 
 76 |   window.addEventListener("mousedown", function(evt) {
 77 |     mousemove = false;
 78 |     mousedown = evt;
 79 |   }, false);
 80 |   window.addEventListener("mousemove", function(evt) {
 81 |     if (mousedown !== undefined) {
 82 |       mousemove = true;
 83 |       diffX = evt.clientX - mousedown.clientX;
 84 |       diffY = evt.clientY - mousedown.clientY;
 85 | 
 86 |       temp_arcw = clamp(arcw - diffY/10, 2, 50);
 87 |       temp_gridw = clamp(gridw - diffX/10, 2, 50);
 88 |       draw(canvas, temp_gridw, temp_arcw);
 89 |     }
 90 |   }, false);
 91 |   window.addEventListener("mouseup", function(evt) {
 92 |     if(mousemove) {
 93 |       arcw = temp_arcw;
 94 |       gridw = temp_gridw;
 95 |     }
 96 |     mousedown = undefined;
 97 |   }, false);
 98 | 
 99 |   window.addEventListener("keypress", function(evt) {
100 |     // r for reset
101 |     if (evt.keyCode == 114) {
102 |       gridw = 20;
103 |       arcw = 20;
104 |       draw(canvas, gridw, arcw);
105 |     }
106 |   });
107 | 
108 |   var A = document.getElementById("A");
109 |   var Q = document.getElementById("Q");
110 |   A.style["visibility"] = "hidden";
111 |   document.getElementById("Q").addEventListener("mouseover", function() {
112 |     A.style["visibility"] = "";
113 |     Q.style["visibility"] = "hidden";
114 |   });
115 |   document.getElementById("A").addEventListener("mouseout", function() {
116 |     A.style["visibility"] = "hidden";
117 |     Q.style["visibility"] = "";
118 |   });
119 | });
120 | </script>
121 | <style>
122 | body { margin: 0; }
123 | #Q { position: absolute; bottom: 5px; right: 5px; color: blue; background-color: white; font-size: 24px; }
124 | #A { position: absolute; bottom: 5px; right: 5px; background-color: white; }
125 | </style>
126 | <html>
127 |   <canvas id="wall"></canvas>
128 |   <span id="Q">?</span>
129 |   <pre id="A">Sol Lewitt Wall Drawing #130 (1972)
130 | 
131 | Grid and arcs from four corners.
132 | 
133 | Clicking and dragging in the X changes the grid width
134 | Clicking and dragging in the Y changes the arc width
135 | Pres "r" to reset
136 | </pre>
137 | </html>
138 | 


--------------------------------------------------------------------------------
/132/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #132 (1972)
2 | 
3 | A 36 in. (90 cm) grid covering the wall. All two-part combinations of arcs from corners and sides, straight and not straight lines, systematically.
4 | 


--------------------------------------------------------------------------------
/138/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #138 (1972)
2 | 
3 | Circles and arcs from the midpoints of four sides.
4 | 
5 | 


--------------------------------------------------------------------------------
/138/y-a-v-a/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <meta charset="utf-8">
 3 | <title>y-a-v-a ❤︎ sol lewitt • #138</title>
 4 | <meta name="viewport" content="width=device-width, initial-scale=1">
 5 | <style>
 6 | html,body {
 7 |     width: 100%;
 8 |     height: 100%;
 9 |     margin: 0;
10 |     padding: 0;
11 | }
12 | canvas {
13 |     height: 100%;
14 |     width: 100%;
15 | }
16 | </style>
17 | <canvas></canvas>
18 | <script>
19 | function number138() {
20 |     var canvas = document.getElementsByTagName('canvas')[0];
21 |     var context = canvas.getContext('2d');
22 |     context.canvas.width = context.canvas.clientWidth;
23 |     context.canvas.height = context.canvas.clientHeight;
24 | 
25 |     context.clearRect(0, 0, canvas.width, canvas.height);
26 | 
27 |     var xs = [0, canvas.width / 2, canvas.width];
28 |     var ys = [0, canvas.height / 2, canvas.height];
29 |     var radius = 9;
30 |     var s;
31 |     var xy = [
32 |         [0, 1, 1, 1, 2],
33 |         [1, 0, 1, 2, 1]
34 |     ];
35 | 
36 |     while(radius < canvas.width + 138) {
37 |         context.fillStyle = 'transparent';
38 |         context.lineWidth = 0.2;
39 |         context.strokeStyle = '#000000';
40 | 
41 |         for(s = 0; s < 5; s++) {
42 |             context.beginPath();
43 |             context.arc(xs[xy[0][s]], ys[xy[1][s]], radius, 0, 2 * Math.PI, false);
44 |             context.fill();
45 |             context.stroke();
46 |         }
47 |         radius += 18;
48 |     }
49 | }
50 | 
51 | window.onresize = number138;
52 | 
53 | number138();
54 | </script>
55 | 


--------------------------------------------------------------------------------
/146/OgAstorga/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title></title>
  6 |   <style>
  7 |     html, body {
  8 |       overflow: hidden;
  9 |       width: 100%;
 10 |       height: 100%;
 11 |     }
 12 |     svg {
 13 |       position: absolute;
 14 |       background: #f0f0f0;
 15 |       top: 0;
 16 |       left: 0;
 17 |       height: 100%;
 18 |       width: 100%;
 19 |     }
 20 |   </style>
 21 | </head>
 22 | <body>
 23 |   <svg></svg>
 24 | </body>
 25 | <script src="https://d3js.org/d3.v5.min.js"></script>
 26 | <script type="text/javascript">
 27 |   const svg = d3.select('svg')
 28 |   const width = +svg.style('width').replace('px', '')
 29 |   const height = +svg.style('height').replace('px', '')
 30 | 
 31 |   const data = []
 32 | 
 33 |   const N = 20;
 34 |   for (let i=1; i<=N; ++i) {
 35 |     data.push(i * height / (2 * N))
 36 |   }
 37 | 
 38 |   // side arcs
 39 |   svg.append('g')
 40 |     .selectAll('circle')
 41 |     .data(data)
 42 |     .enter().append('circle')
 43 |       .attr('cx', 0)
 44 |       .attr('cy', d => d)
 45 |       .attr('r', d => d)
 46 |       .attr('stroke', '#39AFE8')
 47 |       .attr('stroke-width', '1px')
 48 |       .attr('fill', 'transparent')
 49 | 
 50 |   svg.append('g')
 51 |     .selectAll('circle')
 52 |     .data(data)
 53 |     .enter().append('circle')
 54 |       .attr('cx', width)
 55 |       .attr('cy', d => height - d)
 56 |       .attr('r', d => d)
 57 |       .attr('stroke', '#39AFE8')
 58 |       .attr('stroke-width', '1px')
 59 |       .attr('fill', 'transparent')
 60 | 
 61 |   // straight lines
 62 |   svg.append('g')
 63 |     .selectAll('line')
 64 |     .data(data)
 65 |     .enter().append('line')
 66 |       .attr('x1', '0')
 67 |       .attr('y1', '0')
 68 |       .attr('x2', width)
 69 |       .attr('y2', d => 2*d)
 70 |       .attr('stroke', '#39AFE8')
 71 |       .attr('stroke-width', '1px')
 72 | 
 73 |   svg.append('g')
 74 |     .selectAll('line')
 75 |     .data(data)
 76 |     .enter().append('line')
 77 |       .attr('x1', width)
 78 |       .attr('y1', height)
 79 |       .attr('x2', 0)
 80 |       .attr('y2', d => height - 2*d)
 81 |       .attr('stroke', '#39AFE8')
 82 |       .attr('stroke-width', '1px')
 83 | 
 84 |   // not straight lines
 85 |   const sin_data = []
 86 |   for (let i=0; i<=width; ++i) {
 87 |     sin_data.push(Math.sin(10 * 2 * Math.PI * i / width))
 88 |   }
 89 | 
 90 |   svg.append('g')
 91 |     .selectAll('polyline')
 92 |     .data(data)
 93 |     .enter().append('polyline')
 94 |       .attr('points', d => sin_data
 95 |         .map((y, x) =>
 96 |           [x, 2*d + 10*y]
 97 |           .join(',')
 98 |         ).join(' ')
 99 |       )
100 |       .attr('fill', 'transparent')
101 |       .attr('stroke', '#39AFE8')
102 |       .attr('stroke-width', '2px')
103 | 
104 |   console.log(sin_data)
105 | </script>
106 | </html>
107 | 


--------------------------------------------------------------------------------
/146/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #146 (1972)
2 | 
3 | All two-part combinations of blue arcs from corners and sides, and blue straight, not straight, and broken lines.
4 | 


--------------------------------------------------------------------------------
/164/instructions.md:
--------------------------------------------------------------------------------
1 | # Wall Drawing #164 (1973)
2 | 
3 | A black outlined square with a red horizontal line centered on the axis between the midpoint of the left side and the midpoint of the right side and a red diagonal line centered on the axis between the lower left and upper right corners.


--------------------------------------------------------------------------------
/164/pavellishin/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>pavellishin - Sol LeWitt - #164</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <style>
 8 |     html,body {
 9 |         width: 100%;
10 |         height: 100%;
11 |         margin: 0;
12 |         padding: 0;
13 |     }
14 |     </style>
15 |   </head>
16 | 
17 |   <body>
18 |     <canvas></canvas>
19 | 
20 |     <script>
21 |     function draw() {
22 |       var w = window,
23 |           d = document,
24 |           e = d.documentElement,
25 |           g = d.getElementsByTagName('body')[0],
26 |           width = w.innerWidth || e.clientWidth || g.clientWidth,
27 |           height = w.innerHeight|| e.clientHeight|| g.clientHeight;
28 | 
29 |       var c = document.getElementsByTagName('canvas')[0];
30 |       var ctx = c.getContext('2d');
31 | 
32 |       ctx.canvas.width = width * 0.9;
33 |       ctx.canvas.height = height * 0.9;
34 |       c.style.marginLeft = ((width * 0.1) / 2) + "px";
35 |       c.style.marginTop = ((height * 0.1) / 2) + "px";
36 |       c.style.border = "3px solid #000";
37 | 
38 |       // clear canvas
39 |       ctx.clearRect(0, 0, c.width, c.height);
40 | 
41 |       ctx.strokeStyle = '#f00';
42 |       ctx.lineWidth = 3;
43 | 
44 |       // horizontal line
45 |       ctx.beginPath();
46 |       ctx.moveTo(0, c.height / 2);
47 |       ctx.lineTo(c.width, c.height / 2);
48 |       ctx.stroke();
49 | 
50 |       // diagonal line
51 |       ctx.beginPath();
52 |       ctx.moveTo(0, c.height);
53 |       ctx.lineTo(c.width, 0);
54 |       ctx.stroke();
55 |     }
56 | 
57 |     window.onresize = draw;
58 | 
59 |     document.addEventListener('DOMContentLoaded', draw);
60 |     </script>
61 |   </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/232/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #232 (1975)
2 | 
3 | A square, each side of which is equal to a tenth of the total length of three lines, the first of which is drawn from a point halfway between the center of the wall and a point halfway between the center of the wall and the upper left corner and the midpoint of the left side to a point halfway between the center of the wall and a point halfway between the center of the wall and the midpoint of the bottom side; the second line is drawn from a point halfway between the start of the first line and a point halfway between the center of the wall and the upper right corner and the midpoint of the top side to the start of the first line; the third line is drawn from a point halfway between a point equidistant from the end of the first line, the start of the second line and a point halfway between a point halfway between the center of the wall and the midpoint of the right side and a point halfway between the center of the wall and the upper right corner and the midpoint of the top side to the point where the first line starts and the second line ends; the right side is located on the axis of, and equidistant from two points, the first of which is located at a point halfway between a point halfway between the center of the wall and the midpoint of the right side and the lower right corner to a point halfway between a point halfway between the midpoint of the top side and the upper right corner and the start of the third line.
4 | 


--------------------------------------------------------------------------------
/237/instructions.md:
--------------------------------------------------------------------------------
1 | # Wall Drawing #237 (1974)
2 | 
3 | The location of a trapezoid.


--------------------------------------------------------------------------------
/238/instructions.md:
--------------------------------------------------------------------------------
1 | # Wall Drawing #237 (1974)
2 | 
3 | The location of a parallelogram.


--------------------------------------------------------------------------------
/273/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #273 (1975)
2 | 
3 | Lines to points on a grid. A six-inch (15 cm) grid covering the wall. Lines from the corners, sides, and center of the walls to random points on the grid. Composite (seventh wall): red lines from the midpoints of four sides, blue lines from four corners, yellow lines from the center.


--------------------------------------------------------------------------------
/273/matthewlein/273.js:
--------------------------------------------------------------------------------
  1 | var wall = document.getElementById('wall');
  2 | var ctx = wall.getContext('2d');
  3 | 
  4 | wall.width = 1200;
  5 | wall.height = 500;
  6 | 
  7 | // global values
  8 | ctx.lineWidth = 1;
  9 | 
 10 | var blue = 'rgba(0, 0, 255, 0.4)';
 11 | var red = 'rgba(255, 0, 0, 0.4)';
 12 | var yellow = 'rgba(255, 230, 78, 0.4)';
 13 | var grey = 'rgba(0, 0, 0, 0.05)';
 14 | 
 15 | var midpoints = [
 16 |     // top
 17 |     {
 18 |         x : wall.width/2,
 19 |         y : 0
 20 |     },
 21 |     // right
 22 |     {
 23 |         x : wall.width,
 24 |         y : wall.height/2
 25 |     },
 26 |     // bottom
 27 |     {
 28 |         x : wall.width/2,
 29 |         y : wall.height
 30 |     },
 31 |     // left
 32 |     {
 33 |         x : 0,
 34 |         y : wall.height/2
 35 |     }
 36 | ];
 37 | 
 38 | var corners = [
 39 |     // NW
 40 |     {
 41 |         x : 0,
 42 |         y : 0
 43 |     },
 44 |     // NE
 45 |     {
 46 |         x : wall.width,
 47 |         y : 0
 48 |     },
 49 |     // SE
 50 |     {
 51 |         x : wall.width,
 52 |         y : wall.height
 53 |     },
 54 |     // NW
 55 |     {
 56 |         x : 0,
 57 |         y : wall.height
 58 |     }
 59 | ];
 60 | 
 61 | var center = {
 62 |     x : wall.width/2,
 63 |     y : wall.height/2
 64 | };
 65 | 
 66 | // random range
 67 | function randomRange(low, high) {
 68 |     return Math.floor( Math.random() * (1 + high - low) ) + low;
 69 | }
 70 | 
 71 | 
 72 | var gridSpacing = 50;
 73 | var gridCols = wall.width / gridSpacing;
 74 | var gridRows = wall.height / gridSpacing;
 75 | 
 76 | function createGrid() {
 77 | 
 78 |     ctx.save();
 79 |     ctx.strokeStyle = grey;
 80 | 
 81 |     for (var x = 0; x < gridCols; x++) {
 82 |         ctx.beginPath();
 83 |         ctx.moveTo(x * gridSpacing, 0);
 84 |         ctx.lineTo(x * gridSpacing, wall.height);
 85 |         ctx.closePath();
 86 |         ctx.stroke();
 87 |     }
 88 |     for (var y = 0; y < gridRows; y++) {
 89 |         ctx.beginPath();
 90 |         ctx.moveTo(0, y * gridSpacing);
 91 |         ctx.lineTo(wall.width, y * gridSpacing);
 92 |         ctx.closePath();
 93 |         ctx.stroke();
 94 |     }
 95 | 
 96 |     ctx.restore();
 97 | 
 98 | }
 99 | 
100 | 
101 | // point object
102 | var Point = function(x, y) {
103 |     this.x = x;
104 |     this.y = y;
105 | };
106 | 
107 | var points = [];
108 | 
109 | var pointsCount = 20;
110 | 
111 | function createPoints() {
112 |     var x;
113 |     var y;
114 |     for (var i = pointsCount - 1; i >= 0; i--) {
115 |         x = randomRange(0, gridCols) * gridSpacing;
116 |         y = randomRange(0, gridRows) * gridSpacing;
117 |         points.push( new Point(x, y) );
118 |     }
119 | }
120 | 
121 | 
122 | function cornerLines() {
123 |     ctx.save();
124 |     ctx.strokeStyle = blue;
125 |     corners.forEach(function(corner) {
126 | 
127 |         points.forEach(function(point) {
128 |             ctx.beginPath();
129 |             ctx.moveTo(corner.x, corner.y);
130 |             ctx.lineTo(point.x, point.y);
131 |             ctx.closePath();
132 |             ctx.stroke();
133 |         });
134 | 
135 |     });
136 |     ctx.restore();
137 | }
138 | function midpointLines() {
139 |     ctx.save();
140 |     ctx.strokeStyle = red;
141 |     midpoints.forEach(function(midpoint) {
142 | 
143 |         points.forEach(function(point) {
144 |             ctx.beginPath();
145 |             ctx.moveTo(midpoint.x, midpoint.y);
146 |             ctx.lineTo(point.x, point.y);
147 |             ctx.closePath();
148 |             ctx.stroke();
149 |         });
150 | 
151 |     });
152 |     ctx.restore();
153 | }
154 | function centerLines() {
155 |     ctx.save();
156 |     ctx.strokeStyle = yellow;
157 |     points.forEach(function(point) {
158 |         ctx.beginPath();
159 |         ctx.moveTo(center.x, center.y);
160 |         ctx.lineTo(point.x, point.y);
161 |         ctx.closePath();
162 |         ctx.stroke();
163 |     });
164 |     ctx.restore();
165 | }
166 | 
167 | 
168 | // ------------------------------------------------------------------------- //
169 | // Init
170 | // ------------------------------------------------------------------------- //
171 | 
172 | function init() {
173 |     createPoints();
174 |     createGrid();
175 |     cornerLines();
176 |     midpointLines();
177 |     centerLines();
178 | }
179 | 
180 | init();


--------------------------------------------------------------------------------
/273/matthewlein/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>273 - Matthew Lein</title>
 6 | 
 7 | <style>
 8 | canvas {
 9 |     display: block;
10 |     background-color: #eee;
11 |     margin: auto;
12 | }
13 | body {
14 |     background-color: #222;
15 |     margin-top: 40px;
16 | }
17 | </style>
18 | 
19 | </head>
20 | <body>
21 |     <canvas id="wall"></canvas>
22 | </body>
23 | 
24 | <script src="273.js"></script>
25 | 
26 | </html>


--------------------------------------------------------------------------------
/289/cagrimmett/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | 	<script src="https://d3js.org/d3.v4.min.js"></script>
  4 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
  5 | 	<title>Sol LeWitt Wall Drawing 289</title>
  6 | 	<style type="text/css">
  7 | 		body {
  8 | 			background: #000;
  9 | 			margin: 0;
 10 | 		}
 11 | 		.drawing {
 12 | 			margin: 0;
 13 | 			text-align: center;
 14 | 
 15 | 		}
 16 | 		#lines {
 17 | 			width:100%;
 18 | 			height: 100%;
 19 | 		}
 20 | 
 21 | 		line {
 22 | 		  stroke: #fff;
 23 | 		  stroke-width: 3;
 24 | 		}
 25 | 	</style>
 26 | </head>
 27 | <body>
 28 | 
 29 | <div class="drawing">
 30 | 	<div id="lines"></div>
 31 | </div>
 32 | </div>
 33 | 
 34 | 
 35 | <script>
 36 | 
 37 | function sol289() {
 38 | var svg = d3.select('#lines')
 39 | 	.append('svg')
 40 | 	.attr("width", "100%")
 41 | 	.attr("height", "100%");
 42 | 
 43 | function getRandomArbitrary(min, max) {
 44 |   return Math.round(Math.random() * (max - min) + min);
 45 | }
 46 | 
 47 | function lineData() {
 48 | 	var data = new Array();
 49 | 	var id = 1;	
 50 | 	var ww = window.innerWidth;
 51 | 	var wh = window.innerHeight;
 52 | 	var numLines = 12;
 53 | 	// iterate for cells/columns inside rows
 54 | 		for (var center = 0; center < numLines * 2; center++) {	
 55 | 				data.push({
 56 | 				id: id,
 57 | 				class: "center",
 58 | 				x1: ww/2,
 59 | 				y1: wh/2,
 60 | 				x2: getRandomArbitrary(0, ww),
 61 | 				y2: getRandomArbitrary(0, wh)
 62 | 			})
 63 | 			id++;
 64 | 		}
 65 | 				
 66 | 		for (var topleft = 0; topleft < numLines; topleft++) {	
 67 | 				data.push({
 68 | 				id: id,
 69 | 				class: "topleft",
 70 | 				x1: 0,
 71 | 				y1: 0,
 72 | 				x2: getRandomArbitrary(0, ww),
 73 | 				y2: getRandomArbitrary(0, wh)
 74 | 			})
 75 | 			id++;
 76 | 		}
 77 | 
 78 | 		for (var topright = 0; topright < numLines; topright++) {	
 79 | 				data.push({
 80 | 				id: id,
 81 | 				class: "topright",
 82 | 				x1: ww,
 83 | 				y1: 0,
 84 | 				x2: getRandomArbitrary(0, ww),
 85 | 				y2: getRandomArbitrary(0, wh)
 86 | 			})
 87 | 			id++;
 88 | 		}
 89 | 
 90 | 		for (var bottomright = 0; bottomright < numLines; bottomright++) {		
 91 | 				data.push({
 92 | 				id: id,
 93 | 				class: "bottomright",
 94 | 				x1: ww,
 95 | 				y1: wh,
 96 | 				x2: getRandomArbitrary(0, ww),
 97 | 				y2: getRandomArbitrary(0, wh)
 98 | 			})
 99 | 			id++;
100 | 		}
101 | 
102 | 		for (var bottomleft = 0; bottomleft < numLines; bottomleft++) {		
103 | 				data.push({
104 | 				id: id,
105 | 				class: "bottomleft",
106 | 				x1: 0,
107 | 				y1: wh,
108 | 				x2: getRandomArbitrary(0, ww),
109 | 				y2: getRandomArbitrary(0, wh)
110 | 			})
111 | 			id++;
112 | 		}
113 | 
114 | 		for (var middleleft = 0; middleleft < numLines; middleleft++) {		
115 | 				data.push({
116 | 				id: id,
117 | 				class: "middleleft",
118 | 				x1: 0,
119 | 				y1: wh/2,
120 | 				x2: getRandomArbitrary(0, ww),
121 | 				y2: getRandomArbitrary(0, wh)
122 | 			})
123 | 			id++;
124 | 		}
125 | 
126 | 		for (var middleright = 0; middleright < numLines; middleright++) {		
127 | 				data.push({
128 | 				id: id,
129 | 				class: "middleright",
130 | 				x1: ww,
131 | 				y1: wh/2,
132 | 				x2: getRandomArbitrary(0, ww),
133 | 				y2: getRandomArbitrary(0, wh)
134 | 			})
135 | 			id++;
136 | 		}
137 | 
138 | 
139 | 		for (var middletop = 0; middletop < numLines; middletop++) {		
140 | 				data.push({
141 | 				id: id,
142 | 				class: "middletop",
143 | 				x1: ww/2,
144 | 				y1: 0,
145 | 				x2: getRandomArbitrary(0, ww),
146 | 				y2: getRandomArbitrary(0, wh)
147 | 			})
148 | 			id++;
149 | 		}
150 | 
151 | 		for (var middlebottom = 0; middlebottom < numLines; middlebottom++) {		
152 | 				data.push({
153 | 				id: id,
154 | 				class: "middlebottom",
155 | 				x1: ww/2,
156 | 				y1: wh,
157 | 				x2: getRandomArbitrary(0, ww),
158 | 				y2: getRandomArbitrary(0, wh)
159 | 			})
160 | 			id++;
161 | 		}
162 | 	return data;
163 | } 
164 | 
165 | 
166 | 
167 | var lineData = lineData();
168 | console.log(lineData);
169 | 
170 | 
171 | /*var row = svg.selectAll(".row")
172 | 	.data(lineData)
173 | 	.enter().append("g")
174 | 	.attr("class", "row");*/
175 | 
176 | var line = svg.selectAll(".rand")
177 | 	.data(lineData)
178 | 	.enter().append('line')
179 | 	.attr("class", function(d) { return d.class; })
180 | 	.attr("id", function(d) { return d.id; })
181 |  .attr("x1", function(d) { return d.x1; } )
182 |  .attr("y1", function(d) { return d.y1; })
183 |  .attr("x2", function(d) { return d.x1; } )
184 |  .attr("y2", function(d) { return d.y1; })
185 |  .transition().duration(2000)
186 |  .attr("x2", function(d) { return d.x2; })
187 |  .attr("y2", function(d) { return d.y2; });
188 |  
189 |  }
190 |  
191 |  // run first time
192 | sol289();
193 | 
194 | $(window).resize(function() {
195 |     if(this.resizeTO) clearTimeout(this.resizeTO);
196 |     this.resizeTO = setTimeout(function() {
197 |         $(this).trigger('resizeEnd');
198 |     }, 500);
199 | });
200 | 
201 | //resize on resizeEnd function
202 | $(window).bind('resizeEnd', function() {
203 | 	 d3.selectAll("svg").remove();
204 | 	 sol289();
205 | });
206 |  
207 |  
208 | </script>
209 | 
210 | 


--------------------------------------------------------------------------------
/289/grahamalama/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Wall Drawing 289</title>
 8 |     <script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script>
 9 |     <script language="javascript" type="text/javascript" src="index.js"></script>
10 |       <style> 
11 |           body {
12 |             display: grid;
13 |             grid-auto-rows: 47vh;;
14 |             grid-template-columns: 100%;
15 |             margin: 1rem; 
16 |             background: black;
17 |             grid-gap: 1rem;
18 |           }
19 |           @media only screen and (min-width: 500px) {
20 |             body {
21 |               grid-template-columns: repeat(2, 50%);
22 |               overflow: hidden;
23 |             }
24 |           }
25 |       </style>
26 |   </head>
27 |   <body>
28 |     <div id="wall1"></div>
29 |     <div id="wall2"></div>
30 |     <div id="wall3"></div>
31 |     <div id="wall4"></div>
32 |   </body>
33 | </html>


--------------------------------------------------------------------------------
/289/grahamalama/index.js:
--------------------------------------------------------------------------------
 1 | const GRID_SIZE = 0.05;
 2 | 
 3 | const randOnGrid = (cnv, extent) => {;
 4 |   choices = []
 5 |   for (let i = 0; i < 1; i+= GRID_SIZE) {
 6 |     choices.push(i)
 7 |   }
 8 |   return extent * cnv.random(choices)
 9 | };
10 | 
11 | const midpoint = cnv => {
12 |   const { width, height } = cnv;
13 |   const origin = {
14 |     x: width / 2,
15 |     y: height / 2
16 |   };
17 |   for (let i = 0; i < 24; i++) {
18 |     cnv.line(
19 |       origin.x,
20 |       origin.y,
21 |       randOnGrid(cnv, width),
22 |       randOnGrid(cnv, height)
23 |     );
24 |   }
25 | };
26 | 
27 | const corners = cnv => {
28 |   const { width, height } = cnv;
29 |   for (let i = 0; i < 12; i++) {
30 |     cnv.line(0, 0, randOnGrid(cnv, width), randOnGrid(cnv, height));
31 |     cnv.line(width, 0, randOnGrid(cnv, width), randOnGrid(cnv, height));
32 |     cnv.line(width, height, randOnGrid(cnv, width), randOnGrid(cnv, height));
33 |     cnv.line(0, height, randOnGrid(cnv, width), randOnGrid(cnv, height));
34 |   }
35 | };
36 | 
37 | const sides = cnv => {
38 |   const { width, height } = cnv;
39 |   const origin = {
40 |     x: width / 2,
41 |     y: height / 2
42 |   };
43 |   for (let i = 0; i < 12; i++) {
44 |     cnv.line(origin.x, 0, randOnGrid(cnv, width), randOnGrid(cnv, height));
45 |     cnv.line(width, origin.y, randOnGrid(cnv, width), randOnGrid(cnv, height));
46 |     cnv.line(origin.x, height, randOnGrid(cnv, width), randOnGrid(cnv, height));
47 |     cnv.line(0, origin.y, randOnGrid(cnv, width), randOnGrid(cnv, height));
48 |   }
49 | };
50 | 
51 | const createWall = (wall, drawFuncs) => canvas => {
52 |   const getWallDimensions = (canvas, wall) => {
53 |     let { width, height } = canvas.select(`#${wall}`);
54 |     return { width, height };
55 |   };
56 | 
57 |   canvas.setup = () => {
58 |     let { width, height } = getWallDimensions(canvas, wall);
59 |     canvas.createCanvas(width, height);
60 |     canvas.noLoop();
61 |   };
62 | 
63 |   canvas.draw = () => {
64 |     canvas.randomSeed(123);
65 |     canvas.stroke(255);
66 |     drawFuncs.forEach(func => {
67 |       func(canvas);
68 |     });
69 |   };
70 | 
71 |   canvas.windowResized = () => {
72 |     let { width, height } = getWallDimensions(canvas, wall);
73 |     canvas.resizeCanvas(width, height);
74 |   };
75 | };
76 | 
77 | const wall1 = new p5(createWall("wall1", [midpoint]), "wall1");
78 | const wall2 = new p5(createWall("wall2", [sides]), "wall2");
79 | const wall3 = new p5(createWall("wall3", [corners]), "wall3");
80 | const wall4 = new p5(
81 |   createWall("wall4", [midpoint, corners, sides]),
82 |   "wall4"
83 | );
84 | 


--------------------------------------------------------------------------------
/289/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #289 (1976)
2 | 
3 | A six-inch (15cm) grid covering each of the four black walls. White lines to points on the grid.
4 | 1st wall: 24 lines from the center;
5 | 2nd wall: 12 lines from the midpoint of each of the sides;
6 | 3rd wall: 12 lines from each corner;
7 | 4th wall: 24 lines from the center, 12 lines from the midpoint of each of the sides, 12 lines from each corner.


--------------------------------------------------------------------------------
/295/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #295 (1976)
2 | 
3 | Six white geometric figures (outlines) superimposed on a black wall.
4 | 


--------------------------------------------------------------------------------
/295/pavellishin/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>pavellishin - Sol LeWitt - #164</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <style>
 8 |     html,body {
 9 |         background: #000;
10 |         width: 100%;
11 |         height: 100%;
12 |         margin: 0;
13 |         padding: 0;
14 |         overflow: hidden;
15 |     }
16 |     </style>
17 |   </head>
18 | 
19 |   <body>
20 |     <canvas></canvas>
21 | 
22 |     <script>
23 |     function rand(min, max) { // both inclusive
24 |       return Math.floor(Math.random() * ((max + 1) - min) + min);
25 |     }
26 | 
27 |     function draw() {
28 |       var w = window,
29 |           d = document,
30 |           e = d.documentElement,
31 |           g = d.getElementsByTagName('body')[0],
32 |           width = w.innerWidth || e.clientWidth || g.clientWidth,
33 |           height = w.innerHeight|| e.clientHeight|| g.clientHeight;
34 | 
35 |       var c = document.getElementsByTagName('canvas')[0];
36 |       var ctx = c.getContext('2d');
37 | 
38 |       ctx.canvas.width = width;
39 |       ctx.canvas.height = height;
40 | 
41 |       ctx.strokeStyle = '#fff';
42 |       ctx.lineWidth = 2;
43 | 
44 |       // Six figures
45 |       for(var i=0; i<6; i++) {
46 |         ctx.beginPath();
47 |         const startx = rand(0, width);
48 |         const starty = rand(0, height);
49 | 
50 |         if (rand(0,1) == 0) {
51 |           // circle
52 |           ctx.arc(startx,  // x
53 |                   starty, // y
54 |                   rand(0, rand(width, height)), // radius
55 |                   0, Math.PI * 2, // start and end angle
56 |                   false); // counter-clockwise?
57 |         } else {
58 |           // polygon, between 2 and 4 points
59 |           var points = rand(2, 4)
60 |           ctx.moveTo(startx, starty);
61 |           for(var point = 0; point < points; point++) {
62 |             ctx.lineTo(rand(0, width), rand(0, height));
63 |           }
64 |           ctx.lineTo(startx, starty);
65 |         }
66 | 
67 |         ctx.stroke();
68 |       }
69 | 
70 | 
71 |     }
72 | 
73 |     window.onresize = draw;
74 | 
75 |     document.addEventListener('DOMContentLoaded', draw);
76 |     </script>
77 |   </body>
78 | </html>
79 | 


--------------------------------------------------------------------------------
/295/y-a-v-a/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <meta charset="utf-8">
  3 | <title>y-a-v-a ❤︎ sol lewitt • #295</title>
  4 | <meta name="viewport" content="width=device-width, initial-scale=1">
  5 | <style>
  6 | html,body {
  7 |   width: 100%;
  8 |   height: 100%;
  9 |   margin: 0;
 10 |   padding: 0;
 11 | }
 12 | canvas {
 13 |   height: 100%;
 14 |   width: 100%;
 15 |   display: block;
 16 | }
 17 | </style>
 18 | <canvas></canvas>
 19 | <script>
 20 | function wallDrawing295() {
 21 |   'use strict';
 22 | 
 23 |   var canvas = document.getElementsByTagName('canvas')[0];
 24 |   var ctx = canvas.getContext('2d');
 25 | 
 26 |   var width = ctx.canvas.width = ctx.canvas.clientWidth;
 27 |   var height =ctx.canvas.height = ctx.canvas.clientHeight;
 28 | 
 29 |   ctx.clearRect(0, 0, canvas.width, canvas.height);
 30 | 
 31 |   ctx.fillStyle = '#000000';
 32 |   ctx.fillRect(0, 0, width, height);
 33 | 
 34 |   ctx.strokeStyle = '#ffffff';
 35 |   ctx.lineWidth = 2;
 36 | 
 37 |   /*
 38 |     Imagine a 5 x 5 grid.
 39 |     The circle, square, triangle
 40 |     trapezoid, parallelogram and rectangle
 41 |     can all be drawn within this grid.
 42 |     Except for the circle, all forms
 43 |     can be displayed in one continuous line.
 44 |       0 1 2 3 4
 45 |     0 . . . . .
 46 |     1 . . . . .
 47 |     2 . . . . .
 48 |     3 . . . . .
 49 |     4 . . . . .
 50 |   */
 51 |   var points = [
 52 |     [1, 4],
 53 |     [1, 0],
 54 |     [0, 0],
 55 |     [0, 4],
 56 |     [1, 0],
 57 |     [4, 0],
 58 |     [4, 4],
 59 |     [3, 0],
 60 |     [3, 4],
 61 |     [4, 4],
 62 |     [2, 0],
 63 |     [0, 4],
 64 |     [3, 4],
 65 |     [4, 0]
 66 |   ];
 67 | 
 68 |   ctx.beginPath();
 69 |   var circlePoint = [2, 2];
 70 |   var radius = 2;
 71 |   ctx.arc(
 72 |     relativeX(circlePoint[0]),
 73 |     relativeY(circlePoint[1]),
 74 |     relative(radius),
 75 |     0, 2 * Math.PI, false
 76 |   );
 77 | 
 78 |   // move to starting point
 79 |   ctx.moveTo(relativeX(points[0][0]), relativeY(points[0][1]));
 80 | 
 81 |   for (var i = 1; i < points.length; i++) {
 82 |     var x = relativeX(points[i][0]);
 83 |     var y = relativeY(points[i][1]);
 84 |     ctx.lineTo(x, y);
 85 |     ctx.stroke();
 86 |     // in order to remove ugly angles
 87 |     // we relocate the pointer and start a new line
 88 |     ctx.moveTo(x, y);
 89 |   }
 90 | 
 91 |   function relativeX(value) {
 92 |     return relativate(value, 'x');
 93 |   }
 94 | 
 95 |   function relativeY(value) {
 96 |     return relativate(value, 'y');
 97 |   }
 98 | 
 99 |   function relative(value) {
100 |     return relativate(value, undefined);
101 |   }
102 | 
103 |   function relativate(value, axis) {
104 |     var referenceSize = width > height ? height : width;
105 | 
106 |     // 10% margin
107 |     var margin = Math.round(referenceSize / 5);
108 |     var maxSize = referenceSize - margin;
109 |     // 4 areas in the grid
110 |     var multiplier = Math.round(maxSize / 4);
111 |     var offset = 0;
112 |     // center offset by division of 2
113 |     if (axis === 'x') {
114 |       offset = Math.round((width - maxSize) / 2);
115 |     } else if (axis === 'y') {
116 |       offset = (height - maxSize) / 2;
117 |     }
118 | 
119 |     return (value * multiplier) + offset;
120 |   }
121 | }
122 | 
123 | window.onresize = wallDrawing295;
124 | 
125 | wallDrawing295();
126 | </script>
127 | 


--------------------------------------------------------------------------------
/328/amiccolis/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | 
  3 | <head>
  4 |     <meta>
  5 |     <title>Solving Sol #328</title>
  6 |     <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.18/paper-full.min.js"></script>
  7 |     <style type="text/css">
  8 |         html,
  9 |         body {
 10 |             width: 100%;
 11 |             height: 100%;
 12 |             overflow: hidden;
 13 |             padding: 0;
 14 |             margin: 0;
 15 |             background: black;
 16 |         }
 17 |     </style>
 18 |     </meta>
 19 | </head>
 20 | 
 21 | <body>
 22 |     <script canvas='solving-sol' type='text/paperscript'>
 23 |         /*
 24 |         Wall Drawing #328 (1980)
 25 |         
 26 |         On a black wall, a white circle within which are white vertical parallel lines, 
 27 |         and a white parallelogram within which are white horizontal parallel lines. 
 28 |         The vertical lines within the circle do not enter the parallelogram, 
 29 |         and the horizontal lines within the parallelogram do not enter the circle.
 30 |         */
 31 | 
 32 |          // Globals
 33 |         var lineWidth = 1;
 34 |         var lineSpacing = 10;
 35 |         var lineColor = 'white';
 36 |         var pgramSlant = -25;
 37 | 
 38 |         function init() {
 39 | 
 40 |             var width = view.viewSize.width;
 41 |             var height = view.viewSize.height;
 42 | 
 43 |             // Create vertical lines
 44 |             var vlines = new Group();
 45 |             for (var i = 0; i * (lineWidth + lineSpacing) < width; i++) {
 46 |                 var line = new Path({
 47 |                     segments: [[(i * (lineWidth + lineSpacing)), 0], [(i * (lineWidth + lineSpacing)), height]],
 48 |                     strokeColor: lineColor,
 49 |                     strokeWidth: lineWidth
 50 |                 });
 51 |                 vlines.addChild(line);
 52 |             }
 53 | 
 54 |             // Create horizontal lines
 55 |             var hLines = vlines.clone().rotate(90);
 56 | 
 57 |             // Create the parallelogram
 58 |             var pgram = new Path.Rectangle(new Rectangle({
 59 |                 x: (width / 2) - (height / 6),
 60 |                 y: (height / 3),
 61 |                 width: height / 3,
 62 |                 height: height / 3
 63 |             }));
 64 |             pgram.skew(new Point(pgramSlant, 0));
 65 | 
 66 |             // Create the circle
 67 |             var circle = new CompoundPath({
 68 |                 children: [new Path.Circle({
 69 |                         center: view.center,
 70 |                         radius: (height / 2) * .9
 71 |                     }),
 72 |                                 pgram.clone()
 73 |                         ],
 74 |             });
 75 | 
 76 |             // Create shape outlines
 77 |             var outline = circle.clone();
 78 |             outline.strokeColor = lineColor;
 79 | 
 80 |             // Masking
 81 |             var circleGroup = new Group(circle, vlines);
 82 |             circleGroup.clipped = true;
 83 |             var pgramGroup = new Group(pgram, hLines);
 84 |             pgramGroup.clipped = true;
 85 | 
 86 |             // Draw!
 87 |             view.draw();
 88 |         }
 89 | 
 90 |         function onResize() {
 91 |             project.activeLayer.removeChildren();
 92 |             init();
 93 |         }
 94 | 
 95 |          // This will fire when Paper.js is ready
 96 |         init();
 97 |     </script>
 98 | 
 99 |     <canvas id='solving-sol' resize>
100 |         <!-- Paperscript will draw the graphics here -->
101 |     </canvas>
102 | 
103 | </body>
104 | 
105 | </html>


--------------------------------------------------------------------------------
/328/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #328 (1980)
2 | 
3 | On a black wall, a white circle within which are white vertical parallel lines, and a white parallelogram within which are white horizontal parallel lines. The vertical lines within the circle do not enter the parallelogram, and the horizontal lines within the parallelogram do not enter the circle.
4 | 


--------------------------------------------------------------------------------
/335/OgAstorga/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title></title>
  6 |   <style>
  7 |     html, body {
  8 |       background: #eaeaea;
  9 |       overflow: hidden;
 10 |       width: 100%;
 11 |       height: 100%;
 12 |     }
 13 |     svg {
 14 |       position: absolute;
 15 |       background: #333;
 16 |       box-shadow: 0 2px 3px rgb(0,0,0,0.7);
 17 |       height: calc(50% - 15px);
 18 |       width: calc(50% - 15px);
 19 |     }
 20 | 
 21 |     svg.tl {
 22 |       top: 10px;
 23 |       left: 10px;
 24 |     }
 25 | 
 26 |     svg.tr {
 27 |       top: 10px;
 28 |       right: 10px;
 29 |     }
 30 | 
 31 |     svg.bl {
 32 |       bottom: 10px;
 33 |       left: 10px;
 34 |     }
 35 | 
 36 |     svg.br {
 37 |       bottom: 10px;
 38 |       right: 10px;
 39 |     }
 40 |   </style>
 41 | </head>
 42 | <body>
 43 |   <svg class="tl"></svg>
 44 |   <svg class="tr"></svg>
 45 |   <svg class="bl"></svg>
 46 |   <svg class="br"></svg>
 47 | </body>
 48 | <script src="https://d3js.org/d3.v5.min.js"></script>
 49 | <script type="text/javascript">
 50 |   build(d3.select('svg.tl'))
 51 |   build(d3.select('svg.tr'))
 52 |   build(d3.select('svg.bl'))
 53 |   build(d3.select('svg.br'))
 54 | 
 55 |   function polgen(sides, radius) {
 56 |     const theta = 2 * Math.PI / sides
 57 | 
 58 |     const points = []
 59 |     for (let i=0; i<sides; ++i) {
 60 |       const angle = i * theta
 61 | 
 62 |       points.push({
 63 |         x: radius * Math.cos(angle),
 64 |         y: radius * Math.sin(angle)
 65 |       })
 66 |     }
 67 | 
 68 |     return points.map(p => [p.x, p.y].join(',')).join(' ')
 69 |   }
 70 | 
 71 |   function build(svg) {
 72 |     const width = +svg.style('width').replace('px', '')
 73 |     const height = +svg.style('height').replace('px', '')
 74 |     const center = {
 75 |       x: width/2,
 76 |       y: height/2
 77 |     }
 78 | 
 79 |     // circle
 80 |     const radius = Math.min(width, height) / (2 * Math.sqrt(2))
 81 | 
 82 |     // straight lines
 83 |     const slines = []
 84 |     for (var i=0; i<50; ++i) {
 85 |       slines.push(i)
 86 |     }
 87 | 
 88 |     svg.selectAll('line')
 89 |       .data(slines)
 90 |       .enter()
 91 |       .append('line')
 92 |       .attr('x1', d => (100 * d / slines.length) + '%')
 93 |       .attr('y1', '0%')
 94 |       .attr('x2', d => (100 * d / slines.length) + '%')
 95 |       .attr('y2', '100%')
 96 |       .attr('stroke', '#f0f0f0')
 97 | 
 98 |     const data = []
 99 |     for (let i=0; i<8; ++i) {
100 |       data.push(Math.round(Math.random() * 3) + 3)
101 |     }
102 | 
103 |     svg.selectAll('polygon')
104 |       .data(data)
105 |       .enter()
106 |       .append('polygon')
107 |       .attr('points', d => polgen(d, 20 - d))
108 |       .attr('fill', 'white')
109 |       .attr('transform', (d, i) => {
110 |         const x = center.x + 70 * Math.cos(i * Math.PI / 4)
111 |         const y = center.y + 70 * Math.sin(i * Math.PI / 4)
112 | 
113 |         const translate = 'translate(' + x + ',' + y + ')'
114 | 
115 |         const rotate = 'rotate(' + (360 * Math.PI * Math.random()) + ', 0, 0)'
116 | 
117 |         return translate + rotate
118 |       })
119 |   }
120 | </script>
121 | </html>
122 | 


--------------------------------------------------------------------------------
/335/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #335 (1980)
2 | 
3 | On four black walls, white vertical parallel lines, and in the center of the walls, eight geometric figures (including cross, X) within which are white horizontal parallel lines. The vertical lines do not enter the figures.


--------------------------------------------------------------------------------
/340/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #340 (1980)
2 | 
3 | Six-part drawing. The wall is divided horizontally and vertically into six equal parts. 1st part: On red, blue horizontal parallel lines, and in the center, a circle within which are yellow vertical parallel lines; 2nd part: On yellow, red horizontal parallel lines, and in the center, a square within which are blue vertical parallel lines; 3rd part: On blue, yellow horizontal parallel lines, and in the center, a triangle within which are red vertical parallel lines; 4th part: On red, yellow horizontal parallel lines, and in the center, a rectangle within which are blue vertical parallel lines; 5th part: On yellow, blue horizontal parallel lines, and in the center, a trapezoid within which are red vertical parallel lines; 6th part: On blue, red horizontal parallel lines, and in the center, a parallelogram within which are yellow vertical parallel lines. The horizontal lines do not enter the figures.


--------------------------------------------------------------------------------
/349/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #349 (1981)
2 | 
3 | Ten geometric figures in black india ink on walls painted red, yellow, blue, white.
4 | 


--------------------------------------------------------------------------------
/349/y-a-v-a/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <title>y-a-v-a.org ❤ sol lewitt • wall drawing #349</title>
  3 | <style>
  4 |   body {
  5 |     margin: 0;
  6 |     padding: 0;
  7 |     display: flex;
  8 |     flex-wrap: wrap;
  9 |   }
 10 | 
 11 |   .wall {
 12 |     height: 50vh;
 13 |     display: flex;
 14 |     align-items: center;
 15 |     justify-content: space-around;
 16 |   }
 17 | 
 18 |   .white {
 19 |     background: white;
 20 |     width: 40vw;
 21 |   }
 22 | 
 23 |   .blue {
 24 |     background: blue;
 25 |     width: 60vw;
 26 |   }
 27 | 
 28 |   .red {
 29 |     background: red;
 30 |     width: 60vw;
 31 |   }
 32 | 
 33 |   .yellow {
 34 |     background: yellow;
 35 |     width: 40vw;
 36 |   }
 37 | 
 38 |   .figure {
 39 |     background: black;
 40 |     flex-shrink: 0;
 41 |   }
 42 | 
 43 |   .square {
 44 |     height: 12vw;
 45 |     width: 12vw;
 46 |   }
 47 | 
 48 |   .circle {
 49 |     width: 12vw;
 50 |     height: 12vw;
 51 |     border-radius: 50%;
 52 |   }
 53 | 
 54 |   .triangle {
 55 |     width: 0;
 56 |     height: 0;
 57 |     border-left: 6vw solid transparent;
 58 |     border-right: 6vw solid transparent;
 59 |     border-bottom: 12vw solid black;
 60 |     background: transparent;
 61 |   }
 62 | 
 63 |   .rectangle {
 64 |     height: 12vw;
 65 |     width: 6vw;
 66 |     margin: 0 3vw;
 67 |   }
 68 | 
 69 |   .right-triangle {
 70 |     width: 0;
 71 |     height: 0;
 72 |     border-bottom: 12vw solid black;
 73 |     border-right: 12vw solid transparent;
 74 |     background: transparent;
 75 |   }
 76 | 
 77 |   .trapezoid {
 78 |     border-bottom: 12vw solid black;
 79 |     border-left: 4vw solid transparent;
 80 |     border-right: 4vw solid transparent;
 81 |     height: 0;
 82 |     width: 4vw;
 83 |     background: transparent;
 84 |   }
 85 | 
 86 |   .parallelogram {
 87 |     width: 8vw;
 88 |     height: 12vw;
 89 |     transform: skew(-20deg);
 90 |   }
 91 | 
 92 |   .diamond {
 93 |     width: 8.5vw;
 94 |     height: 8.5vw;
 95 |     transform: rotate(45deg);
 96 |     margin: 0 1.75vh;
 97 |   }
 98 | 
 99 |   .cross {
100 |     width: 7vw;
101 |     height: 12vw;
102 |     position: relative;
103 |     margin: 0 2.5vw;
104 |   }
105 | 
106 |   .cross:after {
107 |     width: 7vw;
108 |     height: 12vw;
109 |     transform: rotate(90deg);
110 |     content: "";
111 |     position: absolute;
112 |     background: black;
113 |   }
114 | 
115 |   .x {
116 |     width: 5vw;
117 |     height: 14vw;
118 |     transform: rotate(45deg);
119 |     position: relative;
120 |     margin: 0 4.5vw;
121 |   }
122 | 
123 |   .x:after {
124 |     content: "";
125 |     position: absolute;
126 |     background: black;
127 |     width: 5vw;
128 |     height: 14vw;
129 |     transform: rotate(-90deg);
130 |   }
131 | </style>
132 | 
133 | <body>
134 | <div class="white wall">
135 |   <div class="rectangle figure"></div>
136 |   <div class="right-triangle figure"></div>
137 | </div>
138 | <div class="blue wall">
139 |   <div class="x figure"></div>
140 |   <div class="cross figure"></div>
141 |   <div class="diamond figure"></div>
142 | </div>
143 | <div class="red wall">
144 |   <div class="square figure"></div>
145 |   <div class="circle figure"></div>
146 |   <div class="triangle figure"></div>
147 | </div>
148 | <div class="yellow wall">
149 |   <div class="trapezoid figure"></div>
150 |   <div class="parallelogram figure"></div>
151 | </div>
152 | </body>
153 | 


--------------------------------------------------------------------------------
/366/diagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wholepixel/solving-sol/112ed0c82f0d830d91cc751b073c62c8d1161dcb/366/diagram.png


--------------------------------------------------------------------------------
/366/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #366 (1982)
2 | 
3 | Black arcs using the height of the wall as a radius, and black arcs using the midpoints of the wall as a radius. The arcs are filled in solid and drawn in India ink.
4 | 
5 | ![diagram](diagram.png)
6 | 


--------------------------------------------------------------------------------
/391/cagrimmett/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | 	<title>Sol LeWitt Wall Drawing 391</title>
  4 | 	
  5 | 	<script src="https://d3js.org/d3.v4.min.js"></script>
  6 | 	<script src="https://unpkg.com/textures@1.0.4/textures.js"></script>
  7 | 	<style type="text/css">
  8 | 		body {
  9 | 			margin-top: 36px;
 10 | 		}
 11 | 		.drawing {
 12 | 			margin: 0 auto;
 13 | 			text-align: center;
 14 | 			width: 1332px;
 15 | 		}
 16 | 		#grid {
 17 | 			margin-left: 24px;
 18 | 			display: inline-block;
 19 | 		}
 20 | 		#grid-black {
 21 | 			display: inline-block;
 22 | 		}
 23 | 	</style>
 24 | </head>
 25 | <body>
 26 | 
 27 | <div class="drawing">
 28 | 	<div id="grid-black"></div>
 29 | 	<div id="grid"></div>
 30 | </div>
 31 | 
 32 | 
 33 | <script type="text/javascript">
 34 | function gridData() {
 35 | 	var data = new Array();
 36 | 	var id = 1;
 37 | 	var xpos = 36;
 38 | 	var ypos = 36;
 39 | 	var width = 288;
 40 | 	var height = 288;
 41 | 	
 42 | 	// iterate for rows	
 43 | 	for (var row = 0; row < 2; row++) {
 44 | 		data.push( new Array() );
 45 | 		
 46 | 		// iterate for cells/columns inside rows
 47 | 		for (var column = 0; column < 2; column++) {
 48 | 			data[row].push({
 49 | 				id: id,
 50 | 				x: xpos,
 51 | 				y: ypos,
 52 | 				width: width,
 53 | 				height: height
 54 | 			})
 55 | 
 56 | 			xpos += width;
 57 | 			id += 1;
 58 | 		}
 59 | 
 60 | 		xpos = 36;
 61 | 		ypos += height;	
 62 | 	}
 63 | 	return data;
 64 | }
 65 | 
 66 | var gridData2 = gridData();
 67 | var gridData = gridData();	
 68 | 
 69 | var grid = d3.select("#grid")
 70 | 	.append("svg")
 71 | 	.attr("width","648px")
 72 | 	.attr("height","648px");
 73 | 
 74 | var t1 = textures.lines()
 75 | 		  .size(72)
 76 |           .orientation("vertical")
 77 |           .strokeWidth(36)
 78 |           .stroke("#111"),
 79 |       t2 = textures.lines()
 80 | 	  	  .size(72)
 81 |           .orientation("horizontal")
 82 |           .strokeWidth(36)
 83 |           .stroke("#FDCB2F"),
 84 |       t3 = textures.lines()
 85 |       	  .size(108)
 86 |           .orientation("2/8")
 87 |           .strokeWidth(37)
 88 |           .stroke("#E21D39"),
 89 |       t4 = textures.lines()
 90 |           .size(108)
 91 |           .orientation("6/8")
 92 |           .strokeWidth(37)
 93 |           .stroke("#0066d8");
 94 |           
 95 | grid.call(t1);
 96 | grid.call(t2);
 97 | grid.call(t3);
 98 | grid.call(t4);
 99 | 
100 | var row = grid.selectAll(".row")
101 | 	.data(gridData)
102 | 	.enter().append("g")
103 | 	.attr("class", "row");
104 |     	
105 | var column = row.selectAll(".square")
106 | 	.data(function(d) { return d; })
107 | 	.enter().append("rect")
108 | 	.attr("class","square")
109 | 	.attr("x", function(d) { return d.x; })
110 | 	.attr("y", function(d) { return d.y; })
111 | 	.attr("width", function(d) { return d.width; })
112 | 	.attr("height", function(d) { return d.height; })
113 | 	.style("fill", function(d) {            
114 |             if (d.id == 1) {return t1.url()}
115 |             if (d.id == 2) {return t2.url()}
116 |             if (d.id == 3) {return t3.url()}
117 |             if (d.id == 4) {return t4.url()}  
118 | 	;})
119 | 	.style("stroke","#111")
120 | 	.style("stroke-width", "36px")
121 | 		
122 | 
123 | var gridBlack = d3.select("#grid-black")
124 | 	.append("svg")
125 | 	.attr("width","648px")
126 | 	.attr("height","648px")
127 | 	.style("stroke", "#111");
128 | 
129 | var t1 = textures.lines()
130 | 		  .size(72)
131 |           .orientation("vertical")
132 |           .strokeWidth(36)
133 |           .stroke("#111"),
134 | 	  t2 = textures.lines()
135 | 	  	  .size(72)
136 | 	      .orientation("horizontal")
137 | 	      .strokeWidth(36)
138 | 	      .stroke("#111"),
139 | 	  t3 = textures.lines()
140 | 	  	  .size(108)
141 | 	      .orientation("2/8")
142 | 	      .strokeWidth(36)
143 | 	      .stroke("#111"),
144 | 	  t4 = textures.lines()
145 | 	      .size(108)
146 | 	      .orientation("6/8")
147 | 	      .strokeWidth(36)
148 | 	      .stroke("#111");
149 | 	      
150 | gridBlack.call(t1);
151 | gridBlack.call(t2);
152 | gridBlack.call(t3);
153 | gridBlack.call(t4);
154 | 	
155 | var row = gridBlack.selectAll(".row")
156 | 	.data(gridData2)
157 | 	.enter().append("g")
158 | 	.attr("class", "row");
159 |     	
160 | var column = row.selectAll(".square")
161 | 	.data(function(d) { return d; })
162 | 	.enter().append("rect")
163 | 	.attr("class","square")
164 | 	.attr("x", function(d) { return d.x; })
165 | 	.attr("y", function(d) { return d.y; })
166 | 	.attr("width", function(d) { return d.width; })
167 | 	.attr("height", function(d) { return d.height; })
168 | 	.style("stroke-width", "36px")
169 | 	.style("fill", function(d) {            
170 |             if (d.id == 1) {return t1.url()}
171 |             if (d.id == 2) {return t2.url()}
172 |             if (d.id == 3) {return t3.url()}
173 |             if (d.id == 4) {return t4.url()}  
174 | 	;})
175 | 
176 | </script>	
177 | 
178 | 
179 | 


--------------------------------------------------------------------------------
/391/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #391 (1983)
2 | 
3 | 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.


--------------------------------------------------------------------------------
/392/1wheel/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <meta charset="utf-8">
  3 | <title>Sol Lewitt - Wall Drawing #392</title>
  4 | <style>
  5 | body{
  6 |   margin: 0px;
  7 |   overflow: hidden;
  8 | }
  9 | 
 10 | .grid{
 11 |   stroke: darkgrey;
 12 |   stroke-width: 1;
 13 | }
 14 | 
 15 | .diagonal{
 16 |   stroke: white;
 17 |   stroke-width: 2;
 18 | }
 19 | 
 20 | </style>
 21 | <svg></svg>
 22 | <script src="http://d3js.org/d3.v3.min.js"></script>
 23 | <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.compat.min.js"></script>
 24 | <script>
 25 | 
 26 | function draw(){
 27 |   var height = window.innerHeight,
 28 |       width = window.innerWidth,
 29 |       s = 25,
 30 |       rows = d3.range(0, height, s),
 31 |       cols = d3.range(0, width, s),
 32 |       paths = [
 33 |         ['M', 0,    0, 'L', s,    s],
 34 |         ['M', s/2,  0, 'L', s/2,  s],
 35 |         ['M', s,    0, 'L', 0,    s],
 36 |         ['M', s,  s/2, 'L', 0,  s/2],
 37 |       ].map(function(d){ return d.join(' ') }),
 38 |       throttledMouseover = _.throttle(mouseover, 250)
 39 | 
 40 |   var svg = d3.select('svg')
 41 |       .attr({height: height, width: width})
 42 | 
 43 |   svg.append('rect')
 44 |       .attr({height: height, width: width})
 45 |       .on('mouseover', function(){
 46 |         throttledMouseover(d3.mouse(this)) })
 47 | 
 48 |   function mouseover(pos){
 49 |     diagonals
 50 |       .filter(function(d){
 51 |         d.dist = Math.sqrt(Math.pow(d.x - pos[0], 2) + Math.pow(d.y - pos[1], 2))
 52 |         return !d.moving && d.dist < 15*s })
 53 |       .transition().delay(function(d){ return d.dist*3 }).duration(200)
 54 |         .call(setPath)
 55 |         .styleTween('opacity', function(){
 56 |           return function(t){ return Math.abs(.5 - t)*2 } 
 57 |         })
 58 |         .each('start', function(d){ d.moving = true  })
 59 |         .each('end',   function(d){ d.moving = false })
 60 |   }
 61 | 
 62 |   svg.selectAll('vline')
 63 |       .data(cols).enter()
 64 |     .append('line').classed('grid', true)
 65 |       .attr({x1: id, x2: id, y2: height})
 66 | 
 67 |   svg.selectAll('hline')
 68 |       .data(rows).enter()
 69 |     .append('line').classed('grid', true)
 70 |       .attr({y1: id, y2: id, x2: width})
 71 | 
 72 |   var boxes = []
 73 |   cols.forEach(function(x){
 74 |     rows.forEach(function(y){
 75 |       boxes.push({x: x, y: y})
 76 |     })
 77 |   })
 78 | 
 79 |   diagonals = svg.selectAll('boxG')
 80 |       .data(boxes).enter()
 81 |     .append('g').classed('diagonal', true)
 82 |       .attr('transform', function(d){
 83 |         return 'translate(' + d.x + ',' + d.y + ')' })
 84 |     .append('path')
 85 |       .call(setPath)
 86 | 
 87 | 
 88 |   function setPath(selection){
 89 |     selection.attr('d', function(){ return paths[Math.floor(Math.random()*4)] })
 90 |   }
 91 | 
 92 | }
 93 | draw()
 94 | 
 95 | window.onresize = draw
 96 | 
 97 | 
 98 | function id(d){ return d }
 99 | </script>
100 | 


--------------------------------------------------------------------------------
/392/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #392 (1983)
2 | 
3 | A 12" (30 cm) grid covering the black wall. Within each 12" (30 cm) square, a vertical, horizontal, diagonal right or diagonal left line bisecting the square. All squares are filled. (The direction of the line in each square is determined by the drafter)


--------------------------------------------------------------------------------
/392/mcshiz/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |     <title>Solving Sol #392</title>
 5 |     <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.18/paper-full.min.js"></script>
 6 | 	<style type="text/css">
 7 | 	        html,
 8 | 	        body {
 9 | 	            width: 100%;
10 | 	            height: 100%;
11 | 	            overflow: hidden;
12 | 	            padding: 0;
13 | 	            margin: 0;
14 | 	        }
15 | 	        #paper {
16 | 	            display: -webkit-box;
17 | 	            display: -moz-box;
18 | 	            display: -ms-flexbox;
19 | 	            display: -webkit-flex;
20 | 	            display: flex;
21 | 	            align-items: center;
22 | 	            justify-content: center;
23 | 	            margin: auto;
24 | 	        }
25 | 	    </style>
26 | </head>
27 | <body>
28 | <canvas id="paper"></canvas>
29 | 
30 | <script>
31 |     /**
32 |     Solving Sol #392
33 |     A 12" (30 cm) grid covering the black wall. Within each 12" (30 cm) square, a vertical, horizontal, diagonal right or diagonal left line bisecting the square. All squares are filled. (The direction of the line in each square is determined by the drafter)
34 |     **/
35 |     window.onload = () => {
36 |       draw();
37 |     };
38 |     window.onresize = () => {
39 |       draw();
40 |     };
41 |     const draw = () => {
42 |       const canvas = document.getElementById("paper");
43 |       let canvasSize = Math.min(
44 |         canvas.parentElement.clientHeight,
45 |         canvas.parentElement.clientWidth
46 |       );
47 |       canvas.height = canvasSize;
48 |       canvas.width = canvasSize;
49 |       paper.setup(canvas);
50 |       const maxDimension = Math.min(canvas.height, canvas.width);
51 |       canvas.width = maxDimension;
52 |       canvas.height = maxDimension;
53 |       const bisectionStartPoints = [
54 |         "topLeft",
55 |         "topCenter",
56 |         "topRight",
57 |         "rightCenter"
58 |       ];
59 |       const bisectionEndPoints = [
60 |         "bottomRight",
61 |         "bottomCenter",
62 |         "bottomLeft",
63 |         "leftCenter"
64 |       ];
65 |       for (let i = 0; i <= 12; i++) {
66 |         let x = i * (maxDimension / 12);
67 |      
68 |         let gridLineX = new paper.Path();
69 |         gridLineX.strokeColor = "black";
70 |         gridLineX.add(new paper.Point(0, i * (maxDimension / 12)));
71 |         gridLineX.add(new paper.Point(maxDimension, i * (maxDimension / 12)));
72 |         
73 |         let gridLineY = new paper.Path();
74 |         gridLineY.strokeColor = "black";
75 |         gridLineY.add(new paper.Point(i * (maxDimension / 12), 0));
76 |         gridLineY.add(new paper.Point(i * (maxDimension / 12), maxDimension));
77 |         
78 |         for (let j = 0; j < 12; j++) {
79 |           let y = j * (maxDimension / 12);
80 |           let topLeft = new paper.Point(x, y);
81 |           let rectSize = new paper.Size(maxDimension / 12, maxDimension / 12);
82 |           let rectObj = new paper.Rectangle(topLeft, rectSize);
83 |           let rectangle = new paper.Path.Rectangle(rectObj);
84 |           let rand = Math.floor(Math.random() * 4);
85 |           let bisectStart = rectObj[bisectionStartPoints[rand]];
86 |           let bisectEnd = rectObj[bisectionEndPoints[rand]];
87 |           let bisectionLine = new paper.Path();
88 |           bisectionLine.strokeColor = "black";
89 |           bisectionLine.add(new paper.Point(bisectStart._x, bisectStart._y));
90 |           bisectionLine.add(new paper.Point(bisectEnd._x, bisectEnd._y));
91 |           rectangle.remove()
92 |         }
93 |       }
94 |       paper.view.draw();
95 |     };
96 |     
97 | </script>
98 | </body>
99 | </html>


--------------------------------------------------------------------------------
/396/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing 396 (1983)
2 | 
3 | A black five-pointed star, a yellow six-pointed star, a red seven-pointed star, and a blue eight-pointed star, drawn in color and India ink washes.


--------------------------------------------------------------------------------
/396/y-a-v-a/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <meta charset="utf-8">
 3 | <title>y-a-v-a ❤︎ sol lewitt • #396</title>
 4 | <meta name="viewport" content="width=device-width, initial-scale=1">
 5 | <style>
 6 | html,body {
 7 |     width: 100%;
 8 |     height: 100%;
 9 |     margin: 0;
10 |     padding: 0;
11 | }
12 | canvas {
13 |     height: 100%;
14 |     width: 100%;
15 | }
16 | </style>
17 | <canvas></canvas><script>
18 | function number396() {
19 |     var canvas = document.getElementsByTagName('canvas')[0];
20 |     var context = canvas.getContext('2d');
21 |     context.canvas.width = context.canvas.clientWidth;
22 |     context.canvas.height = context.canvas.clientHeight;
23 |     var radius = canvas.height * 0.22; // 4 * 0.22 = 0.88
24 |     var margin = canvas.height * 0.04; // 3 * 0.04 = 0.12 + 0.88 = 1.00
25 |     var offset = (canvas.width - canvas.height) / 2;
26 | 
27 |     context.clearRect(0, 0, canvas.width, canvas.height);
28 | 
29 |     var polygons = [5, 6, 7, 8];
30 |     var colors = ['#050505','#ffe632','#d4405a','#0094c8'];
31 |     var orders = [[1, 3, 0, 2, 4], [0, 2, 4, 1, 3, 5], [1, 3, 5, 0, 2, 4, 6], [0, 2, 4, 6, 1, 3, 5, 7]];
32 |     context.lineWidth = 0;
33 |     var index = 0;
34 |     var sides;
35 |     var offsetX;
36 |     var offsetY;
37 |     var coords;
38 |     var order;
39 |     var angle;
40 |     var i = 1;
41 |     var j = 0;
42 |     var x, y;
43 | 
44 |     for (var k = 1; k <= polygons.length; k++) {
45 |         index = k - 1;
46 |         context.save();
47 |         sides = polygons[index];
48 |         offsetX = offset + ((k % 2 === 1) ? 0 : 2 * radius + margin);
49 |         offsetY = ((k <= 2) ? 0 : 2 * radius + margin) + margin;
50 |         context.translate(offsetX, offsetY);
51 |         coords = [];
52 |         order = orders[index];
53 | 
54 |         for(i = 1; i <= sides; i++) {
55 |             angle = (2 * Math.PI) * (i / sides) - (0.5 * Math.PI);
56 |             x = radius + Math.cos(angle) * radius;
57 |             y = radius + Math.sin(angle) * radius;
58 |             coords.push([x, y]);
59 |         }
60 | 
61 |         context.beginPath();
62 |         context.fillStyle = colors[index];
63 | 
64 |         context.moveTo(coords[sides % 2][0], coords[sides % 2][1]);
65 |         for (j = 0; j < sides; j++) {
66 |             if (sides % 2 === 0 && j === (sides  / 2)) {
67 |                 context.closePath();
68 |                 context.fill();
69 |                 context.beginPath();
70 |                 context.fillStyle = colors[index];
71 |                 context.moveTo(coords[order[j]][0], coords[order[j]][1]);
72 |             } else {
73 |                 context.lineTo(coords[order[j]][0], coords[order[j]][1]);
74 |             }
75 |             context.lineJoin = 'miter';
76 |         }
77 |         context.closePath();
78 |         context.fill();
79 |         context.restore();
80 |     }
81 | }
82 | 
83 | window.onresize = number396;
84 | 
85 | number396();
86 | </script>
87 | 


--------------------------------------------------------------------------------
/415D/alicepiva/415D preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wholepixel/solving-sol/112ed0c82f0d830d91cc751b073c62c8d1161dcb/415D/alicepiva/415D preview.png


--------------------------------------------------------------------------------
/415D/alicepiva/415D.js:
--------------------------------------------------------------------------------
 1 | // Double Drawing. Right: Isometric Figure (Cube) with progressively darker graduations of gray on each of three planes; Left: Isometric figure with red, yellow, and blue superimposed progressively on each of the three planes. The background is gray.
 2 | 
 3 | function setup() {
 4 |   createCanvas(750,500);
 5 |   noStroke ();
 6 |   angleMode (DEGREES);
 7 | }
 8 | 
 9 | function draw() {
10 |   background(240);
11 |   //plane A1
12 |   fill (250);
13 |   quad (450,185,550,240,550,360,450,300);
14 |   //plane A2
15 |   fill (220);
16 |   quad (550,240,650,185,650,300,550,360);
17 |   //plane A3
18 |   fill (200);
19 |   quad (450,185,550,240,650,185,550,125);
20 |   //plane B1
21 |   fill (255,0,0,170);
22 |   quad (100,185,200,240,200,360,100,300);
23 |   //plane B2
24 |   fill (0,255,0,170);
25 |   quad (200,240,300,185,300,300,200,360);
26 |   //plane B3
27 |   fill (255,255,0,170);
28 |   quad (100,185,200,240,300,185,200,125);
29 | }
30 | 


--------------------------------------------------------------------------------
/415D/alicepiva/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>415D</title>
 8 |   <style>
 9 |     body {
10 |       padding: 0;
11 |       margin: 0;
12 |     }
13 |   </style>
14 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
15 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
16 |   <script src="415D.js"></script>
17 | </head>
18 | 
19 | <body>
20 | </body>
21 | 
22 | </html>
23 | 


--------------------------------------------------------------------------------
/415D/alicepiva/readme.md:
--------------------------------------------------------------------------------
1 | since I'm a p5/JS newbie, here is a link to an online code previewer (that works) in case the files I uploaded are messed up
2 | (https://editor.p5js.org/alicepiva/present/Gk4LzIngl)
3 | 


--------------------------------------------------------------------------------
/541/541.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wholepixel/solving-sol/112ed0c82f0d830d91cc751b073c62c8d1161dcb/541/541.jpg


--------------------------------------------------------------------------------
/541/instructions.md:
--------------------------------------------------------------------------------
 1 | ##Wall Drawing #541 (1987)
 2 | 
 3 | On each of four walls, a tilted form with color ink washes superimposed.
 4 | 
 5 | Color ink wash
 6 | 
 7 | A First wall: The background is GG -Left plane: YRY; right plane: YBY; bottom plane: BRB
 8 | 
 9 | B Second wall: The background is YY. Left plane: GBG; right plane: RGG; top plane: YGR
10 | 
11 | C third wall: The background is RR. Left plane: GBB; right plane: RYG; bottom plane: GGY;
12 | 
13 | D The background is BB. Left plane: GYB. right plane: GRR; top plane: YGY
14 | 
15 | Key: Red = R; Yellow = Y; Blue = B; Gray = G
16 | 
17 | ![diagram](541.jpg)
18 | 


--------------------------------------------------------------------------------
/579/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #579 (1988)
2 | 
3 | Three concentric arches. The outside one is blue; the middle red; and the inside one is yellow.
4 | 


--------------------------------------------------------------------------------
/579/y-a-v-a/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 |   <meta charset="utf-8">
 3 |   <title>y_a_v_a ❤︎ Sol LeWitt • #579</title>
 4 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |   <!--
 6 |     Wall Drawing #579 (1988) - Sol LeWitt
 7 |     Three concentric arches. The outside one is blue; the middle red; and the inside one is yellow.
 8 |   -->
 9 |   <style>
10 |     html,body {
11 |       width: 100%;
12 |       height: 100%;
13 |       margin: 0;
14 |       padding: 0;
15 |     }
16 |     .arch {
17 |       margin: 0 auto;
18 |       position: absolute;
19 |       bottom: 0;
20 |       left: 0;
21 |       right: 0;
22 |     }
23 |     .one {
24 |       background-color: #F4CF03;
25 |       width: 10vh;
26 |       border-radius: 10vh 10vh 0 0;
27 |       height: 80vh;
28 |       z-index: 3;
29 |     }
30 |     .two {
31 |       width: 30vh;
32 |       border-radius: 20vh 20vh 0 0;
33 |       height: 90vh;
34 |       background-color: #D13D6A;
35 |       z-index: 2;
36 |     }
37 |     .three {
38 |       height: 100vh;
39 |       border-radius: 30vh 30vh 0 0;
40 |       width: 50vh;
41 |       background-color: #0192CB;
42 |       z-index: 1;
43 |     }
44 |   </style>
45 |   <div class="arch one"></div>
46 |   <div class="arch two"></div>
47 |   <div class="arch three"></div>
48 | 


--------------------------------------------------------------------------------
/614/cagrimmett/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<!-- Implemented by Chuck Grimmett http://cagrimmett.com -->
 4 | 		<script src="https://d3js.org/d3.v4.min.js"></script>
 5 | 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
 6 | 		<title>Sol LeWitt Wall Drawing 614</title>
 7 | 		<style>
 8 | 		
 9 | 			body {
10 | 			  margin-top:-15px;
11 | 			  margin-left: -15px;
12 | 			  padding:0;
13 | 			  position: relative;
14 | 			  background: #000;
15 | 			}
16 | 			
17 | 			.node {
18 | 			  box-sizing: border-box;
19 | 			  position: absolute;
20 | 			  overflow: hidden;
21 | 			}
22 | 		
23 | 		</style>
24 | 	</head>
25 | <body>
26 | 
27 | 	<script>
28 | 		
29 | 	function sol614() {
30 | 		
31 | 		var width = window.innerWidth + 30,
32 | 		    height = window.innerHeight + 30;
33 | 		var format = d3.format(",d");
34 | 		
35 | 		function getRandomArbitrary(min, max) {
36 | 			  return Math.random() * (max - min) + min;
37 | 		}
38 | 		
39 | 		function treeData() {
40 | 		  var obj = {name: "rect"};
41 | 		  var children = [];
42 | 		  for (var row = 0; row < 40; row++) {
43 | 		    children.push({id: row, value: getRandomArbitrary(60, 1000)})
44 | 		  }
45 | 		  obj['children'] = children;
46 | 		  return obj;
47 | 		}
48 | 		
49 | 		var tree = treeData();
50 | 		console.log(tree);
51 | 		
52 | 		var treemap = d3.treemap()
53 | 		    .size([width, height])
54 | 		    .padding(15)
55 | 		    .round(true)
56 | 		    .tile(d3.treemapBinary);
57 | 		
58 | 		var tree = d3.hierarchy(tree);
59 | 		
60 | 		tree.sum(function(d) { return d.value; });
61 | 		console.log(tree);
62 | 		
63 | 		treemap(tree);
64 | 		
65 | 		d3.select("body")
66 | 		.selectAll(".node")
67 | 		.data(tree.leaves())
68 | 		.enter().append("div")
69 | 		  .attr("class", "node")
70 | 		  .attr("title", function(d) { return d.data.id; })
71 | 		  .style("left", function(d) { return d.x0 + "px"; })
72 | 		  .style("top", function(d) { return d.y0 + "px"; })
73 | 		  .style("width", function(d) { return d.x1 - d.x0 + "px"; })
74 | 		  .style("height", function(d) { return d.y1 - d.y0 + "px"; })
75 | 		  .style("background", "#fff");
76 | 		  
77 | 	}
78 | 
79 | 	//first run
80 | 	sol614();
81 | 	
82 | 	$(window).resize(function() {
83 | 	    if(this.resizeTO) clearTimeout(this.resizeTO);
84 | 	    this.resizeTO = setTimeout(function() {
85 | 	        $(this).trigger('resizeEnd');
86 | 	    }, 500);
87 | 	});
88 | 	
89 | 	//resize on resizeEnd function
90 | 	$(window).bind('resizeEnd', function() {
91 | 		 d3.selectAll("div.node").remove();
92 | 		 sol614();
93 | 	});
94 | 	
95 | 	
96 | 	
97 | 	</script>
98 | </body>
99 | </html>


--------------------------------------------------------------------------------
/614/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #614 (1989)
2 | 
3 | Rectangles formed by 3-inch (8 cm) wide India ink bands, meeting at right angles.


--------------------------------------------------------------------------------
/614/pavellishin/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>pavellishin - Sol LeWitt - #164</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <style>
 8 |     html,body {
 9 |         background: #fff;
10 |         width: 100%;
11 |         height: 100%;
12 |         margin: 0;
13 |         padding: 0;
14 |         overflow: hidden;
15 |     }
16 |     </style>
17 |   </head>
18 | 
19 |   <body>
20 |     <canvas></canvas>
21 | 
22 |     <script>
23 |     function rand(min, max) { // both inclusive
24 |       return Math.floor(Math.random() * ((max + 1) - min) + min);
25 |     }
26 | 
27 |     function draw() {
28 |       var w = window,
29 |           d = document,
30 |           e = d.documentElement,
31 |           g = d.getElementsByTagName('body')[0],
32 |           width = w.innerWidth || e.clientWidth || g.clientWidth,
33 |           height = w.innerHeight|| e.clientHeight|| g.clientHeight;
34 | 
35 |       var c = document.getElementsByTagName('canvas')[0];
36 |       var ctx = c.getContext('2d');
37 | 
38 |       ctx.canvas.width = width;
39 |       ctx.canvas.height = height;
40 | 
41 |       ctx.strokeStyle = '#000';
42 |       ctx.lineWidth = 3;
43 |       ctx.fillStyle = '#fff';
44 | 
45 |       for(var i=0; i<1000; i++) {
46 |         const startx = rand(-100, width + 100);
47 |         const starty = rand(-100, height + 100);
48 |         const rec_width = rand(width * 0.1, width * 0.2);
49 |         const rec_height = rand(height * 0.1, width * 0.2);
50 | 
51 |         ctx.beginPath();
52 |         ctx.fillRect(startx, starty, rec_width, rec_height);
53 | 
54 |         ctx.moveTo(startx, starty);
55 |         ctx.lineTo(startx + rec_width, starty);
56 |         ctx.lineTo(startx + rec_width, starty + rec_height);
57 |         ctx.lineTo(startx, starty + rec_height);
58 |         ctx.lineTo(startx, starty);
59 |         ctx.stroke();
60 |       }
61 |     }
62 | 
63 |     window.onresize = draw;
64 | 
65 |     document.addEventListener('DOMContentLoaded', draw);
66 |     </script>
67 |   </body>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/630/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #630 (1990)
2 | 
3 | A wall is divided horizontally into two equal parts. Top: alternating horizontal black and white 8-inch (20 cm) bands. Bottom: alternating vertical black and white 8-inch (20 cm) bands.


--------------------------------------------------------------------------------
/630/kevinleedrum/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <title>Solving Sol #630</title>
 5 |   <script type="text/javascript">
 6 |     window.onload = render
 7 |     window.onresize = render
 8 | 
 9 |     function render () {
10 |       const topBandCount = 10
11 |       const bandWidth = window.innerHeight / 20
12 |       // Calculate bottom band count based on pixel width of top bands
13 |       const bottomBandCount = Math.ceil(window.innerWidth / bandWidth)
14 | 
15 |       const top = document.querySelector('.top')
16 |       const bottom = document.querySelector('.bottom')
17 |       
18 |       // Remove existing bands (if window resized)
19 |       while (top.firstChild) {
20 |         top.removeChild(top.firstChild)
21 |       }
22 |       while (bottom.firstChild) {
23 |         bottom.removeChild(bottom.firstChild)
24 |       }
25 | 
26 |       // Add bands
27 |       for (let i = 0; i < topBandCount; i++) {
28 |         addBandToSection(top)
29 |       }
30 |       for (let i = 0; i < bottomBandCount; i++) {
31 |         addBandToSection(bottom)
32 |       }
33 | 
34 |       function addBandToSection (section) {
35 |         const band = document.createElement('div')
36 |         band.classList.add('band')
37 |         section.appendChild(band)
38 |       }
39 |     }
40 |   </script>
41 | </head>
42 | <body>
43 |   <style>
44 |     body, html {
45 |       padding: 0;
46 |       margin: 0;
47 |       height: 100%;
48 |       width: 100%;
49 |       overflow: hidden;
50 |     }
51 |     .band {
52 |       background: #000;
53 |     }
54 |     .band:nth-child(odd) {
55 |       background: #fff;
56 |     }
57 |     .top, .bottom {
58 |       display: flex;
59 |       height: 50%;
60 |     }
61 |     .top {
62 |       flex-direction: column;
63 |     }
64 |     .top .band {
65 |       flex: 1;
66 |     }
67 |     .bottom {
68 |       overflow: hidden;
69 |     }
70 |     .bottom .band {
71 |       /* 1/20 = 5% */
72 |       width: 5vh;
73 |       min-width: 5vh;
74 |     }
75 |   </style>
76 |   <section class="top"></section>
77 |   <section class="bottom"></section>
78 | </body>
79 | </html>
80 | 
81 | 


--------------------------------------------------------------------------------
/766/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #766 (1994)
2 | 
3 | Twenty-one isometric cubes of varying sizes, each with color ink washes superimposed.


--------------------------------------------------------------------------------
/766/karanmhatre1/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Sol LeWitt Wall Draving No 766</title>
  8 |     <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
  9 |     <script>
 10 |         /*
 11 | 
 12 |         Title: Sol LeWitt Drawing No.766
 13 |         Author: Karan Mhatre
 14 |         Date: 2nd Jan, 2022
 15 | 
 16 |         Reference: massmoca.org/event/walldrawing766
 17 |         Created for solvingsol.com
 18 | 
 19 |         Description: Recreation in p5js of Sol LeWitt instructions for Drawing #766
 20 | 
 21 |         Drawing Instructions by Sol LeWitt: Twenty-one isometric cubes of varying sizes, each with color ink washes superimposed.
 22 | 
 23 |         */
 24 | 
 25 |         let colorArr = ["#5EAA48","#EF9673","#816699","#C4C7CE","#DE728A","#F2CD2B","#F29C39","#E12854","#349FCB"];
 26 | 
 27 |         function setup() {
 28 |         createCanvas(600, 1800);
 29 |         noLoop();
 30 |         noStroke();
 31 |         }
 32 | 
 33 |         function getExpect(x) {
 34 |         
 35 |         while(true) {
 36 |             rand = random(colorArr);
 37 |             if(rand != x)
 38 |             return rand;
 39 |         }
 40 |         
 41 |         }
 42 | 
 43 |         function draw() {
 44 |         background(0);
 45 |         for(i=0;i<9;i++) {
 46 |             w1 = random(50,300);
 47 |             w2 = random(w1, 300);
 48 |             w3 = 600-(w2+w1);
 49 |             
 50 |             box1Color = random(colorArr);
 51 |             fill(box1Color);
 52 |             rect(0, i*200,w1,200);
 53 |             
 54 |             box2Color = getExpect(box1Color);
 55 |             fill(box2Color);
 56 |             rect(w1, i*200,w2,200);
 57 |             
 58 |             box3Color = getExpect(box2Color);
 59 |             fill(box3Color);
 60 |         
 61 |             rect(w1+w2, i*200,w3,200);
 62 |             
 63 |             x1 = 0;
 64 |             y = i*200;
 65 |             x2 = w1;
 66 |             drawCube(x1,y,x2, box1Color);
 67 |             
 68 |             x1 = w1;
 69 |             x2 = 600-w3;
 70 |             drawCube(x1,y,x2, box2Color);
 71 |             
 72 |             x1 = w1+w2;
 73 |             x2 = 600;
 74 |             drawCube(x1,y,x2, box3Color);
 75 |         }
 76 |         }
 77 | 
 78 |         function drawCube(x1,y,x2,boxColor) {
 79 |         
 80 |         //top
 81 |         col = getExpect(boxColor);
 82 |         fill(col);
 83 |         beginShape();
 84 |         centerX = x1+((x2-x1)/2);
 85 |         
 86 |         sx1 = centerX;
 87 |         sy1 = y+10;
 88 |         vertex(sx1, sy1);
 89 |         
 90 |         sx2 = x2-10;
 91 |         sy2 = y+30;
 92 |         vertex(sx2, sy2);
 93 |         
 94 |         sx3 = centerX;
 95 |         sy3 = y+50;
 96 |         vertex(sx3, sy3);
 97 |         
 98 |         sx4 = x1+10;
 99 |         sy4 = y+30;
100 |         vertex(sx4, sy4);
101 |         
102 |         endShape(CLOSE);
103 |         
104 |         //left
105 |         col = getExpect(boxColor);
106 |         fill(col);
107 |         
108 |         beginShape();
109 |         
110 |         sx1 = x1+10;
111 |         sy1 = y+30;
112 |         vertex(sx1, sy1);
113 |         
114 |         sx2 = centerX;
115 |         sy2 = y+50;
116 |         vertex(sx2, sy2);
117 |         
118 |         sx3 = centerX;
119 |         sy3 = y+190;
120 |         vertex(sx3, sy3);
121 |         
122 |         sx1 = x1+10;
123 |         sy1 = y+170;
124 |         vertex(sx1, sy1);
125 |         
126 |         endShape(CLOSE);
127 |         
128 |         //right
129 |         col = getExpect(boxColor);
130 |         fill(col);
131 |         
132 |         beginShape();
133 |         
134 |         sx1 = centerX;
135 |         sy1 = y+50;
136 |         vertex(sx2, sy2);
137 |         
138 |         sx2 = x2-10;
139 |         sy2 = y+30;
140 |         vertex(sx2, sy2);
141 |         
142 |         sx3 = x2-10;
143 |         sy3 = y+170;
144 |         vertex(sx3, sy3);
145 |         
146 |         sx4 = centerX;
147 |         sy4 = y+190;
148 |         vertex(sx4, sy4);
149 |         
150 |         endShape(CLOSE);
151 |         }
152 |     </script>
153 | </head>
154 | <body>
155 |     <main>
156 |     </main>
157 | </body>
158 | </html>
159 | 


--------------------------------------------------------------------------------
/797/doolittle/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 |   <head>
  3 |     <meta>
  4 |       <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.18/paper-full.min.js" ></script>
  5 |       <style type="text/css">
  6 | 
  7 |         html, body {
  8 |           width: 100%;
  9 |           height: 100%;
 10 |           overflow: hidden;
 11 |           padding: 0;
 12 |           margin: 0;
 13 |         }
 14 | 
 15 |         canvas {
 16 |           /*
 17 |             With the resize attribute in the canvas tag,
 18 |             paper.js manages the size of the canvas.
 19 |             Sets canvas to 100% of window.
 20 |           */
 21 |         }
 22 | 
 23 |       </style>
 24 |     </meta>
 25 |   </head>
 26 |   <body>
 27 |     <script canvas='solving-sol' type='text/paperscript'>
 28 | 
 29 |       /*
 30 |         Wall Drawing #797 (1995)
 31 | 
 32 |         The first drafter has a black marker and makes an irregular horizontal line near the top of the wall. Then the second drafter tries to copy it (without touching it) using a red marker. The third drafter does the same, using a yellow marker. The fourth drafter does the same using a blue marker. Then the second drafter followed by the third and fourth copies the last line drawn until the bottom of the wall is reached.
 33 |       */
 34 | 
 35 |       // Configure drawing
 36 |       var COLORS         = ['#4A90E2', '#D0021B', '#F8E71C', ],
 37 |           NUM_COLORS     = COLORS.length,
 38 |           LINE_PADDING   = 4,
 39 |           LINE_THICKNESS = 6;
 40 | 
 41 | 
 42 |       function drawLine(lastLine, lineId, width) {
 43 | 
 44 |         var line;
 45 | 
 46 |         if (lastLine===undefined) {
 47 |           //console.log("Drawing new line.");
 48 |           line = new Path([new Point(0,0), new Point(width,0)]);
 49 |           line.strokeColor = '#000000';
 50 |           bumpPath(line, 72);
 51 |           line.smooth();
 52 |         } else {
 53 |           line = lastLine.clone();
 54 |           line.strokeColor = COLORS[lineId%NUM_COLORS];
 55 |           line.reduce();
 56 |         }
 57 | 
 58 |         line.strokeWidth = LINE_THICKNESS;
 59 |         //line.selected = true;
 60 |         return line;
 61 | 
 62 |       };
 63 | 
 64 |       // The instruction calls for not-straight lines,
 65 |       // so we add some variation to them there.
 66 | 
 67 |       function bumpPath(path, numBumps) {
 68 | 
 69 |         var j = -1,
 70 |           bumpPoint, handlePoint, furthestX= 0,
 71 |           segmentLength = path.length/numBumps;
 72 | 
 73 |         //console.log("path.length:", path.length);
 74 |         //console.log("segmentLength:", segmentLength);
 75 | 
 76 |         while (++j < numBumps) {
 77 | 
 78 |           // Path actually gets longer as we add bumps...
 79 |           segmentLength = path.length/numBumps;
 80 | 
 81 |           // Choose a random point along this segment.
 82 |           bumpPoint = path.getLocationAt(furthestX + (segmentLength*Point.random().x));
 83 |           bumpPoint.point.y+=(Point.random().y*randomNegative()*24);
 84 | 
 85 |           // Handles define the bezier curve for the line.
 86 |           // Makes them appear a little more hand drawn.
 87 |           handlePoint = Point.random()*3;
 88 |           path.insert(j+1, new Segment(bumpPoint.point, handlePoint, handlePoint));
 89 |           furthestX = (furthestX > bumpPoint.point.x) ? furthestX+segmentLength : bumpPoint.point.x + segmentLength;
 90 |         }
 91 | 
 92 |         return path;
 93 | 
 94 |       };
 95 | 
 96 |       function randomNegative() {
 97 |         return (Point.random().x > .5) ? -1 : 1;
 98 |       }
 99 | 
100 |       function onResize() {
101 | 
102 |         if (
103 |           __lastWidth===view.viewSize.width &&
104 |           __lastHeight===view.viewSize.height
105 |         ) {
106 |           // No need to redraw because size hasn't changed.
107 |           return;
108 |         }
109 | 
110 |         //Wipe layer
111 |         project.activeLayer.removeChildren();
112 | 
113 |         draw();
114 | 
115 |       };
116 | 
117 |       function draw() {
118 | 
119 |         console.time("Drawing #797 in");
120 | 
121 |         var viewWidth  = view.viewSize.width,
122 |           viewHeight   = view.viewSize.height,
123 |           lineHeight   = LINE_THICKNESS + LINE_PADDING,
124 |           numLines     = viewHeight/lineHeight,
125 |           line, lastLine
126 |           lineId = -1, i = -1;
127 | 
128 |         console.log("Drawing lines:", numLines);
129 | 
130 |         while (++i < numLines) {
131 |           line = drawLine(lastLine, lineId++, viewWidth);
132 |           line.position.y = i*lineHeight;
133 |           line.position.x = 0 + viewWidth/2;
134 |           lastLine = line;
135 |         }
136 | 
137 |         console.timeEnd("Drawing #797 in");
138 | 
139 |         __lastWidth  = viewWidth;
140 |         __lastHeight = viewHeight;
141 | 
142 |       }
143 | 
144 |       draw();
145 | 
146 |     </script>
147 | 
148 |     <canvas id='solving-sol' resize></canvas>
149 | 
150 |   </body>
151 | </html>


--------------------------------------------------------------------------------
/797/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #797 (1995)
2 | 
3 | The first drafter has a black marker and makes an irregular horizontal line near the top of the wall. Then the second drafter tries to copy it (without touching it) using a red marker. The third drafter does the same, using a yellow marker. The fourth drafter does the same using a blue marker. Then the second drafter followed by the third and fourth copies the last line drawn until the bottom of the wall is reached.


--------------------------------------------------------------------------------
/852/cagrimmett/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | 	<title>Sol LeWitt 852</title>
  4 | 	<!-- Implemented by Chuck Grimmett. Learn more here: http://cagrimmett.com/sol-lewitt/2016/11/22/sol-lewitt-852-853.html -->
  5 | 	<script src="https://d3js.org/d3.v4.min.js"></script>
  6 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
  7 | 	<style type="text/css">
  8 | 		body {
  9 | 			margin: 0;
 10 | 			padding: 0;
 11 | 			background: #453276;
 12 | 			/*border: 40px solid #111;*/
 13 | 		}
 14 | 		#chart {
 15 | 			margin: 0;
 16 | 			padding: 0;
 17 | 		}
 18 | 	</style>
 19 | </head>
 20 | <body>
 21 | 
 22 | <div id="chart"></div>
 23 | 
 24 | <script>
 25 | 
 26 | function sol852() {	
 27 | var ww = window.innerWidth,
 28 | 	wh = window.innerHeight;
 29 | 
 30 | function getRandomArbitrary(min, max) {
 31 |   return Math.random() * (max - min) + min;
 32 | }
 33 | 
 34 | function lineData() {
 35 | 	var data = new Array();
 36 | 		for (var point = 0; point < 5; point++) {
 37 | 			var x = getRandomArbitrary(ww/10, ww-ww/10); // Constrains within the middle 80%
 38 | 			var y = getRandomArbitrary(wh/10, wh-wh/10);		
 39 | 				data.push({
 40 | 				x: x,
 41 | 				y: y
 42 | 			})
 43 | 		}
 44 | 		// Starting point upper left
 45 | 		data.push({
 46 | 			x: 0,
 47 | 			y: 0
 48 | 		});
 49 | 		// End point lower right
 50 | 		data.push({
 51 | 			x: ww,
 52 | 			y: wh
 53 | 		})
 54 | 	
 55 | 	return data;
 56 | } 
 57 | 
 58 | var lineData = lineData();
 59 | console.log(lineData);
 60 | console.log(lineData.sort(function(a,b) { return +a.x - +b.x; }));
 61 | 
 62 |                  
 63 | var area = d3.area()
 64 |     .x(function(d) { return d.x; })
 65 |     //.y0(function(d) { return d.y + 100; })
 66 |     .y0(wh)
 67 |     .y1(function(d) { return d.y; })
 68 |     .curve(d3.curveBasis);
 69 | 	
 70 | console.log(area);
 71 | 
 72 | 
 73 | var chart = d3.select("#chart").append("svg")
 74 | 	.attr("width", ww)
 75 | 	.attr("height", wh)
 76 | 	.append("path")
 77 |     .datum(lineData)
 78 |     .attr("class", "area")
 79 |     .attr("d", area)
 80 |     .attr("fill","#FDD330");	
 81 | 
 82 | }
 83 | 
 84 |  // run on load
 85 | sol852();
 86 | 
 87 | $(window).resize(function() {
 88 |     if(this.resizeTO) clearTimeout(this.resizeTO);
 89 |     this.resizeTO = setTimeout(function() {
 90 |         $(this).trigger('resizeEnd');
 91 |     }, 300);
 92 | });
 93 | 
 94 | //resize on resizeEnd function
 95 | $(window).bind('resizeEnd', function() {
 96 | 	 d3.selectAll("svg").remove();
 97 | 	 sol852();
 98 | });
 99 | 	
100 | </script>


--------------------------------------------------------------------------------
/852/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #852 (1998)
2 | 
3 | A wall divided from the upper left to the lower right by a curvy line; left: glossy yellow; right: glossy purple.


--------------------------------------------------------------------------------
/852/y-a-v-a/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <title>wall drawing #852 • _y_a_v_a_ ❤︎ sol lewitt</title>
  3 | <style>
  4 |   body {
  5 |     margin: 0;
  6 |     padding: 0;
  7 |     background: #000;
  8 |     display: flex;
  9 |     align-items: center;
 10 |     justify-content: center;
 11 |   }
 12 | 
 13 |   #wall {
 14 |     width: calc(100% - 40px);
 15 |     height: calc(100% - 40px);
 16 |     max-width: calc(100% - 40px);
 17 |     max-height: calc(100% - 40px);
 18 |     margin: 20px;
 19 |   }
 20 | </style>
 21 | <!-- A wall ... -->
 22 | <div id="wall">
 23 |   <svg id="sol" width="100%" height="100%">
 24 |   </svg>
 25 | </div>
 26 | <script>
 27 | function createControlPoint(x, y, color) {
 28 |   var c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
 29 |   c.setAttribute('cx', x);
 30 |   c.setAttribute('cy', y);
 31 |   c.setAttribute('r', 4);
 32 |   c.setAttribute('fill', color || 'red');
 33 | 
 34 |   document.getElementById('sol').appendChild(c);
 35 | }
 36 | 
 37 | function getDistance(x1, y1, x, y) {
 38 |   var rootCorner = Math.atan(y / x) * (180 / Math.PI);
 39 |   var pointCorner = Math.atan(y1 / x1) * (180 / Math.PI);
 40 |   var hyp = Math.sqrt(Math.pow(x1, 2) + Math.pow(y1, 2));
 41 | 
 42 |   var restCorner = rootCorner - pointCorner;
 43 |   var dist = Math.cos(restCorner / Math.PI) * hyp;
 44 |   return dist;
 45 | }
 46 | 
 47 | function walldrawing852() {
 48 |   var debugMode = false;
 49 |   var debugs = [];
 50 | 
 51 |   var sol = document.getElementById('sol');
 52 |   var svgSize = sol.getBoundingClientRect();
 53 | 
 54 |   // ... divided from the upper left ...
 55 |   var x0 = 0;
 56 |   var y0 = 0;
 57 |   // ... to the lower right ...
 58 |   var x = svgSize.width;
 59 |   var y = svgSize.height;
 60 | 
 61 |   var deltaX = x - x0;
 62 |   var deltaY = y - y0;
 63 | 
 64 |   var inc = 8;
 65 |   var points = [];
 66 | 
 67 |   var intervalX = deltaX / inc;
 68 |   var intervalY = deltaY / inc;
 69 |   var x1;
 70 |   var y1;
 71 |   var coord;
 72 | 
 73 |   for (var i = 0; i < inc; i++) {
 74 |     x1 = x0 + (Math.random() * intervalX) + (intervalX * i);
 75 |     y1 = y0 + (Math.random() * intervalY) + (intervalY * i);
 76 | 
 77 |     coord = [Math.min(intervalX * (i + 1), Math.round(x1)), Math.min(intervalY * (i + 1), Math.round(y1))];
 78 | 
 79 |     points.push(coord);
 80 |     debugs.push([coord, 'blue']);
 81 |   }
 82 | 
 83 |   var firstControlPoint = points.shift();
 84 |   var attributeValues = [];
 85 |   var set = [];
 86 | 
 87 |   for (var i = 0; i < points.length; i += 2) {
 88 |     if (points[i + 1]) {
 89 |       set = [points[i].join(' '), points[i + 1].join(' ')].join(',') + ' S ';
 90 |     } else {
 91 |       set = [points[i].join(' '), [x, y].join(' ')].join(',');
 92 |     }
 93 |     attributeValues.push(set);
 94 |   }
 95 | 
 96 |   // ... by a curvy line; ...
 97 |   var attributeValue2 = 'M' + x0 + ' ' + y0;
 98 |   attributeValue2 += ' C ' + firstControlPoint[0] + ' ' + firstControlPoint[1] + ', ';
 99 |   attributeValue2 += attributeValues.join('');
100 |   attributeValue2 += ' L' + x0 + ' ' + y + ' ' + x0 + ' ' + y0 + ' Z';
101 | 
102 |   // ... left: glossy yellow; ...
103 |   var pathElement2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
104 |   pathElement2.setAttribute('id', 'walldrawing\#852');
105 |   pathElement2.setAttribute('d', attributeValue2);
106 |   pathElement2.setAttribute('stroke', 'transparent');
107 |   pathElement2.setAttribute('fill', 'yellow');
108 | 
109 |   // ... right: glossy purple.
110 |   var attributeValue1 = 'M' + x0 + ' ' + y0;
111 |   attributeValue1 += ' L' + x + ' ' + y0 + ' L' + x + ' ' + y;
112 |   attributeValue1 += ' L' + x0 + ' ' + y + ' Z';
113 |   var pathElement1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
114 |   pathElement1.setAttribute('id', 'lewitt');
115 |   pathElement1.setAttribute('d', attributeValue1);
116 |   pathElement1.setAttribute('stroke', 'transparent');
117 |   pathElement1.setAttribute('fill', 'purple');
118 | 
119 |   sol.appendChild(pathElement1);
120 | 
121 |   sol.appendChild(pathElement2);
122 | 
123 |   if (debugMode) {
124 |     debugs.forEach(function(element) {
125 |       createControlPoint(element[0][0], element[0][1], element[1]);
126 |     });
127 |   }
128 | };
129 | 
130 | walldrawing852();
131 | 
132 | window.onresize = walldrawing852;
133 | 
134 | </script>
135 | </html>
136 | 


--------------------------------------------------------------------------------
/853/cagrimmett/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | 	<title>Sol LeWitt 853</title>
  4 | 	<!-- Implemented by Chuck Grimmett. Learn more here: http://cagrimmett.com/sol-lewitt/2016/11/22/sol-lewitt-852-853.html -->
  5 | 	<script src="https://d3js.org/d3.v4.min.js"></script>
  6 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
  7 | 	<style type="text/css">
  8 | 		body {
  9 | 			margin: 0;
 10 | 			padding: 0;
 11 | 			border: 40px solid #111;
 12 | 			min-width: 600px;
 13 | 		}
 14 | 		#left {
 15 | 			width: calc(50% - 20px);
 16 | 			height: 100%;
 17 | 			margin: 0;
 18 | 			padding: 0;
 19 | 			border-right: 20px solid #111;
 20 | 			background: #169A52;
 21 | 			display: inline-block;
 22 | 		}
 23 | 		#right {
 24 | 			width:calc(50% - 20px);
 25 | 			height: 100%;
 26 | 			margin: 0;
 27 | 			padding: 0;
 28 | 			border-left: 20px solid #111;
 29 | 			background: #1174B8;
 30 | 			display: inline-block;			
 31 | 		}
 32 | 	</style>
 33 | </head>
 34 | <body>
 35 | 
 36 | <div id="left"></div><div id="right"></div>
 37 | 
 38 | <script>
 39 | 
 40 | function sol853() {	
 41 | var ww = window.innerWidth,
 42 | 	wh = window.innerHeight - 80,
 43 | 	halfwidth = ww/2 - 60;	
 44 | 
 45 | function getRandomArbitrary(min, max) {
 46 |   return Math.random() * (max - min) + min;
 47 | }
 48 | 
 49 | function fillLeft() {
 50 | 	var data = new Array();
 51 | 		for (var point = 0; point < 3; point++) {
 52 | 			var x = getRandomArbitrary(halfwidth/10, halfwidth-halfwidth/10);
 53 | 			var y = getRandomArbitrary(wh/10, wh-wh/10);		
 54 | 				data.push({
 55 | 				x: x,
 56 | 				y: y
 57 | 			})
 58 | 		}
 59 | 		data.push({
 60 | 			x: halfwidth/2,
 61 | 			y: 0
 62 | 		});
 63 | 		data.push({
 64 | 			x: halfwidth/2,
 65 | 			y: wh
 66 | 		})
 67 | 	
 68 | 	return data;
 69 | } 
 70 | 
 71 | var fillLeft = fillLeft();
 72 | console.log(fillLeft);
 73 | console.log(fillLeft.sort(function(a,b) { return +a.y - +b.y; }));
 74 | 
 75 | function fillRight() {
 76 | 	var data = new Array();
 77 | 		for (var point = 0; point < 3; point++) {
 78 | 			var x = getRandomArbitrary(halfwidth/10, halfwidth-halfwidth/10); // Keeps within the middle 80%
 79 | 			var y = getRandomArbitrary(wh/10, wh-wh/10);		
 80 | 				data.push({
 81 | 				x: x,
 82 | 				y: y
 83 | 			})
 84 | 		}
 85 | 		data.push({
 86 | 			x: 0,
 87 | 			y: wh/2
 88 | 		});
 89 | 		data.push({
 90 | 			x: halfwidth,
 91 | 			y: wh/2
 92 | 		})
 93 | 	
 94 | 	return data;
 95 | } 
 96 | 
 97 | var fillRight = fillRight();
 98 | console.log(fillRight);
 99 | console.log(fillRight.sort(function(a,b) { return +a.x - +b.x; }));
100 | 
101 | 
102 |                  
103 | var areaLeft = d3.area()
104 | 	.x0(0)
105 |     .x1(function(d) { return d.x; })
106 |     .y(function(d) { return d.y; })
107 |     .curve(d3.curveBasis);
108 | 	
109 | console.log(areaLeft);
110 | 
111 | 
112 | var chart = d3.select("#left").append("svg")
113 | 	.attr("width", halfwidth)
114 | 	.attr("height", wh)
115 | 	.append("path")
116 |     .datum(fillLeft)
117 |     .attr("class", "areaLeft")
118 |     .attr("d", areaLeft)
119 |     .attr("fill","#AE1F26");	
120 | 
121 | 
122 | var areaRight = d3.area()
123 |     .x(function(d) { return d.x; })
124 |     //.y0(function(d) { return d.y + 100; })
125 |     .y0(wh)
126 |     .y1(function(d) { return d.y; })
127 |     .curve(d3.curveBasis);
128 | 	
129 | console.log(areaRight);
130 | 
131 | 
132 | var chart = d3.select("#right").append("svg")
133 | 	.attr("width", halfwidth)
134 | 	.attr("height", wh)
135 | 	.append("path")
136 |     .datum(fillRight)
137 |     .attr("class", "areaRight")
138 |     .attr("d", areaRight)
139 |     .attr("fill","#F5361D");	
140 | 
141 | 
142 | 
143 | 
144 | }
145 | 
146 |  // run on load
147 | sol853();
148 | 
149 | $(window).resize(function() {
150 |     if(this.resizeTO) clearTimeout(this.resizeTO);
151 |     this.resizeTO = setTimeout(function() {
152 |         $(this).trigger('resizeEnd');
153 |     }, 300);
154 | });
155 | 
156 | //resize on resizeEnd function
157 | $(window).bind('resizeEnd', function() {
158 | 	 d3.selectAll("svg").remove();
159 | 	 sol853();
160 | });
161 | 	
162 | </script>


--------------------------------------------------------------------------------
/853/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #853 (1998)
2 | 
3 | A wall bordered and divided vertically into two parts by a flat black band. Left part: a square is divided vertically by a curvy line. Left: glossy red; right: glossy green; Right part: a square is divided horizontally by a curvy line. Top: glossy blue; bottom: glossy orange.


--------------------------------------------------------------------------------
/959/doodybrains/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Sol Lewitt - Drawing 959 - Uneven bands from the upper right corner.</title>
 5 |         <style type="text/css">
 6 |           html {
 7 |             box-sizing: border-box;
 8 |           }
 9 |           *, *:before, *:after {
10 |             box-sizing: inherit;
11 |           }
12 |           body {
13 |             background: #ffffff;
14 |             height: 100vh;
15 |             width: 100%;
16 |             padding: 0;
17 |             margin: 0;
18 |           }
19 |           .wall {
20 |             width: 100%;
21 |             height: 100vh;
22 |           }
23 |           .band {
24 |             width: 100%;
25 |             height: 100%;
26 |             position: absolute;
27 |             top: 0;
28 |             left: 0;
29 |             right: 0;
30 |           }
31 |           #first-band-bg {
32 |             background: mediumpurple;
33 |             -webkit-clip-path: polygon(100% 0, 0 100%, 0 39%);
34 |             clip-path: polygon(100% 0, 0 100%, 0 39%);
35 |           }
36 | 
37 |           #band-1 { background: hotpink; }
38 |           #band-2 { background: lightskyblue; }
39 |           #band-3 { background: blue; }
40 |           #band-4 { background: greenyellow; }
41 |           #band-5 { background: gold; }
42 |           #band-6 { background: purple; }
43 |           #band-7 { background: yellowgreen; }
44 |           #band-8 { background: crimson; }
45 |           #band-9 { background: mediumseagreen; }
46 |           #band-10 { background: orangered; }
47 |           #band-11 { background: springgreen; }
48 |         </style>
49 |     </head>
50 | 
51 |     <body>
52 |       <div class="wall">
53 |         <div id="first-band-bg" class="band"></div>
54 | 
55 |         <div id="band-1" class="band first-set"></div>
56 |         <div id="band-2" class="band first-set"></div>
57 |         <div id="band-3" class="band first-set"></div>
58 |         <div id="band-4" class="band first-set"></div>
59 |         <div id="band-5" class="band first-set"></div>
60 |         <div id="band-6" class="band first-set"></div>
61 |         <div id="band-7" class="band second-set"></div>
62 |         <div id="band-8" class="band second-set"></div>
63 |         <div id="band-9" class="band second-set"></div>
64 |         <div id="band-10" class="band second-set"></div>
65 |         <div id="band-11" class="band second-set"></div>
66 |       </div>
67 |     </body>
68 | 
69 |     <script type="text/javascript">
70 |       function generateBand() {
71 |         var firstSet = document.querySelectorAll(".first-set");
72 |         for (var i=0; i<firstSet.length; i++) {
73 |           var randomNumber = Math.floor(Math.random() * 70) + 10;
74 |           firstSet[i].setAttribute("style", `-webkit-clip-path: polygon(100% 0, 0 39%, 0 ${randomNumber}%)`);
75 |           firstSet[i].style.clipPath = `polygon(100% 0, 0 39%, 0 ${randomNumber}%)`
76 |         }
77 | 
78 |         var secondSet = document.querySelectorAll(".second-set");
79 |         for (var i=0; i<secondSet.length; i++) {
80 |           var randomNumber = Math.floor(Math.random() * 70) + 10;
81 |           secondSet[i].setAttribute("style", `-webkit-clip-path: polygon(100% 0, 0 100%, ${randomNumber}% 100%)`);
82 |           secondSet[i].style.clipPath = `polygon(100% 0, 0 100%, ${randomNumber}% 100%)`
83 |         }
84 |       }
85 | 
86 |       generateBand();
87 |     </script>
88 | </html>
89 | 


--------------------------------------------------------------------------------
/959/instructions.md:
--------------------------------------------------------------------------------
1 | ## Wall Drawing #959 (2001)
2 | 
3 | Uneven bands from the upper right corner.


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | This is free and unencumbered software released into the public domain.
 2 | 
 3 | Anyone is free to copy, modify, publish, use, compile, sell, or
 4 | distribute this software, either in source code form or as a compiled
 5 | binary, for any purpose, commercial or non-commercial, and by any
 6 | means.
 7 | 
 8 | In jurisdictions that recognize copyright laws, the author or authors
 9 | of this software dedicate any and all copyright interest in the
10 | software to the public domain. We make this dedication for the benefit
11 | of the public at large and to the detriment of our heirs and
12 | successors. We intend this dedication to be an overt act of
13 | relinquishment in perpetuity of all present and future rights to this
14 | software under copyright law.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 | 
24 | For more information, please refer to <http://unlicense.org>
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Solving Sol
 2 | ===========
 3 | 
 4 | ![Sol LeWitt Reference Image](http://solvingsol.com/screenshots/thumbs/391-amiccolis-index.html.png)
 5 | 
 6 | An open project to implement Sol LeWitt's instructions in JavaScript.
 7 | 
 8 | [Sol LeWitt](http://en.wikipedia.org/wiki/Sol_LeWitt) was an American artist who is regarded as the founder of Conceptual and Minimal art.
 9 | 
10 | A portion of his work were wall drawings for which he only provided instructions.
11 | 
12 | The instructions are simple and subtly open to interpretation. They're also good candidates to be executed programatically.
13 | 
14 | 
15 | ### Submitting a Solution (Pull Request)
16 | To execute an instruction, please fork this repository and create a folder with your github user name within the folder of the instruction you're solving. (i.e. /118/github_user).
17 | 
18 | The file should be executable in a modern web browser. Where possible, please load library scripts externally ([cdn.js](http://cdnjs.com/) is a good place to look.)
19 | 
20 | When you're done, add your solution to the JSON file `solutions.json` so we can easily generate the gallery of examples. If possible, include a screenshot of the result in the comment in the PR (but don't commit the screenshot).
21 | 
22 | ```
23 | "In an interview, LeWitt was once asked, "How would you feel
24 | if someone executed a wall drawing of yours without permission
25 | but with care to follow the instructions and in an appropriate site?"
26 | To which he replied, "OK... It would be authentic [and] it would
27 | be a compliment."
28 | ```
29 | 
30 | ### Example Instructions:
31 | 
32 | #### Wall Drawing #65 (1971)
33 | Lines not short, not straight, crossing and touching, drawn at random, using four colors, uniformly dispersed with maximum density, covering the entire surface of the wall.
34 | 
35 | #### Wall Drawing #97 (1971)
36 | Within an 80 inch (200cm) square, 10,000 straight lines. Next to it is an 80 inch (200 cm) square with 10,000 not straight lines.
37 | 
38 | #### Wall Drawing #118 (1971)
39 | On a wall surface, any continuous stretch of wall, using a hard pencil, place fifty points at random. The points should be evenly distributed over the area of the wall. All of the points should be connected by straight lines.
40 | 
41 | ### Resources for executing an instruction:
42 | - [Paper.js](http://paperjs.org)
43 | - [Easel.js](http://www.createjs.com/Docs/EaselJS/modules/EaselJS.html)
44 | - [P5.js](https://p5js.org/)
45 | - Forkable JSFiddle template with Paper.js: [http://jsfiddle.net/B79vY/](http://jsfiddle.net/B79vY/)
46 | 
47 | ### Learn more about Sol Lewitt:
48 | - [Radical Art](http://radicalart.info/concept/LeWitt/)
49 | - [Mass MOCA](http://www.massmoca.org/lewitt/)
50 | - [Dia Art](http://www.diaart.org/exhibitions/main/3)
51 | 
52 | 
53 | ### Other Solutions
54 | 
55 | ![Sol LeWitt Reference Image](http://solvingsol.com/screenshots/thumbs/328-amiccolis-index.html.png)
56 | ![Sol LeWitt Reference Image](http://solvingsol.com/screenshots/thumbs/118-amiccolis-index.html.png)
57 | ![Sol LeWitt Reference Image](http://solvingsol.com/screenshots/thumbs/091-doolittle-index.html.png)
58 | 
59 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var gulp           = require('gulp'),
 4 |     express        = require('express'),
 5 |     livereload     = require('connect-livereload'),
 6 |     refresh        = require('gulp-livereload'),
 7 |     lrserver       = require('tiny-lr')(),
 8 |     server         = express(),
 9 |     serverport     = 8000;
10 | 
11 | //Set up simple server w/live reload
12 | gulp.task('serve', function() {
13 | 
14 |   server.use(livereload());
15 | 
16 |   server.use(express.static('./'));
17 | 
18 |   //static server
19 |   server.listen(serverport);
20 | 
21 |   //live reload
22 |   lrserver.listen();
23 | 
24 | });
25 | 
26 | // Watch for changes on files. Ignore node_modules.
27 | gulp.task('watch', function() {
28 | 
29 |   gulp.watch([
30 |     './**/*.*',
31 |     '!./node_modules/**'
32 |   ]).on('change', function (file) {
33 |       refresh.changed(file.path);
34 |   });
35 | 
36 | });
37 | 
38 | // Serve files at localhost:8000 and listen for changes.
39 | gulp.task('default', ['serve', 'watch']);
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "solving-sol",
 3 |   "version": "0.0.0",
 4 |   "description": "An open project to solve Sol LeWitt's instructions in JavaScript.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/wholepixel/solving-sol.git"
12 |   },
13 |   "author": "Brad Bouse (doolittle)",
14 |   "license": "ISC",
15 |   "bugs": {
16 |     "url": "https://github.com/wholepixel/solving-sol/issues"
17 |   },
18 |   "homepage": "https://github.com/wholepixel/solving-sol",
19 |   "devDependencies": {
20 |     "connect-livereload": "^0.4.0",
21 |     "express": "^4.6.1",
22 |     "gulp": "^3.8.6",
23 |     "gulp-livereload": "^2.1.0",
24 |     "tiny-lr": "0.0.9"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/templates/paper.js/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <meta>
 4 | 
 5 |       <!--
 6 |         Paper.js template for solving a Sol Lewitt instruction.
 7 | 
 8 |         Paper.js is a simple way to draw graphics with Canvas. It uses PaperScript,
 9 |         a light abstraction of JavaScript that makes it easy to draw graphics.
10 |         It's very similar to drawing graphics with ActionScript.
11 | 
12 |         More about PaperScript: http://paperjs.org/tutorials/getting-started/working-with-paper-js/
13 | 
14 |         Note: you don't need to use Paper.js for Solving Sol. You can use any library you'd like,
15 |         or no library at all. The only requirement is that the solution runs in a modern browser.
16 | 
17 |         If you have another library you like, please submit a template like this one for other folks to use.
18 |       -->
19 | 
20 |       <title>Solving Sol</title>
21 | 
22 |       <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.18/paper-full.min.js" ></script>
23 |       <style type="text/css">
24 | 
25 |         html, body {
26 |           width: 100%;
27 |           height: 100%;
28 |           overflow: hidden;
29 |           padding: 0;
30 |           margin: 0;
31 |         }
32 | 
33 |         canvas {
34 |           /*
35 |             With the resize attribute in the canvas tag,
36 |             paper.js manages the size of the canvas.
37 |             Sets canvas to 100% of window.
38 |           */
39 |         }
40 | 
41 |       </style>
42 |     </meta>
43 |   </head>
44 |   <body>
45 |     <script canvas='solving-sol' type='text/paperscript'>
46 | 
47 |       /*
48 | 
49 |         PASTE SOL INSTRUCTIONS HERE i.e...
50 | 
51 |         Solving Sol #16
52 |         Bands of lines 12 inches (30 cm) wide, in three directions
53 |         (vertical, horizontal, diagonal right) intersecting.
54 | 
55 |       */
56 | 
57 |       function onResize() {
58 |         // Handle resizes
59 |         // Paper.js will call this handler automatically on resize.
60 |       }
61 | 
62 | 
63 |       function init() {
64 |         // Draw the instruction here.
65 |         // Be mindful of long loops!
66 |       }
67 | 
68 |       // This will fire when Paper.js is ready
69 |       init();
70 | 
71 |     </script>
72 | 
73 |     <canvas id='solving-sol' resize>
74 |       <!-- Paperscript will draw the graphics here -->
75 |     </canvas>
76 | 
77 |   </body>
78 | </html>


--------------------------------------------------------------------------------
/templates/processing.js/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <meta>
 4 | 
 5 |       <!--
 6 |         Processing.js template for solving a Sol Lewitt instruction.
 7 | 
 8 |         Note: you don't need to use Processing.js for Solving Sol. You can use any library you'd like,
 9 |         or no library at all. The only requirement is that the solution runs in a modern browser.
10 | 
11 |         If you have another library you like, please submit a template like this one for other folks to use.
12 |       -->
13 | 
14 |       <title>Solving Sol</title>
15 | 
16 |       <script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.min.js"></script>
17 | 
18 |       <style type="text/css">
19 | 
20 |         html, body {
21 |           width: 100%;
22 |           height: 100%;
23 |           overflow: hidden;
24 |           padding: 0;
25 |           margin: 0;
26 |         }
27 | 
28 |       </style>
29 |     </meta>
30 |   </head>
31 |   <body>
32 |     <script type="application/processing" data-processing-target="pjs">
33 | 
34 |       /*
35 | 
36 |         PASTE SOL INSTRUCTIONS HERE i.e...
37 | 
38 |         Solving Sol #16
39 |         Bands of lines 12 inches (30 cm) wide, in three directions
40 |         (vertical, horizontal, diagonal right) intersecting.
41 | 
42 |       */
43 | 
44 |       void setup() {
45 |         size(window.innerWidth, window.innerHeight);
46 |         background(255);
47 |         stroke(0);
48 |         ellipse(50, 50, 25, 25);
49 |         println('hello web!');
50 |       }
51 | 
52 |       void draw() {
53 |       }
54 | 
55 |     </script>
56 | 
57 |     <canvas id="pjs"></canvas>
58 | 
59 |   </body>
60 | </html>
61 | 


--------------------------------------------------------------------------------