Category: Project-04-String-Art

sketch

/*Emma Shi
Section B
eyshi@andrew.cmu.edu
Project 4 String Art
*/

function setup () {
    createCanvas(640, 480);   
}

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

        var a = 0;
        var b = 640;
        var c = 480;
        var r = atan2(mouseY-height/2, mouseX-width/2);

   for (var i = a; i < 640; i += 10) { //starts at 0, adds 10 to i until 640

        noFill();
        stroke("yellow");
        strokeWeight(1.5);

     translate(width/2, height/2);
        push();
        rotate(r);
        ellipse(a, a, 10, 10);
        pop();
        angleMode(RADIANS);
        rotate(r);//rotates lines around the center ellipse when mouse is moved

        line(a, a, width-c, b); //second line from the bottom left
        line(a, a, b, i); //line closest to the bottom right
        line(a, a, -30, i+300); //line closest to the bottom left
        line(a, a, i+600, b); //second line from the bottom right
    }
}

For this week’s project, my original idea was to make a string art “circle” where lines from all corners of the canvas would come together to outline an empty ellipse, similar to an eye of a hurricane. However, after playing around with it, I ended up making lines that spun around a center ellipse. When the user moves the mouse up or down, the lines rotate quickly and form an outline of another ellipse, which changes in diameter as the mouse moves along the canvas.

sketch

//Grace Cha 
//Section C
//heajinc@andrew.cmu.edu
//PROJECT-04- STRING ART

function setup() {
    createCanvas(640,480);
}

function draw() {
	background(0);
      
	for (var i = 20; i < 480; i += 5) { //start at 20 to 400 by increments of 5

      ////////EACH COLORED 'BRIDGE' IS MADE BY TWO CURVES SHAPES THAT MEET IN THE MIDDLE ///////

      var xx = i * .3; //second x value of LEFT CURVE
      var mirrorImage = width - i; //first x value of RIGHT CURVE
      var mirrorImage1 = width - i * .3; //second x value of RIGHT CURVE
      var curveHeight = 400; //first y value of curve lines
      var curve = HALF_PI * i; //second y value of curve lines 

      var flippedHeight = height - curveHeight; 
      var flippedCurve = height - curve;


      strokeWeight(7);
      stroke(232,244,31,20); //YELLOW TWIST IN CENTER
      line( i + 100, 200, i / 20, PI+QUARTER_PI * i) //LEFT FLAP
      line( mirrorImage, 200, width - i / 20,PI+QUARTER_PI * i); //RIGHT FLAP

      //EACH COLORED 'BRIDGE' IS MADE BY TWO CURVES SHAPES  
      strokeWeight(1);
      stroke(155,31,239,60); //MIDDLE PURPLE
      line(i + 250 ,curveHeight, xx + 250, curve); //LEFT CURVE 
      line(mirrorImage -250, curveHeight, mirrorImage1 - 250, curve); //RIGHT CURVE

      stroke(9,157,150,60); //TEAL
      line(i + 200 , curveHeight, xx + 200, curve);//LEFT CURVE 
      line(mirrorImage - 200, curveHeight, mirrorImage1 - 200, curve);//RIGHT CURVE
      
      stroke(4,74,168,60);//BLUE 
      line(i + 150 ,curveHeight, xx + 150, curve);//LEFT CURVE 
      line(mirrorImage - 150, curveHeight, mirrorImage1 - 150, curve);//RIGHT CURVE

      stroke(199,66,71,96); //CENTERMOST BURGENDY
      line(i + 100 ,curveHeight, xx + 100, curve);//LEFT CURVE 
      line(mirrorImage -100, curveHeight, mirrorImage1 - 100, curve);//RIGHT CURVE
      
      stroke(239,65,54,99); //RED
      line(i + 50, curveHeight, xx + 50, curve);//LEFT CURVE 
      line(mirrorImage -50, curveHeight, mirrorImage1 - 50, curve);//RIGHT CURVE
      
      stroke(155,31,239,80); //FRONT VIOLET
      line(i , curveHeight, xx, curve);//LEFT CURVE 
      line(mirrorImage , curveHeight, mirrorImage1, curve);//RIGHT CURVE

      //////FLIPPPED VERSIONS///// I ONLY CHOSE A FEW TO FLIP  

      strokeWeight(1);
      stroke(155,31,239,60); //MIDDLE PURPLE
      line(i + 250 ,flippedHeight, xx + 250, flippedCurve);//LEFT CURVE 
      line(mirrorImage -250,flippedHeight, mirrorImage1 - 250, flippedCurve);//RIGHT CURVE

      stroke(199,66,71,96); //CENTERMOST BURGENDY
      line(i + 100 ,flippedHeight, xx + 100, flippedCurve);//LEFT CURVE 
      line(mirrorImage -100, flippedHeight, mirrorImage1 - 100, flippedCurve);//RIGHT CURVE
        
      stroke(155,31,239,80); //FRONT VIOLET
      line(i , flippedHeight, xx, flippedCurve);//LEFT CURVE 
      line(mirrorImage , flippedHeight, mirrorImage1, flippedCurve);//RIGHT CURVE
    }
}

My process included with some conditionals I wanted to make for my string art.  I largely played around with overlapping colors and opacity of string colors to indicate dimension.

mluria-project-04

function setup() {
    createCanvas(640,480);
    background(0);

}

function draw() {
  
    strokeWeight(2);

    var incrW = width/50; //define increment for X
    var incrH = height/50; //define increment for Y

    //top peach (lowest layer)
    var startX1 = 0;
    var startY1 = 0;
    var endX1 = width;
    var endY1 = 0.4*height;

    stroke(248,178,142);
    for (var i = 0; i < 40; i++){
        line(startX1, startY1, endX1, endY1);
        startX1 += incrW;
        startY1 += incrH;
        endY1 -= incrH;
    }

    //bottom peach (lowest layer)
    var startX2 = 0;
    var startY2 = 0.6*height;
    var endX2 = width;
    var endY2 = height;

    for (var i = 0; i < 40; i++){
        line(endX2, endY2, startX2, startY2);
        endX2 -= incrW;
        endY2 -= incrH;
        startY2 += incrH;
    }

    //top pink
    var startX3 = 0;
    var startY3 = 0;
    var endX3 = width;
    var endY3 = 0.55*height;

    stroke(241,115,127);
    for (var i = 0; i < 40; i++){
        line(startX3, startY3, endX3, endY3);
        startX3 += incrW;
        startY3 += incrH;
        endY3 -= incrH;
    }

    //bottom pink
    var startX4 = 0;
    var startY4 = 0.45*height;
    var endX4 = width;
    var endY4 = height;

    for (var i = 0; i < 40; i++){
        line(endX4, endY4, startX4, startY4);
        endX4 -= incrW;
        endY4 -= incrH;
        startY4 += incrH;
    }

    //top violet
    var startX5 = 0;
    var startY5 = 0;
    var endX5 = width;
    var endY5 = 0.7*height;

    stroke(193,109,135);
    for (var i = 0; i < 40; i++){
        line(startX5, startY5, endX5, endY5);
        startX5 += incrW;
        startY5 += incrH;
        endY5 -= incrH;
    }

    //bottom violet
    var startX6 = 0;
    var startY6 = 0.3*height;
    var endX6 = width;
    var endY6 = height;

    for (var i = 0; i < 40; i++){
        line(endX6, endY6, startX6, startY6);
        endX6 -= incrW;
        endY6 -= incrH;
        startY6 += incrH;
    }

    //top purple
    var startX7 = 0;
    var startY7 = 0;
    var endX7 = width;
    var endY7 = 0.85*height;

    stroke(109,92,128);
    for (var i = 0; i < 40; i++){
        line(startX7, startY7, endX7, endY7);
        startX7 += incrW;
        startY7 += incrH;
        endY7 -= incrH;
    }

    //bottom purple
    var startX8 = 0;
    var startY8 = 0.15*height;
    var endX8 = width;
    var endY8 = height;

    for (var i = 0; i < 40; i++){
        line(endX8, endY8, startX8, startY8);
        endX8 -= incrW;
        endY8 -= incrH;
        startY8 += incrH;
    }


    //top blue
    var startX9 = 0;
    var startY9 = 0;
    var endX9 = width;
    var endY9 = height;

    stroke(50,93,128);
    for (var i = 0; i < 50; i++){
        line(startX9, startY9, endX9, endY9);
        startX9 += incrW;
        startY9 += incrH;
        endY9 -= incrH;

    }

    //bottom blue
    var startX10 = 0;
    var startY10 = 0;
    var endX10 = width;
    var endY10 = height;

    for (var i = 0; i < 50; i++){
        line(endX10, endY10, startX10, startY10);
        endX10 -= incrW;
        endY10 -= incrH;
        startY10 += incrH;


    }

    noLoop();


}

In this project I wanted to try and create the physical feeling of actual strings that is the core of string art. I started with a sketch to understand the logic of what I wanted to create (below), and then went on to create it layer by layer. I think the layers in this project created the sense of physicality that I wanted for the final result.

I wanted to keep the pattern simple and clean. Although this isn’t as groundbreaking or experimental, I certainly helped me understand how to use for loops to create curves.

 

kdlee-project-04

function setup() {
    createCanvas(600, 600);
}

function draw() {
    background(255);//white
    strokeWeight(1);//thin line
    var spacing = 25; // How far apart is each line
    var increment = 50;// double spacing, offsets lines, growth

    for (var i = 0; i < 25; i = i + 1) {//20 lines
        var x = (0 + i * spacing);
        var y = (0 + i * spacing);

        stroke("#FC4BAB");//pink
        line(x, 0, width, y);

        stroke("#FCCA53");//yellow
        line(0, y, x, height);

        stroke("#03C9BA");//green
        line(0, y, width - x, 0);

        stroke("#343AE9");//blue
        line(x, height, width, height - y);
    }
}

sketch

var strokeColorR = 0; // stroke color R value
var strokeColorG = 255; // stroke color G value
var strokeColorB = 0; // stroke color B value

function setup() {
    createCanvas(640, 480); // make a canvas 800x200
    background (244, 120, 100); // background color
    
  for (var i = 1; i < 10; i++) {// add 1 to i every loop, 10 times
    strokeColorR += 30;// add 30 to stroke R color
    strokeColorG -= 20;// subtract 20 to stroke G color
    strokeColorB += 30; // add 30 to stroke B color
    stroke(strokeColorR, strokeColorG, strokeColorB); // stroke color
    strokeWeight (8); // thicker lines at 8
    line(i*20, 200, 200, 200-(i*20)); // top left quadrant lines
    line(200, 200-(i*20), 400-(i*20), 200); // top right quadrant lines
    line(i*20, 200, 200, 200+(i*20)); // bottom left quadrant lines
    line(200, 200+(i*20), 400-(i*20), 200); // bottom right quadrant lines
  }
 }
function draw() {
}

In my process for this assignment, I sketched out all the points on a piece of paper for one quadrant of the piece, and slowly worked from there. Once I had figured out how the for loop would work with one quadrant, I worked on trying to better understand how altering the values of the first quadrant could accomplish drawing the next three.

sketch

//Jihoon Park
//Section A
//jihoonp@andrew.cmu.edu
//project-04: String Art

var i;
var j;
var k;
var l;
var space = 50; //space between starting points of lines
var countX = 9; //number of lines in X axis of a quarter
var countY = 7; //numver of lines in Y axis of a quarter
var boxW = 150; // width of a box
var speed = 1.3; 
var dir = 1;
var vertX = 0; // x coordinate of vertex
var vertY = 0; // y coordinate of vertex
var vertW = 0.5*boxW; // vertex limit

function setup() {
	createCanvas(640, 480, WEBGL);
	noCursor();

}

function draw() {
	background(255);
	
	
	vertX+=dir*speed;
	if (vertX>=vertW) {
		dir=-dir;
	} else if (vertX<=-vertW) {
		dir=-dir;
	}
	//x coordinate of vertex goes back and forth
	vertY+=dir*speed;
	if (vertY>=vertW) {
		dir=-dir;
	} else if (vertY<=-vertW) {
		dir=-dir;
	}
	
	
	for (var k = -countX; k < 0; k=k+1) {
		beginShape(LINES);
		vertex(k*space, -height, 0);
		vertex(vertX, -vertY, 0);
		endShape();
		//bottom edge left half lines

		beginShape(LINES);
		vertex(k*space, height, 0);
		vertex(vertX, vertY, 0);
		endShape();
		//top edge left half lines
	}

	
	for (var  l= -countY; l < 0; l=l+1) {
		beginShape(LINES);
		vertex(-width, l*space, 0);
		vertex(vertX, -vertY, 0);
		endShape();
		//left edge bottom half lines
		
		beginShape(LINES);
		vertex(width, l*space, 0);
		vertex(-vertX, -vertY, 0);
		endShape();
		//right edge bottom half lines

	}

	
	for (var i = 0; i < countX; i=i+1) {
		beginShape(LINES);
		vertex(i*space, -height, 0);
		vertex(-vertX, -vertY, 0);
		endShape();
		//bottom edge right half lines
		
		beginShape(LINES);
		vertex(i*space, height, 0);
		vertex(-vertX, vertY, 0);
		endShape();
		//top edge right half lines
	}

	
	for (var  j= 0; j < countY; j=j+1) {
		beginShape(LINES);
		vertex(-width, j*space, 0);
		vertex(vertX, vertY, 0);
		endShape();
		//left edge top half lines
		
		beginShape(LINES);
		vertex(width, j*space, 0);
		vertex(-vertX, vertY, 0);
		endShape();
		//right edge top half lines
	}
	
	
	//box rotates
	rotateX(frameCount*0.02);
	rotateY(frameCount*0.02);
	ambientMaterial(200);
	box(boxW, boxW, boxW);
	

	
}

I created lines that could be seen as controlling lines for a box to rotate. However, since the canvas had to be a 3d space, I had to use begin/end shape with vertices.