Category: Project-04-String-Art

KadeStewart-Project04-StringArt

sketch

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

var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 300;
var lim = 101;
var quality = 1;

function draw() {

	background(255);

	//change the number of lines (the quality of the curves)
	lim += quality;
	if (lim == 100) {
		quality = -quality;
	} else if (lim == 150) {
		quality = -quality;
	}
	//draw 8 curves
	for (c = 1; c <= 8; c++) {
		//draw "lim" number of lines in each curve
		for (i=0; i<=lim; i++) {
			x1 = (width/lim) * i;
			x2 = (width/lim) * (lim - i);
			y1 = x2;
			y2 = 50 * c;
			//make the curves different shades of gray
			stroke( (255/9) * c );
			line(x1,y1,x2,y2);
		}

	}
}

String art is really hard, I literally could not figure out how my curves were going to look. I ended up choosing this one because it was visually appealing and seemed interesting.

Erin Fuller Project-04-String-Art


//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project 04

// please view on safari, does not work on chrome

var x; //mouseX global
var y; //mosueY global

var control; // laser position based on for loop increments

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

function draw() {
    background(0);

    var x = mouseX * (255 / width); // changes g value relative to width
    var y = mouseY * (255 / height); // changes b value relative to width

    stroke(255, x, y); //g and b values changed 
    strokeWeight(.005); // very thin lines to look like lasers

    for (var i = 0; i < 100; i++) {
        var control = (i * mouseX) / 75; //control increases based on mouseX postion
        
        line(0, 0, control, height);//top left "laser" pointing down
        line(0, 0, width, control);//top left "laser" pointing right
   
        line(width, height, control, 0);//bottom right "laser" fanning left and up
        line(0, control, width, height);//bottom right "laser" fanning left and down
    }
}

I wanted my “String Art” to be reminiscent of a laser light show like what you see at concerts. So as you move your mouse you change how wide the “lasers” fan out and their color.

Judy Li-Project-04-String-Art

judyli: String Project 04

/*
Judy Li
Section A
judyli@andrew.cmu.edu
Project-04
*/

function setup() {
    createCanvas(400, 300);
    background(218,175,32);
}

function draw() {
	var x = 0;
	var x1 = 0;
	var x2 = 0;
	var x3 = 0;
	var x4 = 0;
	var x5 = 0;
	var y2 = 0;
	var y3 = 0;
	var y4 = 0;
	var y5 = 0;

	for (var i = 0; i < 50; i++) {
		x += 10;
		stroke(255, 0, 0);
		line(300, 300, x, 0);
	}
	for (var e = 0; e < 50; e++) {
		x1 += 10;
		stroke(0,255,255);
		line(300, 0, x1, 300);
	}
	for (var c = 0; c < 1; c += 0.1) {
		x2 = lerp(300, 400, c);
		y2 = lerp(150, 0, c);
		stroke(0, 0, 255);
		line(400, 150, x2, y3);
	}
	for (var d = 0; d < 1; d += 0.1) {
		x3 = lerp(300, 400, d);
		y3 = lerp(300, 300, d);
		stroke(255, 0, 255);
		line(400, 150, x3, y3);
	}
    for (var h = 0; h < 30; h++) {
        x4 += 10;
        y4 += 10;
        stroke(255, 255, 255);
        line(0, y4, x4, 300);
    }
    for (var s = 0; s < 30; s++) {
        x5 += 10;
        y5 += 10;
        stroke(100, 100, 100);
        line(300 - x5, 0, 0, y5);
    }
	for (var f = 0; f < 6; f++) {
		ellipse(450 - (f * 75), 150, 20 * (f / 1.5), 20 * (f / 1.5));
		ellipse(450 - (f * 75), 150, 18 * (f / 1.5), 18 * (f / 1.5));
		ellipse(450 - (f * 75), 150, 16 * (f / 1.5), 16 * (f / 1.5));
		ellipse(450 - (f * 75), 150, 14 * (f / 1.5), 14 * (f / 1.5));
		ellipse(450 - (f * 75), 150, 12 * (f / 1.5), 12 * (f / 1.5));
		ellipse(450 - (f * 75), 150, 10 * (f / 1.5), 10 * (f / 1.5));
		ellipse(450 - (f * 75), 150, 8 * (f / 1.5), 8 * (f / 1.5));
		ellipse(450 - (f * 75), 150, 6 * (f / 1.5), 6 * (f / 1.5));
		ellipse(450 - (f * 75), 150, 4 * (f / 1.5), 4 * (f / 1.5));
		ellipse(450 - (f * 75), 150, 2 * (f / 1.5), 2 * (f / 1.5)); 
		stroke(0);
		noFill();
	}
	strokeWeight(0.5);
}

This project was a super fun one because it was easier for me to take control of the direction of my lines/curves. The only thing I had a little trouble with was the ‘lerp’ command. I had to test around with the x and y values so that I was able to get a sense of what I had to tweak to get a specific string pattern.

Kevin Riordan Project-04-String-Art-Section C

kzr-project-04

/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_04*/
function setup() {
    createCanvas(400,300);
    background(255);
}

function draw() {
    var x1;
    var x2;
    var y1;
    var y2;
    //criss cross and grid lines
    strokeWeight(0.1);
    for (var i=0; i<=800; i+=10) {
        stroke(200);
        line(0,i,i,0);
        stroke(200);
        line(0,height-i,i,height);
        stroke(220);
        line(i,0,i,height);
        line(0,i,width,i);
    }
    stroke(0);
    //bottom left
    x1=0;
    x2=0;
    y1=0;
    y2=300;
    strokeWeight(0.2);
    for (var length1=0; length1<=1; length1+=0.02) {
        x2=lerp(0,400,length1);
        y1=lerp(0,300,length1);
        line(x1,y1,x2,y2);
    }
    //top left
    for (var length2=0; length2<=1; length2+=0.02) {
        x2=lerp(0,400,1-length2);
        y1=lerp(0,300,length2);
        line(x1,y1,x2,height-y2);
    }
    //bottom right
    for (var length3=0; length3<=1; length3+=0.02) {
        x1=lerp(0,400,1-length3);
        y2=lerp(0,300,length3);
        line(x1,y1,width-x2,y2);
    }
    //top right
    x1=0;
    y1=0;
    x2=400;
    y2=0;
    for (var length4=0; length4<=1; length4+=0.02) {
        x1=lerp(0,400,length4);
        y2=lerp(0,300,length4);
        line(x1,y1,x2,y2);
    }
    //setting variables back to normal
    x1=0;
    y1=0;
    x2=0;
    y2=0;
    for (var lengthC=0; lengthC<=1; lengthC+=0.025) {
        x1=lerp(0,200,lengthC);
        y2=lerp(0,150,lengthC);
        stroke(25);
        line(2*x1-width/2,height/2,width/2,height/2-(y2*2));//top left
        line(width/2,(y2*2)-height/2,2*x1+width/2,height/2);//top right
        line(2*x1-width/2,height/2,width/2,height/2+(y2*2));//bottom left
        line(width/2,1.5*height-(y2*2),2*x1+width/2,height/2);//bottom right
    }
    //inside curves setting variables back to normal
    x1=0;
    y1=0;
    x2=0;
    y2=0;
    strokeWeight(0.3);
    //curves go in a clockwise direction around
    for (var lengthIm=0; lengthIm<=1; lengthIm+=0.03) {
        x1=lerp(0,200,lengthIm);
        y2=lerp(0,150,lengthIm);
        //dark gray lines
        stroke(50);
        line(x1,y1,width/2-x2,y2); //top left quadrant upper curve
        line(width/2,height/2-y2,x1+width/2,y1); //top right quadrant upper curve
        line(width/2+x1,height/2,width,height/2-y2); //top right quadrant lower curve
        line(width/2+x1,height/2,width,height/2+y2); //bottom right quadrant upper curve
        line(width/2,height/2+y2,width/2+x1,height); //bottom right quadrant lower curve
        line(x1,height,width/2,height-y2); //bottom left quadrant lower curve
        line(0,height-y2,x1,height/2); //bottom left quadrant upper curve
        line(0,y2,x1,height/2); //top left quadrant lower curve
    }
    x1=0;
    y1=0;
    x2=0;
    y2=0;
    strokeWeight(0.4);
    for (var lengthIn=0; lengthIn<=1; lengthIn+=0.03) {
        x1=lerp(0,200,lengthIn);
        y2=lerp(0,150,lengthIn);
        //doing lines going the other way now on the outside
        stroke(100);
        line(0,height/2-y2,x1,0); //top left
        line(width/2+x1,0,width,y2); //top right
        line(width/2+x1,height,width,height-y2); //bottom right
        line(0,height/2+y2,x1,height); //bottom left
    }
    x1=0;
    y1=0;
    x2=0;
    y2=0;
    strokeWeight(0.2);
    for (var lengthIo=0; lengthIo<=1; lengthIo+=0.03) {
        x1=lerp(0,200,lengthIo);
        y2=lerp(0,150,lengthIo);
        //doing even lighter lines in the center now
        stroke(150);
        line(x1,height/2,width/2,height/2-y2); //center left
        line(width/2,y2,width/2+x1,height/2); //center right
        line(width/2,height-y2,width/2+x1,height/2); //bottom right
        line(x1,height/2,width/2,height/2+y2); //bottom left
    }
}

I started by doing each group of lines in its own for loop, and then resetting the variables after each loop. Once I finished the first four outside line curves, I realized I could just put the rest of the smaller curves inside one for loop, so I did that at the end. But that didn’t make it layer right, so I split the big loop up into three for loops to layer each differently colored group correctly. Overall, I got comfortable with for loops and the lerp function, which I did not understand at all before this project.

Min Jun Kim -Project 4 String Art

sketch

/*
Min Jun Kim
minjunki@andrew.cmu.edu
15104-B
Project 4
*/

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

function draw() {
	background(0);
	//Thickness of Strokes of points
	strokeWeight(0.5);
	//color of strokes
	stroke(100,150,150);
	translate(width/2,height/2);
	rotate(3.95);

	for (var i = 0; i<500; i += 19) {
		//first large oval sideways settings
		var x = 140*sin(i);
		var y = 100*cos(i);
		//small circle settings in middle
		var eye1x = 50*sin(i*2);
		var eye1y = 50*cos(i*2);
		//draws the points outline for all drawn shapes
		point(x,y);
		point(y,x);
		point(eye1x,eye1y);
		
		//draws the lines on the vertial line
		for (var v = -200; v<201; v += 50) {
			stroke(100,150,150);
			line(-200,v,x,y);
			line(200,v,x,y);	
		} 
		//draws the lines on the horizontal line
		for (var f = -200; f<201; f += 50) {
			line(f,-200,y,x);
			line(f,200,y,x);
			//draws lines starting from middle to the small circle
			line(0,0,eye1x,eye1y);
			line(0,0,eye1x,eye1y);
		}
		
	}
}

I started off by drawing some points using the “for” loops. I used sine and cosine to draw points along circles. This helped me visualized where the lines will go. I then used nested “for” loops to draw the lines. The lines went along all sides of the canvas and I thought that it looked well. I was messing around with the variables and the end result turned out to be an upside-down tilted heart. I then translated to the middle of the canvas in order to rotate it, then converted all the variables to scale properly. All in all, I thought the project really taught me how to use for loops.