Lanna Lang – Project 04 – String Art

sketch_lanna2

//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project 04 String Art

var c1, c2; //variables for the sky gradient
var inches = 2; //variables for the person
var head = 6*inches; //variables for the person
var bodyH = 4*head; //variables for the person
var bodyW = bodyH*0.4; //variables for the person

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

    c1 = color('#ab0068'); //sunset purple color
    c2 = color('#ff6c02'); //sunset orange color
    setGradient(c1, c2);

}

function draw() {
    noStroke();
    //draw the sea
    fill('#1b5f5e');
    rect(0, 200, width, height / 3);

    //draw the top left star
    //top left
    var x1 = 60;
    var y1 = 10;
    var x2 = 45;
    var y2 = 50;

    for (var i = 0; i < 5; i++) {
        stroke('#e3c878');
        line(x1, y1, x2, y2);
        x2 -= 7;
        y1 += 6;
    }
  
    //draw the top left star
    //top right
    var x1 = 60;
    var y1 = 10;
    var x2 = 75;
    var y2 = 50;

    for (var i = 0; i < 5; i++) {
        stroke('#e3c878');
        line(x1, y1, x2, y2);
        x2 += 7;
        y1 += 6
    }
  
    //draw the top left star
    //bottom left
    var x1 = 34;
    var y1 = 39;
    var x2 = 70;
    var y2 = 100;
  
    for (var i = 0; i < 5; i++) {
        stroke('#e3c878');
        line(x1 + 10, y1 + 10, x2, y2 - 6);
        x1 -= 7;
        y2 -= 6;
    }
  
    //draw the top left star
    //bottom right
    var x1 = 77;
    var y1 = 90;
    var x2 = 74;
    var y2 = 50;
  
    for (var i = 0; i < 5; i++) {
        stroke('#e3c878');
        line(x1 - 7, y1, x2, y2);
        x2 += 7;
        y1 -= 5;
    }

    //draw the bottom right star
    //top left
    var x1 = 360;
    var y1 = 90;
    var x2 = 345;
    var y2 = 130;

    for (var i = 0; i < 5; i++) {
        stroke('#e3c878');
        line(x1, y1, x2, y2);
        x2 -= 7;
        y1 += 6;
    }
  
    //draw the bottom right star
    //top right
    var x1 = 360;
    var y1 = 90;
    var x2 = 375;
    var y2 = 130;

    for (var i = 0; i < 5; i++) {
        stroke('#e3c878');
        line(x1, y1, x2, y2);
        x2 += 7;
        y1 += 6
    }
  
    //draw the bottom right star
    //bottom left
    var x1 = 334;
    var y1 = 119;
    var x2 = 370;
    var y2 = 180;
  
    for (var i = 0; i < 5; i++) {
        stroke('#e3c878');
        line(x1 + 10, y1 + 10, x2, y2 - 6);
        x1 -= 7;
        y2 -= 6;
    }
  
    //draw the bottom right star
    //bottom left
    var x1 = 377;
    var y1 = 170;
    var x2 = 374;
    var y2 = 130;
  
    for (var i = 0; i < 5; i++) {
        stroke('#e3c878');
        line(x1 - 7, y1, x2, y2);
        x2 += 7;
        y1 -= 5;
    }
  
    //draw the right sail
    var x1 = 200;
    var y1 = 50;
    var x2 = 230;
    var y2 = 230;

    for (var i = 0; i < 7; i++) {
        stroke('#ded8c0');
        line(x1, y1, x2, y2);
        x2 += 30;
        y1 += 5;
    }
  
    //draw the left sail
    var x1 = 200;
    var y1 = 50;
    var x2 = 220;
    var y2 = 230;
  
    for (var i = 0; i < 15; i++) {
        stroke( '#ded8c0');
        line(x1, y1, x2, y2);
        x2 -= 10;
        y1 += 10;
    }
  
    //draw the person
    stroke('#9ea9f0');
    fill('#ccc1ff');
    circle(130, 210, head);
    ellipse(130, 210 + head*0.5 + bodyH*0.5, bodyW, bodyH);
  
    //draw the brown boat
    noStroke();
    fill('#a34a28');
    beginShape();
    vertex(80, 230);
    vertex(420, 230);
    vertex(370, 280);
    vertex(130, 280);
    endShape(CLOSE);

}

//drawing a linear gradient 
//for the sunset
function setGradient(c1, c2) {
    noFill();
    for (var y = 0; y < height; y++) {
        var inter = map(y, 0, height, 0, 1);
        var c = lerpColor(c1, c2, inter);
        stroke(c);
        line(0, y, width, y);
    }
}

I tried experimenting using string art to create an actual image as people also do when they physically do string art, and I also played around with color and creating gradients, which I never attempted before. It was really difficult for me at first to envision how to create the stars, but once I started, I slowly understood what to do for each part.