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
	}

}

sketch

//Jonathan Liang
//jliang2
//Section A

function setup() {
    createCanvas(600, 600);
    frameRate(10);
  
}

function draw() {
	background(0);
	push();
	translate(300,300);
	rotate(sin(mouseX));
	drawKevin();
	pop();

	push();
	translate(300,300);
	rotate(-sin(mouseX));
	drawStanley();
	pop();
}

function drawKevin() {
    var kPoints = map(mouseX, 0, height, 0 , 500);
    var x;
    var y;
    var tj = map(mouseX, 0, width,0,8); // for iterations
    beginShape();
    for (var i=0; i < kPoints; i++){ 
        var t = map(i,0,kPoints,0,TWO_PI*tj);
        noFill();
        var colR = map(mouseX, 0, width, 0, 255);
        var colG = map(mouseY, 0, width, 0, 255);
        var colB = map(mouseX, 0, width, 0, 255);
        strokeWeight(.5);
        stroke(colR, colG, colB); // 
        //equations as listed on mathworld.wolfram.com/ButterflyCurve.html
        x = Math.sin(t) * (Math.pow(Math.E,Math.cos(t))
                        - 2*Math.cos(4*t) 
                        + Math.pow(Math.sin(t/12),5));

        y = Math.cos(t) * (Math.pow(Math.E,Math.cos(t))
                        - 2*Math.cos(4*t) 
                        + Math.pow(Math.sin(t/12),5));

        vertex(i*x,i*y);
    }
    endShape(CLOSE);  
}

function drawStanley() {
    var sPoints = map(mouseX, 0, height, 0 , 500);
    var x;
    var y;
    var tj = map(mouseX, 0, width,0,8); 

    beginShape();
 
    for (var i=0; i < sPoints; i++){ 
        var t = map(i,0,sPoints,0,TWO_PI*tj);
        noFill();
        var colR = map(mouseX, 0, width, 255, 0);
        var colG = map(mouseY, 0, width, 255, 0);
        var colB = map(mouseX, 0, width, 255, 0);
        strokeWeight(0.5);

        stroke(colR, colG, colB); // 
        //equations as listed on mathworld.wolfram.com/ButterflyCurve.html
        x = Math.sin(t) * (Math.pow(Math.E,Math.cos(t))
                        - 2*Math.cos(4*t) 
                        + Math.pow(Math.sin(t/12),5));

        y = Math.cos(t) * (Math.pow(Math.E,Math.cos(t))
                        - 2*Math.cos(4*t) 
                        + Math.pow(Math.sin(t/12),5));

        vertex(i*x,i*y);
    }
    endShape(CLOSE);  
}

I see the butterfly curve more like a ripple or a flower, growing over time. Just a flower blooms, butterflies blossom from little caterpillars to marvelous winged insects. However, as one butterfly blossoms, one must leave; which is why I made one fade away as the other became more prominent. The color becomes the most vibrant at the top right, symbolizing the butterfly’s prime, while the faded bottom right corner symbolizes its passing.