Category: Project-04-String-Art

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!