jihoonp_project_07

sketch

//Jihoon Park
//section A
//jihoonp@andrew.cmu.edu
//project-07

var nPoints = 100;
var divider;					//number of points in hypotrochoid

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

function draw() {
	background(0);

	for(var i=0; i<10; i++) {		//loops the Hypotrochoid with 30 pixel space
		var col = map(i, 0, 10, 0, 255); //color map
		stroke(col);
		noFill();				//inner geometry fades
		Hypo(i*30, mouseX/50);		//changes the number of points according to mouse X
	}
}

function Hypo(a, divider) {
	var x;
	var y; 

	var a;									//radius of circumscribed circle
	var b=a/divider;						//radius of inscribed circle
	var h = constrain(mouseY/10, 0, a);		//length of rotating point generator
	var ph = mouseX/50;						//rotation of hypotrochoid
	push();									//moves the origin of hypotrochoid to center
	translate(width/2, height/2);
	beginShape();
	for(var i=0; i<nPoints; i++) {
		var t = map(i, 0, nPoints, 0, TWO_PI);
		x=(a-b)*cos(t) + h*cos(ph+t*(a-b)/b);
		y=(a-b)*sin(t) - h*sin(ph+t*(a-b)/b);
		vertex(x, y);	
	}
	endShape(CLOSE);
	pop();
}

In this project I made a function called Hypo, which is a short term I gave for hypotrochoid. This geometry has 3 variables which are the radius of circumscribed circle, inner orbiting circle and the length of the line which is rotated from the center of orbiting circle. I made all of the variables modifiable according to the x and y position of the mouse, then looped the geometry to form an overlap.