Category: Project-04-String-Art

Ankitha Vasudev – Project 04 – String Art

sketch

//Ankitha Vasudev
//ankithav@andrew.cmu.edu
//Section B
//Project 04

var r = 210;
var g = 220;
var b = 255;
var angle = 0;
var cx = 0;

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

//spiral eye 
function draw() {
    angle = angle+5;
    cx = cx+20;
    fill(0);
    push();
    translate(width/2,height/2-10);
    rotate(radians(angle));
    strokeWeight(0.5);
    stroke(r-200, g-150, b);
    line(cx, 0, 10, 10);
    pop();

//loop
for (var x = 0; x < width; x += 10) {

    //bottom right curves
   	strokeWeight(0.75);
    stroke(r+40, g+20, b);
    line(x, height-30, width-30, height-x);
    stroke(r-50, g-60, b);
   	line(x, height, width, height-x);

    //top left curves
    stroke(r+40, g+30, b);
    line(x, 20, 40, height - x);
    stroke(r-70, g-80, b);
    line(x, 0, 0, height - x);

    //top right curves
    stroke(r-20, g-10, b);
    line(width/2 + x, 0, width, x);
    stroke(r+40, g+20, b);
    line(width/2 + x, 0, width, x+50);

    //bottom left curves
    stroke(r-40, g-20, b);
    line(0, x+80, x, height);
    stroke(r+40, g+20, b);
    line(10, x, x, height);
}
}

For this project, I played around with looping and changing coordinates to obtain different patterns. I also wanted to create a dynamic element, which led to the idea of creating an abstract eye.

Ghalya Alsanea – Project 04 – String Art


sketch

//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu;
//Project-04

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

function draw() {
    background(0);
    stroke(255);

    //make x and y depend on mouse postition
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);

    //create the mirrored x and y positions
    var ix = width - x;
    var iy = height - y;

    //create 4 parabolas mirroring each other to make an X like shape 
    //each parabola spans the width and height incrementally
    for (var i = 0; i <=width; i += 10) {
        //as the lines draw, make them darker proportionally
        stroke(255 - i / 2);

        line(i, iy, ix, height - i);
        line(width - i, y, x, i);
        line(width - i, iy, x, height - i);
        line(i, y, ix, i);
    }
    
    //same thing but on the inside of existing shape
    for (var i = 0; i <=width; i += 10) {
        //as the lines draw, make them go form red to darker proportionally
        stroke(255 - i / 2, 0 , 0);

        line(width - i, y, ix, height - i);
        line(i, iy, x, i);
        line(width - i, iy, ix, i);
        line(i, y, x, height - i);
    }
    
}

I wanted to create parabolic shapes that moved based on your mouse location proportionally. I thought it would be interesting to also have the color gradient as the lines were drawn.

This is a process sketch showing how I was thinking about the two ‘X’ shaped parabolas and the variable’s relationship with one another.

Sean Meng-Project 04-String Art

hmeng assignment-03-A

//Sean Meng
//Section C
//hmeng@andrew.cmu.edu
//Project-03-String-Art

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

function draw() {
	background(0);
    
    for(var i = 0; i <= 400; i += 10){
 //the darkest blue lines
        stroke(0, 0, 255);
    	line(i, 0, 400, i);
//second layer of blue lines with lighter color
    	stroke(100, 100, 255);
    	line(i, 50, 400, i);
//third layer of blue lines with ligher color
    	stroke(150, 150, 255);
    	line(i, 100, 400, i);
//the lightest blue lines
    	stroke(200, 200, 255);
    	line(i, 150, 400, i);
 //the darkest red lines
    	stroke(255, 0, 0);
    	line(i, 300, 0, i);
 //second layer of red lines
    	stroke(255, 100, 100);
    	line(50, i, i, 300);
 //third layer of red lines
    	stroke(255, 150, 150);
    	line(100, i, i, 300);
 //the darkest blue lines
    	stroke(255, 200, 200);
    	line(150, i, i, 300);
    }
    
}

In this project, I intended to create a wavy graphic using string art form. I was also experimenting with visual readability and hierarchy by adding different tones of color and complementary colors to the graphics.

Ellan Suder – Project 04 – String Art

I first started with drawing several parabolic curves in function draw(). Then after making a shape I liked, I moved it over into its own function like the owl example and used another two for loops to replicate it with different x,y values.

The original shape

string art

/*
Ellan Suder
15104 1 D
esuder@andrew.cmu.edu
Project-04
*/

//I first started with drawing several parabolic curves in function draw().
//Then after making a shape I liked, I moved it over into its own function 
//like the owl example and used another two for loops to replicate it with different x,y values.

var t = 0;

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

function draw() {
    background(0);
  
    //changes color based on mouseX, mouseY
    var r = map(mouseX, 0, width, 0, 230);
    var g = map(mouseY, 0, height, 0, 230);
    var b = 230 * noise(t+20);
    stroke(r,g,b);
    t = t + 0.05;
    
    //determines x and y of shapes. I made them overlap each other
    for (var y = -height/2; y < height*2; y += height/2){ 
        for (var x = -height/2; x < width*2; x += height/2) {
            shape(x, y);
        }
	}		
}

function shape(x,y) {
	var n = 20;
    var linespacing = height/(n*2);

    push();
    scale(.5);
    translate(x,y);

	for(var i = 0; i<n; i++)
  {
    strokeWeight(1);
    //stroke("red");
    line(0,0+linespacing*i, //x1, y1. begin at 0,0 and go down linespacing
         0+linespacing*i,height/2); //x2, y2. point goes right along height/2 linespacing each time

    //stroke("black");
    line(height,0+linespacing*i, //x1, y1. begin at height and go down
         height-linespacing*i,height/2); //x2, y2. begin at height,height/2 and go left

    //stroke("green");
    line(height/2,height/2+linespacing*i, //begin at height/2,height/2 and go down
         height-linespacing*i,height/2); //begin at height,height/2 and go left
 
    //stroke("purple");
    line(height/2,height/2+linespacing*i, //begin at height/2,height/2 and go down
         0+linespacing*i,height/2); //begin at 0,height/2 and go right

    //stroke("yellow");
    line(0,0+linespacing*i, //begin at 0,0 and go down
         height/2-linespacing*i,0); //begin at height/2,0 and go left

    //stroke("blue");
    line(height,0+linespacing*i, //begin at height,0 and go down
         height/2+linespacing*i,0); //begin at height/2,0 and go right

    //stroke("brown");
    line(height,height/2+linespacing*i, //begin at height,height/2 and go down
         height-linespacing*i,height); //begin at height,height and go left

    //stroke("orange");
    line(0,height/2+linespacing*i, //begin at 0,height/2 and go down
         0+linespacing*i,height); //begin at height/2 and go right
    }
    pop();
}

Taisei Manheim – Project 04 – String Art

sketch

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-04

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

function draw() {
    var x = 0; //used to define color
    background(0);
    strokeWeight(1);
    stroke(255);
    for (var i = 0; i < 400; i+=10){
        stroke(255);
        line(0, height - i, i, 0); //top left curved lines
        
        line(i, i, width, height -i); //top half of bottom right curved lines
        line(i, i, width - i, height); //bottom hald of bottom right curved lines

        //changes lines from white to magenta depending on mouse location
        if (mouseX > width / 2) {
            x = 0;
        }
        if (mouseX <+ width / 2) {
            x = 255;
        }

        //lines that turn magenta
        stroke(255, x, 255);
        line(0, height, i, i); //bottom left
        line(width, 0, i, i); //top right

        //sky blue lines
        stroke(135, 206, 235);
        line(width, height, 0, i); //bottom half
        line(0, 0, width, i); //top half
    }

}

When creating this I tried to create a fairly balanced composition with some areas having a denser amount of lines and some areas having not as many lines. I wanted to have some element of color change in order to change the way you perceive the drawing.

Fanjie Mike Jin – Project 04 – String Art

sketch3

//Fanjie Mike Jin
//Section C
//fjin@andrew.cmu.edu
//Project-04

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

function draw() {
    background(0);

    for (var i = 0; i < 401; i += 10){
 //top left curved lines
      stroke(179, 223, 242);
      line(i, 300, 0, i);
 //top left curved lines
      stroke(179, 183, 242);
      line(400 + i, 300, 0, i);
 //bottom right curved lines
      stroke(115, 236, 235);
      line(i, 300, 0, i / 2);
 //bottom right curved lines
      stroke(179, 223, 242);
      line(400 - i, 300, 400, i / 2);
//top right curved lines
      stroke(179, 223, 242);
      line(400 - i, 300, 400, i);
//top right curved lines
      stroke(179, 183, 242);
      line( - i, 300, 400, i);
//bottom left curved lines
      stroke(179, 223, 242);
      line(i , 0, 400, i * height / width / 2);
//bottom left curved lines
      stroke(115, 236, 235);
      line(i, 0, 400, i * height / width);
//top right curved lines
      stroke(115, 236, 235);
      line(400 - i, 0, 0, i * height / width / 2);
//top right curved lines
      stroke(115, 236, 235);
      line(400 - i, 0, 0, i * height / width);
// center line
      stroke(115, 236, 235);
      line(i ,0 ,0 ,i);
// center line
      stroke(115, 236, 235);
      line(400 - i ,0 ,400, i);
    }
}

In this project, I was interested in using a repetitive pattern to create an interesting composition. I was trying to use different curved lines to show depth of the layers and ultimately create a strong sense of different hierarchies.

Joanne Chui – Project 04 – String Art

sketch

// Joanne Chui
//jchui1@andrew.cmu.edu
// Assignment-04-A
// Section C 

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


function draw(){
	for(let i = 0; i < 25; i++){
		ay = i * 6;
		bx = 200 - (i * 8);
		cy = i * 12;
		dx = i * 16;
		stroke(220, 255, 150);
		strokeWeight(.1);
		//"quad1"
	 	line(200, ay, bx, 150);
	 	//"quad2"
	 	line(200, ay, 200 + bx, 0);
	 	//"quad3"
	 	line(400, cy, 400 - bx, 0);
	 	line(200, 150 + ay, 200 + bx, 0);
	 	line(200, 150 + ay, 400 - bx, 300);
	 	//"quad4"
	 	line(0, 150 + ay, bx, 150);
	 	line(dx, 300, 400, 300 - cy)
	 	line(200, ay, bx, 300);
	}
}

I created this image based on the idea of fabric, and trying to make the lines appear as a continuous surface. This is why there aren’t any endpoints floating in the canvas, and everything is connected.

Chelsea Fan-Project-04-String Art

StringArt

/* Chelsea Fan
Section 1B
chelseaf@andrew.cmu.edu
Project-04
*/
var spacing = 15; //spacing for each line
var y = 1; //green line variation
var w = 100; //pink line variation

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

function draw() {
	//Green Lines
	stroke(150, 255, 150); //green color
    for (var x = 100; x<=300; x+=spacing) {
    	line(x, 0, x*y, 300);
    	y = y*0.7;
    }
    //Blue Lines
	stroke(150, 150, 255); //blue color
    for (var x = 0; x<=100; x+=spacing/2) {
    	line(x, 0, 400-x, 300);
    }

    //Pink Lines
    stroke(255, 0 ,250); //pink color
    for (var x = 0; x<=100; x+=spacing/2) {
    	line(x+300, 0, w-x, 350);
    	w = w*0.9;

    }
    //Yellow Lines
    stroke(230, 250, 0); //yellow color
    for (var x = 0; x<=100; x+=spacing) {
    	line(0, x+100, 400, 300-x);
    noLoop(); //don't keep drawing lines
    }
}

I wanted to have bright colored lines with a dark background to make the design POP. It took me a while to fine a design of lines that were simple but interesting to view.

Paul Greenway – Project04 – String Art

pgreenwa_lineArt

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

function draw() {
  
  background(50);
  
  //white triangle lines downwards
  for (var i = 0; i < 41; i++) {
    
    x1 = 200;
    y1 = 300;
    x2 = 0;
    y2 = 0;
    
    x2 += i*10;
    y2 -= i*0;
    
    stroke(100);
    strokeWeight(1);
    line(x1,y1,x2,y2);

  }
  
  //white triangle lines upwards
  for (var i = 0; i < 41; i++) {
    
    x1 = 200;
    y1 = 0;
    x2 = 0;
    y2 = 300;
    
    x2 += i*10;
    y2 -= i*0;
    
    stroke(100);
    strokeWeight(1);
    line(x1,y1,x2,y2);

  }
    
    //top left curved lines
    for (var i = 0; i < 40; i++) {
    
    x1 = 400;
    y1 = 0;
    x2 = 0;
    y2 = -50;
    
    x1 -= i*10;
    x2 -= i*10;
    x2 += i*10;
    y2 += i*10;
    
    stroke(150);
    strokeWeight(1);
    line(x1,y1,x2,y2);
      
    }
  
    //bottom right curved lines
    for (var i = 0; i < 45; i++) {
    
    x1 = 400;
    y1 = 300;
    x2 = 400;
    y2 = -50;
    
    x1 -= i*10;
    x2 -= i*10;
    x2 += i*10;
    y2 += i*10;
    
    stroke(150);
    strokeWeight(1);
    line(x1,y1,x2,y2);
      
    }
}

For this project I wanted to create string art with a symmetrical organization. To do this I used two intersecting triangular forms for the background with two opposite curving line groups on either corner.

Steven Fei – Project 4


sketch

This drawing was my attempt to understand how small changes of the two coordinates can create fluent curves. With the combinations of different lineweights, I was experimenting with the visual depth of different elements. Meanwhile, the three “Taichi” like symbols were inspired by the Sharingan from Naruto which represents creating a world of illusions.


function setup() {
    createCanvas(400, 300);
    background("black");
    
}
var x1; //variables for central white, blue, and purple curves
var x2; //variables for peripheral curves
var stepX1 = 10;//steps of change for central curves
var stepX2 = 20;//steps of change for peripheral curves
var y1=0;//variables for peripheral curves
var angle;//variables for the red curves
var radius = 30;//varaibles for the size of red curves
function draw() {
    
    //    top green lines
    for (var i = 0; i < 30; i++){
        x2 = -50 + i * stepX2;
        x3 = 30 + width;
        y1 = 15 * i;
        stroke(3,122,43);
        strokeWeight(0.1);
        line(x2, 0, x3, y1);
    }
//    bottom blue curves
    push();
    translate(0,height);
    for (var i1 = 0; i1 <= 90; i1 += 5){
        x2 = i1*5;
        y1 = 0;
        x3 = 450-x2;
        y2 = sin(radians(i1))*-80;
        stroke("blue");
        strokeWeight(0.1);
        line(x2,y1,x3,y2);
    }
    pop();
//    Dark purple lines on the bottom;
    push();
    translate(0,height);
    for (var i2 = 0; i2 <= 90; i2 += 5){
        x2 = i2*5;
        x3 = 450-x2;
        y2 = sin(radians(i2))*-80;
        i3 = map(i2, 0, 90, 0, PI*1/4);
        x4 = -50 + 500*cos(i3);
        y4 = 300-500*cos(i3);
        stroke(71,3,112);
        strokeWeight(0.1);
        line(x3,y2,x4,y4);
    }
    pop();
    
//    Central to left bottom White Lines    
    push();
    translate(width/2,height/2);
    rotate(radians(60));
    for(x1 = 0; x1 < 150; x1 += stepX1){
        strokeWeight(0.5);
        stroke("white");
        line(x1, 0, -(150-x1)*tan(radians(30)), 150-x1);
        
    }

//    Central to left top light blue lines
    rotate(radians(120));
    for(x1 = 0; x1 < 150; x1 += stepX1){
        strokeWeight(0.5);
        stroke(109,129,185);
        line(x1, 0, -(150-x1)*tan(radians(30)), 150-x1);
    }
//    central to right light purple lines
    rotate(radians(120));
    for(x1 = 0; x1 < 150; x1 += stepX1){
        strokeWeight(0.5);
        stroke(152,109,185);
        line(x1, 0, -(150-x1)*tan(radians(30)), 150-x1);
    }
    pop();
//   left top Taichi Fish 
    push();
    translate(100,70);
    rotate(radians(80));
    for (angle = 0; angle <90; angle += 5){
        angConv = radians(angle);
        angConv2 = 1.5*angConv;
        strokeWeight(0.5);
        stroke("red");
        line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
    }
    for (angle=90; angle<100; angle += 3){
        angConv = radians(angle);
        angConv2 = 1.8*angConv;
        strokeWeight(0.5);
        stroke("red");
        line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
        
    }
    for (angle=120; angle<=180; angle += 3){
        angConv = radians(angle);
        angConv2 = 3*angConv;
        strokeWeight(0.5);
        stroke("red");
        line(radius+radius*cos(angConv), radius*sin(angConv), -radius-radius*cos(angConv2), -radius*sin(angConv2));
        
    }
    for (angle=135; angle<163; angle+=4){
        angConv = radians(angle);
        strokeWeight(0.5);
        stroke("red");
        line(radius, radius, 2*radius*cos(angConv), 2*radius*sin(angConv));
    }
    pop();
    
    //   right side top Taichi Fish 
    push();
    translate(320,150);
    rotate(radians(190));
    for (angle = 0; angle <90; angle += 5){
        angConv = radians(angle);
        angConv2 = 1.5*angConv;
        strokeWeight(0.5);
        stroke("red");
        line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
    }
    for (angle=90; angle<100; angle += 3){
        angConv = radians(angle);
        angConv2 = 1.8*angConv;
        strokeWeight(0.5);
        stroke("red");
        line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
        
    }
    for (angle=120; angle<=180; angle += 3){
        angConv = radians(angle);
        angConv2 = 3*angConv;
        strokeWeight(0.5);
        stroke("red");
        line(radius+radius*cos(angConv), radius*sin(angConv), -radius-radius*cos(angConv2), -radius*sin(angConv2));
        
    }
    for (angle=135; angle<163; angle+=4){
        angConv = radians(angle);
        strokeWeight(0.5);
        stroke("red");
        line(radius, radius, 2*radius*cos(angConv), 2*radius*sin(angConv));
    }
    pop();
    
    //   left bottom Taichi Fish 
    push();
    translate(110,230);
    rotate(radians(320));
    for (angle = 0; angle <90; angle += 5){
        angConv = radians(angle);
        angConv2 = 1.5*angConv;
        strokeWeight(0.5);
        stroke("red");
        line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
    }
    for (angle=90; angle<100; angle += 3){
        angConv = radians(angle);
        angConv2 = 1.8*angConv;
        strokeWeight(0.5);
        stroke("red");
        line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
        
    }
    for (angle=120; angle<=180; angle += 3){
        angConv = radians(angle);
        angConv2 = 3*angConv;
        strokeWeight(0.5);
        stroke("red");
        line(radius+radius*cos(angConv), radius*sin(angConv), -radius-radius*cos(angConv2), -radius*sin(angConv2));
        
    }
    for (angle=135; angle<163; angle+=4){
        angConv = radians(angle);
        strokeWeight(0.5);
        stroke("red");
        line(radius, radius, 2*radius*cos(angConv), 2*radius*sin(angConv));
    }
    pop();

}