John Legelis Project-04 String Art

sketch

// John Legelis

function setup() {
    createCanvas(400, 300);
    background(0);
}

function draw() {

    // Set size of square 
    var size
    size = 100

    // Itterate rows and columns of squares
    for(s = 0; s < (width/size); s++) {
        for(d = 0; d < (height/size); d++) {
            // Width and height of the square are the same making it an actual square
            square(s*size, d*size, size, size)
        }
    }    
}


// Stop changing colors when mouse is held down
function mousePressed() {
    noLoop()
}

// Resume changing colors when mouse is released
function mouseReleased() {
    loop()
}

// Function that draws line square given top left x,y and width,height
function square(lx, ty, w, h) {
    
    // Insert parameters into variables
    var width
    width = w
    var height
    height = h

    var leftX
    leftX = lx
    var rightX
    rightX = leftX + width
    var topY
    topY = ty
    var bottomY
    bottomY = topY + height

    // Loop through to make lines
    for (i = 0; i <= width; i = i + 5) {

        //Line-1 X,Y coordinates for beginning and end
        var l1xb
        l1xb = leftX
        var l1yb
        l1yb = topY + i  
        var l1xe
        l1xe = leftX + i
        var l1ye
        l1ye = bottomY

        //Line-2 X,Y coordinates for beginning and end
        var l2xb
        l2xb = leftX + i
        var l2yb
        l2yb = bottomY  
        var l2xe
        l2xe = rightX
        var l2ye
        l2ye = bottomY - i

        //Line-3 X,Y coordinates for beginning and end
        var l3xb
        l3xb = rightX
        var l3yb
        l3yb = bottomY - i  
        var l3xe
        l3xe = rightX - i
        var l3ye
        l3ye = topY

        //Line-4 X,Y coordinates for beginning and end
        var l4xb
        l4xb = leftX
        var l4yb
        l4yb = topY + i  
        var l4xe
        l4xe = rightX - i
        var l4ye
        l4ye = topY

        //draw lines with random greyscale color from black to white 
        stroke(random(0,255))
        
        line(l1xb, l1yb, l1xe, l1ye)
        line(l2xb, l2yb, l2xe, l2ye)
        line(l3xb, l3yb, l3xe, l3ye)
        line(l4xb, l4yb, l4xe, l4ye)
    }

}

[Note: original submission was either sketch-347.js or sketch-342.js. I swapped in sketch-364.js with minor edits to work around a pt-embed limitation. -RBD]

I found this project rather intuitive and easy to implement using a for loop which iterated x and y values incrementally for the endpoints of the lines. I liked the textured effect the randomized line shading created. The lines stop changing colors when the mouse is pressed amd resume when released.