cagrimmett/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Sol LeWitt's Wall Drawing 86


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

Implemented by Chuck Grimmett with D3.js transitions, randomization, and responsiveness. Learn more.

  
## 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 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: getRandomArbitrary(0, 360) // Pick a random angle between 0 and 360
				})
				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(750)
		.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>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<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 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: getRandomArbitrary(0, 360) // Pick a random angle between 0 and 360
	})
	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(750)
	.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>