Category: Project-04-String-Art

Vicky Zhou – Project 04 – String Art

sketch

/* Vicky Zhou
Section E 
vzhou@andrew.cmu.edu
Project 04 -String Art*/

var x; //first x cord
var y; //first y cord
var x2; //second x cord
var y2; //second y cord
var dir =1; //direction of lines

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

function draw() {
	for (var i = 0; i <= 1; i += 0.05){
		//creates upper right hand corner
		push();
		stroke(255);
		strokeWeight(0.02);
		x = lerp(0, width, i);
		y = 0;
		y2 = lerp(0, height, i);
		x2 = width;
		line(x, y, x2, y2);	
		pop();

		//creates lower left hand corner 
		push();
		stroke(255);
		strokeWeight(0.02);
		x = 0;
		y = lerp(0, height, i);
		x2 = lerp(0, width, i);
		y2 = height;
		line(x, y, x2, y2);
		pop();

	}

	//creates upper left hand corner in light yellow
	for(var i = 0; i <= width; i += 0.05){
		stroke(246, 236, 196);
			push();
			strokeWeight(0.5);
			x = lerp(width/2, height, i);
			y = 0;
			x2 = 0;
			y2 = lerp(height, width/2, i);
			line(x, y, x2, y2);
			pop();
	}

	//creates upper right hand corner in blue
	for(var i = 0; i <= width; i += 0.05){
		stroke('BLUE');
			push();
			strokeWeight(1);
			x = lerp(width/2, height, i);
			y = 0;
			x2 = 0;
			y2 = lerp(height, width/2, i);
			line(x, y, x2, y2);
			pop();
	}

	//creates lower right hand corner in white
	for(var i =0; i <= height; i += 0.05){
		stroke(255);
			push();
			strokeWeight(0.5);
			x = width;
			y = lerp(0, width/2, i);
			x2 = lerp(width/2, 0, i);
			y2 = height;
			line(x2, y2, x, y);
			pop();
	}

	//creates lower right hand corner in green
	for(var i =0; i <= height; i += 0.05){
		stroke('YELLOW');
			push();
			strokeWeight(1);
			x = width;
			y = lerp(0, width/2, i);
			x2 = lerp(width/2, 0, i);
			y2 = height;
			line(x2, y2, x, y);
			pop();
	}

	//creates top right red
	for(var i = 0; i <= width; i += 0.02){
		stroke('RED');
		strokeWeight(0.02);
		x = 0;
		y = lerp(width/3, width*(2/3), i);
		x2 = lerp(width/3, width*(2/3), i);
		y2 = 300;
		line(x, y*mouseY, x2, y2);
		}

}

Making this was a lot of fun and very interesting because of the ability to play with different line weights, and the different spacing with the lerp function. However, it got frustrating at times when I wanted to “flip” or “reflect” the exact bottom or top because sometimes I would have trouble remembering what x-cord and y-cord points would stay static and which ones would change. Overall, this project is cool because it provides for really dynamic and trippy motion graphic opportunities.

Justin Yook – Project 04 – String Art

stringArt

//Justin Yook
//Section C
//jyook@andrew.cmu.edu
//Project 04


var x1 = 0; 
var y1 = 0; 
var x2 = 0; 
var y2 = 300; 

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

function draw() {
    background(0);
    //generate lines on BOTTOM LEFT (1st curve) (green)
    for (var step1 = 0; step1 <= 1; step1 += .02) {
        x2 = lerp(0, 400, step1);
        y1 = lerp(0, 300, step1);
        stroke(124, 252, 0);
        line(x1, y1, x2, y2);
    }
 
    //generate lines on TOP LEFT (2st curve) (green)
    for (var step2 = 0; step2 <= 1; step2 += .02){
        x2 = lerp(0, 400, 1 - step2);
        y1 = lerp(0, 300, step2);
        stroke(124, 252, 0);
        line(x1, y1, x2, height - y2);
    }

    //generate lines on BOTTOM LEFT (3nd curve) (red)
    for (var step3 = 0; step3 <= 1; step3 += .03) {
        x2 = lerp(0, 400, 2 * step3);
        y1 = lerp(0, 300, step3);
        stroke(255, 0, 0);
        line(x1, y1, x2, y2);
    }

    //generate lines on TOP LEFT (4rd curve) (red)
    for (var step4 = 0; step4 <= 1; step4 += .03){
        x2 = lerp(0, 400, 2 * (1 - step4));
        y1 = lerp(0, 300, step4);
        stroke(255, 0, 0);
        line(x1, y1, x2, height - y2);
    }

    //generate lines on BOTTOM LEFT (5th curve) (blue)
    for (var step5 = 0; step5 <= 1; step5 += .04) {
        x2 = lerp(0, 400, 4 * step5);
        y1 = lerp(0, 300, step5);
        stroke(0, 204, 204);
        line(x1, y1, x2, y2);
    }

    //generate lines on TOP LEFT (6th curve) (blue)
    for (var step6 = 0; step6 <= 1; step6 += .04){
        x2 = lerp(0, 400, 4 * (1 - step6));
        y1 = lerp(0, 300, step6);
        stroke(0, 204, 204);
        line(x1, y1, x2, height - y2);
    }
}

For my string art,  I wanted to create something asymmetrical because a lot of string art I usually see are not. So I decided to make “layers” of curves from the same sides (bottom left, and top left) and give a different color for each layer. Colors are supposed to represent the basic values of red, green, and blue.

Mimi Jiao – Project 4 String Art – Section E

check out the mouse click~
sketch

var x; //increment variable for width for bottom curves
var y; //increment variable for height for bottom curves
var a; //increment variable for width for top curves
var b; //increment variable for height for top curves
var angleIncrement; //location for where to draw line in circle
var r; //radius of the center strings forming circle

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

function draw() {
    background(0);
    x = width / mouseX * 5;
    y = height / mouseY * 5;
    a = width / mouseY * 10;
    b = height / mouseX * 10;
    angleIncrement = mouseX / 100;
    r = width;

    //center circle
    if (mouseIsPressed) {
        for(var angle = 0; angle < 360; angle += mouseX / 100) {
            stroke(0, 0, 255);
            push();
            translate(width / 2, height / 2);
            line((r * sin(angle)) / tan(angle),
                  r * sin(angle),
                  r * sin(angle + angleIncrement) / tan(angle + angleIncrement),
                  r * sin(angle + angleIncrement));
            pop();
        }
    }

    //drawing the four curves on each corner of the canvas
    for(var i = 0; i < 50; i ++) {
        strokeWeight(1);

        //draws the first 20 red lines on the bottom left corner
        //draws green lines for the rest
        if (i >= 30) {
            stroke(0, 255, 0);
            line(0, y * i, x * i, height);
        }else {
            strokeWeight(1);
            stroke(i * 30, 0, 0);
            line(0, y * i,  (x * i), height);
        }

        //red on bottom right hand side 
        //stroke(255,0,0);
        stroke(i * 15, 0, 0);
        line(width, y * i, width - (x * i), height);

        //color changing curves on top 
        stroke(mouseX, 0, 255);
        line(0, height - (a * i), b * i, 0);
        line(width - (b * i), 0, width, height - (a * i));     
    }
}

I first started out making the most basic curve. After that, I began building symmetries and color changes into the code to make it more interactive and fun. Figuring out the circle took me a while since I haven’t touched math ever since junior year in high school, but the result was rewarding and I had a lot of fun doing so.

Rjpark – Project 04 – String Art

rjpark_stringart

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

function draw() {
    // white boxes
    fill(255);
    noStroke();
    rect(100, 0, 100, 150); // top left

    fill(255);
    noStroke();
    rect(300, 0, 100, 150); // top right

    fill(255);
    noStroke();
    rect(0, 150, 100, 150); // bottom left

    fill(255);
    noStroke();
    rect(200, 150, 100, 150); // bottom right

    // variables for x and y coordinates
    x1 = 0; // starting coordinate bottom left
    y1 = 300; // starting coordinate bottom left
    x2 = 0;
    y2 = 150; // creates straight line across at height of 150
    
    x3 = 200; // starting coordinate bottom center left
    y3 = 300; // starting coordinate bottom center left
    x4 = 0;
    y4 = 150; // creates straight line across at height of 150

    x5 = 200; // starting coordinate bottom center right
    y5 = 300; // starting coordinate bottom center right
    x6 = 0
    y6 = 150; // creates straight line across at height of 150

    x7 = 400; // starting coordinate bottom right
    y7 = 300; // starting coordinate bottom right
    x8 = 0
    y8 = 150; // creates straight line across at height of 150

    x9 = 100; // starting coordinate top left
    y9 = 0; // starting coordinate top left
    x10 = 0;
    y10 = 150; // creates straight line across at height of 150

    x11 = 100; // starting coordinate top center left
    y11 = 0; // starting coordinate top center left
    x12 = 0;
    y12 = 150; // creates straight line across at height of 150

    x13 = 300; // starting coordinate top center right
    y13 = 0; // starting coordinate top center right
    x14 = 0;
    y14 = 150; // creates straight line across at height of 150

    x15 = 300; // starting coordinate top right
    y15 = 0; // starting coordinate top right
    x16 = 0;
    y16 = 150; // creates straight line across at height of 150

    // curves
    stroke(0);
    strokeWeight(1);
    // bottom left
    for (var a = 0; a <= 1; a += 0.1) {
        x2 = lerp(0, width/4, a); // lines go out to the right from 0 to 100 pixels
        y1 = lerp(height, height/2, a); // lines go up from 300 to 150 pixels
        line(x1, y1, x2, y2);
    }

    stroke(255);
    strokeWeight(1);
    // bottom center left
    for (var b = 0; b <= 1; b += 0.1) {
        x4 = lerp(width/2, width/4, b); // lines go out to the left from 400 to 300 pixels
        y3 = lerp(height, height/2, b); // lines go up from 300 to 150 pixels
        line(x3, y3, x4, y4);
    }

    stroke(0);
    strokeWeight(1);
    // bottom center right
    for (var c = 0; c <= 1; c += 0.1) {
        x6 = lerp(width/2, 3*width/4, c); // lines go out to the left from 400 to 300 pixels
        y5 = lerp(height, height/2, c); // lines go up from 300 to 150 pixels
        line(x5, y5, x6, y6);
    }

    stroke(255);
    strokeWeight(1);
    // bottom right
    for (var d = 0; d <= 1; d += 0.1) {
        x8 = lerp(width, 3*width/4, d); // lines go out to the left from 400 to 300 pixels
        y7 = lerp(height, height/2, d); // lines go up from 300 to 150 pixels
        line(x7, y7, x8, y8);
    }

    stroke(255);
    strokeWeight(1);
    // top left
    for (var e = 0; e <= 1; e += 0.1) {
        x10 = lerp(width/4, 0, e); // lines go out to the left from 100 to 0 pixels
        y9 = lerp(0, height/2, e) // lines go down from 0 to 150 pixels
        line(x9, y9, x10, y10);
    }

    stroke(0);
    strokeWeight(1);
    // top center left
    for (var f = 0; f <= 1; f += 0.1) {
        x12 = lerp(width/4, width/2, f); // lines go out to the left from 100 to 200 pixels
        y11 = lerp(0, height/2, f) // lines go down from 0 to 150 pixels
        line(x11, y11, x12, y12);
    }

    stroke(255);
    strokeWeight(1);
    // top center right
    for (var g = 0; g <= 1; g += 0.1) {
        x14 = lerp(3*width/4, width/2, g); // lines go out to the left from 300 to 200 pixels
        y13 = lerp(0, height/2, g) // lines go down from 0 to 150 pixels
        line(x13, y13, x14, y14);
    }

    stroke(0);
    strokeWeight(1);
    // top right
    for (var h = 0; h <= 1; h += 0.1) {
        x16 = lerp(3*width/4, width, h); // lines go out to the left from 300 to 400 pixels
        y15 = lerp(0, height/2, h) // lines go down from 0 to 150 pixels
        line(x15, y15, x16, y16);
    }
}

My inspiration for this project was sine waves and my own twist to the project was dividing things into 2. So, I first split the sine wave into the arch and the dip. Then I divided the canvas into top and bottom and put the arch on the bottom half and the dip on the top half. Afterwards, I chose 2 colors (white and black) and made every box in both the top and bottom half of the canvas switch colors (without the same colored boxes on top of each other). Then I colored in the lines/curves I made with the opposite color of the box that they’re in. Lastly, I shifted the top half of the canvas by half a curve (or 1 box). The resulting image is what I have above.

Austin Treu – Project 04 – String Art

atreu – project04

//Austin Treu
//atreu
//Project 04
//Section C

var x1, y1, x2, y2;

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

    //for loop to generate points and draw lines
    for(var i = 0; i < 100; i++){
        //new points
        x1 = lerp(width,0, i/100);
        y1 = lerp(0,height, i/100);
        x2 = lerp(0,width, i/50);
        y2 = lerp(height,0, i/50);
        //draw red lines
        stroke(255, 0, 50);
        line(x1, height/i, 0, y1);
        line(width-x1, height/i, width,y1);

        //generate points
        x1 = lerp(width/2,0, i/100);
        y1 = lerp(height/2,0, i/100);
        x2 = lerp(width/2,0, i/50);
        y2 = lerp(height,0, i/50);
        //draw blue lines
        stroke(50, 0, 255);
        line(x1, y1, x2, y2);
        line(x2, y1, x1, y2);
        line(width-x1, y1, width-x2, y2);
        line(width-x2, y1, width-x1, y2)

        //generate new points
        x1 = lerp(width/i,width, i/100);
        y1 = lerp(height/i,height, i/100);
        x2 = lerp(0,width, i/75);
        y2 = lerp(0,height, i/75);
        //draw yellow lines
        stroke(175, 150, 0);
        line(x2, y2, x1, height);
        line(width-x2, y2, width-x1, height);

        //new points
        x1 = lerp(0,width/2, i/100);
        y1 = lerp(0,height/2, i/100);
        x2 = lerp(0,width-width/7.5, i/200);
        y2 = lerp(0,height/2, i/200);
        //draw green lines
        stroke(0, 255, 150);
        line(x2, y2, x1, y1);
        line(width-x2, y2, width-x1, y1);
    }
}

Learning how to properly utilize lerp() was an interesting process to experiment with, as it offered a huge variety of different options once I understood. I spent the time I worked on this completely focused on making it symmetrical, which changed my focus throughout the project.

Project 04 – Parametric Flower (try scrolling)

sketch

// Kevin Thies
// kthies@andrew.cmu.edu
// Section C
// Project 04 - String Art -
// not a web generator :'(
// just a parametric  flower

var lerps; // how many iterative lerp points on lines
var lerpStep = .1;
var sides = 6; // polygon of n sides

var x; // x coordinate of exterior axis
var y; // y coorinate of exterior axis
var lerpX; // lerp on x axis
var lerpY; // lerp on y axis

var radius; // shortcut for the radius of polygon

function setup() {

    // basic setup stuff
    angleMode (DEGREES);
    createCanvas (300,400);
    background (140);

    // defining variable that depend on p5js
    radius = width/2 - 20; // there's that shortcut
    lerps = 1 / lerpStep; // here's the amount of lerps on the lines

}

function draw() {

    // put origin in center of canvas
    translate (width/2, height/2);

    //have a for loop that rotates petals
    for (var i = 0; i < sides; i ++) {

        // have a for loop that draws one half of a petal
        for (var j = 0; j < lerps; j ++) {

            // law of sines calculation for the axis that makes up exterior lines
            var HYPOTENUSE = radius / sin(90);
            x = HYPOTENUSE * sin(90 - (360 / sides));
            y = HYPOTENUSE * sin(360 / sides);


            //get lerp values on new axis
            lerpX = lerp (x, radius, lerpStep * j);
            lerpY = 1 - lerp (y, 0, lerpStep * j);

            // connect the points on the lines
            line (radius - radius * lerpStep * j, 0, lerpX, - lerpY);


            //This here is just the same as the above except flipped    //
            push();                                                     //
            scale(1,-1);                                                //
                                                                        //
            // law of sines calculation for next line                   //
            var HYPOTENUSE = radius / sin(90);                          //
            x = HYPOTENUSE * sin(90 - (360 / sides));                   //
            y = HYPOTENUSE * sin(360 / sides);                          //
                                                                        //
            //get lerp values on new axis                               //
            lerpX = lerp (x, radius, lerpStep * j);                     //
            lerpY = 1 - lerp (y, 0, lerpStep * j);                      //
                                                                        //
            // connect the points on the lines                          //
            line (radius - radius * lerpStep * j, 0, lerpX, - lerpY);   //
            pop();                                                      //
        }

        //rotate the full petal around to make a polygon
        rotate (360/sides);
    }
}

// number of sides changes based on scrolled direction
function mouseWheel() {

    // cover all that was just drawn
    background(140);

    // on scroll, change number of splines but don't take it as input
    sides += event.delta/50;
    return false;
}

This was a tough project, mostly because I had to go back and partially re-learn trigonometry. That being said I started by making a parametric spider web generator, but that didn’t fit the guidelines nearly well enough. So I took a lot of what I’d learned and wrote for that and turned it into this. Also, shoutout to the Law of Sines, you’re my hero. Maybe one day I’ll be able to break out the web generator, but until then, here’s a parametric flower.

Xindi Lyu-Project 04-String art-Section A

sketch

 /*Xindi Lyu
 Section A
 xindil@andrew.cmu.edu
 project_04*/
 function setup() {
     createCanvas(400, 300);
     background(240);
}

 function draw() {
     background(240);
    
     var c=5;


     
     
      //background
      for(var b=0; b<150; b+=c){
        strokeWeight(0.5);
    stroke(120,200,230);
    line(400,b,4/3*b,0);//top-right corner
    stroke(200,200,230);
    line(0,b,400-4/3*b,0);//top-left corner
    stroke(130,170,170);
    line(400,300-b,4/3*b,300);//bottom-right corner
    stroke(250,170,170);
    line(0,300-b,400-4/3*b,300);//bottom left corner
   }


     
     for(var a=50; a<200; a+=c){
      strokeWeight(0.5);
      stroke(100,80,150);
      line(a,-4*a/3+850/3,a+150,4*a/3-150/3);//top of the triangle
      stroke(150,70,120);
      line(a+150,4*a/3-150/3,400-a,215);//the bottom-right corner of the triangle
      

     
 }
for(var a=50; a<200; a+=c){
      strokeWeight(0.5);
      stroke(100,80,150);
      line(a,4*a/3+50/3,a+150,-4*a/3+1000/3);//the btop part of the up-side-down triangle
      stroke(150,70,120);
      line(a,4*a/3+50/3,250-a,82);//the bottom left part of the -upside down triangle
      
      
    }
      
          



 }

For this project I experimented with line weights as well as the elegance of cooperating curves with sharper angles, and also symmetry and asymmetries.

Kyle Leve-Project-04-String-Art

sketch

// Kyle Leve
// Section A
// kleve@andrew.cmu.edu
// Project-04-String Art

var cirX = 200;
var cirY = 150;

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

function draw() {
	// Creates red lines
	for (var a = 0; a < 1.5; a += 0.04) {
		strokeWeight(0.4);
		stroke('red');
		x1 = lerp(0, width / 2, a);
		y1 = lerp(0, height * 2, a);
		x2 = lerp(width * 2, 0, a);
		y2 = lerp(height / 2, 0, a);

		line(x1, 0, width, y1);
		line(x2, height, 0, y2);
		line(x1, height, width, y2);
		line(x2, 0, 0, y1);
	}
	// Creates white fade at the bottom
	for (var b = 0; b < 300; b++) {
		strokeWeight(0.5);
		stroke(255);
		line(b * 10, 10, b, 310);
	}
	// Creates ellipse in the center
	fill(0);
	ellipse(cirX, cirY, 100, 100);

	// Creates gray lines
	for (var c = 0; c < 1.2; c += 0.03) {
		strokeWeight(0.2);
		stroke(170);
		x1 = lerp(0, width / 5, c);
		y1 = lerp(0, height * 5, c);
		x2 = lerp(width * 5, 0, c);
		y2 = lerp(height / 5, 0, c);

		line(x1, 0, width, y1);
		line(x2, height, 0, y2);
		line(x1, height, width, y2);
		line(x2, 0, 0, y1);
	}

	// Creates two dark red triangles in the circle
	for (var d = 0; d < 0.75; d += 0.08) {
		strokeWeight(1.25);
		stroke('darkred');
		x1 = lerp(150, 200, d);
		y1 = lerp(150, 200, d);
		x2 = lerp(150, 200, d);
		y2 = lerp(150, 200, d);

		line(x1 + 25, 120, 175, y1 - 30);
		line(x2 + 50, 150, 200, y2);
		line(x1 + 50, 150, 200, y2);
		line(x2 + 25, 120, 175, y1 - 30);
    }
    nofill(); // I am not sure what this does but it makes the picture look cool!
}

I found this project to be really difficult since I did not know where to start. I ended up just trying to use the lerp() function until something showed up on the canvas, but once it did I began to understand what I was doing. Throughout the project I was able to learn how to grow and shrink lines and move them around. Overall, I found this project to be very informative and interesting to learn.

Hannah Cai—Project 4—String Art

/* Hannah Cai
Section C
hycai@andrew.cmu.edu
Project-04-String Art
*/

var x1 = 100;
var y1 = 50;
var x2 = 300;
var y2 = 250;
var t = 25;


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

function draw() {
    frameRate(40); //slowed down speed
    background(0,5); //translucent background
    stroke(255);
    strokeWeight(.3);

    //dotted square frame
    for (i = 100; i <= 300; i += 5) {
        point(i,50);
        point(i,250);
    }
    for (i = 50; i <= 250; i += 5) {
        point(100,i);
        point(300,i);
    }

    // bottom left and top right corner curves
    line(x1,250,100,y1);
    line(300,height - y1,width - x1,50);
    line(width - x1,250,100,height - y1);
    line(300,y1,x1,50);

    // top left and bottom right corner curves
    line(100,y2,x1,50);
    line(300,height - y2,width - x1,250);

    //string animation
    x1 += .5;
    y1 += .5;
    x2 -= .5;
    y2 -= .5;

    //constrain movement within square
    x1 = constrain(x1,100,300);
    y1 = constrain(y1,50,250);
    x2 = constrain(x2,100,300);
    y2 = constrain(y2,50,250);

    //resets string animation when it hits the square's sides
    if (x1 == 300 & y1 == 250 && x2 == 100 && y2 == 50) {
        x1 = x2;
        y1 = y2;
        y2 = 250;
    }
}

sketches/notes

Since this project required four curves, I focused on drawing those curves, and this animation sort of evolved from that process. It took a while for me to figure out how to make curves, and for me to figure out the math for each curve. I know that we were supposed to use for() loops for our strings, but I found using if() made more sense for all the different curves, since there were quite a few different parameters. I’ll probably edit my code to use for() loops instead of if() for the string code as a challenge for myself sometime in the future.

Jenna Kim (Jeeyoon Kim)- Project 4- String Art

jennakim04

/* Jenna Kim (Jeeyoon Kim)
Section E
jeeyoonk@andrew.cmu.edu
Project 04
*/

function setup() {
    createCanvas(400, 300);
    var fishX;
	var fishY;
	var fishH;
	var fishW;
}

function draw() {
	background(100,149,237);
	fishX = 150;
    fishY = 140;
    fishH = 50;
    fishW = 100;

    noStroke(0);
    fill(100, 200, 300); //tail
    triangle(fishX + fishW - 10, fishY, fishX + fishW + 50, fishY - 30, fishX + fishW + 50, fishY + 30); 
    fill(102, 196, 184) // body of the fish
    ellipse(fishX + fishW / 2, fishY, fishW, fishH); 
    fill(0); //eye
    ellipse(fishW * 1 / 5 + fishX, fishY - 10, 10, 10);

	var x1 = 1;
	var x2 = 10;
	var x3 = 0;
	var x4 = 40;
	var y1 = 1;
	var y2 = 3;
	var y3 = 30;
	var y4 = 80;

	// bottom LEFT
	for (var i = 0; i < width / 3; i ++){
		x1 += 30;
		y1 += 10;
		strokeWeight(1);
		stroke(10, 100, 132 );
		fill(0, 0, 0);
		line(i, y1, x1, height);

		x1 += 1;
		y1 += 3;
	}
	// top RIGHT
	for (var a = 0; a < width / 3; a ++){
		x2 += 10;
		y2 += 10;
		strokeWeight(1);
		stroke(255, 0, 0);
		line(width - a, y2 , x2, 1);

		x2 += 6;
		y2 += 5;
	}
	// top LEFT
	for (var b  = 0; b < height / 2; b ++){
		x3 += 15;
		y3 += 5;
		strokeWeight(1);
		stroke(255, 255, 255);
		line(b, height - y3, x3, 1);

		x3 += 6;
		y3 += 5;
	}
	// bottom RIGHT (SHIP LIGHT***)
	for (var f  = 0; f < height / 2; f ++){
		x4 += 5;
		y4 += 30;
		strokeWeight(1);
		stroke(255, 255, 0);
		line(f, height, x4, y4);

		x4 -= 1;
		y4 -= 30;
	}
	textSize(15);
	fill(250, 250, 250);
	text('quiz fishy', 170, 180)
	
}

Through this project, I learned how each variable works with each other to create curves. I know learning about the string art will be very useful for future media art projects (like the ones from Lunar Gala last year).