Yiran Xuan – Project 07 – Curves

The idea behind this project was to implement an “unfolding” of the involute from the surface of the circle, similar to an Asian fan or a wing. A little struggle was had in keeping track of the angle variables, whether they represented angles themselves or just the increments (out of 24).

The mouse in the horizontal direction controls the unfolding, while in the vertical the rotation of the whole drawing is affected.

sketch

//Objective: draw circle involute
//mouse control: y controls the amount of "wrapping"
//mouse control: x controls initial angle

var wrap = 0; //determines how far the involute extends out
var initangle = 0;

var increment = 12;
var radius = 25;

function setup() {
    createCanvas(480, 480);
    angleMode(RADIANS);
}

function draw() {
	translate(width/2, height/2); //shifting coordinates to the center

	rotate(constrain(mouseY, 0, 480)/240*PI); //rotation

    background('white');

	wrap = 24 - constrain(mouseX, 0, 480)/20; //number of increments to go around circle

	noFill();
	strokeWeight(3);
	stroke('orange');
	ellipse(0, 0, radius*2, radius*2); //drawing center circle

	var accumulatedincrement = 0;

	for(var i = 0; i <= wrap; i++){
		stroke('cyan');

		var currentangle = accumulatedincrement/increment*PI;
		var x1 = radius*(cos(currentangle) + currentangle*sin(currentangle)) //determining fan section start point
		var y1 = radius*(sin(currentangle) - currentangle*cos(currentangle));

		accumulatedincrement++;
		
		var nextangle = accumulatedincrement/increment*PI;
		var x2 = radius*(cos(nextangle) + nextangle*sin(nextangle)); //determining fan section end point
		var y2 = radius*(sin(nextangle) - nextangle*cos(nextangle));

		triangle(x1, y1, x2, y2, 0, 0); //drawing triangle

		stroke('red');
		line(x1, y1, radius*cos(nextangle), radius*sin(nextangle)); //drawing lines to display tangency
	}

}