YiranXuan-Project04-String-Art

This string art is based on an physical string art example I found on the web that is similar to the yin-yang. At first I was curious what the mathematical formula would be to create such a pattern where the inner curve would curve much more sharply than the outer curve. This was explained when I watched the video, where the artist increments one side of the strings by two pegs around the circle, while the other side only by one peg. I also needed to solve the problem of overlapping; I wanted both colors to be cover each other only in specific areas, not just have one over the other. This was solved by drawing strings for both sides in the same loop iteration.

sketch

function setup() {
    createCanvas(400, 300);
    background('white');
    angleMode(DEGREES);
}

function draw() {
	var radius = 150;
	var dotradius = 50;

	var whitecenter = 210; //centers of the dots
	var blackcenter = 90;

	var whiteslow = 0; //each line consists of a "slow point" that travels around the circle at 1 degree per iteration
	var whitefast = 180; //and a "fast point" which travels around the circle at 2 degrees per iteration;
	var blackslow = 180;
	var blackfast = 0;

	//the dots will piggyback off of the progression of whitefast, as they are forming complete circles. 
	//They will beformed by lines that are offset by 15 degrees

	var slowincrement = 3;
	var fastincrement = 2*slowincrement;

	for(whiteslow = 0; whiteslow <= 180; whiteslow += slowincrement){

		stroke('red');
		line(cos(whitefast)*dotradius + width/2, sin(whitefast)*dotradius + whitecenter, cos((whitefast+120)%360)*dotradius + width/2, sin((whitefast+120)%360)*dotradius + whitecenter); //drawing the white dot
		stroke('blue');
		line(cos(whitefast)*dotradius + width/2, sin(whitefast)*dotradius + blackcenter, cos((whitefast+120)%360)*dotradius + width/2, sin((whitefast+120)%360)*dotradius + blackcenter); //drawing the white dot



		stroke('red');
		line(cos(whiteslow)*radius + width/2, sin(whiteslow)*radius + height/2, cos(whitefast)*radius + width/2, sin(whitefast)*radius + height/2); //drawing the first white line
		stroke('blue');
		line(cos(blackslow)*radius + width/2, sin(blackslow)*radius + height/2, cos(blackfast)*radius + width/2, sin(blackfast)*radius + height/2); //drawing the first black line
		//the updated slow points to the old fast points

		blackfast = (blackfast+fastincrement)%360; //updating fast points; if they go over 360, they wind back at 1
		whitefast = (whitefast+fastincrement)%360;

		stroke('yellow');
		line(cos(whiteslow)*radius + width/2, sin(whiteslow)*radius + height/2, cos(whitefast)*radius + width/2, sin(whitefast)*radius + height/2); //drawing the first white line
		stroke('cyan');
		line(cos(blackslow)*radius + width/2, sin(blackslow)*radius + height/2, cos(blackfast)*radius + width/2, sin(blackfast)*radius + height/2); //drawing the first black line
		//the updated slow points to the updated fast points

		blackslow += slowincrement; //updating slow point
	}

}