jooheek – Project07 – Curves

sketch

//JooHee Kim
//Section E
//jooheek@andrew.cmu.edu
//Project-07


//This project is based on the epicycloid formula
//http://mathworld.wolfram.com/Epicycloid.html
function setup() {
    createCanvas(480, 480);
    angleMode(DEGREES);
}

function draw() {
	background(0,30);
	
	//moves lines to the middle of canvas
	translate(width/2, height/2);
	
	//draws 5 curve shapes in different sizes
	for (var curveSize = 0; curveSize < 10; curveSize += 2) {
		//draws lines on every angle of the curve in degrees mode
		for (var i=0; i<360; i++) {

			//variable that remaps mouseX from 0 to 12
			//represents "a" in original formula
			var M = map(mouseX, 0, width, 0, 12);

			//represents "b" in original formula
			var b = 5;

			//variables of line coordinates drawn according to the epicycloid curve formula
			//substitutes with M so that the size and number of petals change according to mouseX
			var lineX1 = curveSize*((M+b)*cos(i-100) - b*cos(((M+b)/b)*i-100));
			var lineY1 = curveSize*((M+b)*sin(i-100) - b*sin(((M+b)/b)*i-100));
			var lineX2 = curveSize*((M+b)*cos(i) - b*cos(((M+b)/b)*i));
			var lineY2 = curveSize*((M+b)*sin(i) - b*sin(((M+b)/b)*i));

			//draw line with variables
			stroke(i, 210, 210, curveSize);
			line(lineX1, lineY1, lineX2, lineY2);
		}
	}

}

After looking at the types of curves that were given to us, I decided to choose the epicycloid. It uses a parametric equation:

I first tried to figure out how the graph works in coding, and after trying out many options I liked using lines with graph formula. Although I thought this project was simpler than other projects, I found it fun using curve formulas to represent curves in different ways. I first started out with one curve shape but found that putting it in a for loop that varies in sizes makes it more interesting. I also had fun playing with the opacity in both the background and lines.

*There are more curves when looked on the browser than when looked in this WordPress blog.