Project-04: String Art

For my project, I was inspired by some string art I had seen a while ago at the beach. I remember seeing how lines would give the sails of a sailboat depth, and almost make it look slightly 3-D. I thought that making the sails were challenging because the sails are all different shapes and face different directions, and it took me a while to figure out how to perfectly layer the lines.

If you move the mouse around the screen, the lighthouse light will follow it around the page. Though this assignment focuses mostly on lines, I also incorporated other shapes and features in order to give the overall project that “finished” look.

sketch
//Annie Kim
//anniekim
//SectionB
var dx1;
var dy1;
var dx2;
var dy2;

var numLines = 30;
var boatLines = 40;

var mx1;
var my1;
var mx2;
var my2;

var bx1;
var by1;
var bx2;
var by2;

var angle = 0;


function setup() {
    createCanvas(400, 300);
    background(100, 200, 255);;
    stroke(255);
    //left side sail lines
    line(60, 185, 150, 190); //left side sail horizontal
    line(150, 190, 210, 70); //left side sail vertical
    dx1 = (150 - 60)/numLines;
    dy1 = (190 - 185)/numLines;
    dx2 = (210 - 150)/numLines;
    dy2 = (70 - 190)/numLines;

    //middle sail lines
    line(230, 40, 155, 191); // vertical
    line(155, 191, 245, 195); //horizontal
    mx1 = (155-230)/numLines;
    my1 = (191-40)/numLines;
    mx2 = (245-155)/numLines;
    my2 = (195-191)/numLines;

    
    //right sail lines
    stroke(255);
    line(270, 70, 250, 195);
    line(250, 195, 310, 196);
    bx1 = (250-270)/numLines;
    by1 = (195-70)/numLines;
    bx2 = (310-250)/numLines;
    by2 = (196-195)/numLines;

    //water lines
    stroke(74, 152, 168);
    line(0, 150, 400, 150);
    line(0, 300, 400, 150);
    line(0, 150, 0, 300);
    line(400, 150, 400, 300);


}

function draw() {

    //skyline & waterline
    stroke(179, 213, 244);
    strokeWeight(1.2);
    fill(179, 213, 244); //light blue sky
    rect(0, 0, 400, 150); //top rect sky
    //sun rising
    push();
    translate(100, 150);
    rotate(radians(angle));
    fill(242, 244, 190);
    noStroke();
    circle(50, 150, 120);
    pop();
    angle = angle + 1;
    //waters/waterline
    fill(74, 152, 168); //teal waters
    rect(0, 150, 400, 150); //bottom rect - waterline

    stroke(44, 122, 138); //waves webbing
    for (var i = 0; i <= 50; i ++) {
    	line(0, 300, 0 + 8*i, 151);
    }
    for (var i = 0; i <= 50; i ++) {
    	line(400, 300, 400 - 8*i, 151);
    }
    for (var i = 0; i <= 30; i ++) {
    	line(0, 150, 0 + 13.333*i, 300);
    }
    for (var i = 0; i <= 30; i ++) {
    	line(400, 150, 400 - 13.3333*i, 300);
    }
    //lighthouse building
    stroke(200);
    fill(200); //light grey color
    quad(370, 150, 375, 70, 385, 70, 390, 150); //base of lighthouse

    rect(374, 50, 12, 10); // the part of the lighthouse where the light will come from

    stroke(52, 54, 76); //dark navy color
    fill(52, 54, 76);
    quad(375, 70, 372, 60, 388, 60, 385, 70); //walk base of lighthouse

    triangle(372, 50, 380, 40, 388, 50); //top of lighthouse


    //hill
    fill(127, 105, 91); //brown color for sand under lighthouse
    stroke(127, 105, 91);
    strokeWeight(1);
    point(328, 151); //making lighthouse hill points
    point(331, 146);
    point(334, 143);
    point(336, 142);
    point(339, 140);
    point(345, 138);
    point(350, 136);
    point(355, 136);
    point(360, 136);
    point(365, 135);
    point(370, 134);
    point(375, 134);
    point(380, 133);
    point(385, 133);
    point(390, 132);
    point(400, 130);
    point(400, 151);

    beginShape();
    curveVertex(328, 151); //connecting hill points
    curveVertex(328, 151);
    curveVertex(331, 146);
    curveVertex(334, 143);
    curveVertex(336, 142);
    curveVertex(339, 140);
    curveVertex(345, 138);
    curveVertex(350, 136);
    curveVertex(355, 135);
    curveVertex(360, 136);
    curveVertex(365, 135);
    curveVertex(370, 134);
    curveVertex(375, 134);
    curveVertex(380, 133);
    curveVertex(385, 133);
    curveVertex(390, 132);
    curveVertex(400, 130);
    curveVertex(400, 151);
    curveVertex(400, 151);
    endShape();
    
    //lights of lighthouse
    fill(248, 226, 94);
    stroke(248, 226, 94);
    quad(374, 51, 374, 59, mouseX, mouseY + 12, mouseX, mouseY - 8);

    //birds
    stroke(40);
    strokeWeight(2);
    point(88, 63);
    point(96, 65);
    point(100, 70);
    point(104, 65);
    point(112, 63);

    point(138, 33);
    point(146, 35);
    point(150, 40);
    point(154, 35);
    point(162, 33);
    
    strokeWeight(1);
    line(88, 63, 96, 65);
    line(96, 65, 100, 70);
    line(100, 70, 104, 65);
    line(104, 65, 112, 63);

    line(138, 33, 146, 35);
    line(146, 35, 150, 40);
    line(150, 40, 154, 35);
    line(154, 35, 162, 33);

    stroke(255);
    strokeWeight(1.2);
	//left side sail
	var x1 = 60; 
	var y1 = 185;
	var x2 = 150;
	var y2 = 190;

	for (var i = 0; i <= numLines; i += 1) { //connecting webs of left sail
		line(x1, y1, x2, y2);
		x1 += dx1;
		y1 += dy1;
		x2 += dx2;
		y2 += dy2;
	}
	//noLoop();
    
    for (var i = 0; i <= 15; i++) { //adding vertical lines for left sail
    	line(60 + 6*i, 185 + 0.33333*i, 210 - 4*i, 70 + 8*i);
    }

	//middle sail
	var m1 = 230;
	var m2 = 40;
	var m3 = 155;
	var m4 = 191;

		for (var i = 0; i <= numLines; i += 1) { //connecting webs of middle sail
		line(m1, m2, m3, m4);
		m1 += mx1;
		m2 += my1;
		m3 += mx2;
		m4 += my2;
		
	}
	//noLoop();

	for (var i = 0; i <= 20; i ++) { //adding vertical lines for middle sail
		line(155 + 4.5*i, 191 + 0.2*i, 155 + 3.75*i, 191 - 7.505*i);
	}
	
    
    //right sail
    var b1 = 270;
    var b2 = 70;
    var b3 = 250;
    var b4 = 195;

    for (var i = 0; i <= numLines; i += 1) { //connecting webs of right sail
    	line(b1, b2, b3, b4);
    	b1 += bx1;
    	b2 += by1;
    	b3 += bx2;
    	b4 += by2;
    }
    //noLoop();
	
	for (var i = 0; i <= 10; i ++) { //adding vertical lines for right sail
		line(250 + 6*i, 197 - 0.2*i, 250 + 2*i, 195 - 12.5*i);
	} 

    //boat waves lines
    stroke(14, 92, 108);
    line(260, 243, 375, 220);
    line(260, 245, 370, 240);
    line(260, 250, 400, 250);
    line(260, 255, 390, 260);
    line(270, 260, 375, 280);

    //the bottom of the sailboat 
    stroke(230, 150, 50);
    strokeWeight(1);

    //bottom of sail boat

    //first horizontal line
    line(60, 190, 310, 200); 
    //second horizontal 
    line(100, 260, 270, 260);
    //left side of lower boat
    line(60, 190, 100, 260);
    //right side of lower boat 
    line(310, 200, 270, 260);

    fill(250, 180, 100);
    quad(60, 190, 310, 200, 270, 260, 100, 260);

    for (var i = 0; i <= 30; i ++) {
    	    line(60, 190, 100 + 5.66666*i, 260); //hatching from left top corner to bottom line

    }
    
    for (var i = 0; i <= 30; i++) {
    	line(310, 200, 270 - 5.66666*i, 260); //hatching from top right corner to bottom line 
    }

    stroke(210, 140, 30);
    for (var i = 0; i <= 15; i++) { //hatching from top left corner to right side
    	line(60, 190, 270 + 2.6666*i, 260 - 4*i);
    }

    for (var i = 0; i <= 15; i++) { //hatching from top right corner to left side
    	line(310, 200, 100 - 2.666*i, 260 - 4.6666*i);
    }

 


}

Leave a Reply