mmirho – Project 4 – Line Art

After constructing a loop template for myself, the rest of the process was simple figuring out how each end of the line moves: Left, right, up or down.

When it came to the curves inside the middle box, I had to change the structure a little, but it was still relatively the same.

It was interesting trying to find a balance between the number of loop iterations and the distance the lines move each iteration, it creates different densities.

sketch

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

function draw() {
    background(200);

    //Top Left
    x1 = 0;
    y1 = height/2;
    //These two set up the location of the first coordinate
    //of the line

    x2 = 0;
    y2 = 0;
    //These two set up the second coordinate
    //And by setting the coordinates as variables, I can
    //manipulate them in the loop to move the line

    fill(0);

    for (loop = 0 ; loop < 12 ; loop += 1) {
        //This loop moves a simple variable loop
        //along a series of steps, and then the actual
        //changing line-effecting variables change
        //within the loop

        line(x1, y1, x2, y2);
        //The actual line, composed of variables

        x1 += 0;
        y1 -= height/20;
        //Controls the movement of the first coordinate

        x2 += width/20;
        y2 -= 0;
        //Controls the movement of the second

        //These coordinate movement controls vary depending
        //on the corner the curve is created in, because each
        //coordinate needs to move a different direction
    }
    noLoop();
    //Cuts off the loop

    //This formula is used over and over again
    //for all four outside curves and the two inside curves


    //Top Right
    x1 = width;
    y1 = height/2;
    x2 = width;
    y2 = 0;

    for (loop = 0 ; loop < 12 ; loop += 1) {
        line(x1, y1, x2, y2);
        x1 += 0;
        y1 -= height/20;
        x2 -= width/20;
        y2 -= 0;
    }
    noLoop();


    //Bottom Left
    x1 = 0;
    y1 = height/2;
    x2 = 0;
    y2 = height;

    for (loop = 0 ; loop < 12 ; loop += 1) {
        line(x1, y1, x2, y2);
        x1 += 0;
        y1 += height/20;
        x2 += width/20;
        y2 -= 0;
    }
    noLoop();


    //Bottom Right
    x1 = width;
    y1 = height/2;
    x2 = width;
    y2 = height;

    for (loop = 0 ; loop < 12 ; loop += 1) {
        line(x1, y1, x2, y2);
        x1 += 0;
        y1 += height/20;
        x2 -= width/20;
        y2 -= 0;
    }
    noLoop();
    
    rectMode(CENTER);
    rect(width/2, height/2, height/2, height/2);
    stroke(200);

    //Middle Box top left
    x1 = width/2 - height/4;
    y1 = 3*height/4;
    x2 = width/2 - height/4;
    y2 = height/4;

    for (loop = 0 ; loop < 21 ; loop += 1) {
        line(x1, y1, x2, y2);
        x1 += 0;
        y1 -= height/40;
        x2 += height/40;
        y2 -= 0;
    }
    noLoop();


    //Middle Box bottom right
    x1 = width/2 + height/4;
    y1 = height/4;
    x2 = width/2 + height/4;
    y2 = 3*height/4;

    for (loop = 0 ; loop < 21 ; loop += 1) {
        line(x1, y1, x2, y2);
        x1 += 0;
        y1 += height/40;
        x2 -= height/40;
        y2 -= 0;
    }
    noLoop();
    
    noStroke();
    fill(255,235,0);
    ellipse(width/2, height/2, height/7, height/7);
    //I tried to make a creepy-ish eye here
}