Category: Project-04-String-Art

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.

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.