Category: Project-04-String-Art

sketch

/* Rachel Lee
Section E
rwlee@andrew.cmu.edu
Project- 04: String Art 
*/

// global variables 
var increment = 10; // spacing between different line segments

function setup() {
    createCanvas(400, 300);
    background(250, 155, 130);
}

function draw() {
	strokeWeight(random (0.3, 1)); //randomizes stroke weights within 
	//curve and 'grid' elements (vertical and horizontal inner mesh layer)

// top right swoop
    for (var a = 0; a < width; a += increment) {
        stroke(240, 200, 90);
        strokeWeight;
        line(a, 0, width, a);
	}

// bottom left swoop
    for (var b = 0; b < height; b += increment) {
   	    stroke(160, 190, 225);
   	    strokeWeight;
   	    line(b, height, 0, b); 
   }

// inner mesh layer top right 
    for (var c = 50; c < width; c += increment) { //curve starts at 50 pixels across screen
    	stroke(150, 200, 200);
    	strokeWeight;
    	line(c, 0, 300, c); //curve begins to taper at 300 pixels (width) 
    } 

// inner mesh layer bottom left
    for (var d = 50; d < height; d += increment) { // starts 50 pixels down left side of screen
        stroke(150, 215, 120);
        strokeWeight;
        line(0, d, d, height); 
    } 

// vertical inner mesh layer
    for (var d = 80; d < height; d += increment) { 
        stroke(215, 215, 120);
        strokeWeight;
        line(d, 0, d, height); // lines begin at 80 pixels from left side of screen
    } 

// horizontal inner mesh layer
    for (var e = 0; e < width; e += increment) {
    	stroke(210, 205, 80);
    	strokeWeight;
    	line(0, e, width, e);
    }

}

For my String Art project, I was inspired by one of my favourite artists, Naum Gabo. I initially based my piece on his sculpture Linear Construction No. 1, but decided to add my own flair with color, and vary the types of shapes that were layered in the inner ‘mesh’ panels. While challenging, this project was really fun to experiment with– I especially liked seeing how randomising the stroke weight affected the dynamics of the piece.

Christine Chen-Project-04-String Art

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Assignment-04-B 
*/

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

function draw() {
    background(136, 164, 255); //background blue

    var increment = 7.5;
    //the smaller the increment it, the denser the lines

    //Blue pyramid-like lines in the center
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.9);
        stroke(0, 80, 105); 
        line (a, height, width - a, 0);
    }

    //LEFT LINES
    //rotate
    push(); 
    translate(width/2, height/2); 
    angleMode(DEGREES);
    rotate(90); 
    translate(-width/2, -height/2); 
        
    
    //Left side upper corner 
    //counting from outer blue lines to inner red lines
    //1st
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(0, 80, 105);
        line (0, a, a, 400);
    }
    
    //2nd 
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(50, 80, 105); 
        line (0, a, a, 300);
    }
    
    //3rd 
    for (var a = 0; a < width + 100; a = a + increment) {
        strokeWeight(0.4);
        stroke(100, 80, 105); 
        line (0, a, a, 250);
    }
    
    //4th
    for (var a = 0; a < width + 100; a = a + increment) {
        strokeWeight(0.4);
        stroke(150, 80, 105); 
        line (0, a, a, 220);
    }
    
    //5th
    for (var a = 0; a < width + 100; a = a + increment) {
        strokeWeight(0.4);
        stroke(255, 80, 105); 
        line (0, a, a, 200);
    }
    
    //Left side lower corner 
    //counting from outer blue lines to inner red lines
    //1st
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(0, 80, 105); 
        line (width, a, width - a, 400);
    }
    
    //2nd
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(50, 80, 105); 
        line (width, a, width - a, 300);
    }
    
    //3rd
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(100, 80, 105); 
        line (width, a, width - a, 250);
    }
    
    //4th
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(150, 80, 105); 
        line (width, a, width - a, 220);
    }
    
    //5th
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(255, 80, 105); //red line color
        line (width, a, width - a, 200);
    }

    pop(); 


    //RIGHT LINES
    //rotate
    push(); 
    translate(width/2, height/2); 
    angleMode(DEGREES);
    rotate(270); 
    translate(-width/2, -height/2); 
         
     
    //Right side lower corner
    //counting from outer blue lines to inner red lines
    //1st
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(0, 80, 105);
        line (0, a, a, 400);
    }
     
    //2nd 
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(50, 80, 105); 
        line (0, a, a, 300);
    }
     
    //3rd 
    for (var a = 0; a < width + 100; a = a + increment) {
        strokeWeight(0.4);
        stroke(100, 80, 105); 
        line (0, a, a, 250);
    }
     
    //4th
    for (var a = 0; a < width + 100; a = a + increment) {
        strokeWeight(0.4);
        stroke(150, 80, 105); 
        line (0, a, a, 220);
    }
     
    //5th
    for (var a = 0; a < width + 100; a = a + increment) {
        strokeWeight(0.4);
        stroke(255, 80, 105); 
        line (0, a, a, 200);
    }
     
    //Right side upper corner
    //counting from outer blue lines to inner red lines
    //1st
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(0, 80, 105); 
        line (width, a, width - a, 400);
         }
     
    //2nd
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(50, 80, 105); 
        line (width, a, width - a, 300);
    }
     
    //3rd
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(100, 80, 105); 
        line (width, a, width - a, 250);
    }
     
    //4th
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(150, 80, 105); 
        line (width, a, width - a, 220);
    }
     
    //5th
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(255, 80, 105); //red line color
        line (width, a, width - a, 200);
    }

    pop(); 
}

I think this project is particularly hard because it is so difficult to visualize what your codes are going to draw. However, once I got a part of my lines to work, it was easier to plan out what I want to create with the part I had. After playing around with my strings for a while, I finally settled with this piece where the left and right strings wraps around the middle to emphasize the forms of the pyramid-like strings in the center. Having the wrapping strings at the top and bottom isn’t as visually interesting and having the wrapping strings on four sides is just too much.