This morning I woke up thinking about my visit to Dia:Beacon a few months ago. Particularly about the Wall Drawings of Sol Lewitt. These “wall drawings” are not so much drawings as they are rules for a drawing.

I was struck at this moment with how these sets of instructions could be written as a Javascript program. So I went at it. I decided to work on Wall Drawing #118, whose instructions you’ve already seen.

Initially my goal was to recreate the instructions and display the results, so I did a quick DuckDuckGo search and found out how to draw a line between two elements on a webpage. I implemented the StackOverflow answer and voila! I had my desired result.

Except that it was wildly inefficient code that crashed my browser. ūüôĀ

Thinking about how to proceed, it dawned on me that any exhibition of LeWitt’s Wall Drawings involves a great deal of manual effort. It would be unjust of me to simply copy/paste a solution in order to achieve the end result. Would an installation team simply paste up a poster of an existing Wall Drawing? Of course not, these Wall Drawings are about process. So I scrapped what I had and started looking into solutions.

var pointsCount = 50;

$(document).ready(function(){
    var wall = measureWall();
    for(var i=1;i<=pointsCount;i++){
        var thisTop = getRandomInt(wall.t, wall.b-5);
        var thisLeft = getRandomInt(wall.l, wall.r-5);
        $('#wall').append(
            '<span class="point" id="point_'+i+'" style="top:'+thisTop+'px;left:'+thisLeft+'px;" centery="'+(thisTop+2.5)+'" centerx="'+(thisLeft+2.5)+'"></span>'
        );
        if(i == pointsCount){
            drawLines();
        }
    }
})

function measureWall(){
    return {
        t : 0,
        r : $(window).width(),
        b : $(window).height(),
        l : 0
    }
};

function drawLines(){
    $('#wall').children('.point').each(function(i,e){
        $('#wall').children('.point').each(function(ii,ee){
            if($(ee).attr('id') != $(e).attr('id')){
                smartConnect($(e), $(ee));
            }
        });
    });
}

function smartConnect(e1, e2) { // draw a line connecting elements
    var x1 = parseInt($(e1).attr('centerx'),10);
    var y1 = parseInt($(e1).attr('centery'),10);
    var x2 = parseInt($(e2).attr('centerx'),10);
    var y2 = parseInt($(e2).attr('centery'),10);
    var d = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)))
    var cx =  ((x1+x2)/2) - (d/2);
    var cy = (y1+y2)/2;
    var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
    $('#wall').append(
        '<span class="line" style="\
        top:'+cy+'px;\
        left:'+cx+'px;\
        width:'+d+'px;\
        -moz-transform:rotate('+angle+'deg);\
        -webkit-transform:rotate('+angle+'deg);\
        -o-transform:rotate('+angle+'deg);\
        -ms-transform:rotate('+angle+'deg);\
        transform:rotate('+angle+'deg);\
        "></span>');
}

Now this isn’t the most efficient way of doing things. In fact, two lines are being drawn between each point (I solve for that visually with some CSS).

Satisfied with my final result (MUCH faster, and less crashy), I decided to continue looking into these Wall Drawings being on the web, at which point I came across Solving Sol.

Solving Sol is a website/GitHub repo where individuals can add their own solves to Sol LeWitt’s instructions. Sadly, someone has already “solved” #118 (using canvas though…), so I haven’t committed mine, but you can view it at the link below.

Wall Drawing #118