Eunice Choe – Project-04 – String Art

sketch

/*Eunice Choe
Section E
ejchoe@andrew.cmu.edu
Project-04*/

// global variables to create curves
var spacing = 4;// spacing between the strings
var x1 = 0;
var y1 = 300;
var x2 = 400;
var y2 = 0;


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

function draw() {
    // changing color of strings depending on mouseX and mouse Y position
    background(255);
    strokeWeight(0.2);
    var r = map(mouseX, 0, width, 100, 255);
    var g = map(mouseY, 0, width, 200, 255);
    var b = map(mouseX, 0, height, 0, 100);
    for (var i = 0; i < width; i++){
    // outermost section of strings
        stroke(r, g, b);
        line (x1, spacing * i, spacing * i, y1); // bottom left
        line (x2, spacing * i, spacing * i, y2); // top right
        line (spacing * i, y1, x2, height - spacing * i); // bottom right
        line(x1, height - spacing * i, spacing * i, y2); // top left
    // innermost section of strings
        stroke(g, r, b);
        line (x1 + 100, spacing * i, spacing * i, y1 - 100); // inner bottom left
        line (x2 - 100, spacing * i, spacing * i, y2 + 100); // inner top right
        line (spacing * i, y1 - 100, x2 - 100, height - spacing * i); // inner bottom right
        line(x1 + 100, height - spacing * i, spacing * i, y2 + 100); // inner top left
    // middle section of strings
        stroke(r, b, g);
        line (x1 + 50, spacing * i, spacing * i, y1 - 50); // middle bottom left
        line (x2 - 50, spacing * i, spacing * i, y2 + 50); // middle top right
        line (spacing * i, y1 - 50, x2 - 50, height - spacing * i); // middle bottom right
        line(x1 + 50, height - spacing * i, spacing * i, y2 + 50); // middle top left
        }
}

For my string art project, I wanted to create a series of repeating curves overlapped on top of each other. I liked the appearance of having several thin strings that create sheer and transparent colors. I did have some difficulties figuring out how to use the for loop and coordinates, but later I realized the loop makes life much easier!