Jisoo Geum – Project 04 – String Art

sketch

// Jisoo Geum
// Section B
// jgeum@andrew.cmu.edu 
// Project-04

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

function draw(){
	var x1 = 0;
	var y1 = 0;
	var x2 = 0;
	var y2 = 0;
	var circS = 10;
	//var ix = 1.2;
	var iy = 1.1;
//rectangle 
	fill(255,150,143);
	noStroke();
	rect(190,0,215,190);

//ellipses 
     for (circX = 0; circX <= width; circX += 15 ){
     	for (circY = 0; circY <= height; circY +=10){
     		if (circY>180){break;} // makes the loop stop at a certain point 
     		if (circX>180){break;}
     	circY = circY * iy;
     	//draw circles 
     	stroke(255,126,143);
     	strokeWeight(.5);
     	// circles at top left
     	noFill();
     	ellipse(circX ,circY , circS ,circS );
     	// circles at the bottom right 
     	push();
     	translate(200,200);
     	ellipse(circX ,circY , circS ,circS );
     	pop();		
 		}	
 	}
    //point loops from top left  
    for (var i = 0; i < 80; i++){ // assign increment value as i 
        x1 += i+10;
        y1 += i;
        x2 += 20;
        y2 += 10; 
        // grey lines 
        stroke(90);
        line(100, 0, width, y1); 
        if (x1 > 500){break;}
        line(width, height, 90+x1, 0); 
        // light blue lines
        stroke(109,145,255);
        line(0, y1, x1, height); 
        // dark blue lines lines
        stroke(40,90,255);
        line(100, y1, x1+100, height);      
    }

}

This project was very experimental for me since the process was different from the previous ones. I usually draw my ideas in my sketchbook or illustrator, and then translate it into javascript. For the string art, however, I began straight from javascript and then decided on the other elements such as shapes and color. I think using the line loop was very difficult to me because I often got confused with the x and y coordinates.