D3 Examples - Sol LeWitt's Wall Drawing 86 Modified for Two Angles

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.

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.

xxxxxxxxxx
 
<html>
<head>
    <!-- Implemented by Chuck Grimmett https://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>
    