//Charmaine Qiu
//charmaiq@andrew.cmu.edu
//section E
//Project - 07 - Composition Curve
function setup() {
createCanvas(480, 480);
}
function draw() {
//set color to change with movement of mouse
background(mouseX, mouseY, 100);
drawHypotrochoid();
drawAstroid();
}
function drawHypotrochoid() {
//http://mathworld.wolfram.com/Hypotrochoid.html
//constraining the mouse action to the canvas
//map the variables in equation to a fit proportion of the curve
var x = constrain(mouseX, 0, width);
var y = constrain(mouseY, 0, height);
var a = map(x, 0, width, 150, 200);
var b = map(y, 0, height, 0, 50);
var h = map(x, 0, width, 0, 50);
//draw the first curve
push();
strokeWeight(10);
beginShape();
//rotate so that the beginning of curve does not show
rotate(radians(120));
//for loop that makes the shape
for(var i = 0; i < 300; i += .045){
var t = map(i, 0, 300, 0, TWO_PI);
//equation of the curve
x = (a - b) * cos(t) + h * cos(((a - b) / b) * t);
y = (a - b) * sin(t) + h * sin(((a - b) / b) * t);
vertex(x, y);
}
endShape(CLOSE);
pop();
//drawing the sencond curve
push();
//place it at the right bottom corner of canvas
translate(width, height);
strokeWeight(10);
beginShape();
//for loop that makes the shape
for(var i = 0; i < 300; i += 0.045){
var t = map(i, 0, 300, 0, TWO_PI);
//equation of the curve
x = (a - b) * cos(t) + h * cos(((a - b) / b) * t);
y = (a - b) * sin(t) + h * sin(((a - b) / b) * t);
vertex(x, y);
}
endShape(CLOSE);
pop();
}
function drawAstroid(){
//http://mathworld.wolfram.com/Astroid.html
//draw first curve
push();
//place curve at center of canvas
translate(width / 2, height / 2);
strokeWeight(10);
//constraining the mouse action to the canvas
//map the variables in equation to a fit proportion of the curve
var x = constrain(mouseX, 0, width);
var y = constrain(mouseY, 0, height);
var a = map(mouseX, 0, width, 150, 200);
beginShape();
//for loop that makes the shape
for(var i = 0; i < 2 * PI; i += 0.045){
//rotate with the increment of mouseX
rotate(radians(x));
//equation of the curve
y = a * pow(sin(i), 3);
x = a * pow(cos(i), 3);
vertex(x, y);
}
endShape();
pop();
//draw first curve
push();
//place curve at center of canvas
translate(width / 2, height / 2);
strokeWeight(10);
//constraining the mouse action to the canvas
//map the variables in equation to a fit proportion of the curve
var x = constrain(mouseX, 0, width);
var y = constrain(mouseY, 0, height);
var a = map(mouseX, 0, width, 20, 70);
beginShape();
//for loop that makes the shape
for(var i = 0; i < 2 * PI; i += 0.045){
//rotate with the increment of mouseY
rotate(radians(y));
//equation of the curve
y = a * pow(sin(i), 3);
x = a * pow(cos(i), 3);
vertex(x, y);
}
endShape();
pop();
}
In this project, it was fun to explore the different kinds of curves that can be created with math equations, and it intrigues me how interesting patterns can be generated through math. I took a pop art approach to my project by using bright colors and thick outlines.