|
<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> |
