Category: Project-04-String-Art

akluk-Project4-Section-A-StringArt

sketch
It was fun and exciting to create curves with straight lines and was challenging to figure out the correct values

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

function draw() {
	background(0)

	//establishing initial points and step sizes as variables
	var x1 = 0;
	var y1 = height;
	var x2 = 0;
	var x3 = 0;
	var y3 = 0;
	var x_step1 = width/20;
	var y_step1 = height/40;
	var x_step2 = width/15;
	var x_step3 = width/60;
	var y_step3 = height/60;


	//creates creates the blue - white curves in the center of the canvas
	for (var j = 0; j < 30; j++){
		stroke(color(240-8*j,240-8*j,255));
		line(x2,height/2,width,height/2 - j*y_step3);
		line(0,height/2 + j*y_step3,width-x2,height/2 );
		x2 += x_step2;
	}

	
	//creates green yellow gradient curve on the lower right corner
	for (var i = 0; i < 20; i++){
		stroke(color(50+10*i,150,14))
		line(x1,height,width,y1);
		x1 += x_step1;
		y1 -= y_step1;

	}

	//creates red "line" generated ellipse
	for (var k = 0; k < 30; k++){
		stroke(color(240-8*k,0,0));
		line(0,y3,x3,height/2);
		line(0,height/2-y3,x3,0);
		line(width/2,y3,width/2-x3,height/2);
		line(width/2,height/2-y3,width/2-x3,0);
		x3 += x_step3;
		y3 += y_step3;
	}
}

ifv-project-04

sketch

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

function draw() {
  background(255,235,0);
     for (var i = 0; i < 70; i ++) {
       drawCurvedLines(i);
       //triangles made of lines
       line(210,200,i*3,300);
       line(210,200,150+i*3,0);
       line(210,200,400,150+i*3);
       line(i*3,0,i*3+2,);
       line(110,100,0,i*3);
       line(110,100,i*3,0);
     }

 }
function drawCurvedLines(count) {
 push();
 translate(200,200);
 rotate(radians(count*1));
 line(count*2+10, 0, count*3 + 10, 100);
 line(count*3+10,100,count*2+10,150);
 pop()
 push();
 translate(200,200);
 rotate(radians(count*2));
 line(count*2+10, 0, count*3 + 10, 100);
 line(count*3+10,100,count*2+10,150);
 pop()

 push();
 translate(100,100);
 rotate(radians(count*1));
 line(count*2+10, 0, count*3 + 10, 100);
 line(count*3+10,100,count*2+10,150);
 pop()
 push();
 translate(100,100);
 rotate(radians(count*2));
 line(count*2+10, 0, count*3 + 10, 100);
 line(count*3+10,100,count*2+10,150);
 pop()
 push();
 translate(100,100);
 rotate(radians(count*2+2));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();
 push();
 translate(130,50);
 rotate(radians(count*2+2));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();

 push();
 translate(400,0);
 rotate(radians(count*3));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();

 push();
 translate(400,0);
 rotate(radians(count*2));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();

 push();
 translate(400,0);
 rotate(radians(count*4));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();

 push();
 translate(400,0);
 rotate(radians(count*5));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();

 push();
 translate(400,0);
 rotate(radians(count*6));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();

}

I just played around with curved and straight lines to create an abstract piece that has depth.

Project 04 – Yugyeong Lee

sketch

//Yugyeong Lee
//Section B
//yugyeonl@andrew.cmu.edu
//Project-04

var spacing;
var x;				//positionX
var y;				//positionY
var b;				//colorB	
var w;				//strokeWeight

function setup() {
    createCanvas(400, 300);
    x = 0;
    y = 0;
}

function draw() {
	//background color changes based on mouseX
	b = map(mouseX, 0, width, 0, 150);
	background(b);
    
    //spacing for each loop changes based on mouseX
    spacing = map(mouseX, 0, width, 10, 20);

    //the stroke weight changes based on mouseX
    w = map(mouseX, 0, width, .5, 1);
    strokeWeight(w);

    //the four corners
    for (i = 0; i < 50; i++) {
    	stroke(255, 200, 100+i*5);
    	line(x, y+i*spacing, x+i*1.5*spacing, height);
    	line(x, height-i*spacing, x+i*1.5*spacing, y);
    	stroke(255, 200, 255-i*5)
    	line(width, y+i*spacing, width-i*1.5*spacing, height);
    	line(width, height-i*spacing, width-i*1.5*spacing, y);
    }

    //the 'diamond'-like shape in the center 
    for (i = 0; i < 15; i++) {
    	stroke(255-i*2);
    	line(0, height/2, width, height/2);  //horizontal&vertical line
    	line(width/2, y+i*spacing, width/2+i*spacing, height/2);
    	line(width/2, y+i*spacing, width/2-i*spacing, height/2);
    	line(width/2, height-i*spacing, width/2-i*spacing, height/2);
    	line(width/2, height-i*spacing, width/2+i*spacing, height/2);
    }
}

I wanted to create an interactive string art. The string art created by four quadrants base its spacing size, stroke weight, and background color gradient on the position of mouseX.

eeryan-Project4-StringArt

sketch

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

function draw() {
  background(221,251,171);
  //curve 1
    startX = 400;
    stopX = 200;
    startY = 150;
    stopY = 0;
  for(var n = 0; n <20; n++){
    stroke(0);//black
    strokeWeight(1);
    line(startX, startY + 20,stopX - 20, stopY);
    startY += 20;
    stopX += 7;
  }
  
  //curve 2
    startX = 400;
    stopX = 0;
    startY = 250;
    stopY = 0;
  for(var n = 0; n < 20; n++){
    stroke(0,0,255);//blue
    strokeWeight(1);
    line(startX, startY - 20, stopX + 10, stopY);
    startX += 2;
    stopY += 20;
  }
  
  //curve 3
    startX = 0;
    stopX = 400;
    startY = 150;
    stopY = 0;
  for(var n = 0; n < 40; n++){
    stroke(200,118,165);//pink
    strokeWeight(2);
    line(startX, startY, stopX, stopY);
    startX += 10;
    stopY += 10;
  }
  //curve 4
    startX = 400;
    stopX = 200;
    startY = 150;
    stopY = 0;
  for(var n = 0; n <20; n++){
    stroke(255,0,0);//red
    line(startY + 20, startX,stopY, stopX - 20);
    startY += 20;
    stopX += 7;
  }
}

I used for loops with various add ons to create four different “curves”. I played around with adding mouse interaction but I didn’t think it looked cohesive when one or two of the curve’s moved along with the mouse. I chose a color palette that matched the modern feel of the assignment.

ljkim_project 04 string art

sketch

/*Lois Kim
Section A
Project-04
*/

var x1 = 10;
var x2 = 200;
var y1 = 30;
var y2 = 400;

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

function draw() {
  for (var i = 0; i < 10; i++){
  noFill();
  stroke(299, 299 - i*20, 60);
  bezier (x1, y1, x2, y2, 90 + 500, 10 * i+ 200, 15+ 500, 80 * i + 100);
  } //yellow gradient curve
  
  for (var i = 0; i < 10; i++){
  noFill();
  stroke("#F4F4F4");
  bezier (x1 + 50, y1 + 40, x2 * 3, y2 * 2, 90, 10, 15, 80 * i + 50);
  } //white curves
  
  for (var i = 0; i < 10; i++){
  noFill();
  stroke("#1E4E87");
  bezier (40, 100, 225, 300, 90, 10, 500, 80 * i + 100);
  } //green curves
  
  for (var i = 0; i < 10; i++){
  noFill();
  stroke("#61BF25");
  bezier (x1 *20, y1 + 90, x2 * 4, y2 - 50, 700 * i + 100, 10, 500, 80 * i + 100);
  } //blue curves
  
  
  
}

I wanted color to be the focus of the curves. I also wanted to play around with different compositions. I ended up with this in the end

enwandu-Project-04-String Art

Sharingan

// Emmanuel Nwandu
// enwandu@andrew.cmu.edu
// Section D
// Project-04-String Art

var distribution = new Array(360);

function setup() {
    createCanvas(400, 300);
    for(i = 0; i < 275; i++){
        // Controls the properties of the line
        distribution[i] = floor(randomGaussian(350, 200));
    }
}

function draw() {
    background(0);

// Generates a set of random lines radiating from the center of the canvas
    push();
    translate(width/2, height/2);
    for(i = 0; i < 275; i++){
        rotate(TWO_PI/275);
        stroke(200, 0, 0);
        var dist = abs(distribution[i]);
        line(0, 0, dist, 0)
    }
    pop();

    var xBound = width;
    var yBound = height;
    var x = 0;
    var y2 = 0;

    strokeWeight(1)
    stroke(0); // Controls the color of the
// Generates lines which form an arc that moves diagonally
// across the canvas to each corner
// Similar geometry to the Mangekyou Sharigan
    for(i = 0; i < xBound; i +=10){
        var y = i * 3/4;
        line(x, y, i, yBound); //Lower left arc
        line(x, yBound -y, i, y2); // Upper Left arc
        line(xBound, y, xBound - i, yBound); // Lower Right arc
        line(i, y2, xBound, y); // Upper Right arc
    }

// Draws pupil
    fill(0);
    ellipse(200, 150, 75, 75);
}

This week, I was a bit unsure how to approach the assignment. I initially began coding random lines, to simply get a feel for what a happened when I manipulated certain parts of the code. This was extremely helpful, and while my code does not reflect all I wanted to achieve with this assignment, I learnt a lot by playing around with it a bit.

I drew inspiration from the Sasuke Uchiha’s Mangekyou Sharigan. It has been cropped, or zoomed in order to simplify it a bit. I had trouble coding the center petals of the floral pattern seen in his eye. It was a cool project though, definitely want to explore this more.

Inspiration. Initial thought.

 

Lrospigl Project 04 line pattern

When I started with this project, I didn’t have a clear idea of what I wanted my image to look like. However, I did know I wanted the to be a play in line quantity that the user was able to have control over. I made it so that if you move your mouse to the top left corner of the canvas, you will see the darkest color possible, as well as the highest concentrations of lines. And if you move your mouse to the bottom right corner, you will see the least amount of lines, and the lightest/ least visible color.

sketch

//Laura Rospigliosi
//Section C
//lrospigl@andrew.cmu.edu
//Project-04-String art

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

function draw () {
  background (240);

var r = mouseX; 
var g = mouseY;
var x1 = width/2;
var y1 = height/2;
var x2 = width/5;
var y2 = height/5;
var spacing = 5;
strokeWeight (0.5);

//line sequence one
stroke (r, g, 150);
//top left quadrant `
  for (x = width/5; x < width/2 + 10; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = height/5; y < height/2; y += spacing) {
    line (x1, y, x2, y2);
  }
  
//top right quadrant
  push ();
  scale (-1, 1);
  translate (-400, 0);
    for (x = width/5; x < width/2 + 10; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = height/5; y < height/2; y += spacing) {
    line (x1, y, x2, y2);
  }
  pop();
  
//bottom left quadrant
  push ();
  scale (1, -1);
  translate (0, -300);
    for (x = width/5; x < width/2 + 10; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = height/5; y < height/2; y += spacing) {
    line (x1, y, x2, y2);
  }
  pop();
  
//bottom right quadrant
  push ();
  scale (-1, -1);
  translate (-400, -300);
    for (x = width/5; x < width/2 + 10; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = height/5; y < height/2; y += spacing) {
    line (x1, y, x2, y2);
  }
  pop();


//line sequence two
//top left quadrant
  for (x = 0; x < width/5; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = 0; y < height/5; y += spacing) {
    line (x1, y, x2, y2);
  }
  
//top right quadrant
  push ();
  scale (-1, 1);
  translate (-400, 0);
  for (x = 0; x < width/5; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = 0; y < height/5; y += spacing) {
    line (x1, y, x2, y2);
  }
  pop();
  
//bottom left quadrant
  push ();
  scale (1, -1);
  translate (0, -300);
  for (x = 0; x < width/5; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = 0; y < height/5; y += spacing) {
    line (x1, y, x2, y2);
  }
  pop();
  
//bottom right quadrant
  push ();
  scale (-1, -1);
  translate (-400, -300);
  for (x = 0; x < width/5; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = 0; y < height/5; y += spacing) {
    line (x1, y, x2, y2);
  }
  pop();

//curves
var c2 = height;
var c3 = width;
var c4 = height;
var spacing2 = map(mouseX, 0, width, 5, 15);

//curves
  noFill();
  stroke (0)
  strokeWeight (0.5);

  for (c1 = width/10; c1 < width*(2/3); c1 += spacing2) {
    curve (0, 0 ,0, 0, c1, c2, c3, c4);
    }

  push ();
  scale (1, -1);
  translate (0, -300)
    for (c1 = width/10; c1 < width*(2/3); c1 += spacing2) {
    curve (0, 0 ,0, 0, c1, c2, c3, c4);
    }
  pop();

  push ();
  scale (-1, 1);
  translate (-400, 0);
    for (c1 = width/10; c1 < width*(2/3); c1 += spacing2) {
    curve (0, 0 ,0, 0, c1, c2, c3, c4);
    }
  pop();
  
  push ();
  scale (-1, -1);
  translate (-400, -300);
    for (c1 = width/10; c1 < width*(2/3); c1 += spacing2) {
    curve (0, 0 ,0, 0, c1, c2, c3, c4);
    }
  pop();

}

Project 4 – String Art

sketch



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

function draw() {
  var x0 = 100;
  var y0 = 50;
  var x1 = 300;
  var y1 = 250;
  var xX = 100;
  var yX = 50;
  var gap = 5;
  var redness = 220;
	background (0, 0, 0);
  //the first shape which is a square
	for (var i=1; i<41; i++){
    stroke (255, redness, redness);
    line (xX, y0, x1, yX);
    line (width-xX, y1, x0, height-yX);
    stroke (255, 220-redness, 220-redness);
    line (width-xX, y0, x0, yX);
    line (xX, y1, x1, height-yX);
    xX += gap;
    yX += gap;
    redness -= gap;
  }

  //the second shape that is like a cross
  var xC = width/2;
  var yC = 0;
  var greeness = 100;
  for (var j=0; j<31; j++){
    stroke (255, greeness, 0);
    line (width/2, yC, xC, height/2);
    line (width/2, yC, width-xC, height/2);
    line (width/2, height-yC, xC, height/2);
    line (width/2, height-yC, width-xC, height/2);
    xC += gap;
    yC += gap;
    greeness += gap;
  }

  //the third shape that connects the cross
  var yM = 0;
  var xM = width/4*3;
  var blueness = 50;
  for (var x=0; x<11; x++){
    stroke (blueness, blueness, 255);
    line (width/2, yM, xM, height/2);
    line (width/2, yM, width-xM, height/2);
    line (width/2, height-yM, xM, height/2);
    line (width/2, height-yM, width-xM, height/2);
    yM += gap;
    xM += gap;
    blueness += gap*2;
  }

  //the fourth shape that rotates from the center
  var centerX = width/2;
  var centerY = height/2;
  var radius = 200;
  var angle = 0;
  var factor = dist(mouseX, mouseY, centerX, centerY);
  //map the distance to the scale of radians
  var angleC = map(factor, 0, (200^2+150^2)^(1/2), 0, PI);
  for (var y=0;y<36;y++){
    x1 = centerX + radius * Math.cos( angle );
    y1 = centerY + radius * Math.sin( angle );
    x2 = centerX - radius * Math.cos( angle );
    y2 = centerY - radius * Math.sin( angle );
    stroke (204,255,153);
    line (x1, y1, x2, y2);
    //the angle of the rotation is related to the mouse
    angle += angleC;
  }
}

My project was inspired by the idea of centralization. All the curves point to the center or rotate through the center. Also, I look for the string art online and get some inspiration of the form.

jdbrown – Project 4: String Theo– I mean “Art”

Jdbrown-StringArt

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

function draw () {
        background (0);
        strokeWeight (1);
        fill (255);
        rect (10, 10, 580, 380);
        for (var i = 0; i < 60; i++) {
            drawMarker (i);
        }

}

function drawMarker (i) {

        push ();                    // Exterior wheel
        translate (200, 200);
        rotate (radians (i * 4));
        rotate (radians (i));
        line (150, 0, -200, -400);
        pop ();

        push ();                    // Exterior wheel (circle outline)
        translate (200, 200);
        rotate (radians (i * 1));
        fill (0);
        ellipse (150, 3, 5, 5);
        pop ();

        push ();
        translate (50, 200);       // weird mountain thing (main)
        rotate (radians (i /2));
        line (300, 0, 600, 400);
        pop ();

        push ();
        translate (50, 200);       // weird mountainthing (darker)
        rotate (radians (i /3));
        line (300, 0, 600, 400);
        pop ();

        push ();
        translate (50, 200);       // weird mountain thing (darkest)
        rotate (radians (i /5));
        line (300, 0, 600, 400);
        pop ();

        push ();                   // Inner wheel
        translate (200, 200);
        rotate (radians (i * 5));
        line (75, 0, 100, 400);
        pop ();

        push ();                    // Inner wheel (circle outline)
        translate (200, 200);
        rotate (radians (i * 3));
        fill (0);
        ellipse (75, 3, 5, 5);
        pop ();

        push ();
        translate (50, 200);       // weird mountain thing (small, main)
        rotate (radians (i));
        line (225, 0, 300, 200);
        pop ();

        push ();
        translate (50, 200);       // weird mountain thing (darker, main)
        rotate (radians (i / 2));
        line (225, 0, 300, 200);
        pop ();

        push ();
        translate (50, 200);       // weird mountain thing (darkest, main)
        rotate (radians (i / 4));
        line (225, 0, 300, 200);
        pop ();

        push ();                    // vision lines
        var c = 1;
        translate (200, 200);
        rotate (radians (i * 6));
        line (0, 0, mouseX / 2, mouseY);
        line (0, 0, mouseY / 10, mouseX / 4);
        stroke (255);
        line (0, 0, mouseY / 2, mouseX);
        pop ();

        var R = mouseX;
        var G = mouseY;
        var B = mouseX;

        fill (R, G, B);        // mountain eye (iris)
        ellipse (200, 200, 30, 30);
        fill (0);                  // mountain eye (pupil)
        ellipse (200, 200, 15, 15);
        fill (255);                // mountain eye (pupil)
        ellipse (195, 195, 5, 5);
}

For my String Art project, I was really inspired by the lecture this morning  (Friday, Sept. 22). I ended up making this weird all-seeing eye, spreading its illuminati dogma throughout the land. I like it, and you should to.

Josh

ctv-project-04-String Art

sketch

//Ty Van de Zande
//Section B
//ctv@andrew.cmu.edu
//Project-04


var mx;
function setup() {
    createCanvas(400, 300);
    background(23, 95, 171);
    
}
 
function draw() {
    //redraws background every frame
    background(23, 95, 171);
    
    //creates a list that places the lines on the x-axis
    for(i = 0; i < 500; i+=5 ) {
    p1 = {x: i, y: 0}; 
        stroke(255);
        strokeWeight(2);
	   curve(p1.x, p1.y, p1.x, p1.y, p1.x, height, p1.x, height); 
    }
     
    //creates lines that are pretty much the same as above, but rotated
    push();
    rotate(radians(2));
    for(i = 0; i < 500; i+=5 ) {
    p1 = {x: i, y: 0}; 
        stroke(255, 95, 171);
        strokeWeight(.25);
	   curve(p1.x, p1.y, p1.x, p1.y, p1.x, height, p1.x, height); 
    }
    pop();
    
    //draws lines in an upside down triangle, maps mouseY to bottom position
    for(i = 0; i < 20; i++ ) {
        noFill();
        p1 = {x: i*20, y: 10}; 
        stroke(255);
        strokeWeight(1);
	   curve(p1.x, p1.y, p1.x, p1.y, mouseY, height, width/2, height);   
    }
    
    //rotates a bunch of lines based on mouseX position
     for(i = 0; i < 50; i++ ) {
        p1 = {x: i*15, y: -1110}; 
        push();
         translate(0, 0);
         rotate(radians(mouseX/10));
         stroke(255);
         strokeWeight(1);
         curve(p1.x, p1.y, p1.x, p1.y, p1.x, height, p1.x, height);
	   pop();
     }
   
}

 

For this project, I was inspired by moiré patterns created with lines. The interference of lines that overlap create bizarre, superimposed patterns. This sense of confusion continues through the person’s mouse interactions with the piece. the mouse x, y axis is mapped to unintuitive movements of specific points. this was done to pair with the neat moirés.