daphnel-Project 04-String Art

string

//Daphne Lee
//15-104::1 (9:30am) Section D
//daphnel@andrew.cmu.edu
//Project 04-String Art

function setup() {
    createCanvas(400,300);
}
function draw(){
    background(0);
    strokeWeight(1);
    stroke(255);
    var xCanvas=400;
    var yCanvas=300;
    var x=0;
    var y2=0;
    //anytime the increment is increasing the y coord, it's 3/4*x1 because 
    //the height is less than the width
    for(var x1 = 0; x1 < xCanvas; x1 += 10){
        //bottom left curve
        var y = x1 * 3/4;
        line(x, y, x1, yCanvas);
        //top left curve
        line(x, yCanvas-y, x1, y2);
        //bottom right curve
        line(xCanvas, y, xCanvas-x1,yCanvas);
        //top right curve
        line(x1,y2,xCanvas,y);
      }
}

Since I’ve never done much work with using such lines to create curves, I looked a lot at the 7th grade webpage provided to us. I wanted to do something simple yet nice and thought of this.

It took me a while to get the lines to fit the way I wanted them too especially because the canvas isn’t a square. I had to tinker around with the variables to make them fit better. Additionally, I spent more time probably looking at my paper trying to figure out which points connected to which and how I would get the coordinates of them.

Some screenshots of my process. The first one was just flew out of the canvas literally while the other one was just not having symmetrical halves at all.