## Project 4: String Art

``````/*Emma Shi
Section B
eyshi@andrew.cmu.edu
Project 4 String Art
*/

function setup () {
createCanvas(640, 480);
}

function draw() {
background("navy");

var a = 0;
var b = 640;
var c = 480;
var r = atan2(mouseY-height/2, mouseX-width/2);

for (var i = a; i < 640; i += 10) { //starts at 0, adds 10 to i until 640

noFill();
stroke("yellow");
strokeWeight(1.5);

translate(width/2, height/2);
push();
rotate(r);
ellipse(a, a, 10, 10);
pop();
rotate(r);//rotates lines around the center ellipse when mouse is moved

line(a, a, width-c, b); //second line from the bottom left
line(a, a, b, i); //line closest to the bottom right
line(a, a, -30, i+300); //line closest to the bottom left
line(a, a, i+600, b); //second line from the bottom right
}
}``````

For this week’s project, my original idea was to make a string art “circle” where lines from all corners of the canvas would come together to outline an empty ellipse, similar to an eye of a hurricane. However, after playing around with it, I ended up making lines that spun around a center ellipse. When the user moves the mouse up or down, the lines rotate quickly and form an outline of another ellipse, which changes in diameter as the mouse moves along the canvas.

## Grace Cha – 04 – String Art

``````//Grace Cha
//Section C
//heajinc@andrew.cmu.edu
//PROJECT-04- STRING ART

function setup() {
createCanvas(640,480);
}

function draw() {
background(0);

for (var i = 20; i < 480; i += 5) { //start at 20 to 400 by increments of 5

////////EACH COLORED 'BRIDGE' IS MADE BY TWO CURVES SHAPES THAT MEET IN THE MIDDLE ///////

var xx = i * .3; //second x value of LEFT CURVE
var mirrorImage = width - i; //first x value of RIGHT CURVE
var mirrorImage1 = width - i * .3; //second x value of RIGHT CURVE
var curveHeight = 400; //first y value of curve lines
var curve = HALF_PI * i; //second y value of curve lines

var flippedHeight = height - curveHeight;
var flippedCurve = height - curve;

strokeWeight(7);
stroke(232,244,31,20); //YELLOW TWIST IN CENTER
line( i + 100, 200, i / 20, PI+QUARTER_PI * i) //LEFT FLAP
line( mirrorImage, 200, width - i / 20,PI+QUARTER_PI * i); //RIGHT FLAP

//EACH COLORED 'BRIDGE' IS MADE BY TWO CURVES SHAPES
strokeWeight(1);
stroke(155,31,239,60); //MIDDLE PURPLE
line(i + 250 ,curveHeight, xx + 250, curve); //LEFT CURVE
line(mirrorImage -250, curveHeight, mirrorImage1 - 250, curve); //RIGHT CURVE

stroke(9,157,150,60); //TEAL
line(i + 200 , curveHeight, xx + 200, curve);//LEFT CURVE
line(mirrorImage - 200, curveHeight, mirrorImage1 - 200, curve);//RIGHT CURVE

stroke(4,74,168,60);//BLUE
line(i + 150 ,curveHeight, xx + 150, curve);//LEFT CURVE
line(mirrorImage - 150, curveHeight, mirrorImage1 - 150, curve);//RIGHT CURVE

stroke(199,66,71,96); //CENTERMOST BURGENDY
line(i + 100 ,curveHeight, xx + 100, curve);//LEFT CURVE
line(mirrorImage -100, curveHeight, mirrorImage1 - 100, curve);//RIGHT CURVE

stroke(239,65,54,99); //RED
line(i + 50, curveHeight, xx + 50, curve);//LEFT CURVE
line(mirrorImage -50, curveHeight, mirrorImage1 - 50, curve);//RIGHT CURVE

stroke(155,31,239,80); //FRONT VIOLET
line(i , curveHeight, xx, curve);//LEFT CURVE
line(mirrorImage , curveHeight, mirrorImage1, curve);//RIGHT CURVE

//////FLIPPPED VERSIONS///// I ONLY CHOSE A FEW TO FLIP

strokeWeight(1);
stroke(155,31,239,60); //MIDDLE PURPLE
line(i + 250 ,flippedHeight, xx + 250, flippedCurve);//LEFT CURVE
line(mirrorImage -250,flippedHeight, mirrorImage1 - 250, flippedCurve);//RIGHT CURVE

stroke(199,66,71,96); //CENTERMOST BURGENDY
line(i + 100 ,flippedHeight, xx + 100, flippedCurve);//LEFT CURVE
line(mirrorImage -100, flippedHeight, mirrorImage1 - 100, flippedCurve);//RIGHT CURVE

stroke(155,31,239,80); //FRONT VIOLET
line(i , flippedHeight, xx, flippedCurve);//LEFT CURVE
line(mirrorImage , flippedHeight, mirrorImage1, flippedCurve);//RIGHT CURVE
}
}
``````

My process included with some conditionals I wanted to make for my string art.  I largely played around with overlapping colors and opacity of string colors to indicate dimension.

## Michal Luria – Project 04 – String Art

``````
function setup() {
createCanvas(640,480);
background(0);

}

function draw() {

strokeWeight(2);

var incrW = width/50; //define increment for X
var incrH = height/50; //define increment for Y

//top peach (lowest layer)
var startX1 = 0;
var startY1 = 0;
var endX1 = width;
var endY1 = 0.4*height;

stroke(248,178,142);
for (var i = 0; i < 40; i++){
line(startX1, startY1, endX1, endY1);
startX1 += incrW;
startY1 += incrH;
endY1 -= incrH;
}

//bottom peach (lowest layer)
var startX2 = 0;
var startY2 = 0.6*height;
var endX2 = width;
var endY2 = height;

for (var i = 0; i < 40; i++){
line(endX2, endY2, startX2, startY2);
endX2 -= incrW;
endY2 -= incrH;
startY2 += incrH;
}

//top pink
var startX3 = 0;
var startY3 = 0;
var endX3 = width;
var endY3 = 0.55*height;

stroke(241,115,127);
for (var i = 0; i < 40; i++){
line(startX3, startY3, endX3, endY3);
startX3 += incrW;
startY3 += incrH;
endY3 -= incrH;
}

//bottom pink
var startX4 = 0;
var startY4 = 0.45*height;
var endX4 = width;
var endY4 = height;

for (var i = 0; i < 40; i++){
line(endX4, endY4, startX4, startY4);
endX4 -= incrW;
endY4 -= incrH;
startY4 += incrH;
}

//top violet
var startX5 = 0;
var startY5 = 0;
var endX5 = width;
var endY5 = 0.7*height;

stroke(193,109,135);
for (var i = 0; i < 40; i++){
line(startX5, startY5, endX5, endY5);
startX5 += incrW;
startY5 += incrH;
endY5 -= incrH;
}

//bottom violet
var startX6 = 0;
var startY6 = 0.3*height;
var endX6 = width;
var endY6 = height;

for (var i = 0; i < 40; i++){
line(endX6, endY6, startX6, startY6);
endX6 -= incrW;
endY6 -= incrH;
startY6 += incrH;
}

//top purple
var startX7 = 0;
var startY7 = 0;
var endX7 = width;
var endY7 = 0.85*height;

stroke(109,92,128);
for (var i = 0; i < 40; i++){
line(startX7, startY7, endX7, endY7);
startX7 += incrW;
startY7 += incrH;
endY7 -= incrH;
}

//bottom purple
var startX8 = 0;
var startY8 = 0.15*height;
var endX8 = width;
var endY8 = height;

for (var i = 0; i < 40; i++){
line(endX8, endY8, startX8, startY8);
endX8 -= incrW;
endY8 -= incrH;
startY8 += incrH;
}

//top blue
var startX9 = 0;
var startY9 = 0;
var endX9 = width;
var endY9 = height;

stroke(50,93,128);
for (var i = 0; i < 50; i++){
line(startX9, startY9, endX9, endY9);
startX9 += incrW;
startY9 += incrH;
endY9 -= incrH;

}

//bottom blue
var startX10 = 0;
var startY10 = 0;
var endX10 = width;
var endY10 = height;

for (var i = 0; i < 50; i++){
line(endX10, endY10, startX10, startY10);
endX10 -= incrW;
endY10 -= incrH;
startY10 += incrH;

}

noLoop();

}``````

In this project I wanted to try and create the physical feeling of actual strings that is the core of string art. I started with a sketch to understand the logic of what I wanted to create (below), and then went on to create it layer by layer. I think the layers in this project created the sense of physicality that I wanted for the final result.

## Kyle Lee Line Art

I wanted to keep the pattern simple and clean. Although this isn’t as groundbreaking or experimental, I certainly helped me understand how to use for loops to create curves.

``````function setup() {
createCanvas(600, 600);
}

function draw() {
background(255);//white
strokeWeight(1);//thin line
var spacing = 25; // How far apart is each line
var increment = 50;// double spacing, offsets lines, growth

for (var i = 0; i < 25; i = i + 1) {//20 lines
var x = (0 + i * spacing);
var y = (0 + i * spacing);

stroke("#FC4BAB");//pink
line(x, 0, width, y);

stroke("#FCCA53");//yellow
line(0, y, x, height);

stroke("#03C9BA");//green
line(0, y, width - x, 0);

stroke("#343AE9");//blue
line(x, height, width, height - y);
}
}
``````

## Sofia Syjuco – Project-04

``````var strokeColorR = 0; // stroke color R value
var strokeColorG = 255; // stroke color G value
var strokeColorB = 0; // stroke color B value

function setup() {
createCanvas(640, 480); // make a canvas 800x200
background (244, 120, 100); // background color

for (var i = 1; i < 10; i++) {// add 1 to i every loop, 10 times
strokeColorR += 30;// add 30 to stroke R color
strokeColorG -= 20;// subtract 20 to stroke G color
strokeColorB += 30; // add 30 to stroke B color
stroke(strokeColorR, strokeColorG, strokeColorB); // stroke color
strokeWeight (8); // thicker lines at 8
line(i*20, 200, 200, 200-(i*20)); // top left quadrant lines
line(200, 200-(i*20), 400-(i*20), 200); // top right quadrant lines
line(i*20, 200, 200, 200+(i*20)); // bottom left quadrant lines
line(200, 200+(i*20), 400-(i*20), 200); // bottom right quadrant lines
}
}
function draw() {
}``````

In my process for this assignment, I sketched out all the points on a piece of paper for one quadrant of the piece, and slowly worked from there. Once I had figured out how the for loop would work with one quadrant, I worked on trying to better understand how altering the values of the first quadrant could accomplish drawing the next three.

## Project-04-StringArt

``````/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Project 04
*
*/

function setup() {
createCanvas(640, 480);
}

function draw() {
background(140, 205, 255);

for (var i = 0; i < 320; i ++) {
var n = (i * 100);
stroke(252, 258, 192);
strokeWeight(1);
line(width/2, height/2, 0 - n/2, n);
// ^ bottom right hand yellow lines
line(width/2, height/2, 640 + n/2, n);
// ^ bottom left hand yellow lines
line(width/2, 0, 0 - n/2, n);
// ^ top right hand yellow lines
line(width/2, 0, 640 + n/2, n);
// ^ top left hand yellow lines
}
for (var i = 0; i < 240; i = i + 10) {
stroke(252, 89, 83);
strokeWeight(2);
line(width/2, i, width/2 + i, height/2);
// upper right hand red-ish curve
line(width/2, height - i, width/2 + i, height/2);
// bottom right hand red-ish curve
line(width/2, i, width/2 - i, height/2);
// upper left hand red-ish curve
line(width/2, height - i, width/2 - i, height/2);
// bottom left hand red-ish curve

strokeWeight(1.5);
line(width, 0, width/2 + i, height/2);
// upper right hand red-ish "triangle"
line(width, height, width/2 + i, height/2);
// bottom right hand red-ish "triangle"
line(0, 0, width/2 - i, height/2);
// upper left hand red-ish "triangle"
line(0, height, width/2 - i, height/2);
// bottom left hand red-ish "triangle"
}
}

``````

Although I feel like I learned a lot more about lines and loops, I still felt quite frustrated during this process and I feel like I still need to practice much more to be fully comfortable. The almost halo-like effect from the yellow lines wasn’t intentional at first, but after I figured out how to do it I actually ended up liking it.

## JihoonPark_project04

``````//Jihoon Park
//Section A
//jihoonp@andrew.cmu.edu
//project-04: String Art

var i;
var j;
var k;
var l;
var space = 50; //space between starting points of lines
var countX = 9; //number of lines in X axis of a quarter
var countY = 7; //numver of lines in Y axis of a quarter
var boxW = 150; // width of a box
var speed = 1.3;
var dir = 1;
var vertX = 0; // x coordinate of vertex
var vertY = 0; // y coordinate of vertex
var vertW = 0.5*boxW; // vertex limit

function setup() {
createCanvas(640, 480, WEBGL);
noCursor();

}

function draw() {
background(255);

vertX+=dir*speed;
if (vertX>=vertW) {
dir=-dir;
} else if (vertX<=-vertW) {
dir=-dir;
}
//x coordinate of vertex goes back and forth
vertY+=dir*speed;
if (vertY>=vertW) {
dir=-dir;
} else if (vertY<=-vertW) {
dir=-dir;
}

for (var k = -countX; k < 0; k=k+1) {
beginShape(LINES);
vertex(k*space, -height, 0);
vertex(vertX, -vertY, 0);
endShape();
//bottom edge left half lines

beginShape(LINES);
vertex(k*space, height, 0);
vertex(vertX, vertY, 0);
endShape();
//top edge left half lines
}

for (var  l= -countY; l < 0; l=l+1) {
beginShape(LINES);
vertex(-width, l*space, 0);
vertex(vertX, -vertY, 0);
endShape();
//left edge bottom half lines

beginShape(LINES);
vertex(width, l*space, 0);
vertex(-vertX, -vertY, 0);
endShape();
//right edge bottom half lines

}

for (var i = 0; i < countX; i=i+1) {
beginShape(LINES);
vertex(i*space, -height, 0);
vertex(-vertX, -vertY, 0);
endShape();
//bottom edge right half lines

beginShape(LINES);
vertex(i*space, height, 0);
vertex(-vertX, vertY, 0);
endShape();
//top edge right half lines
}

for (var  j= 0; j < countY; j=j+1) {
beginShape(LINES);
vertex(-width, j*space, 0);
vertex(vertX, vertY, 0);
endShape();
//left edge top half lines

beginShape(LINES);
vertex(width, j*space, 0);
vertex(-vertX, vertY, 0);
endShape();
//right edge top half lines
}

//box rotates
rotateX(frameCount*0.02);
rotateY(frameCount*0.02);
ambientMaterial(200);
box(boxW, boxW, boxW);

}``````

I created lines that could be seen as controlling lines for a box to rotate. However, since the canvas had to be a 3d space, I had to use begin/end shape with vertices.

## String Art-04-sehenry

While working on this project, I became very comfortable with the for() function in p5.js. I started off just writing random for() functions but then saw how easy it was to manipulate the distances and lengths and positions of my shapes and variables. I spent a little too long on this because I wanted to make an eye in the middle of the frame but it was fun!

CLICK ON THE EYE!

``````//Seth Henry

//Section B 10:30 Tuesday

//sehenry@andrew.cmu.edu

//Assignment-String Art

function setup() {
createCanvas(640, 480);

text("p5.js vers 0.5.2 test.", 10, 15);
}

function draw() {
background(220);
fill('violet blue'); //randomcolors
rect(0, 0, width, height); //background rectangle
if (mouseIsPressed) {
fill(255);
strokeWeight(2);
ellipse(width/2, height/2, 250, 250); //eyeball
fill(0);
ellipse(width/2, height/2, 100, 100); //pupil
fill(255);
ellipse(width/2+20, height/2-30, 10, 10);//whiteball
strokeWeight(2);
line(width/2-75, height/2-100, width/2+75, height/2-100); //top eyelid
line(width/2-75, height/2+100, width/2+73, height/2+100); //bottom eyelid
line(width/2-40, height/2-100, width/2-40, height/2-120); //eyelashes
line(width/2, height/2-100, width/2, height/2-125);
line(width/2+40, height/2-100, width/2+40, height/2-120);
}

else {
strokeWeight(3);
fill(102,51,150);
ellipse(width/2, height/2, 250, 250); //eyeball
strokeWeight(3);
line(195, 240, 444, 240); //eyelid
line(220, 240, 180, 260); //eyelashes
line(260, 240, 230, 280);
line(380, 240, 410, 280);
line(420, 240, 460, 260);
for (var ln = 280; ln < 380 ; ln+=40){ //middle eyelashes
line(ln, height/2, ln, height/2 + 50);
}

}
strokeWeight(1)
stroke(random(255), random(255), random(255));
// for(var i = 1; i<640; i+=10){ //Makes a sequence of straight lines from the top left to the bottom right
// line(i,50,50,i);
// }
for(var e = 1; e < 640; e += 5){ //Makes a curve arching to the top left of the screen
line(width-e, 50, 50, e);
}
for(var a = 1; a < 640; a += 10){ //Makes a curve arching to the top right
line(a, 50, width - 50, a);
}
for(var o = 1; o < 640; o += 10){ //Makes a curve arching to bottom right

line(width-o, height -50, width - 50, o);
}
for(var p = 1; p < 640; p += 10){ //Makes a curve arching to the bottom left.

line(p, height - 50, 50, p);
}

}
//Previous curves that I decided to exclude

// 	for(var y = 1; y<640; y+=10){
// 		line(y,height-y, width-50,y);
// 	}
// 	for(var x = 1; x < 640; x+=5){
// 		line(width-x, height-x, 50, x);
// }

``````