Jaclyn Saik Project 04: String Art

sketch

/* Jaclyn Saik 
Section E
jsaik@andrew.cmu.edu
Project-04
*/
var x1; //global values for all points that create curves
var y1;
var x2;
var y2;
var increment;
var rectW;
var rectH;

function setup() {
    createCanvas(400, 300);
    background("RosyBrown");
    strokeWeight(2);
    increment = 15;
    increment = random(5, 9); //resets spacing everytime you refresh the page


}

function draw() {
    stroke("Pink");

//top right swoop
    for(var i = 0; i < width; i+= increment) { //increment variable set so I can randomize it
        x1 = width; //starting points incrementing along right edge
        y1 = i; //increments
        x2 = i; //paired with fized width to create curves
        y2 = 0; //i is paired with zero to create curves
        line(x1, y1, x2, y2);
    }
//bottom left swoop
    for(var i = 0; i < height; i+= increment) {
        x1 = i; //values flipped in order to create different curve location
        y1 = height;
        x2 = 0;
        y2 = i;
        line(x1, y1, x2, y2);
    }
//purple rectangle
    noFill(); //created a rectangle in front of the background pink curves
    stroke("DarkMagenta");
    rectW = 280;
    rectH = 220;
    rect(60, 40, rectW, rectH);

    //rectangle swoop bottom right
    push();
    translate(60, 40); //new axis for creatign curves
    for(var i = 0; i <= rectH; i+= increment) {
        x1 = i;
        y1 = rectH;
        x2 = rectW;
        y2 = rectH-i; //new curve position, so increments work opposite based on starting height 
        //another option would have been to rotate the origin 
        line(x1, y1, x2, y2);
    }
    pop(); //push pop used because I translated the origin 
   
    //rectangle swoop upper left
    push();
    translate(60, 40);
    for(var i = 0; i <= rectH; i+= increment) {
        x1 = rectW-i;
        y1 = 0;
        x2 = 0;
        y2 = i;
        line(x1, y1, x2, y2);
    }
    pop();

    
    //blue rectangle 

    noFill();
    stroke("DarkTurquoise");
    rectW = rectW-40
    rectH = rectH-40
    rect(60, 40, rectW, rectH);

    //rectangle swoop bottom right
    push();
    translate(60, 40);
    for(var i = 0; i <= rectH; i+= increment) {
        x1 = i;
        y1 = rectH;
        x2 = rectW;
        y2 = rectH-i;
        line(x1, y1, x2, y2);
    }
    pop();
   
    //rectangle swoop upper left
    push();
    translate(60, 40);
    for(var i = 0; i <= rectH; i+= increment) {
        x1 = rectW-i;
        y1 = 0;
        x2 = 0;
        y2 = i;
        line(x1, y1, x2, y2);
    }
    pop();

    //design lines
    stroke("AliceBlue");
    line(0,0, width/2, height)
    line(0, 0, width, height/2);
    line(width, height, 0, height/2);
    line(width, height, width/2, 0);

    //gold rectangle 

    noFill();
    stroke("Gold");
    rectW = rectW-40
    rectH = rectH-40
    rect(60, 40, rectW, rectH);

    //rectangle swoop bottom right
    push();
    translate(60, 40);
    for(var i = 0; i <= rectH; i+= increment) {
        x1 = i;
        y1 = rectH;
        x2 = rectW;
        y2 = rectH-i;
        line(x1, y1, x2, y2);
    }
    pop();
   
    //rectangle swoop upper left
    push();
    translate(60, 40);
    for(var i = 0; i <= rectH; i+= increment) {
        x1 = rectW-i;
        y1 = 0;
        x2 = 0;
        y2 = i;
        line(x1, y1, x2, y2);
    }
    pop();


}

Creating string art was a challenging process, especially after translating the origin of my piece around a couple times to experiment. This was definitely an exercise in understanding the coordinate system enough to assign opposing values to the ends of points. I liked playing with the foreground and background of my curves, and I thought it was definitely one the prettiest projects we have made so far.