Project 4: String Art

sketch

/*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();
        angleMode(RADIANS);
        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

sketch

//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.

img_1593
Some Idea Sketches.

Michal Luria – Project 04 – String Art

mluria-project-04


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.

sketch-04

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.

 

kdlee-project-04

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

sketch

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

sketch

/*
* 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

sketch

//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!

sketch

//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);
// }