Jinhee Lee; Project 07

jinheel1_project-07

//Jinhee Lee
//Section C
//jinheel1@andrew.cmu.edu
//Project-07

var nPoints = 100;
var angle = 0; //start angle for rotating (out of canvas)

function setup() {
    createCanvas(500, 500);
}

function draw() {
	background(250);

    translate(width / 2, height / 2);
    if (mouseX > width) { //this one's for you, Anirudh
    	rotate(angle); //shape rotates in place
    }

    drawDeltoidCurve(); //calling helper function

    angle += 0.05; //increment for rotation
}

function drawDeltoidCurve() {
	// Deltoid
	// http://mathworld.wolfram.com/Deltoid.html

	var x; //curve in parametric form
	var y;

	var minSize = 80; //min size of shape
	var maxSize = 160; //max size of shape
	var mapA = map(mouseY, 0, width, minSize, maxSize); //maps size between minSize and maxSize
	var a = constrain(mapA, minSize, maxSize); //so that shape doesn't grow when mouseX beyond canvas
	var b = a / 3; //variable for curve equations
	var rot = constrain(mouseX / 30, 0, width / 30); //rotate according to mouseX

	fill("red"); //larger red circle
	ellipse(0, 0, 2 * a, 2 * a);

	fill(0);
	beginShape();
	for (var i = 0; i < nPoints; i++) {
		var theta = map(i, 0, nPoints, 0, TWO_PI);

		x = 2 * b * cos(theta) + b * cos(2 * theta - rot); //parametric equations of curve
		y = 2 * b * sin(theta) - b * sin(2 * theta - rot);
		vertex(x, y);
	}
	endShape(CLOSE);

	fill("red"); //smaller red circle
	ellipse(0, 0, b, b);
}

Having to implement parametric equations felt daunting at first, but in a broader look, it was mostly plugging in the deltoid curve’s equation with the templates given in the prompt. The two red circles I made separately fairly easily, but I made them share variables with the deltoid curve that governed its size, so they would all grow proportionally.

P.S.,

Fun fact, if you spin the deltoid to the right past the canvas, then you get-
YOU ARE NOW UNDER MY GENJUTSU