Project 4: String Art

Good luck four leaf clover with abstract land and sky

sketch
// Ana Furtado 
// Section E
// Project 4 -- String Art

//Q1
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 40;
//Q2
var bx1;
var by1;
var bx2;
var by2;
//Q3
var ax1;
var ay1;
var ax2;
var ay2;
//Q4
var cx1;
var cy1;
var cx2;
var cy2;
//Right
var ex1;
var ey1;
var ex2;
var ey2;
//Left
var fx1;
var fy1;
var fx2;
var fy2;

function setup() {
    createCanvas(400, 300);
    background(255); // white background with abstract land and sky
    strokeWeight(2);
    

    //Sky
    //Q1 lines
    stroke(179,243,255); //light blue
    line(0, 50, 350, 0);
    line(0, 250, 50, 0);
    dx1 = (350-0)/numLines;
    dy1 = (0-50)/numLines;
    dx2 = (50-0)/numLines;
    dy2 = (0-250)/numLines;

    //Q2 lines
    stroke(179,243,255); //light blue
    line(350, 0, 400, 250);
    line(50, 0, 400, 50);
    bx1 = (400-350)/numLines;
    by1 = (250-0)/numLines
    bx2 = (400-50)/numLines
    by2 = (50-0)/numLines
    
    //Land
    //Q3 lines
    stroke(192,255,135); //light green
    line(350, 300, 400, 50);
    line(50, 300, 400, 250);
    ax1 = (400-350)/numLines;
    ay1 = (50-300)/numLines
    ax2 = (400-50)/numLines
    ay2 = (250-300)/numLines

    //Q4 lines
    stroke(192,255,135); //light green
    line(350, 300, 0, 250); 
    line(50, 300, 0, 50);
    cx1 = (0-350)/numLines;
    cy1 = (250-300)/numLines
    cx2 = (0-50)/numLines
    cy2 = (50-300)/numLines


    //Center (4 leaf clover)
    //Right
    strokeWeight(1.25);
    stroke(92,255,92); //green
    line(210, 75, 190, 225); 
    line(275, 140, 125, 160); 
    ex1 = (190-210)/numLines;
    ey1 = (225-75)/numLines
    ex2 = (125-275)/numLines
    ey2 = (160-140)/numLines

    //Left
    stroke(92,255,92); //green
    line(210, 225, 190, 75); 
    line(275, 160, 125, 140); 
    fx1 = (190-210)/numLines;
    fy1 = (75-225)/numLines
    fx2 = (125-275)/numLines
    fy2 = (140-160)/numLines

}

function draw() {
    //Sky
    //Q1 -- upper left sky
    strokeWeight(1);
    var x1 = 0;
    var y1 = 50;
    var x2 = 0;
    var y2 = 250;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(179,243,255); //light blue
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    //Q2 -- upper right sky
    var x1 = 350;
    var y1 = 0;
    var x2 = 50;
    var y2 = 0;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(179,243,255); //light blue
        line(x1, y1, x2, y2);
        x1 += bx1;
        y1 += by1;
        x2 += bx2;
        y2 += by2;
    }

    //Land
    // Q3 -- bottom right land
    var x1 = 350;
    var y1 = 300;
    var x2 = 50;
    var y2 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(192,255,135); //light green
        line(x1, y1, x2, y2);
        x1 += ax1;
        y1 += ay1;
        x2 += ax2;
        y2 += ay2;
    }

    //Q4 -- bottom left land
    var x1 = 350;
    var y1 = 300;
    var x2 = 50;
    var y2 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(192,255,135); //light green
        line(x1, y1, x2, y2);
        x1 += cx1;
        y1 += cy1;
        x2 += cx2;
        y2 += cy2;
    }

    //Green Center (4 leaf clover)
    //Right
    strokeWeight(1.25);
    var x1 = 210;
    var y1 = 75;
    var x2 = 275;
    var y2 = 140;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(92,255,92); //green
        line(x1, y1, x2, y2);
        x1 += ex1;
        y1 += ey1;
        x2 += ex2;
        y2 += ey2;
    }

    //Left
    var x1 = 210;
    var y1 = 225;
    var x2 = 275;
    var y2 = 160;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(92,255,92); //green
        line(x1, y1, x2, y2);
        x1 += fx1;
        y1 += fy1;
        x2 += fx2;
        y2 += fy2;
    }

    //Stem
    strokeWeight(3);
    stroke(92,255,92); //green
    line(200,150, 200, 270)

    noLoop();
    

}

The most challenging part of this project was keeping track of which variables were being used and if the coordinates were right.

Leave a Reply