Category: Project-04-String-Art

Min Ji Kim Kim – Project 04 – String-Art

sketch

/*
Min Ji Kim Kim
Section A
mkimkim@andrew.cmu.edu
Project-04
*/

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

function draw() {
    background(0);
    for (i = 0; i < width / 2; i += 30) {
        stroke(30, 255, 50); //bottom left green lines
        line(mouseX, i, i, height);

        stroke(255); //top right white lines
        line(i, mouseY, width, i);

        stroke(220, 0, 214); //top right pink lines
        line(i, mouseY, width, -i);

        stroke(255); //bottom left white lines
        line(mouseX, i, -i, height);
    }
   
    for (i = 0; i < 400; i += 10) {
        stroke(230, 240, 39); //yellow curve
        line(mouseX, i, i, height - mouseY);

        stroke(34,206,255); //blue curve
        line(-mouseX, i, i, mouseY);
    
        stroke(140, 0, 255); //purple curve
        line(mouseX, i, i, -mouseY);

        stroke(255, 131, 0); //orange curve
        line(width - mouseX, i, i, mouseY);
    }
}

This week’s project was both fun and challenging at the same time. I initially struggled trying to manipulate the movement of the curves but after a little while I got used to it. I got the color inspiration from the lasers at Illenium’s concert.

Kristine Kim – Project – 04- String Art

sketch

//Kristine Kim
//section D
//younsook@andrew.cmu.edu
//Project-04-String-Art

var bright = 0;

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

function draw() {
  //background is fading from black to white and 
  //when it turns white, it goes back to black and fad  
    
   background(bright);
    bright = bright + 1;
    if (bright == 255){
        bright = 0
     }
    
//all the colors are controlled by mouseX and mouseY
   
   for(var i = 0; i<= 400; i+= 15){
// the top right corner web
        stroke(26, 9, mouseX);
        line(i, 0, 400, i);
// the bottome left corner web
        stroke(mouseX, 9, 217);
        line(0, i, i - 5, height);
//the bigger web that covers half of the canvas diagonally
        stroke(0, mouseX, 217);
        line(400, -i, i + 5, height);
//the  right 
        stroke(100, mouseY, 200);
        line(mouseX, mouseY, 400, i);

        stroke(100, mouseY, 200);
        line(0, i, mouseX, mouseY);
    }
     
//moueseX and mouseY controlling the vertical lines
    for(var i = 0; i < 400; i += 18){  
        strokeWeight(1.5);
        stroke(255);

        line(mouseX, i * 3, width / 2, i - 10);
        stroke(247, 255, 140);
        line(mouseX, i * 3, mouseY + 50, i - 10);
        stroke(247, 255, 140);
        line(mouseX, i * 3, mouseY - 50, i - 10);
   }
}

This project was both very fun and challenging. I played around with different functions and codes that we learned in the previous weeks, such as fading background, mouseX mouseY, etc.

Caroline Song – Project 04 – String Art

sketch

//Caroline Song
//chsong@andrew.cmu.edu
//Section E
//Project-04 

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

function draw(){
    background("black");

    //blue lines on bottom left
    for(var i = 0; i < 300; i += 1.5) {
        stroke(161, 236, 255);
        strokeWeight(0.3);
        line(0, i * 5, i * 5, height);
    }

    //blue lines on top right
    for(var i = 0; i < 400; i += 1.5) {
        stroke(161, 236, 255);
        strokeWeight(0.3);
        line(width, i * 5, i * 5, 0);
    }

    //pink lines which turns in the middle
    for(var i = 0; i < 400; i += 1.5) {
        stroke(255, 201, 244);
        strokeWeight(0.3);
        line(height, -i * 4, i * 4, width - 100);
    }

    //yellow lines in the very front
    for(var i = 0; i < 600; i += 5) {
        stroke(207, 207, 145);
        strokeWeight(0.3);
        line(i * 4, height, -i * 4, 0);
    }

}

During the project, I wanted to experiment with the contrast between the dark color of the background and the lighter colors of the lines. I wanted to also look at the how the lines interact with each other in both form and color. Looking at the final product, it reminds me a little bit of laser beams in the dark.

Julia Nishizaki – Project 04 – String Art


sketch

//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project-04-String Art

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

function draw() {
    background(19, 120, 160); //blue background
    //Strings
    for (var i = 0; i < width; i ++) {
        //layer 1, light blue, semi transparent
        stroke(207, 239, 255, 75);
        line(0, i * 5, i * (mouseX / 5), height);
        line(width, height - (i * 5), width - (i * (mouseX / 5)), 0);
        line(width, i * 5, width - (i * (mouseX / 5)), height);
        line(0, height - (i * 5), i * (mouseX / 5), 0);
        //layer 2, dark blue, semi transparent
        stroke(9, 73, 112, 75);
        line(i * 5, 0, width, i * (mouseY / 5));
        line(width - (i * 5), height, 0, height - (i * (mouseY / 5)));
        line(i * 5, height, width, height - (i * (mouseY / 5)));
        line(width - (i * 5), 0, 0, i * (mouseY / 5));
    }
}

For this project, I wanted to make something fairly simple and geometric that you could play with and manipulate with your mouse. While creating the lines, their movement and elegant nature reminded me of lace or weaving, so I decided to go with softer colors.

Lauren Park – Project 04 – String Art

sketch

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

function draw() {
  background(10);
  
  for(var a = 0; a < 400; a+=8){
    stroke('#3FABA2');
    line(a, mouseY, 400, a);
  }
  
  for(var b = 0; b < 400; b +=8){
    stroke('#5AE6AC');
    line(b, mouseX, 0, b)
  }
  
  for(var c = 0; c < 400; c +=8){
    stroke(250);
    line(c, mouseX, b, 300)
  }
  
  for(var d = 0; d < 400; d +=8){
    stroke('#D0E778');
    line(d, mouseY, c, 300);
  }
    
  
}

I was interested in exploring how I can create the movement of waves with curves. By using different curve shapes and different colors and have them combine by moving the mouse and flow like a water ripple.

Mihika Bansal – Project 04 – String Art

sketch

//Mihika Bansal 
//mbansal@andrew.cmu.edu 
//Section E 
//Project 4

var x1Step = 5; 
var y1Step = 5; 

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

function draw() {

    background (255); 
    fill(0); 
    rect(50, 0, 300, 300); 

    stroke(255, 251, 217); 
    for(var j = 1; j <= 30; j++){
        line(50, 0 + y1Step * j, width / 2 - x1Step * j, 0); 
    } // curve with flats on left and top in the top left curving downwards 
    for(var j = 1; j <= 30; j++){
        line(50, height - y1Step * j, width / 2 - x1Step * j, height); 
    } // curve with flat on left and bottom, bottom left, curving upwards 
    for(var j = 1; j <= 30; j++){
        line(width - 50, height / 2 - y1Step * j, width - 50 - x1Step * j, 0); 
    } // curve with flat on top and right, top right, curving downwards 
    for(var j = 1; j <= 30; j++){
        line(width - 50, height / 2 + y1Step * j, width - 50 - x1Step * j, height); 
    } // curve with flat on right and bottom, bottom right, curving upwards

    stroke("white"); 
    for(var i = 1; i <= 30; i++){
        line(width / 2, 0 + y1Step * i, width / 2 + x1Step * i, height / 2); 
    } //curve starting in middle on top right, curving upwards, flat side is in middle of canvas
    for(var x = 1; x <= 30; x++){
        line(width / 2, height - y1Step * x, width / 2 + x1Step * x, height / 2); 
    } // curve starting in the middle on bottom right, curving downwards, flat sides are on the middle of canvas 
    for(var x = 1; x <= 30; x++){
        line(50 + x1Step * x, 0, width / 2, 0 + y1Step * x); 
    } //curve on top left , with flat part on top and middle, curving downwards
    for(var x = 1; x <= 30; x++){
        line(50 + x1Step * x, height, width / 2, height - y1Step * x); 
    } // curve on bottom left, with flat on bottom and middle, curving downwards

    stroke (194, 237, 231)
    for(var j = 1; j <= 30; j++){
        line(width / 2, 0 + y1Step * j, width / 2 - x1Step * j, height / 2); 
    } // curve in top left, with flat part in middle on both sides, curving upwards
    for(var j = 1; j <= 30; j++){
        line(width / 2, height / 2 + y1Step * j, width / 2 + x1Step * j, height); 
    } // curve  in bottom left, with flat in middle, curving downwards 
    for(var j = 1; j <= 30; j++){
        line(50 + x1Step * j, height / 2, width / 2, height / 2 + y1Step * j); 
    } // curve with flat in the middle and bottom, in the bottom right, curve upwards
    for(var j = 1; j <= 30; j++){
        line(width / 2 + x1Step * j, 0, width / 2, height / 2 - y1Step * j); 
    } // curve with flats on the top and the middle, in the top right, curve downwards 

    stroke(252, 204, 212); 
    for(var j = 1; j <= 30; j++){
        line(50, height / 2 - y1Step * j, width / 2 - x1Step * j, height / 2); 
    } // flat on the left side and the middle, curve upwards, in the top left 
    for(var j = 1; j <= 30; j++){
        line(50, height - y1Step * j, 50 + x1Step * j, height / 2); 
    } // flat on the left and the middle, in the bottom left, curve downwards
    for(var j = 1; j <= 30; j++){
        line(width - 50, height / 2 - y1Step * j, width / 2 + x1Step * j, height / 2); 
    } // flat on the middle and middle, in the top right, curving upwards
    for(var j = 1; j <= 30; j++){
        line(width - 50, height - y1Step * j, width - 50 - x1Step * j, height / 2); 
    } // flat on the right and the middle, in the bottom right, curbing downwards 
 
}

I really enjoyed this project. I have made string art before by hand using the actual string and nails and wood, so it was interesting making it through the computer this time.

Angela Lee – Project – 04

sketch

/*
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Project 4 String Art
 */

function setup() {
    createCanvas(400, 300);
    background("black");
}

function draw() {
    spacing1 = 40;
    spacing2 = 10;
    spacing3 = 5;
    red = mouseX;
    green = mouseX;
    blue = mouseY

    // LOOP FOR OUTERMOST STRINGS
    // the strings span the boundary of the canvas
    for(var a = 0; a <= 400; a += spacing1){
        // left bottom strings
        stroke(red, 0, 162);
        line(0, a, a, 300);

        // right top strings
        stroke(153, green, 0);
        line(400, a, a, 0);
    }

    // LOOP FOR GREEN, BLUE STRINGS
    // the strings are contained by the outermost strings 
    for(var b = 0; b <= 200; b += spacing2){
        stroke(0, 187, mouseY);
        // left top strings
        line(100 + b, 50, 100, 250 - b);
        // right top strings
        line(100 + b, 250, 300, 250 - b);
    }

    // LOOP FOR INNERMOST SQUARE
    // the strings are contained within a box 
    // the box specs: rect(150, 100, 100, 100)
    for(var a = 0; a <= 100; a += spacing3){
        // bottom left
        stroke(red, green, 162);
        line(150, 100 + a, 150 + a, 200);

        // top left
        stroke(150, green, blue);
        line(150 + a, 100, 150, 200 - a);

        // top right
        stroke(red, 150, blue);
        line(150 + a, 100, 250, 100 + a);

        // bottom right
        stroke(red, 100, blue);
        line(250, 100 + a, 250 - a, 200);

    }


}

For this project, I wanted to make a composition that had a fixed form but some element that was controlled by the user. I stuck to a strict geometry that relied on square and rectangle boundaries but allowed the colors of the strings to change based on the users’ mouse position.

Some of my notes when planning: first, it took me a while to understand how to program the string curves nicely. Then, I planned out the composition I wanted in my final piece.

Alice Cai Project 4

sketch

//Alice Cai
//alcai
//project#4
//Section E

//global variables
var x;
var y;
var aY;
var aX;

function setup() {
    createCanvas(480, 240);
    strokeWeight(3);
}

function draw() {
//background
    background(200) ;
    strokeWeight(1);

//defining variables 
    aX = mouseX
    aY = mouseY
    x = x * aY
    y = y * aX

//orange lines

    stroke('orange');
    for (var y = 100; y < 10000; y += 5) {
    line(y, aY, width - aX, y);
    line(y, aY, height - aY, y);

    }
//pink lines
    stroke('pink');
    for (var x = 100; x < height; x += 5) {
    line(x, aX, x, aY);
    line(aY, x, x, aX);

    }
//blue lines
    stroke('blue');
    for (var y = 100; y < width; y += 5) {
    line(aX, x, y, aY);
    line(aX, x - y - x, y, aY);

    }
//color changing
    stroke(mouseX,mouseY,mouseY);
    for (var y = 100; y < width; y += 5) {
    line(aX, x - aX, x, aY);
    line(aX, y - aX, y, aY);
    line(aY, y - aX, y, aX);
    }

}

This is my string art. At first, all my curves looked the same because I only used an i variable. After I added more the drawing became more dynamic. Each curve is drawn by a series of lines that are slightly shifted using a for loop and small increments that tilt the line and form a curve.

Stefanie Suk – Project 04 – String Art

sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Project-04: String Art

var x = 75
var y = 500

function setup() {
    createCanvas(640, 480);
    background(171, 186, 255);
}

function draw() {
    stroke(255);
//    for (var i = 10; i <= 640; i += 15) 
//        line(width/2, 0, i, y)
    for (var i = 10; i <= 640; i += 30)
        line(width - i, 0, 0, height)
    for (var i = 10; i <= 640; i += 30)
        line(0, height, 640, i)
    stroke(150);
    for (var i = 10; i <= 640; i += 15)
        line(width/2, i, width/2 + i, height)
    for (var i = 10; i <= 640; i += 15)
        line(width/2, i, width/2 - i, height)
    for (var i = 0; i <= 300; i += 10)
        line(width - i, 0, 0, i)
    for (var i = 0; i <= 300; i += 10)
        line(i, height, width, height - i)
    stroke(10);
    for (var i = 10; i <= 640; i += 70)
        line(0, height/2, 640, i)
    for (var i = 10; i <= 640; i += 70)
        line(640, height/2, 0, i)

}

For this project, I tried to incorporate different possible string arts I can create into one single piece of work. By adding straight, curved, twisted lines, I explored the varieties of lines in string art and tried to create unity with the different lines. 

Sammie Kim – Project 04 – String Art


sketch

//Sammie Kim
//sammiek@andrew.cmu.edu
//Section D
//Project 4

function setup() {
    createCanvas(400, 300);
    //Variables to modify the coordinates of line sets
    //pink lines set a
    aY1Gap = 50;
    aY2Gap = 0.9;
    //light blue lines set b
    bY2Gap = 0.5;
    //Purple lines set c
    cY1Gap = 300;
    cX2Gap = 100;
    cY2Gap = 0.8;
    //Green lines set d
    dY1Gap = 200;
    dY2Gap = 0.75;
}

function draw() {
    background("black");
    //for loop to create series of lines with increments of 10
    for (var i = 0; i < 400; i += 10) {
        //Red line sets a
        stroke(255, 112, 112);
        line(i, mouseY / 2 - aY1Gap, width, i * aY2Gap);
        //light blue lines sets b
        stroke(181,255,221);
        line(i, mouseY, 0, i * bY2Gap);
        //Purple lines sets c
        stroke(122, 114, 240);
        line(i, -mouseY + cY1Gap, width / 3 + cX2Gap, i * cY2Gap);
        //Green lines set d
        stroke(28, 151, 45);
        line(i, -mouseY + dY1Gap, width, i * dY2Gap);
    }
  }

This project was challenging as I had to visualize the lines coordinates to create the curves. Sketching the picture first really helped me, since I got to picture the starting and ending points. By utilizing the “for function” to repeatedly create the line sets, I realized once more how much more convenient it is rather than writing a ton of line codes.