Angela Lee – Project – 04

sketch

/*
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Project 4 String Art
 */

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

function draw() {
    spacing1 = 40;
    spacing2 = 10;
    spacing3 = 5;
    red = mouseX;
    green = mouseX;
    blue = mouseY

    // LOOP FOR OUTERMOST STRINGS
    // the strings span the boundary of the canvas
    for(var a = 0; a <= 400; a += spacing1){
        // left bottom strings
        stroke(red, 0, 162);
        line(0, a, a, 300);

        // right top strings
        stroke(153, green, 0);
        line(400, a, a, 0);
    }

    // LOOP FOR GREEN, BLUE STRINGS
    // the strings are contained by the outermost strings 
    for(var b = 0; b <= 200; b += spacing2){
        stroke(0, 187, mouseY);
        // left top strings
        line(100 + b, 50, 100, 250 - b);
        // right top strings
        line(100 + b, 250, 300, 250 - b);
    }

    // LOOP FOR INNERMOST SQUARE
    // the strings are contained within a box 
    // the box specs: rect(150, 100, 100, 100)
    for(var a = 0; a <= 100; a += spacing3){
        // bottom left
        stroke(red, green, 162);
        line(150, 100 + a, 150 + a, 200);

        // top left
        stroke(150, green, blue);
        line(150 + a, 100, 150, 200 - a);

        // top right
        stroke(red, 150, blue);
        line(150 + a, 100, 250, 100 + a);

        // bottom right
        stroke(red, 100, blue);
        line(250, 100 + a, 250 - a, 200);

    }


}

For this project, I wanted to make a composition that had a fixed form but some element that was controlled by the user. I stuck to a strict geometry that relied on square and rectangle boundaries but allowed the colors of the strings to change based on the users’ mouse position.

Some of my notes when planning: first, it took me a while to understand how to program the string curves nicely. Then, I planned out the composition I wanted in my final piece.

Leave a Reply