mreyes-project-04-string art

mreyes-project-04

//Mercedes Reys

//Section C 

//mreyes@andrew.cmu.edu

//Project-04

//colors
var r = 255;
var g = 0;
var b = 255;

var strokeW = 0 // starting stroke width

var canvasDev = 3 // canvas will be divides into 3rds 

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

function draw() {
	background(177,242,231)
    //var spaceing = 10
    //var growth = 30
    fill(0)
    for (var i = 0; i < 50; i ++) { //add 50 lines
    
     //variables based on canvas width 
     
     var x1 = width/2;
     var x2 = i*(x1/10);
     var y1 = x1-x2;
     var y2 = width-(x2);
     
     //color gradient
     r -= 7;
     g += 10;
     b -= 5; 
     strokeW += .01; // stroke width increases sligtly 
     stroke(r,g,b)
     line(x2,x1,x1,x1-(x2)); // original left lines
     line(x1,x1-(x2),y2,x1); // original right lines
     
     push();

     translate(0,height/canvasDev)//bottom 3rd lines

     line(x2,x1,x1,x1-(x2)); 
     line(x1,x1-(x2),y2,x1); 
     
     translate(width,height);//move the canvas over 
     angleMode(DEGREES);
     rotate(180);//flip canvase
     line(x2,x1,x1,x1-(x2)); 
     line(x1,x1-(x2),y2,x1); 
     pop();
     
     translate(width,height/2);//move the flipped canvas up 
     angleMode(DEGREES);
     rotate(180);
     line(x2,x1,x1,x1-(x2)); 
     line(x1,x1-(x2),y2,x1); 
     pop();
    
    noLoop() // stagnant image so gradient will work

    }

  


    
}

I initially tried to go with a design with more of a star in the center of the page but, found interesting things happening when experimenting with the translate and rotate function. Now it is something more abstract, but also more 3 dimensional.