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.
license: gpl-3.0 |
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.
<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> |