Project-04-String Art

sketch

//Rebecca Enright
//Section A
//renright@andrew.cmu.edu
//Project-04; String Art

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

function draw() {
    background(0);
//iteration for dark blue lines
	for (i = 0; i < 20; i = i + 1) {
//create variable for changing y value
	    var a = (i * 10);
//dark blue lines across canvas left to right
        stroke(10,82,180);
        line(width/2, height/2, width - mouseX, a);
    }
//iteration for red lines
    for (i = 0; i < 20; i = i + 1) {
//reestablish a
        a = (i * 10);
//red lines from right to left across canvas
        stroke(255,0,0);
        line(width/2,height/2,mouseX,a);
    }
//iteration for green lines
    for (i = 0; i < 20; i = i + 1) {
//reestablish a    
        a = (i * 10);
//green lines going up from left to above the dark blue
        stroke(0,255,0);
        line(0, height, width/2, a);
//second set of green lines from right to above dark blue
        line(width,height,width/2,a);
    }
//iteration for pink lines
    for (i = 0; i < 50; i = i + 1) {
//create variables for x1, y1, x2, y2
    	var x = 0;
    	var y = 480;
    	var xx = 320;
    	var yy = 0;
//create variables for increments of x1,y1 and x2,y2
        var xstep = (i*20);
        var ystep = (i*5);
        var xxstep = (i*.1);
        var yystep = (i*10);
//increment x,y and xx,yy values
        x -= xstep;
        y -= ystep;
        xx += xxstep;
        yy += yystep;
//create pink curvy lines that overlap green
        stroke(255,124,155);
        line(x,y,xx,yy);
    }
//iteration for 2nd set of pink lines
    for (i = 0; i < 50; i = i + 1) {
//create variables for x1, y1, x2, y2
    	x = 640;
    	y = 480;
    	xx = 320;
    	yy = 0;
//create variables for increments of x1,y1 and x2,y2
        xstep = (i*20);
        ystep = (i*5);
        xxstep = (i*.1);
        yystep = (i*10);
//increment x,y and xx,yy values
        x += xstep;
        y += ystep;
        xx += xxstep;
        yy += yystep;
//create pink curvy lines near purple curve
        stroke(255,124,155);
        line(x,y,xx,yy);
    } 
//iteration for yellow lines
    for (i = 0; i < 50; i = i + 1) {
//create variables for x1, y1, x2, y2
    	x = 0;
    	y = 480;
    	xx = 0;
    	yy = 0;
//create variables for increments of x1,y1 and x2,y2
        xstep = (i*20);
        ystep = (i*5);
        xxstep = (i*.1);
        yystep = (i*10);
//increment x,y and xx,yy values
        x += xstep;
        y += ystep;
        xx += xxstep;
        yy += yystep;
//create yellow curvy lines
        stroke(255,255,0);
        line(x,y,xx,yy);
    }   
//iteration for purple lines
    for (i = 0; i < 50; i = i + 1) {
//create variables for x1, y1, x2, y2
    	x = 640;
    	y = 480;
    	xx = 640;
    	yy = 0;
//create variables for increments of x1,y1 and x2,y2
        xstep = (i*20);
        ystep = (i*5);
        xxstep = (i*.1);
        yystep = (i*10);
//increment x,y and xx,yy values
        x -= xstep;
        y += ystep;
        xx += xxstep;
        yy += yystep;
//create purple curvy lines that overlap green
        stroke(151,0,151);
        line(x,y,xx,yy);
    }
    for (i = 0; i < 43; i = i + 1) {
    	var a = (i * 15);
    	stroke(0,255,255);
    	line(width/2,height/2 - 50,a,480);
    }

}

This project was a lot of fun to experiment with. I have always wanted to try creating string art, and it’s a cool experience to do it using technology, especially because the strings have the ability to move if you want them to.

Denise Jiang-Project 04- String Art

sketch

var hstep=20;//horizontal
var dstepX=10;//diagonal x
var dstepY=15;//diagonal y
function setup() {
    createCanvas(640, 480);
}

function draw() {
	background("lightpink");
	stroke("white");
	line(0,height/2,width,height/2);
	
	var dxTL=310;//x of top left diagonal
	var dyTL=1.5*dxTL-240;//y of top left diagonal
	var x1=0;//x for top left

	var dxBL=310;//x for bottom left diagonal
	var dyBL=-1.5*dxBL+720;//y for bottom left diagonal
	var x2=0;//x for bottom left

	var dxTR=480;//x for top right diagonal
	var dyTR=-1.5*dxTR+720;//y for top right diagonal
	var x3=320;//x for top right

	var dxBR=480;//x for bottom right diagonal
	var dyBR=1.5*dxBR-240;//y for bottom right diagonal
	var x4=320;//x for bottom right

	var dxMTL=320;
	var dyMTL=-1.5*dxMTL+720;
	var dxMTR=480;
	var dyMTR=1.5*dxMTR-240;

	var dxMBL=320;
	var dyMBL=1.5*dxMBL-240;
	var dxMBR=480;
	var dyMBR=-1.5*dxMBR+720;

	var x=0;
	var x5=640;

	for (i=0; i<17; i++) {
		
		stroke("white");
		strokeWeight(1);
		line(x1,height/2,dxTL,dyTL);//top left
		x1=x1+hstep;
		dxTL+=-dstepX;
		dyTL+=-dstepY;

		line(x2,height/2,dxBL,dyBL);//bottom left
		x2=x2+hstep;
		dxBL+=-dstepX;
		dyBL+=dstepY;

		line(x3,height/2,dxTR,dyTR);//top right
		x3=x3+hstep;
		dxTR+=-dstepX;
		dyTR+=dstepY;

		line(x4,height/2,dxBR,dyBR);//bottom right
		x4=x4+hstep;
		dxBR+=-dstepX;
		dyBR+=-dstepY;

		line(dxMTR,dyMTR,dxMTL,dyMTL);
		dxMTL+=-dstepX;
		dyMTL+=dstepY;
		dxMTR+=-dstepX;
		dyMTR+=-dstepY;

		line(dxMBL,dyMBL,dxMBR,dyMBR);
		dxMBL+=-dstepX;
		dyMBL+=-dstepY;
		dxMBR+=-dstepX;
		dyMBR+=dstepY;

		line(x5,0,x5,479);
		x5=x5-hstep;
		line(x,0,x,480);
		x=x+hstep;

	}
	
	noLoop();
	println();
}

For this project, I used straight lines and their tangents to form curves. The overall shape contains six modules.

sihand – project 04 – String Art – Golden Ratio

sketch

//Sihan Dong
//sihand@andrew.cmu.edu
//Section B
//Week 04 Project: string art
//a golden ratio inspired string art

var squareWid = 390;
var gratio = 0.61803398875;
var interm = 10; //the distance between each "pin" for the strings

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


function draw() {
//draw the picture in the middle of the canvas
	curves(20,0);
}

function curves (x, y) {
	push();
	translate (x, y);

//each pin is 15-30 pixels away from another
	interm = random (15, 30);  

	for (i=0; i<200; i++) {
	//stop generating new squares when the width is too small
		if (squareWid>1) { 
	
	//draw the first square and triangle
		fill(random(0,200), random(0,200), random(0,200));
		rect(0, 0, squareWid, squareWid);
		noStroke();
		fill(random(100,255), random(100,255), random(100,255));
		triangle(squareWid, 0, 0, squareWid, squareWid, squareWid);

	//generating the strings
		for (j=0; j<interm; j++) {
			stroke(255);
			line(squareWid*j/interm, 0, 0, squareWid*(interm-j)/interm);
			line(squareWid*j/interm, squareWid, squareWid, squareWid*(interm-j)/interm)
		}

	//translate and rotate the coordinates for the next square
		translate(0, squareWid+squareWid*gratio+1);
		rotate(-PI/2);

	//set the dimension according to the golden ratio for the next square
		squareWid = squareWid*gratio;
		
		}
	}
	pop();
}

As you can probably tell, this piece of string art is inspired by the Golden Ratio spiral. I tried my best to simply the codes while still representing the concept of Golden Ratio. Every time you refresh the page, the “threadcount” of the strings will change, as well as the color blocks.

nautilus-shell-with-golden-ratio-spiral-overlay-2

 

 

String Art Week 4

sketch

function setup() {
	createCanvas(640,480);
}
var endPoint = 304;
function draw() {
  background(0);
  for (var i = -100; i <= 300; i += 3){
      if (mouseIsPressed){
        stroke(76);
        // left inner curves displayed on mouse press
        line(i, height/2, width/2.1, height/2.5 + i);
        line(i, height/2, width/2.1, height/1.55 - i);
      }
      stroke(76);
      //left outer lines
      line(i, height/2, endPoint, height);
      stroke(220);
      line(i, height/2, endPoint, 0);
  }
  for (var i = 700; i >= 300; i -= 3){
      stroke(232);
      //right inner curves
      line(i, height/2, width/2.1, -height/1.55+i);
      line(i, height/2, width/2.1, height*1.65-i);
      stroke(13);
      //right outer lines
      line(i, height/2, endPoint, height);
      line(i, height/2, endPoint, 0);
  }
}
//fun function
function mouseIsPressed() {
    console.log(5);
    for (var i = -100; i <= 300; i += 3){

    }

}

I drew 4 curves first to represent the inner diamond shaped figure. I then encased it with other iterated lines and added a fun function to change the shape on mouse click.

edit: The picture wasn’t meant to fit within the dimensions given

Janet Lee- Project 04- String Art

sketch

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

}

function draw() {
    background ("#EDE4E3");
    //lightblue curve
    for (var i = 1; i <640; i+=10){
        stroke ("#A0E0E3");
        strokeWeight (2);
        line (i,70,width-70,i);
      }
      //red curve
    for (var a = 1; a<640; a+=7){
        stroke("#FD7950");
        strokeWeight(1);
        line(a,height-60,50,a);
      }
      //yellow curve
    for (var b = 1; b <640; b+=9) {
        stroke("#FCE6A9");
        strokeWeight(3);
        line(b,height-20,30,b);
    }
    //turquoise curve
    for (var c = 1; c <640; c +=3) {
      stroke("#41909E");
      strokeWeight(1);
      line (c,20,width-10,c);
    }
    //flower spinning
    push();
    translate(width/2,height/2);
    rotate(millis()/1000);
    push();
    fill("#215A6D");
    noStroke();
    rotate (radians(30));
    ellipse (0,0,20,100);
    noStroke();
    rotate (radians(30));
    ellipse (0,0,20,100);
    noStroke();
    rotate (radians(30));
    ellipse (0,0,20,100);
    noStroke();
    rotate (radians(30));
    ellipse (0,0,20,100);
    noStroke();
    rotate (radians(30));
    ellipse (0,0,20,100);
    noStroke();
    rotate (radians(30));
    ellipse (0,0,20,100);
    pop();
    pop();
}

Christine Kim – Project-04

sketch

//Christine Kim
//Section A (9:00)
//haewannk@andrew.cmu.edu
//Project-04

var x;
var y;

function setup() {
    createCanvas(640, 480);
    strokeWeight(1);
    x=0;
    y=0;
}

function draw()  {
    background('lightblue');
    for (var i = 0; i < 240; i +=10) {

    	//pink color lines
    	stroke('hotpink');
        line (width/2,y+i,width/2+i,height/2); //upper right
        line(width/2,y+i,width/2-i,height/2); //upper left
        line(width/2,height-i,width/2-i,height/2); //lower left
        line(width/2,height-i,width/2+i,height/2); //lower right
        line(0,height/2,width,height/2); //horizontal line
    
        //lavender color lines
    	stroke('lavender');
    	push();
    	translate(264,-156);
    	rotate(radians(45));
    	line (width/2,y+i,width/2+i,height/2); //right
        line(width/2,y+i,width/2-i,height/2); //top
        line(width/2,height-i,width/2-i,height/2); //left
        line(width/2,height-i,width/2+i,height/2); //bottom
        pop();
        line(80,0,560,height); //negative slope
        line(80,height,560,0); //positive slope 

        //outer lines
        stroke('lightyellow');
        line(x,y+i,x+i,height); //left from top
        line(x+i,height,width,height-i); //bottom from left
        line(width,height-i,width-i,y); //right from bottom
        line(width-i,y,x,y+i); //top from right
        line(x,height-i,x+i,y); //left from bottom
        line(x+i,y,width,y+i); //top from left
        line(width,y+i,width-i,height); //right from top
        line(width-i,height,x,height-i); //bottom from right
        }
}

My process was to get midpoints of canvas and connect the line to different points. And then I added more lines to the edges of the canvas.

photo-on-9-23-16-at-5-50-pm

Jiyoung Ahn _ String Art

sketch


var num = 250;
var aS;//angle of the shape 
var increment; //increase of spacing
var radi; //radius
var radS; //spiral shape
var xI; //x increment
var yI; //y increment
var col1; //first color
var col2; //second color
var moX; //mouse
var moY; //mouse


function setup() {
    createCanvas(640, 480);
    radi = (width/2)-40;
    increment = 5;
    background('lightgreen');
    col1 = color('yellow');
    col2 = color('lightpink');
    
}

function draw() {
	noStroke();
	ellipse(0,400,260,260);
	fill('white');

	ellipse(560,0,220,220);
	fill('white');

	ellipse(210,120,180,180);
	fill('white');

	ellipse(490,500,320,320);
	fill('white');
	
   if(mouseX != moX) {
      var xI = width/2
       var yI = height /2
       for (var i = 1; i < num; i++){
          aS = i * increment;
          mult = i/num;
          radS = mult * radi;

          x = width/2 + cos(aS) * radS;
          y = height/2 + sin(aS) *radS;

          stroke(lerpColor(col2, col1, mult));
          strokeWeight(0.5);
          line(xI, yI, x,y);
          xI = x;
          yI = y;
       }   
      
       for (var i = 1; i < num; i++){
          aS = i * increment;
          mult = i/num;
          radS = mult * radi;

          x = width/2 + cos(aS) * radS;
          y = height/2 + sin(aS) *radS;

          stroke(lerpColor(col2, col1, mult));
          strokeWeight(0.03);
          line(xI+80, yI+80, x+80,y+80);
          xI = x;
          yI = y;
		 }
		for (var i = 1; i < num; i++){
          aS = i * increment;
          mult = i/num;
          radS = mult * radi;

          x = width/2 + cos(aS) * radS;
          y = height/2 + sin(aS) *radS;

          stroke(lerpColor(col2, col1, mult));
          strokeWeight(0.03);
          line(xI-80, yI-80, x-80,y-80);
          xI = x;
          yI = y;
		 }

   } 
}

 

I tried to create string art based on a pentagon shape, and I added white ellipse shapes as a background pattern.

James Katungyi-Project 04

6 petal flower

james-stringart

//James Katungyi
//Section A 0900
//jkatungy@andrew.cmu.edu
//Assignment-Project-04

//variables for first set of lines for 6 different petals
//first point x&y values are the same for all 6 petals
var x1=y1=x11=y11=x21=y21=x31=y31=x41=y41=x51=y51=0;
//second point x values are the same for all 6 petals
var x2=x12=x22=x32=x42=x52=180;
//second point y values are the same for all 6 petals
var y2=y12=y22=y32=y42=y52=54;
//variables for second set of lines
//first point x&y values are the same for all 6 petals
var x3=y3=x13=y13=x23=y23=x33=y33=x43=y43=x53=y53=0;
//second point x values are the same for all 6 petals
var x4=x14=x24=x34=x44=x54=54;
//second point y values are the same for all 6 petals
var y4=y14=y24=y34=y44=y54=180;
//spacing
var spacing=18;

function setup() {
  createCanvas(480, 640);
  background(0);
  strokeWeight(1);
  r = color(255,0,0);
  g = color(0,255,0);
  b = color(0,0,255);
  rg = lerpColor(r,g,0.5);
  gb = lerpColor(g,b,0.5);
  br = lerpColor(b,r,0.5);
  push();
  translate(width/2,height/2);//locate lower tip of petal in canvas center
  //first petal
  rotate(radians(45));
  stroke(r);
  for (i=0;i<8;i++){
    line(x1,y1,x2,y2);//set of lines defines first half of petal
    x1=x1+spacing;
    y2=y2+spacing;
    line(x3,y3,x4,y4);//second set of lines defines second half of petal
    y3=y3+spacing;
    x4=x4+spacing;
    line(0,0,180,180);//middle line
  }
  //second petal
  rotate(radians(60));
  stroke(rg);
  for (i=0;i<8;i++){
    line(x11,y11,x12,y12);//first half of petal
    x11=x11+spacing;
    y12=y12+spacing;
    line(x13,y13,x14,y14);//second half of petal
    y13=y13+spacing;
    x14=x14+spacing;
    line(0,0,180,180);//middle line
  }
  //third petal
  rotate(radians(60));
  stroke(g);
  for (i=0;i<8;i++){
    line(x21,y21,x22,y22);//first half of petal
    x21=x21+spacing;
    y22=y22+spacing;
    line(x23,y23,x24,y24);//second half of petal
    y23=y23+spacing;
    x24=x24+spacing;
    line(0,0,180,180);//middle line
  }
  //fourth petal
  rotate(radians(60));
  stroke(gb);
  for (i=0;i<8;i++){
    line(x31,y31,x32,y32);//first half of petal
    x31=x31+spacing;
    y32=y32+spacing;
    line(x33,y33,x34,y34);//second half of petal
    y33=y33+spacing;
    x34=x34+spacing;
    line(0,0,180,180);//middle line
  }
  //fifth petal
  rotate(radians(60));
  stroke(b);
  for (i=0;i<8;i++){
    line(x41,y41,x42,y42);//first half of petal
    x41=x41+spacing;
    y42=y42+spacing;
    line(x43,y43,x44,y44);//second half of petal
    y43=y43+spacing;
    x44=x44+spacing;
    line(0,0,180,180);//middle line
  }
  //sixth petal
  rotate(radians(60));
  stroke(br);
  for (i=0;i<8;i++){
    line(x51,y51,x52,y52);//first half of petal
    x51=x51+spacing;
    y52=y52+spacing;
    line(x53,y53,x54,y54);//second half of petal
    y53=y53+spacing;
    x54=x54+spacing;
    line(0,0,180,180);//middle line
  }
  pop();
}

A 6 petal flower recreated from online string art patterns.stringartdiy

 

mdambruc-Project-04

sketch

//Mairead Dambruch
//mdambruc@andrew.cmu.edu
//section C
//Project-04

function setup() {
    createCanvas(640, 480);
    background(180, 218, 214);
}
function draw() {
    var offset = 100; //moves translated lines
    var spacing = 5;
    var weirdnumber = 4.5;
    for (var i = 0; i < width; i += 3){

    stroke(0);
    line(i, 0, width - offset*3, i + spacing);//black curve top left

    stroke(255);
    line(0, height - offset*2, i, 0);//white line - not a curve just a fun shape

    stroke(255);
    line(350, width + i, i + offset*3, 0);// white curve on right side

    stroke(0);
    line(0, width - i, i + offset, 0);//black curve in upper left hand corner

    //repeated black curves

    push();
    translate(offset, 0);
    stroke(0);
    line(i, 0, width - offset*3, i + spacing);
    pop();

    push();
    translate(-offset, 0);
    stroke(0);
    line(i, 0, width - offset*3, i + spacing);
    pop();

    push();
    translate(-offset * 2, 0);
    stroke(0);
    line(i, 0, width - offset*3, i + spacing);
    pop();

    push();
    translate(offset*2, 0);
    stroke(0);
    line(i, 0, width - offset*3, i + spacing);
    pop();

    //

    stroke(255, 75, 46);
    line(0, i, i+ spacing, height);//Original orange Curve bottom left

    //repeated orange curves
    push();
    translate((offset * (offset/2)), 0);
    stroke(255, 75, 46);
    line(0, i, i+ spacing, height);
    pop();

    push();
    translate(offset*3, 0);
    stroke(255, 75, 46);
    line(0, i, i+ spacing, height);
    pop();

    push();
    translate((offset* weirdnumber), 0);
    stroke(255, 75, 46);
    line(0, i, i+ spacing, height);
    pop();

    push();
    translate(width, 0);
    stroke(255, 75, 46);
    line(0, i, i+ spacing, height);
    pop();
  }

}

In this assignment I mostly focused on experimenting with the mixing of colors in the curves. I enjoyed changing the spacing between lines to create interesting visual effects.

Simin Li Project4- String Art


siminl-project4

// Simin Li
// Section C
// siminl@andrew.cmu.edu
// Project 4
var X1 
var Y1 //coordinates of first point on line segment
var X2 
var Y2 //coordinates of second point on line segment
function setup() {
    createCanvas(640, 480);
    background("LightSalmon");
     X1 = 0;
     Y1 = 0; 
     X2 = length / 2;
     Y2 = sqrt(3) * length / 2; //use trig to set outer triangle to be equilateral
 }
function draw() {
	    flower(width/ 2, height / 2,240);
    	strokeWeight(0.3);
        flower(width/ 2, height / 2,110);
        //draw flowers at width/ 2,height / 2 with "radius" of 240 and 110 
    noLoop();
   }
function halfPetal(x, y, a, sign, length) {
//defines the function halfPetal() which draws half a petal either facing down or up.
//x,y determines the left tip of petal
//a dtermines the radians rotated
//sign dtermines whether petal is facing up or down
//length determines the length of petal
	push();     
    X1 = 0;
    Y1 = 0;
    X2 = length / 2;
    Y2 = sign * sqrt(3) * length / 2; //reset the coordinates of point 1 and point 2 before loop
    gapX = length / 60; //the difference of X values between two adjacent starting points and end points
    gapY = sqrt(3) * length / 60;//the difference of Y values between two adjacent starting points and end points
    translate(x,y);
    rotate(a);
    for(var i = 0; i < 31; i ++){  
            line(X1, Y1, X2, Y2); 
    	    X2 = X2 + gapX;
    		Y2 = Y2 - gapY * sign;
    		X1 = X1 + gapX;
    		Y1 = Y1 + gapY * sign;//connect the dots to form a curve
    		}
    pop();
    }
function flower(centerX,centerY,length){
//defines the function flower() which draws a flower at centerX,centerY with petal length of length
    stroke(223,40,62);
    halfPetal(centerX,centerY,(PI / 3), 1,length);
    halfPetal(centerX,centerY,2 * PI  / 3 + (PI / 3), 1,length);
    halfPetal(centerX,centerY,4 * PI / 3 + (PI / 3), 1,length);
    halfPetal(centerX,centerY,(PI / 3) , -1,length);
    halfPetal(centerX,centerY, 2 * PI  / 3 + (PI / 3), -1, length)
    halfPetal(centerX,centerY, 4 * PI / 3  + (PI / 3), -1,length);
    //draw pink flower by combing top and bottom petal together and rotating
    
    stroke(35,66,26);
    halfPetal(centerX,centerY,0, 1,length);
    halfPetal(centerX,centerY,2 * PI  / 3 , 1,length);
    halfPetal(centerX,centerY,4 * PI / 3 , 1,length);
    halfPetal(centerX,centerY, 0 , -1,length);
    halfPetal(centerX,centerY, 2 * PI  / 3 , -1,length);
    halfPetal(centerX,centerY, 4 * PI / 3  , -1,length);  
    //draw green flower with same proceedure

    }

I was surprised that straight lines could produce such organic curves. The shapes reminded me of a flower so I made a flower inside a flower.

image-5