my-sketch.js
In the project I tried to create the sence of space by creating layers of different properties. And by adding the balls on the strings, I attempt to create a dynamic feeling in the still graphic.

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

function draw() {
    //back lines
    for (var y1 = 0; y1 < height; y1 += 7){
        stroke(0, 0, 120);
        strokeWeight(0.1);
        line(0, y1, width, y1)
    }

    //draw the top-down curves
    x1 = 0;
    x2 = width;
    y2 = 0;
    for (var y1 = 0; y1 < height - 50; y1 += 10){
        x2 -= 20;
        stroke(150);
        strokeWeight(0.1);
        line(x1, y1, x2, y2);
    }

    //draw the first part of the curves
    x1 = 0;
    x2 = 0;
    y2 = height;
    for (var y1 = 0; y1 < height - 70; y1 += 10){
        x2 += 40;
        stroke(255);
        strokeWeight(0.3);
        line(x1, y1, x2, y2);
    }

    //draw the second part of the curves
    x2 = width;
    y2 = height - 50;
    for (var y1 = height - 70; y1 < height + 100; y1 += 10){
        y2 += 3;
        stroke(255);
        strokeWeight(0.5);
        line(x1, y1, x2, y2);
    }

    //balls
    fill(3, 168, 158);
    noStroke();
    ellipse(300, 215, 15, 15);

    //draw the red curves
    y1 = height;
    y2 = height;
    for (var x1 = 0; x1 < width; x1 += 10){
        y2 -= 20;
        stroke(150, 20, 0);
        strokeWeight(0.5);
        line(x1, y1, x2, y2);
    }

    //balls
    fill(3, 168, 158);
    noStroke();
    ellipse(120, 200, 50, 50);
    ellipse(30, 100, 30, 30);
    ellipse(310, 90, 60, 60);
    ellipse(420, 200, 100, 100);
}

sketch

// Sophia S Kim
// Section C 1:30
// sophiaki@andrew.cmu.edu 
// Project-04-StringArt

var x1
var y1 
var x2
var y2 

function setup() {
	createCanvas(400, 300); 
	var x1 = 400;
	var y1 = 100;
	var x2 = 50; 
	var y2 = 300;
}

function draw() {
	background(0);
	//white line
	x1 = 600;
	y1 = 0;
	x2 = 500;
	y2 = 200;

	for (var i = 0; i < 150; i += 1) {
		stroke(255)
		line(x1, y1, x2, y2)
		x1 -= 10
		y2 += 10
	}
	//white 2 line
	x1 = 0;
	y1 = 0;
	x2 = 600;
	y2 = 5;

	for (var i = 0; i < 150; i += 1) {
		stroke(90)
		line(x1, y1, x2, y2)
		x2 -= 10
		y1 += 50
	}
		// light yellow curve line
	x1 = 200;
	y1 = 600;
	x2 = 400;
	y2 = 0;

	for (var i = 0; i < 100; i += 1) {
		stroke(251, 255, 132)
		line(x1, y1, x2, y2)
		x1 -= 30
		y2 += 7
	}
	// light blue curve line
	x1 = 0;
	y1 = 0;
	x2 = 400;
	y2 = 0;
	for (var i = 0; i < 50; i += 1) {
		stroke(148, 191, 255)
		line(x1, y1, x2, y2)
		x1 += 13
		y2 += 10
	}
	// light green curve line
	x1 = 350;
	y1 = 0;
	x2 = 0;
	y2 = 0;

	for (var i = 0; i < 70; i += 1) {
		stroke(155, 255, 124)
		line(x1, y1, x2, y2)
		x1 -= 8
		y2 += 10
	}
	//light red curve line
	x1 = 500;
	y1 = 300;
	x2 = 0;
	y2 = 400;

	for (var i = 0; i < 100; i += 1) {
		stroke(255, 124, 124)
		line(x1, y1, x2, y2)
		x1 -= 8
		y2 -= 7
	}
	//blue curve line
	x1 = 0;
	y1 = 0;
	x2 = 500;
	y2 = 0;
	for (var i = 0; i < 50; i += 1) {
		stroke(11, 34, 255)
		line(x1, y1, x2, y2)
		x1 += 13
		y2 += 10
	}
	//green curve line
	x1 = 250;
	y1 = 0;
	x2 = 0;
	y2 = 0;

	for (var i = 0; i < 70; i += 1) {
		stroke(60, 239, 5)
		line(x1, y1, x2, y2)
		x1 -= 8
		y2 += 10
	}
	//red curve line
	x1 = 400;
	y1 = 300;
	x2 = 0;
	y2 = 400;

	for (var i = 0; i < 100; i += 1) {
		stroke(255, 63, 11)
		line(x1, y1, x2, y2)
		x1 -= 8
		y2 -= 7
	}
	//yellow curve line
	x1 = 400;
	y1 = 600;
	x2 = 400;
	y2 = 0;

	for (var i = 0; i < 100; i += 1) {
		stroke(255, 252, 11)
		line(x1, y1, x2, y2)
		x1 -= 30
		y2 += 7
	}
}

For this project, I focused on using tones of green, blue, yellow, and red. At first, I had trouble with organizing how to make the curves and how to align it to the edges of the canvas, but after many trials, I was able to understand how each line point worked. I had a lot of fun making string art with code, and I hope to make more complex and creative works like this.

Project-04

// Yoo Jin Shin
// Section D
// yoojins@andrew.cmu.edu
// Project-04


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

function draw() {
    background(0);

    // two white-ish rectangles in background
    fill(235);
    noStroke();
    rect(0, 220, width, 80);
    rect(0, 0, width, 80);

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

    var stepSize1 = 7.5;
    var stepSize2 = 10;
    var stepSize3 = 7;
    var stepSize4 = 3;

    // dark grey lines
    for (x2 = 0; x2 < width; x2 += stepSize2) {
        x1 = 0;
        y1 = 0;
        y2 = height;
        stroke(70);
        strokeWeight(1);
        line(x1, y1, x2, y2);
    }

    // dark blue lines 
    for (x1 = 0; x1 < width; x1 += stepSize1) {
        stroke(0, 0, 255);
        strokeWeight(1.5);
        line(x1, y1 += 2, x2 -= 10, y2 -= 1);
    }

    // dark pink lines 
    for (x1 = 0; x1 < width; x1 += stepSize1) {
        stroke(255, 200, 255);
        strokeWeight(2);
        line(x1, y1 += 4.5, x2 += 14.9, y2 -= 1.2);
    }

    // white lines
    for (x2 = 0; x2 < width; x2 += stepSize3) {
        x1 = width;
        stroke(255);
        strokeWeight(1.5);
        line(x1 -= 10, y1 -= 80, x2, y2 += 10);
    }

    // black circle in center background
    fill(0);
    noStroke();
    ellipse(width / 2, height / 2, 180, 180);

    // purple lines
    for (y2 = 0; y2 < height; y2 += stepSize4) {
        stroke(160, 50, 255);
        strokeWeight(1.5);
        line(x1 += 100, y1 += 30.5, x2 -= 5.6, y2);
    }

    noLoop();
}

It was interesting to experiment with the different types of lines and curves to create this string art. I think the sound-art article that I read recently about the Multiverse and black holes subconsciously influenced my design.

sketch

//Sean(Han) Meng
//Section B
//hmeng@andrew.cmu.edu
//Project 4

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

}


function draw() {
    
    background(0);

    //First upper eyelip
    stroke(87, 250, 255)
    for (var i = 0; i < 100; i +=1)
        line(width/20 + i*10, 0, 0, height + i*(-10))
    //Second upper eyelip
    stroke(153, 50, 204)
    for (var i = 0; i < 100; i +=1)
        line(width/5 + i*10, 0, 0, height + i*(-10))
    //First lower eyelip
    stroke(0, 0, 205)
    for (var i = 0; i < 100; i +=1)
        line(width/20 + i*10, height, width, height + i*(-10))
    //Second lower eyelip    
    stroke(255, 128, 128)
    for (var i = 0; i < 100; i +=1)
        line(width/5 + i*10, height, width, height + i*(-10))

    //Pupil
    fill(75, 0, 130)
    ellipse(200, 150, 150, 150)
    
    fill(0, 0, 128)
    ellipse(200, 150, 100, 100)




}

In this project, I explore the coding method that I learned to draw complex shape. This “eye” was consisted of for eyelips that are drew with straight lines. But the way they overlapped create a delusion that there is a curve at the very end of them. And I use the bold colors to add aesthetic value to it.

jacky’s sketch 1

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

function draw() {
    background(0)
    for (var i = 0; i < 21; i++) {
        stroke(255, 0, 0);
        line(width/5+i*10, 0, 0, height/2+i*(-5)); //line set 1

        stroke(255)
        line(0, height/2+i*10, width/3+i*(-5), 0); //line set 2

        stroke(0, 255, 0);
        line(0, height/3+i*10, width/2+i*(10), height);  //line set 3

        stroke(0, 0, 255);
        line(width, height/7+i*10, width*3/4+i*(-10), height); //line set 4

        stroke(150, 80, 0);
        line(width, height/7+i*10, width/4+i*(10), 0); //line set 5

    

        // stroke(100, 0, 100);
        // line(width/5+i*10, 0, 0, height/2+i*(-5));
        
    }
}

In this project, I created five sets of lines rotating along the sides to create five curves. The background is black so that it makes the colors more obvious.

sketch

var x1 = 1;
var x2 = 1;
var y1 = 1;
var y2 = 1;

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

}

function draw() {
	// bottom section
	for (var i1 = 5; i1 < 200; i1 += 10){ // start i1 at 5
		strokeWeight(1);
    	stroke(255, 0, 255); // purple
    	x1 = 0.2 - i1;
    	y1 = width - i1 - 50;
    	x2 = width;
    	y2 += 25 - i1 / 15; // end point of line should grow towards end
		line(x1, y1, x2, y2);
	}
	// top section
	for (var i2 = 0; i2 < 300; i2 += 1){ // start i2 at 0
		strokeWeight(1)
		stroke(255, 0, 100); // pink
		x1 = 0;
		y1 = width - i2 * 10;
		x2 = i2 + height;
		y2 = i2 / 50;
		line(x1, y1, x2, y2);
	}
	// right section
	for (var i3 = 20; i3 < 300; i3 += 10){ // start i3 at 20
		strokeWeight(0.5)
		stroke(255, 150, 100); // orange
		x1 = 0 - i3 * 10;
		y1 = height - i3 * 30;
		x2 = i3 * 0.5 + 300;
		y2 = i3 + height / 2;
		line(x1, y1, x2, y2);
	}
	// left section
	for (var i4 = 0; i4 < 300; i4 += 5){ // start i4 at 0
		strokeWeight(1);
    	stroke(100, 100, 255); // blue
    	x1 = 0; // start at 0
    	y1 = height - i4; 
    	x2 += width - i4; // lines concentration increase at the end
    	y2 += i4 * 2;
		line(x1, y1, x2, y2);
	}
}

For this project, my goal was to create something more environmental and resembles landscapes/light through lines. I started by creating the bottom one first, and modified the rest based on the bottom one.  I was trying to create a sense of depth through these two-dimensional strings, and although it took me a while to understand what I was doing, it was definitely a learning process.

version2

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-04-String-Art

//assigning variables


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


function draw() {
    background(0);
    strokeWeight(1)
    stroke(255, 120, 79)

    //creating the top and bottom parts
    for (var i = 1; i < 401; i+=10){
        line(200, 26, i, 300);
        line(200, 274, i, 0);
    }

    stroke(255, 142, 142)
    //creating the left and right parts
    for (var i = 1; i < 301; i+=10){
        line(33, 150, 400, i);
        line(367, 150, 0, i);
    }

    stroke(255);
    //creating the top left and bottom right parts
    for (var i = 1; i < 401; i+=12){
        line(0, height-(i*3/4), i, 0)
        line(i, 300, 400, height - i*3/4);

    }
    
    //creating the bottom left and top right parts
    //I changed the increment here to be lower to show more depth
    for (var i = 1; i < 401; i+=5){
        line(0, i*3/4, i, 300);
        line(i, 0, 400, i*3/4);
    }
}

For this project, I originally started off just experimenting around. When I finally was able to create the “star” figure in the middle, I knew I wanted to add some more flair, and so I included the curves covering the edges of the screen.

sketch

//Name: Alessandra Fleck 
//Class Section : B
//Email: afleck@andrew.cmu.edu
//Project-04



function setup() {
    createCanvas(480, 300);
    strokeWeight(0.3);
}

function draw() {
    background(0);
    
    //blue back lines (no curve)
    for (var i = 0; i < 400; i += 6) {
    	stroke(155,236,255);
      	line(i, 0, 1.5*i, i); //top right corner start
      	//line(x1,y1,x2,y2);
      	line(2*i, 300, width, i); //bottom left corner start 
    }

    //secondary layer for color in light blue

    for (var i = 0; i < width; i += 3) {
      	stroke(179,223,222);
      	strokeWeight(0.3);
      	line(i*2, 0, width, i); //top right curve with lines
      	line(i*2, 0, height * 2, i); //next curve next to curved line 1
      	line(i*2, 0, height * 1, i); //next curve next to curved line 2
      	line(i*2, 0, height * 0.75, i + 20); //next curve next to curved line 3
      	line(i*2, 0, height * 0.6, i + 20); //next curve next to curved line 3
      	line(i*2, 0, height * 0.5, i + 100); //next curve next to curved line 3
    }

    //third layer for color

    for (var i = 0; i < width; i += 3) {
      	stroke(220,183,225);
      	strokeWeight(0.3);
      	line((i*2)+100, height, 300, i); //top right curve with lines
      	
      	line((i*2)-100, height, height * 1, i); //next curve next to curved line 2
      	
      	line((i*2)-100, 0, height * 0.6, i + 20); //next curve next to curved line 3
      	line(i*2, 0, height * 0.5, i + 100); //next curve next to curved line 3
    }

    

}

For this project, I wanted to try understanding how to take a line and manipulative it into a twisting curve. To invert the curve and create the twist like form, I used the height variable in the x2 coordinate section and multiplied it by a decimal to decrease the dynamic scale of the curve. I hope to be able to use this technique for something more symmetrical next time.

This string art is based on an physical string art example I found on the web that is similar to the yin-yang. At first I was curious what the mathematical formula would be to create such a pattern where the inner curve would curve much more sharply than the outer curve. This was explained when I watched the video, where the artist increments one side of the strings by two pegs around the circle, while the other side only by one peg. I also needed to solve the problem of overlapping; I wanted both colors to be cover each other only in specific areas, not just have one over the other. This was solved by drawing strings for both sides in the same loop iteration.

sketch

function setup() {
    createCanvas(400, 300);
    background('white');
    angleMode(DEGREES);
}

function draw() {
	var radius = 150;
	var dotradius = 50;

	var whitecenter = 210; //centers of the dots
	var blackcenter = 90;

	var whiteslow = 0; //each line consists of a "slow point" that travels around the circle at 1 degree per iteration
	var whitefast = 180; //and a "fast point" which travels around the circle at 2 degrees per iteration;
	var blackslow = 180;
	var blackfast = 0;

	//the dots will piggyback off of the progression of whitefast, as they are forming complete circles. 
	//They will beformed by lines that are offset by 15 degrees

	var slowincrement = 3;
	var fastincrement = 2*slowincrement;

	for(whiteslow = 0; whiteslow <= 180; whiteslow += slowincrement){

		stroke('red');
		line(cos(whitefast)*dotradius + width/2, sin(whitefast)*dotradius + whitecenter, cos((whitefast+120)%360)*dotradius + width/2, sin((whitefast+120)%360)*dotradius + whitecenter); //drawing the white dot
		stroke('blue');
		line(cos(whitefast)*dotradius + width/2, sin(whitefast)*dotradius + blackcenter, cos((whitefast+120)%360)*dotradius + width/2, sin((whitefast+120)%360)*dotradius + blackcenter); //drawing the white dot



		stroke('red');
		line(cos(whiteslow)*radius + width/2, sin(whiteslow)*radius + height/2, cos(whitefast)*radius + width/2, sin(whitefast)*radius + height/2); //drawing the first white line
		stroke('blue');
		line(cos(blackslow)*radius + width/2, sin(blackslow)*radius + height/2, cos(blackfast)*radius + width/2, sin(blackfast)*radius + height/2); //drawing the first black line
		//the updated slow points to the old fast points

		blackfast = (blackfast+fastincrement)%360; //updating fast points; if they go over 360, they wind back at 1
		whitefast = (whitefast+fastincrement)%360;

		stroke('yellow');
		line(cos(whiteslow)*radius + width/2, sin(whiteslow)*radius + height/2, cos(whitefast)*radius + width/2, sin(whitefast)*radius + height/2); //drawing the first white line
		stroke('cyan');
		line(cos(blackslow)*radius + width/2, sin(blackslow)*radius + height/2, cos(blackfast)*radius + width/2, sin(blackfast)*radius + height/2); //drawing the first black line
		//the updated slow points to the updated fast points

		blackslow += slowincrement; //updating slow point
	}

}

sketch

// Han Yu
// Section D
// hyu1@andrew.cmu.edu
// Project-04

function setup() {
    createCanvas(400, 300);
    background(24, 146, 245);
}

function draw() {
// the pink background
	for (var i = 0; i <400; i++) { //top
		stroke(245, 41, 143);
		line(100, 100, i, 0);
		i += 10;
	}

	for (var j = 0; j <300; j++) { //left
		stroke(245, 41, 143);
		line(100, 100, 0, j);
		j += 10;
	}

	for (var k = 0; k<300; k++) { //right
		stroke(245, 41, 143);
		line(300, 200, width, k);
		k += 10;
	}

	for (var m = 0; m<400; m++) { //bottom
		stroke(245, 41, 143);
		line(300, 200, m, height);
		m += 10;
	}

// the yellow hourglass
	for (var n = 0; n<400; n++) { //bottom
		stroke(255, 249, 57);
		line(width/2, height/2, n, height);
		n += 10;
	}

	for (var n = 0; n<400; n++) { //top
		stroke(255, 249, 57);
		line(width/2, height/2, n, 0);
		n += 10;
	}

// the concentric circles
	for (var c = 10; c<155; c++) {
		stroke(245, 41, 143);
		noFill();
		ellipse(width/2, height/2, c, c);
		c += 5;
	}

}

I was inspired by the Japanese zen garden and wanted to use a bunch of colors that contrast with each other. Making the background was the hardest part of this project because it’s tricky to make everything align. Overall, this project reinforces my skills of using for loops.