cagrimmett/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Sol LeWitt's Wall Drawing 86 Modified for Two Angles

Original instructions:

Wall Drawing 86: Ten thousand lines about 10 inches (25 cm) long, covering the wall evenly.

Original implementation in Javascript here
Camila Fontalvo asked me how to modify this for the situation where each of the individual lines are only drawn at one of two possible angles. This is done in lines 47-56 by setting two random angles A and B, then making a random boolean by comparing whether Math.random is greater than or equal to 0.5. If true, return A, otherwise return B.

  
## index.html
<html>
<head>
	<!-- Implemented by Chuck Grimmett http://cagrimmett.com/sol-lewitt/2016/10/20/sol-lewitt-86.html -->
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
	<title>Sol LeWitt Wall Drawing 86</title>
	<style type="text/css">
		body {
			font-family: 'Open Sans', sans-serif;
			margin: 0;
		}
		.drawing {
			margin: 0;
		}
		#lines {
			width:100%;
			height: 100%;
		}
		line {
		  stroke: #111;
		  stroke-width: 1;
		}
	</style>
</head>
<body>

<div class="drawing">
	<div id="lines"></div>
</div>
</div>


<script>

function sol86() {
	var svg = d3.select('#lines')
		.append('svg')
		.attr("width", "100%")
		.attr("height", "100%");


	function lineData() {
		function getRandomArbitrary(min, max) {
		  return Math.random() * (max - min) + min;
		}
		var angleA = getRandomArbitrary(0, 360);
		var angleB = getRandomArbitrary(0, 360);
		function two_random_angles() {
			var random_boolean = Math.random() >= 0.5;
			if (random_boolean == true) {
				return angleA;
			} else {
				return angleB;
			}
		}

		var data = new Array();
		var id = 1;
		var ww = window.innerWidth; // Width of the window viewing area
		var wh = window.innerHeight; // Height of the window viewing area
		// iterate for cells/columns inside rows
			for (var line = 0; line < 1000; line++) {  // 1000 lines
				var x1 = getRandomArbitrary(-100, ww); // initial points can start 100px off the screen to make even distribution work
				var y1 = getRandomArbitrary(-100, wh);
					data.push({
					id: id, // For identification and debugging
					x1: x1,
					y1: y1,
					x2: x1 + 100, // Move 100 to the right
					y2: y1 + 100, // Move 100 up
					rotate: two_random_angles()
				})
				id++; // Increment the ID
			}
		return data;
	}

	var lineData = lineData();
	console.log(lineData);


	var line = svg.selectAll("line")
		.data(lineData)
		.enter().append('line')
		.attr("id", function(d) { return d.id; })
		.attr("x1", function(d) { return d.x1; })
		.attr("y1", function(d) { return d.y1; })
		.attr("transform", function(d) { return "rotate(" + d.rotate + " " + (d.x1 + 50) + " " + (d.y1 + 50) + ")";})
		.attr("x2", function(d) { return d.x1; })
		.attr("y2", function(d) { return d.y1; }).transition().delay(function(d,i){ return 20*i; }).duration(150)
		.attr("x2", function(d) { return d.x2; })
		.attr("y2", function(d) { return d.y2; });
}

 // run on load
sol86();

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

//resize on resizeEnd function
$(window).bind('resizeEnd', function() {
	 d3.selectAll("svg").remove();
	 sol86();
});

</script>
	<html>
	<head>
	<!-- Implemented by Chuck Grimmett http://cagrimmett.com/sol-lewitt/2016/10/20/sol-lewitt-86.html -->
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
	<title>Sol LeWitt Wall Drawing 86</title>
	<style type="text/css">
	body {
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	}
	.drawing {
	margin: 0;
	}
	#lines {
	width:100%;
	height: 100%;
	}
	line {
	stroke: #111;
	stroke-width: 1;
	}
	</style>
	</head>
	<body>

	<div class="drawing">
	<div id="lines"></div>
	</div>
	</div>


	<script>

	function sol86() {
	var svg = d3.select('#lines')
	.append('svg')
	.attr("width", "100%")
	.attr("height", "100%");



	function lineData() {
	function getRandomArbitrary(min, max) {
	return Math.random() * (max - min) + min;
	}
	var angleA = getRandomArbitrary(0, 360);
	var angleB = getRandomArbitrary(0, 360);
	function two_random_angles() {
	var random_boolean = Math.random() >= 0.5;
	if (random_boolean == true) {
	return angleA;
	} else {
	return angleB;
	}
	}

	var data = new Array();
	var id = 1;
	var ww = window.innerWidth; // Width of the window viewing area
	var wh = window.innerHeight; // Height of the window viewing area
	// iterate for cells/columns inside rows
	for (var line = 0; line < 1000; line++) { // 1000 lines
	var x1 = getRandomArbitrary(-100, ww); // initial points can start 100px off the screen to make even distribution work
	var y1 = getRandomArbitrary(-100, wh);
	data.push({
	id: id, // For identification and debugging
	x1: x1,
	y1: y1,
	x2: x1 + 100, // Move 100 to the right
	y2: y1 + 100, // Move 100 up
	rotate: two_random_angles()
	})
	id++; // Increment the ID
	}
	return data;
	}

	var lineData = lineData();
	console.log(lineData);


	var line = svg.selectAll("line")
	.data(lineData)
	.enter().append('line')
	.attr("id", function(d) { return d.id; })
	.attr("x1", function(d) { return d.x1; })
	.attr("y1", function(d) { return d.y1; })
	.attr("transform", function(d) { return "rotate(" + d.rotate + " " + (d.x1 + 50) + " " + (d.y1 + 50) + ")";})
	.attr("x2", function(d) { return d.x1; })
	.attr("y2", function(d) { return d.y1; }).transition().delay(function(d,i){ return 20*i; }).duration(150)
	.attr("x2", function(d) { return d.x2; })
	.attr("y2", function(d) { return d.y2; });
	}

	// run on load
	sol86();

	$(window).resize(function() {
	if(this.resizeTO) clearTimeout(this.resizeTO);
	this.resizeTO = setTimeout(function() {
	$(this).trigger('resizeEnd');
	}, 500);
	});

	//resize on resizeEnd function
	$(window).bind('resizeEnd', function() {
	d3.selectAll("svg").remove();
	sol86();
	});

	</script>