Category: Project-04-String-Art

Project 4 rrandell

sketch

/* Rani Randell
rrandell@andrew.cmu.edu
Project 4 
Section A */

function setup() {
    createCanvas(400, 300);
    background(210, 40, 230);
}

function draw() {

	for(var i = -40; i < 600; i += 20){
		strokeWeight(4);
		stroke(200, 50, 180);
		line(i, 150, 150, i);

	}
	for(var x = 0; x < 300; x += 15){
		strokeWeight(2);
		stroke(180, 20, 170);
		line(x, 200, 100, x);
	}
	for(var y = 0; y < 400; y += 10){
		strokeWeight(2);
		stroke(170, 70, 190);
		line(y, 0, 300, y);
	}
	for(var r = 60; r < 200; r += 5){
		strokeWeight(.5);
		stroke(210, 30, 150);
		line(r + 6, 0, 400, r);
	}
	for(var q = 80; q < 300; q += 7){
		strokeWeight(.1);
		stroke(255, 0, 100);
		line(q, 300, 5, q)
	}
	for(var e = 30; e < 600; e += 10){
		strokeWeight(1)
		stroke(250, 30, 200);
		line(200, e, e, 100)
	}

}

For my project I wanted to see how shades of pink interacted with each other and how the curves can frame parts of the canvas.

Tanvi Harkare – Project 04 – String Art

tanviharkare_sketch

/*Tanvi Harkare
Section B
tharkare@andrew.cmu.edu
Project-04-String Art */

var R; //variables for random color for line
var G;
var B; 

var x1 = 0; //starting points for location of lines
var x2 = 0;
var y1 = 0; 
var y2 = 100;

var x3 = 25; //starting position for second set of lines
var x4 = 25;
var y3 = 25;
var y4 = 150;

var x5 = 50; //starting position for third set of lines
var x6 = 50;
var y5 = 50;
var y6 = 200;

var x7 = 75; //starting position for fourth set of lines
var x8 = 75;
var y7 = 75;
var y8 = 250;

var x1stepSize = 15; //increment values for each point
var x2stepSize = 5;
var y1stepSize = 0;
var y2stepSize = 10;

var x3stepSize = 20; //increment values for second set of lines
var x4stepSize = 10;
var y3stepSize = 0;
var y4stepSize = 10;

var x5stepSize = 25; //increment value for third set of lines
var x6stepSize = 15;
var y5stepSize = 0;
var y6stepSize = 10;

var x7stepSize = 20; //increment value for fourth set of lines
var x8stepSize = 10;
var y7stepSize = 0;
var y8stepSize = 10;

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

function draw() {
    //curve starting from 0, 0
    for(var i = 0; i < 50; i++){
        curveChange = random(.35, 1);
        changeColor(); 
        stroke(R, G, B);
        line(x1, y1, x2, y2);
        x1 += x1stepSize;
        x2 += x2stepSize;
        y2 -= y2stepSize;
        y2stepSize -= curveChange;       
    }

    //curve starting from 25, 25
    for(var i = 0; i < 50; i++){
        curveChange = random(.35, 1);
        changeColor(); 
        stroke(R, G, B);
        line(x3, y3, x4, y4);
        x3 += x3stepSize;
        x4 += x4stepSize;
        y4 -= y4stepSize;
        y4stepSize -= curveChange;       
    }

    //curve starting from 50, 50
    for(var i = 0; i < 50; i++){
        curveChange = random(.35, 1);
        changeColor(); 
        stroke(R, G, B);
        line(x5, y5, x6, y6);
        x5 += x5stepSize;
        x6 += x6stepSize;
        y6 -= y6stepSize;
        y6stepSize -= curveChange;       
    }

    //curve starting from 75, 75
    for(var i = 0; i < 50; i++){
        curveChange = random(.35, 1);
        changeColor(); 
        stroke(R, G, B);
        line(x7, y7, x8, y8);
        x7 += x7stepSize;
        x8 += x8stepSize;
        y8 -= y8stepSize;
        y8stepSize -= curveChange;       
    } 
}

function changeColor(){
    /* assigns different color values for every
    line that is drawn in the draw() function */ 
    R = random(0, 255);
    G = random(0, 255);
    B = random(0, 255);
}

I had a lot of fun with this project, especially in creating different ways to show the curves made through the string art. In my sketch, the color of each line is different and changes each time you run the code; I did this by creating my own function. Additionally, the curvature of the string art changes slightly to create a different effect ever time.

Joanne Lee – Project 04

Joanne Lee – Project 04

// Joanne Lee
// Section C
// joannele@andrew.cmu.edu
// Project-04

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

function draw() {

  var leftX1 = 0;
  var leftX2 = 0;
  var leftY = height/40
  var rightX1 = 400;
  var rightX2 = 400;
  var rightY = height/40;

  // step sizes
  var vertStep = height / 40;
  var horizStep1 = width / 15;
  var horizStep2 = height / 150;
  var i = 0;

  strokeWeight(0.1);

  //bottom left curve loop
  for (i = 0; i < 40; i ++) {
    stroke(0,80,115,10);
    line(leftX1, 300, leftX2, leftY);
    // x-values move in opposite directions
    leftX1 += horizStep1;
    leftX2 -= horizStep2;
    leftY += vertStep; // increase y2 value
  }

  // bottom right curve loop
  for (i = 0; i < 40; i ++) {
    stroke(38,128,167,15);
    line(rightX1, 300, rightX2, rightY);
    // x-values move in opposite directions
    rightX1 -= horizStep1;
    rightX2 += horizStep2;
    rightY += vertStep; // increase y2 value
  }

  // code reset
  leftX1 = 0;
  leftX2 = 0;
  leftY = 300 - vertStep;

  // top left curve loop
  for (i = 0; i < 40; i ++) {
    stroke(38,128,167,15);
    line(leftX1, 0, leftX2, leftY);
    // x-values move in opposite directions
    leftX1 += horizStep1;
    leftX2 -= horizStep2;
    leftY -= vertStep; // decrease y2 value
  }

  // code reset
  rightX1 = 400;
  rightX2 = 400;
  rightY = 300 - vertStep;

  // top right curve loop
  for (i = 0; i < 40; i ++) {
    stroke(130,175,195,40);
    line(rightX1, 0, rightX2, rightY); // decrease rightY value
    // x-values move in opposite directions
    rightX1 -= horizStep1;
    rightX2 += horizStep2;
    rightY -= vertStep; // decrease y2 value
  }
}

The most difficult part of this project was determine what kind of shape I wanted to make. However, ultimately I decided that I wanted to create something that has a bit of depth as well as looks like something that is opening up. I am happy with the results and hope to be able to create more complex results in the future.

Nina Yoo- Project 04- String Art

sketch

/* Nina Yoo
Section E
nyoo@andrew.cmu.edu
Project-04*/

var change = 5 // changing the lines position from one another (increments)

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

function draw() {
	
	
	for(var r=100; r < height; r+= change){ // starting at x position 100 and spreading height --> change is space between lines
		stroke(150,11,200);
		strokeWeight(.5);
		line(r, 0, width, r*.5);
		} // line goes along width, divides change by half

	//right side pattern reaching to bottom of canvas at 300	starting at y coordinate 100 from right side 

	for(var l=100; l < width; l+= change){
		stroke(90,112,6);
		strokeWeight(.5);
		line(l, 300, width, l *.3);
	}
	//overlaying previous to make curved design change

	for(var g=50; g < height; g+= change){
		stroke(75,154,22);
		strokeWeight(1);
		line(g, height,500, g);
	}
	//left side bottom --> turning at same point the top patter starts
	for(var h= 100; h<height; h+= change){ //100 is the starting value of change
		stroke(111,23,200);
		strokeWeight(.5);
		line(h, height, 0 ,h);
	}

	//overlaying left side bottom shape

	for(var j= 0; j<height; j += change){ //starts at 0 --> limit is height 
		stroke(68,112,115);
		strokeWeight(.5);
		line(j, width, 0, j);
		} 

	for(var m = 0; m < width; m+= change){
		stroke(100,78,150)
		strokeWeight(.5);
		line(m, 0, height,m)

	}
}

This project was fun to experiment with the different line patterns and textures you can create. For example, by overlapping sets of line you can create interesting shapes that look like after images and play with your eyes, which is what I experimented with on the green part of the project. It was also fun to see how shadows worked on the lines depending on the spacing set.

Project 04: String Art

sketch

/* Samantha Ho
Section E 
sch1@andrew.cmu.edu
Project 04*/

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

	}

function draw() {
    background(240,240,240);
	//back dark wave
       	strokeWeight(2);
	stroke(0,0,255);
	x1 = 30;
	x2 = 40;
	y1 = 400;
	y2 = 50;
	for (var i = 0; i < 20; i += 1) {//move the waves
		x1 += min(mouseX, 300);
		y2 += 15;
		line(x1, y1, x2, y2);
	}

    //light back wave
	strokeWeight(2);
	stroke('cyan');
	x1 = 0;
	x2 = 60;
	y1 = 500;
	y2 = 50;
	for (var i = 0; i < 20; i += 1) {//move the waves
		x1 += min(mouseX, 300);
		y2 += 15;
		line(x1, y1, x2, y2);
	}
    
     //light thin wave
	strokeWeight(2);
	stroke('cyan');
	x1 = 0;
	x2 = 60;
	y1 = 500;
	y2 = 50;
	for (var i = 0; i < 20; i += 1) {//move the waves
		x1 += min(mouseX, 300);
		y2 += 15;
		line(x1, y1, x2, y2);
	}
    
     //green horizon wave
	strokeWeight(2);
	stroke(0,230,230);
	x1 = 0;
	x2 = 400;
	y1 = 150;
	y2 = 100;
	for (var i = 0; i < 20; i += 1) {//move the waves
		x1 += min(mouseX, 300);
		y2 += 15;
		line(x1, y1, x2, y2);
	}
    
     //red horizon wave
	strokeWeight(.5);
	stroke(0,230,230);
	x1 = 0;
	x2 = 400;
	y1 = 500;
	y2 = 100;
	for (var i = 0; i < 20; i += 1) {//move the waves
		x1 += min(mouseX, 300);
		y2 += 15;
		line(x1, y1, x2, y2);
	}
    
 
	//sunrays
	strokeWeight(2);
	stroke('yellow');
	x3 = 0;
	x4 = -300;
	y3 = 0;
	y4 = 300;
	for (var i = 0; i < 20; i += 1) {
		x4 += min(mouseX, 600);
		y3 -= 15;
		line(x3, y3, x4, y4);
	}
    //dark sunrays
    strokeWeight(2);
	stroke(200,200,0);
	x3 = 0;
	x4 = -200;
	y3 = 0;
	y4 = 300;
	for (var i = 0; i < 20; i += 1) {
		x4 += min(mouseX, 600);
		y3 -= 15;
		line(x3, y3, x4, y4);
	}
}

I made this because I was inspired by the quality of the “strings”. I wanted to make an entire moving picture with a horizon and everything. I found it difficult though to completely control the landscape. It may be due to the quality of the “material”, but conceptually it was challenging to wrap my head around the forms.

Liz Maday Project 4

liz m proj 4 

//Elizabeth Maday
//emaday@andrew.cmu.edu
//Section A
//Project 04

//big purple variables
var x1; 
var y1;
var x2;
var y2;
//orange variables
var a1; 
var b1;
var a2;
var b2;
// corner a variables
var c1;
var d1;
var c2;
var d2;
//corner b variables
var e1;
var f1;
var e2;
var f2;
//click variables
var jump;
var eyeSize;

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

function draw() {
	background(0);
	strokeWeight(0.75);

    //big purple variables
    var x1 = 25;
    var y1 = height + 5;
    var x2 = 380;
    var y2 = 0;

    //big purple web
    for(i = 0; i < 25; i += .6) {
    	x1 += 5;
    	y1 -= 5;
    	x2 -= 4;
        y2 += 0;
    	stroke('purple');
    	line(x1, y1, x2, y2); 
    }

    //orange variables
        var a1 = 50
        var b1 = -40;
        var a2 = width - 200;
        var b2 = height + 20;

    //orange web
    for (i = 0; i < 37; i += .6) {
        a1 -= 3;
        b1 += 2;
        a2 += 5;
        b2 -= 0.5;
        stroke(255, 85, 0);
        line(a1, b1, a2, b2);
    }

    //corner a variables
    c1 = 0;
    d1 = height - 120;
    c2 = 70;
    d2 = height;

    //corner a web
    for (i = 0; i < 30; i += .5) {
    	c1 = 0
    	d1 = height - 120;
    	c2 -= 2;
    	d2 += 8;
    	strokeWeight(0.65);
    	stroke(0, 93, 68);
    	line(c1, d1, c2, d2);
    }

    //corner b variables
    e1 = -40;
    f1 = height - 90;
    e2 = 105;
    f2 = height;

    //corner b web
    for (i = 0; i < 30; i += .5) {
    	e1 += 1;
    	f1 += 2;
    	e2 = 105;
    	f2 += 5;
    	strokeWeight(0.65);
    	stroke(0, 93, 35);
    	line(e1, f1, e2, f2);
    }    

    //jump variable
    var jump = 0;
    var eyeSize = 2.5;

    if (mouseIsPressed) {
    	//stars
        for (i = 0; i < 100; i++) {
        
            fill('white');
            textSize(5);
    	    text('*', random(400), random(300));
        }

        //stars
        for (i = 0; i < 100; i++) {        
            fill('purple');
            textSize(12);
    	    text('*', random(400), random(300));
        }
        
        var jump = 20;
        var eyeSize = 4;
    }

    //spider variables
    var spiderX = 242 + (jump * 1.5);
    var spiderY = 235 + jump;
    var bodyWidth = 24;
    var bodyHeight = 20;
    //spider legs left
    noFill();
    stroke(255);
    arc(spiderX - bodyWidth/2, spiderY, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
    arc(spiderX - bodyWidth/2, spiderY + 4, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
    arc(spiderX - bodyWidth/2, spiderY + 9, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
    arc(spiderX - bodyWidth/2.5, spiderY + 10, bodyWidth * 0.5, bodyHeight * 0.5, PI - QUARTER_PI, 0 - QUARTER_PI);
    //spider legs right
    noFill();
    stroke(255);
    arc(spiderX + bodyWidth/2, spiderY, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
    arc(spiderX + bodyWidth/2, spiderY + 4, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
    arc(spiderX + bodyWidth/2, spiderY + 9, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
    arc(spiderX + bodyWidth/2.5, spiderY + 10, bodyWidth * 0.5, bodyHeight * 0.5, PI + QUARTER_PI, 0 + QUARTER_PI);
    //spider body
    stroke(0);
    fill(0);
    ellipse(spiderX, spiderY, bodyWidth, bodyHeight);
    //spider eyes
    strokeWeight(eyeSize);
    stroke(255);
    point(spiderX - bodyWidth/4, spiderY);
    point(spiderX + bodyWidth/4, spiderY);
    //spider mouth
    strokeWeight(1);
    stroke(255);
    line(spiderX - bodyWidth/6, spiderY + 3, spiderX + bodyWidth/6, spiderY + 3);

}

When I started looking at examples of string art, I immediately thought of a spider web. I liked that I got to integrate a Halloween theme into this project. Make sure to click the image!

Xiaoying Meng- Project 04 String Art

sketch

var x1;//x for first circle
var y1;//y for first circle
var x2;//x for second circle
var y2;//y for second circle
var x3;//x for third circle
var y3;//y for third circle
var x4;//x for fourth circle
var y4;//y for fourth circle
var r=50;//radius

function setup(){
    createCanvas(400,300);
    background(200);
}
function draw(){
    angleMode(DEGREES);
    //d is degree of the angle
    //To change color for each quarter of the circle
    for(var d=90;d<=180; d+=2){

        x1=200+r*cos(d);
        y1=150+r*sin(d);
        x2=200+(r+40)*cos(d+50);
        y2=150+(r+40)*sin(d+50);
        x3=200+(r+80)*cos(d+10);
        y3=150+(r+80)*sin(d+10);            
        x4=200+(r+120)*cos(d+50);
        y4=150+(r+120)*sin(d+50);

        //line between 1st and 2nd circle
        strokeWeight(0.03);
        stroke(255);
        line(x2,y2,x1,y1);
        //line between 3rd and 1st, 2nd circle
        line(x2,y2,x3,y3);
        line(x1,y1,x3,y3); 

        //line between 4th circle and 1st, 2nd, 3rd circle
        line(x3,y3,x4,y4);
        line(x2,y2,x4,y4);
        line(x1,y1,x4,y4);        
    }
    for(var d=180;d<=270; d+=2){

        x1=200+r*cos(d);
        y1=150+r*sin(d);
        x2=200+(r+40)*cos(d+50);
        y2=150+(r+40)*sin(d+50);
        x3=200+(r+80)*cos(d+10);
        y3=150+(r+80)*sin(d+10);            
        x4=200+(r+120)*cos(d+50);
        y4=150+(r+120)*sin(d+50);

        //line between 1st and 2nd circle
        strokeWeight(0.03);
        stroke(0);
        line(x2,y2,x1,y1);
        //line between 3rd and 1st, 2nd circle
        line(x2,y2,x3,y3);
        line(x1,y1,x3,y3); 

        //line between 4th circle and 1st, 2nd, 3rd circle
        line(x3,y3,x4,y4);
        line(x2,y2,x4,y4);
        line(x1,y1,x4,y4);        
    }
    for(var d=270;d<=360; d+=2){

        x1=200+r*cos(d);
        y1=150+r*sin(d);
        x2=200+(r+40)*cos(d+50);
        y2=150+(r+40)*sin(d+50);
        x3=200+(r+80)*cos(d+10);
        y3=150+(r+80)*sin(d+10);            
        x4=200+(r+120)*cos(d+50);
        y4=150+(r+120)*sin(d+50);

        //line between 1st and 2nd circle
        strokeWeight(0.03);
        stroke(120);
        line(x2,y2,x1,y1);
        //line between 3rd and 1st, 2nd circle
        line(x2,y2,x3,y3);
        line(x1,y1,x3,y3); 

        //line between 4th circle and 1st, 2nd, 3rd circle
        line(x3,y3,x4,y4);
        line(x2,y2,x4,y4);
        line(x1,y1,x4,y4);        
    }
    for(var d=0;d<=90; d+=2){

        x1=200+r*cos(d);
        y1=150+r*sin(d);
        x2=200+(r+40)*cos(d+50);
        y2=150+(r+40)*sin(d+50);
        x3=200+(r+80)*cos(d+10);
        y3=150+(r+80)*sin(d+10);            
        x4=200+(r+120)*cos(d+50);
        y4=150+(r+120)*sin(d+50);

        //line between 1st and 2nd circle
        strokeWeight(0.03);
        stroke(230);
        line(x2,y2,x1,y1);
        //line between 3rd and 1st, 2nd circle
        line(x2,y2,x3,y3);
        line(x1,y1,x3,y3); 

        //line between 4th circle and 1st, 2nd, 3rd circle
        line(x3,y3,x4,y4);
        line(x2,y2,x4,y4);
        line(x1,y1,x4,y4);        
    }


   
}

I first saw this image on pinterest. It inspired me to create this string art around a center point in circles. I found out how to find the points on circles and worked my way through.

PO4 – Alexander Chen

sketch

//Alexander Chen
//Section A
//alchen1@andrew.cmu.edu
//Project 04

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

function draw() {
	background(0);

    var x = 0;
    var y = 0;
    var x1 = width/2;
    var y1 = height/2;
    var x2 = width/2;
    var y2 = height/2;
    var x3 = width
    var y3 = height
    var x4 = width/2;
    var y4 = width/2;
 //white curves
    for (var i = 0; i < 50; i++) {

    //BOTTOM RIGHT//
        stroke('red');
        //bottom right corner (bigger gaps)
        line(x1, height, width, height - y1);

        stroke(67, 21, 32);
        //bottom right corner (smaller gaps)
        line(x2, height, width, height - y2);

    //TOP LEFT//
        stroke('red');
        //top left corner (bigger gaps)
        line(width - x1, 0, 0, y1);

      	stroke(67, 21, 32);
        //top left corner (smaller gaps)
        line(width - x2, 0, 0, y2);



    //MIDDLE "SPOTLIGHT"
    	stroke(255);
    	line(x3, 0, x, y2);

    //TOP RIGHT CORNER//
       	//top right corner (smaller gaps)
    	stroke('red');
    	line(x4, 0, width, y4);

    	stroke(67, 21, 32);
		//top right corner (bigger gaps)
    	line(x2, 0, width, y2);

        x1 = x1*1.08;
        y1 = y1*1.08;
        x2 = x2*1.025;
        y2 = y2*1.025;
    	x4 = x4*1.08;
        y4 = y4*1.08;
    }
}

cmhoward-project-04

///move your mouse!///

cmhoward-04

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

function draw() {
	background('black');
	
	//bottom left half almond
	strokeWeight(2);
	stroke('violet');
	x1 = 0;
	x2 = 0;
	y1 = 300;
	y2 = 0;
	for (var i = 0; i < 20; i += 1) {
		//restrain to stop mouse at center of almond shapes
		x1 += min(mouseX, 80);
		y2 += 15;
		line(x1, y1, x2, y2);
	}
	//bottom left light green color
	strokeWeight(1);
	stroke('lightgreen');
	x1 = 0;
	x2 = 0;
	y1 = 300;
	y2 = 0;
	for (var i = 0; i < 80; i += 1) {
		x1 += min(mouseX, 80);
		y2 += 5;
		line(x1, y1, x2, y2);
	}
	//pattern repeats around canvas
	//topleft
	strokeWeight(2);
	stroke('violet');
	x3 = 0;
	x4 = 0;
	y3 = 300;
	y4 = 0;
	for (var i = 0; i < 20; i += 1) {
		x4 += min(mouseX, 80);
		y3 -= 15;
		line(x3, y3, x4, y4);
	}
	strokeWeight(1);
	stroke('lightgreen');
	x3 = 0;
	x4 = 0;
	y3 = 300;
	y4 = 0;
	for (var i = 0; i < 80; i += 1) {
		x4 += min(mouseX, 80);
		y3 -= 5;
		line(x3, y3, x4, y4);
	}
	//bottomright
	strokeWeight(2);
	stroke('violet');
	x5 = 400;
	x6 = 400;
	y5 = 0;
	y6 = 300;
	for (var i = 0; i < 20; i += 1) {
		//x5 -= 15;
		x6 -= min(mouseX, 80);
		y5 += 15;
		line(x5, y5, x6, y6);
	}
	strokeWeight(1);
	stroke('lightgreen');
	x5 = 400;
	x6 = 400;
	y5 = 0;
	y6 = 300;
	for (var i = 0; i < 80; i += 1) {
		//x5 -= 15;
		x6 -= min(mouseX, 80);
		y5 += 5;
		line(x5, y5, x6, y6);
	}
	//top right
	strokeWeight(2);
	stroke('violet');
	x7 = 0;
	x8 = 400;
	y7 = 0;
	y8 = 0;
	for (var i = 0; i < 20; i += 1) {
		y8 += min(mouseX, 80);
		x7 += 15;
		line(x7, y7, x8, y8);
	}
	strokeWeight(1);
	stroke('lightgreen');
	x7 = 0;
	x8 = 400;
	y7 = 0;
	y8 = 0;
	for (var i = 0; i < 80; i += 1) {
		y8 += min(mouseX, 80);
		x7 += 5;
		line(x7, y7, x8, y8);
	}
}

i really enjoyed this project! it was quite a challenge beginning to understand for loops, but playing with these geometries reminds me of things i’ve done with parametric modeling software in my architecture classes. it’s interesting to see how specific concepts transfer between technologies.

i especially enjoyed animating the string art, as there are moments that are seemingly symmetrical and it creates a really beautiful reaction between the geometries.

Anthony Ra – Project-04-String-Art

sketch

/* Anthony Ra
Section-A
ahra@andrew.cmu.edu
Project-04 */

var x1;
var x2;
var y1;
var y2;

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

}

function draw() {

  /* drawing rectangles increasing */

  for (var i = 0; i <= 500; i += 5) {

    stroke(50);
    strokeWeight(0.25);
    line(i, 0, i, height);


  }

  for (var i = 0; i <= 375; i += 10) {

  /* curve along the top-right corner */
  /* least sloped curve */
  stroke(168, 143, 225);
  line(i, 0, width + i, i);
  /* steeper curve */
  stroke(168, 143, 200);
  line(i, 0, width, i);
  /* slopiest curve along top-right corner */
  stroke(168, 143, 175);
  line(i, 0, width - i, i);
  /* reflection from the previous lines of code along y-axis */
  stroke(213, 142, 165);
  line(i, i, width - i, 0);
  /* long curve along bottom-left corner */
  stroke(295, 142, 165);
  line(0, i, i, height);
  /* long curve along top-left corner */
  stroke(200, 125, 165);
  line(i, 0, 0, height - i);
/* curves along the diagonal axis */
  stroke(154, 89, 140);
  line(i, i, 0, height - i);

  /* curve symmetry along x-axis */
  strokeWeight(0.25);
  stroke(200, 50, 140);
  line(width, height - i, -i, i);
  line(width, i, -i, height - i);

  /*
  strokeWeight(0.25);
  line(0, height - i, width, height);
  line(0, height - i, width, 0);
*/
}

}

The purpose of making all my strings a different shade of pink is for a calming effect for myself. Along with that is a bevy of symmetry along multiple axes; however some of these lines of code produces visually asymmetrical results. Combining those together, with an emotionally stressful week, this is a reminder for me that it id okay to be imperfect and to take my day to day life less seriously. Live my life.