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.