Category: Project-04-String-Art

sketch

/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Lab 3
*/

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

function draw() {
    background(200);
    for (var i = 20; i < 400; i += 20) {

      stroke(30, 70, 80)
      line(1.2*i, 17, 5*i, 100);

      line(1.5*i, 120, 1.2*i, 300);

      line(.7*i, 0, 1.1*i, 30);

      stroke(155, 190, 20)
      line(.6*i, 0, 1.1*i, 140);

      line(.7*i, 25, 1*i, 145);

      line(.7*i, 30, 1.8*i, 160);

      line(.8*i, 50, 2.4*i, 160);

      stroke(150, 70, 10)
      line(0*i, 300, 2.4*i, 160);

      line(1*i, 240, 6*i, 300);

      stroke(30, 50, 50)
      line(0*i, 240, 2*i, 100);

      line(.3*i, 200, 8*i, 100);

      
}
    
}

This project was not one of my favorites, as I missed a few of the classes on for() function and had to do more in depth learn-by-doing. I also just don’t think string art is super attractive. HOWEVER, now that I know the for() function I can definitely think of other uses for it, as incrementation is really helpful and can also simplify some tedious coding.

sketch

/* Jaclyn Saik 
Section E
jsaik@andrew.cmu.edu
Project-04
*/
var x1; //global values for all points that create curves
var y1;
var x2;
var y2;
var increment;
var rectW;
var rectH;

function setup() {
    createCanvas(400, 300);
    background("RosyBrown");
    strokeWeight(2);
    increment = 15;
    increment = random(5, 9); //resets spacing everytime you refresh the page


}

function draw() {
    stroke("Pink");

//top right swoop
    for(var i = 0; i < width; i+= increment) { //increment variable set so I can randomize it
        x1 = width; //starting points incrementing along right edge
        y1 = i; //increments
        x2 = i; //paired with fized width to create curves
        y2 = 0; //i is paired with zero to create curves
        line(x1, y1, x2, y2);
    }
//bottom left swoop
    for(var i = 0; i < height; i+= increment) {
        x1 = i; //values flipped in order to create different curve location
        y1 = height;
        x2 = 0;
        y2 = i;
        line(x1, y1, x2, y2);
    }
//purple rectangle
    noFill(); //created a rectangle in front of the background pink curves
    stroke("DarkMagenta");
    rectW = 280;
    rectH = 220;
    rect(60, 40, rectW, rectH);

    //rectangle swoop bottom right
    push();
    translate(60, 40); //new axis for creatign curves
    for(var i = 0; i <= rectH; i+= increment) {
        x1 = i;
        y1 = rectH;
        x2 = rectW;
        y2 = rectH-i; //new curve position, so increments work opposite based on starting height 
        //another option would have been to rotate the origin 
        line(x1, y1, x2, y2);
    }
    pop(); //push pop used because I translated the origin 
   
    //rectangle swoop upper left
    push();
    translate(60, 40);
    for(var i = 0; i <= rectH; i+= increment) {
        x1 = rectW-i;
        y1 = 0;
        x2 = 0;
        y2 = i;
        line(x1, y1, x2, y2);
    }
    pop();

    
    //blue rectangle 

    noFill();
    stroke("DarkTurquoise");
    rectW = rectW-40
    rectH = rectH-40
    rect(60, 40, rectW, rectH);

    //rectangle swoop bottom right
    push();
    translate(60, 40);
    for(var i = 0; i <= rectH; i+= increment) {
        x1 = i;
        y1 = rectH;
        x2 = rectW;
        y2 = rectH-i;
        line(x1, y1, x2, y2);
    }
    pop();
   
    //rectangle swoop upper left
    push();
    translate(60, 40);
    for(var i = 0; i <= rectH; i+= increment) {
        x1 = rectW-i;
        y1 = 0;
        x2 = 0;
        y2 = i;
        line(x1, y1, x2, y2);
    }
    pop();

    //design lines
    stroke("AliceBlue");
    line(0,0, width/2, height)
    line(0, 0, width, height/2);
    line(width, height, 0, height/2);
    line(width, height, width/2, 0);

    //gold rectangle 

    noFill();
    stroke("Gold");
    rectW = rectW-40
    rectH = rectH-40
    rect(60, 40, rectW, rectH);

    //rectangle swoop bottom right
    push();
    translate(60, 40);
    for(var i = 0; i <= rectH; i+= increment) {
        x1 = i;
        y1 = rectH;
        x2 = rectW;
        y2 = rectH-i;
        line(x1, y1, x2, y2);
    }
    pop();
   
    //rectangle swoop upper left
    push();
    translate(60, 40);
    for(var i = 0; i <= rectH; i+= increment) {
        x1 = rectW-i;
        y1 = 0;
        x2 = 0;
        y2 = i;
        line(x1, y1, x2, y2);
    }
    pop();


}

Creating string art was a challenging process, especially after translating the origin of my piece around a couple times to experiment. This was definitely an exercise in understanding the coordinate system enough to assign opposing values to the ends of points. I liked playing with the foreground and background of my curves, and I thought it was definitely one the prettiest projects we have made so far.

jenny’s sketch

//Jenny Hu
//Section E
//jjh1@andrew.cmu.edu
//Project 04 — String Art

var R1;
var R2;
var R3;
var R4;
var G1;
var G2;
var G3;
var G4;
var B1;
var B2;
var B3;
var B4;


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

function draw() {
    background (250); 

    //Draw first curve
    for ( var i=0; i<100; i++){
      stroke(R1, G1, B1);
      strokeWeight(1);
      line(i, 0 , i*5, height/2); 
    }

    //Draw second curve
    for ( var i=0; i<200; i++){
      stroke(R2, G2, B2);
      strokeWeight(0.5);
      line(i*25, 300-height/2, i*mouseX, 300); 
    }

    //Draw third curve
    for ( var i=0; i<100; i++){
      stroke(R3, G3, B3);
      strokeWeight(0.75);
      line(400-i*10, 0, i*15, 300); 
    }    

    //Draw fourth curve
    for ( var i=0; i<100; i++){
      stroke(R4, G4, B4);
      strokeWeight(0.5);
      line(400-i*(mouseX*0.5), 0, i*15, 300); 
    }  
  }

  function mousePressed(){
      // //variable stroke colors
      R1 = random(0,250);
      G1 = random(0,250);
      B1 = random(0,250);
      R2 = random(0,250);
      G2 = random(0,250);
      B2 = random(0,250);
      R3 = random(0,250);
      G3 = random(0,250);
      B3 = random(0,250);
      R4 = random(0,250);
      G4 = random(0,250);
      B4 = random(0,250);
  }

In this project, I iterated some simple for-loops for each curve. In some cases, dynamic to the mouse’s X position, and in other cases, static. I think what’s nice about the movement is that it’s a dynamic set of strings, tied to a static set, which creates a satisfying connection between their visual elements and rhythm!

This time I didn’t dabble as much in composition before writing the program, instead, I really enjoyed seeing the composition emerge as I played with the numbers. Another nice touch which makes the interactions a bit more satisfying is the additional randomized color sets.

sketch

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

var ratio = 0.75; // width to height ratio
var radius = 400; // length of radiating center lines

function draw() {
    background(47,19,116);
    // circles:
    // outer circle
    fill(244, 96, 54);
    noStroke();
    ellipse(width / 2, height / 2, 300, 300);
    // middle circle
    fill(245, 110, 72);
    noStroke();
    ellipse(width / 2, height / 2, 150, 150);
    // inner circle
    fill(246, 124, 90);
    noStroke();
    ellipse(width / 2, height / 2, 50, 50);

    // lines:
    // center radial
    for (var a = 0; a < 360; a += 10) {
      stroke(255, 249, 104);
      line(width / 2, height / 2,
        // trig uses var radius as hypotenuse
        width / 2 + radius * cos(radians(a)),
        height / 2 + radius * sin(radians(a)));
    }
    // bottom left corner
    for (var b = 0; b < width; b += 7) {
      stroke(66, 51, 227);  
      line(0, b, b / ratio, height);
    }
    // top left corner
    for (var c = 0; c < width; c += 7) {
      stroke(30, 81, 221);  
      line(0, c, width - c / ratio, 0);
    }
    // top right corner
    for (var d = 0; d < width; d += 7) {
      stroke(66, 51, 227);  
      line(width, d, d / ratio, 0);
    }
    // bottom right corner
    for (var e = 0; e < width; e += 7) {
      stroke(30, 81, 221);  
      line(width, e, width - e / ratio, height);
    }
}

It took me a while to catch on, but I hit one good curve and used it to figure out the others. I played around with difference colour schemes and decided to go with a sun, stars, and space theme from there.

sketch

/* Dani Delgado
Section E
ddelgad1@andrew.cmu.edu
Project-04
*/
function setup() {
    createCanvas(400, 300);
    background(10);
   
}
function draw() {
	//draw the sixth layer of lines (brownish black lines)
	//these lines are on the "inside" of all other line layers (its the lowest layer)
    for(var g = 0; g < 1.5 ; g += 0.09) {
	    //set the stroke style
		strokeWeight(0.2);
		stroke(35, 19, 0);
		//determine the lerp values
		x1 = lerp(0, width / 2.15, g);
        y1 = lerp(0, height * 2.15, g);
        x2 = lerp(width * 2.15, 0, g);
        y2 = lerp(height / 2.15, 0, g);
        //draw the curves
		line(x1, 0, width, y1);
		line(x2, height, 0, y2);
		line(x1, height, width, y2);
		line(x2, 0, 0, y1);
    }
	//draw the fifth layer of lines (brown lines)
	//these lines are on the "inside" the above layers of lines
	for(var f = 0; f < 1.4 ; f += 0.08) {
	    //set the stroke style
		strokeWeight(0.3);
		stroke(51, 34, 0);
		//determine the lerp values
		x1 = lerp(0, width / 1.9, f);
        y1 = lerp(0, height * 1.9, f);
        x2 = lerp(width * 1.9, 0, f);
        y2 = lerp(height / 1.9, 0, f);
        //draw the curves
		line(x1, 0, width, y1);
		line(x2, height, 0, y2);
		line(x1, height, width, y2);
		line(x2, 0, 0, y1);
    }
   //draw the fourth layer of line (dark orange lines)
   //these lines are "inside" the above layer of lines
    for(var e = 0; e < 1.3; e += 0.07) {
		//set the stroke style
		strokeWeight(0.4);
		stroke(102, 68, 0);
		//determine the lerp values
		x1 = lerp(0, width / 1.75, e);
        y1 = lerp(0, height * 1.75, e);
        x2 = lerp(width * 1.75, 0, e);
        y2 = lerp(height / 1.75, 0, e);
        //draw the curves
		line(x1, 0, width, y1);
		line(x2, height, 0, y2);
		line(x1, height, width, y2);
		line(x2, 0, 0, y1);
    }
    //draw the third layer of lines (medium orange lines)
    //these lines are "inside" the above layer of lines
    for(var d = 0; d < 1.2; d += 0.06) {
		//set the stroke style
		strokeWeight(0.6);
		stroke(204, 136, 0);
		//determine the lerp values
		x1 = lerp(0, width / 1.5, d);
        y1 = lerp(0, height * 1.5, d);
        x2 = lerp(width * 1.5, 0, d);
        y2 = lerp(height / 1.5, 0, d);
        //draw the curves
		line(x1, 0, width, y1);
		line(x2, height, 0, y2);
		line(x1, height, width, y2);
		line(x2, 0, 0, y1);
	}
	//draw the second layer of lines (light orange lines)
	//these lines are "inside" of the abvoe layer of lines
	for(var c = 0; c < 1.1; c += 0.05) {
		//set the stroke style
		strokeWeight(0.8);
		stroke(255, 204, 102);
		//determine the lerp values
		x1 = lerp(0, width / 1.5, c);
        y1 = lerp(0, height, c);
        x2 = lerp(width * 1.5, 0, c);
        y2 = lerp(height, 0, c);
        //draw the curves
		line(x1, 0, width, y1);
		line(x2, height, 0, y2);
		line(x1, height, width, y2);
		line(x2, 0, 0, y1);
	}
	//draw the uppermost line set (creme colored lines)
	//the first line set will curve the corners 
	for(var i = 0; i < 1; i += 0.04) {
		//set the stroke style
		strokeWeight(1);
	    stroke(250, 240, 220);
	    //determine the lerp variables
        x1 = lerp(0, width, i);
        y1 = lerp(0, height, i);
        x2 = lerp(width, 0, i);
        y2 = lerp(height, 0, i);
        //draw the curves
		line(x1, 0, width, y1);
		line(x2, height, 0, y2);
		line(x1, height, width, y2);
		line(x2, 0, 0, y1);
}
    
}

Since this is my first experience with for loops (outside of the other class assignments), I found this to be very challenging since I first had to solidify the conceptual aspect of the code before I could begin to work on the physical coding. Once I got into the groove of it though I had fun with the assignment!

sketch

/*
Alice Fang
Section E
acfang@andrew.cmu.edu
Project-04
*/

var x1; // (x1, y1, x2, y2) variables for lines
var y1;
var x2;
var y2;

var circlesize = 270; // circle diameter
var squaresize = 80; // square length

function setup() {
    createCanvas(400, 300);
    background(0);
    
}
function draw() {
    stroke(57, 255, 20);
    strokeWeight(0.5);

    // bottom left corner curve
    for (var i = 0; i < width; i += 20) {
        x1 = i;
        y1 = height; 
        y2 = i;
        x2 = 0; 
        line(x1, y1, x2, y2);
    }

    // top right corner curve
    for (var i = width; i > 0; i -= 20) {
        x1 = i + width - 300;
        y1 = 0; 
        y2 = i;
        x2 = width; 
        line(x1, y1, x2, y2);
    }

    //bottom right corner curve
    push();
    translate(width / 4, height);
    rotate(radians(270));
    for (var i = 0; i < width; i += 20) {
        x1 = i;
        y1 = height; 
        y2 = i;
        x2 = 0; 
        line(x1, y1, x2, y2);
    }
    pop();

    //top left corner curve
    push();
    translate(0, height + width / 4);
    rotate(radians(270));
    for (var i = width; i > 0; i -= 20) {
        x1 = i + width - 300;
        y1 = 0; 
        y2 = i;
        x2 = width; 
        line(x1, y1, x2, y2);
    }
    pop();

    // center square outline
    noFill();
    rect(width / 2 - 40, height / 2 - 40, squaresize, squaresize);

    // white circle outlines 
    stroke(240);
    ellipse(width / 2, height / 2, circlesize, circlesize);
    ellipse(width / 2, height / 2, 115, 115);
    ellipse(width / 2, height / 2, circlesize / 15, circlesize / 15);

    fill(240);
    ellipse(width / 2, height / 2, circlesize / 27, circlesize / 27);

    // curves generated in square
    noFill();
    strokeWeight(0.5);
    stroke(57, 255, 20);

    push(); // translate (0, 0) to top left corner of square
    translate(width / 2 - squaresize/2, height / 2 - squaresize/2);
    square(0, 0); // top X shape (function square() established below)

    push();
    translate(0, squaresize); // left X shape
    rotate(radians(270));
    square(0, 0);
    pop();

    push();
    translate(squaresize, 0); // right X shape
    rotate(radians(90));
    square(0, 0);
    pop();

    push(); 
    translate(squaresize, squaresize); // bottom X shape
    rotate(radians(180));
    square(0, 0);
    pop();

    pop();
    
    // cross hair (white perpendicular lines)
    stroke(255);
    line(width / 2, 0, width / 2, height);
    line(0, height / 2, width, height / 2);
}

function square(x, y){ // produces X-shape within square
        push();
        translate(x, y);
        noFill();
        strokeWeight(0.5);
        stroke(57, 255, 20);
        for (i = 0; i < 30; i+=10) {
            x1 = 0;
            x2 = squaresize;
            y1 = .75*i + 20;
            y2 = -i + 20;
            line(x1, y1, x2, y2);
            line(x2, y1, x1, y2);
        }
        pop();
}

This was inspired by lasers that my mind associates with laser security systems, as well as eye-scanning mechanisms. (Or perhaps, a target scope aimed at an eye? They’re all interpretations within the same realm). The color scheme of neon green and black were especially influenced by this. I also used this project as an opportunity to try out and practice defining and creating my own function.

sketch

/*
Eliza Pratt
Section E
elpratt@andrew.cmu.edu
Project-04
*/

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

function draw() {
    background(0);
    
    var y = 0;
    var x = 0;
    var y1 = height/2;
    var x1 = width/2
    var y2 = height/4;
    var x2 = width/4;

    //dark gray curves
    for (var z = 0; z < 35; z++) {
        stroke(180 - x2/2);
        //bottom left curve
        line(width - x2, height, 0, height - y2);
        //top right curve
        line(x2, 0, width, y2);

        x2 += 6;
        y2 += 6;

    }
    
    //gray center curves
    for (var i = 0; i < 44; i++) {
        stroke(x/2);
        //bottom center curve
        line(width - x, height - y, x, height);
        //top center curve
        line(x, y, width - x, 0);

        x += 7;
        y += 7;
    }

    //white curves
    for (var w = 0; w < 20; w++) {

        stroke(255);
        //bottom right curve
        line(x1, height, width, height - y1);
        //top left curve
        line(width - x1, 0, 0, y1);

        x1 = x1*1.04;
        y1 = y1*1.04;

    }

}

Although confusing at first, I had a lot of fun with this assignment! While it’s frustrating when the lines don’t map out the way you want them to, it was always a surprise when I refreshed my browser. I also played around with adjusting the stroke color in my for loops, which led to some pretty cool gradients!