Category: Section E

julie_choi_string_art

/*Julie Choi
15-104 Section E
jjchoi@andrew.cmu.edu
Project-04
*/

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

function draw() {
    background(255);
    // declare varables along the edges 
    var x1 = width/4;
    var x2 = width/2;
    var y1 = height/2;
    var y2 = height/3;
    
    // start a for loop for lines
    for (var i = 0; i < 35; i++) {
        strokeWeight(1.5);
        stroke(255, 0, 0);
        line(width - x1, 0, 0, height - y1);
        stroke(0, 0, 255);
        line(width, height - y1, width - x2, height);
        stroke(0, 255, 54);
        line(x1, 0, width, height - y2);
        stroke(255, 0, 234);
        line(0, height - x1, y2, height);
        stroke(90, 0, 255);
        line(x1, 0, 0, y2);
        stroke(174, 255, 0);
        line(0, height - y2, width - y2, width - x1);
        stroke(255, 0, 0);
        line(height - x1, 0, width, y1);
        x1 += 6;
        y1 -= 6;
        y2 -= 6;
        x2 += 6;
    }
    
    // draw eye shape
    stroke(255);
    strokeWeight(1);
    translate(-10, 10);
    beginShape();
    vertex(130, 150);
    bezierVertex(130, 150, 200, 70, 270, 150);
    vertex(130, 150);
    bezierVertex(130, 150, 200, 230, 270, 150);
    endShape(); 
    stroke(0);
    strokeWeight(1.5);
    line(130, 150, 270, 150);

    // draw pupil
    fill(0);
    stroke(255);
    ellipse(width / 2, height / 2, 50, 50);
    ellipse(width / 2, height / 2, 30, 30);
}

I enjoyed creating consecutive lines in different positions through this project. I ended up creating an Illuminati sign as I explored different compositions. I am satisfied with my final result and learned a lot from this exercise.

sketch

/*Elena Deng
Section E
  edeng1@andrew.cmu.edu
  Project-04
}
*/
function setup() {
    createCanvas(400, 300);
    background(70);
}

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


  for (var i=0;i<54;i++){
      strokeWeight(3);
      stroke(90,120,180);
      line(width-x2, height, x2, height - y2);
      line(x2, height-y2, width+x2, height);

      x2+=12;
      y2+=12;
  }

  for (var i = 0; i < 60; i++) {
        strokeWeight(1);
        stroke(255,255,255,10);
        line(width-x1, height, 0, height - y1);
        line(x1, height, width, height - y1);
        line(width-x1, 0, 0, 0+y1);
        line(x1, 0, width, 0+y1);

        x1 += 10;
        y1 += 10;
     }

}

This project was interesting to do! Excited to discover new ways to implement the new skills I learned through this exercise. I hope to be able to create actual shapes in the future.

sketch

/* Jason ZHu
Section E
http://jlzhu.cmu.edu
Project-04-String-Art
*/

function setup() {
    createCanvas(400, 300);
    background(240,30,30);

    //twisted white lines
    for (var a = 0; a <300; a += 10){
        stroke(255);
        var x1 = 0 - a * 10
        var y1 = height - a * 10
        var x2 = a + 300
        var y2 = a + height/2
        line(x1,y1,x2,y2);
    }

    //blue curved lines
    for (var b = 50; b < width; b += 10) {
        strokeWeight(5);
        stroke(65,101,172);
        line(b, 0, 150, b);
    }

    // light orange rectangle
    for (var c = 250; c < 400; c += 5){
        strokeWeight(2);
        stroke(150,150,30);
        line(c,75,c,height);
    }

    //orange rays
    for (var d = 0; d < width; d += 15) {
        strokeWeight(1);
        stroke(241,157,56);
        line(250,75, d, 0);
    }

    // yellow lower left warp
    for (var e = width; e > 0; e -= 15) {
        strokeWeight(1);
        stroke(241,240,56);
        line(e,300, 0, e);
    }

     // yellow lower left warp
    for (var f = width; f > 0; f -= 15) {
        strokeWeight(1);
        stroke(241,240,56);
        line(400,f, f, 0);
    }
}

For this assignment, I wanted to push my boundaries by exploring variations in color and form. As someone who tends to be more conservative and narrowed in my thinking (aesthetically speaking), I wanted to see what I could come up with if those preconditions were tossed aside. I contrasted blues with reds and mixed in some yellows as well. I also wanted the white lines to serve to divide the campus and create a dynamic centerpiece that underlaid the red and yellow portions. In this way, I think I pushed myself further in terms of coding and aesthetics. By going against my norms, I was able to reinforce what I thought looks good while also exploring new means.

sketch

/*Eunice Choe
Section E
ejchoe@andrew.cmu.edu
Project-04*/

// global variables to create curves
var spacing = 4;// spacing between the strings
var x1 = 0;
var y1 = 300;
var x2 = 400;
var y2 = 0;


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

function draw() {
    // changing color of strings depending on mouseX and mouse Y position
    background(255);
    strokeWeight(0.2);
    var r = map(mouseX, 0, width, 100, 255);
    var g = map(mouseY, 0, width, 200, 255);
    var b = map(mouseX, 0, height, 0, 100);
    for (var i = 0; i < width; i++){
    // outermost section of strings
        stroke(r, g, b);
        line (x1, spacing * i, spacing * i, y1); // bottom left
        line (x2, spacing * i, spacing * i, y2); // top right
        line (spacing * i, y1, x2, height - spacing * i); // bottom right
        line(x1, height - spacing * i, spacing * i, y2); // top left
    // innermost section of strings
        stroke(g, r, b);
        line (x1 + 100, spacing * i, spacing * i, y1 - 100); // inner bottom left
        line (x2 - 100, spacing * i, spacing * i, y2 + 100); // inner top right
        line (spacing * i, y1 - 100, x2 - 100, height - spacing * i); // inner bottom right
        line(x1 + 100, height - spacing * i, spacing * i, y2 + 100); // inner top left
    // middle section of strings
        stroke(r, b, g);
        line (x1 + 50, spacing * i, spacing * i, y1 - 50); // middle bottom left
        line (x2 - 50, spacing * i, spacing * i, y2 + 50); // middle top right
        line (spacing * i, y1 - 50, x2 - 50, height - spacing * i); // middle bottom right
        line(x1 + 50, height - spacing * i, spacing * i, y2 + 50); // middle top left
        }
}

For my string art project, I wanted to create a series of repeating curves overlapped on top of each other. I liked the appearance of having several thin strings that create sheer and transparent colors. I did have some difficulties figuring out how to use the for loop and coordinates, but later I realized the loop makes life much easier!

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.