// Joanne Lee
// Section C
// joannele@andrew.cmu.edu
// Project-07
var nPoints = 100;
var colorR = 167;
var colorG = 168;
var colorB = 212;
var div = 0;
var w = 0;
var h = 0;
function setup() {
createCanvas(480,480);
}
function draw() {
background (240);
push();
translate(0,0);
for (var c = 0; c < 6; c ++) {
h = c * 96; // shifts height of flower
for (var d = 0; d < 7; d ++) {
w = d * 80; // shift width of flower
drawEpitrochoidCurve(colorR, colorG, colorB, div, w, h);
}
}
if (mouseY > 0){
div = (mouseY / 15.0) + 5; // flower size scales to mouseY position
}
pop();
}
function drawEpitrochoidCurve(colorR, colorG, colorB, div, w, h) {
// Epicycloid:
// http://mathworld.wolfram.com/Epicycloid.html
var x;
var y;
var a = 80.0;
var b = a / 2.0;
fill(colorR, colorG, colorB);
beginShape();
for (var i = 0; i < 100; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
x = a * (6 * cos(t) - cos(6 * t)) / div + w;
y = a * (6 * sin(t) - sin(6 * t)) / div + h;
vertex(x, y);
}
endShape(CLOSE);
}
function mouseClicked() { // petal color changes upon mouseClick
var colNum = int(random(1,4));
if (colNum == 1) {
colorR = 167;
colorG = 168;
colorB = 212;
}
else if (colNum == 2) {
colorR = 207;
colorG = 61;
colorB = 160;
}
else if (colNum == 3) {
colorR = 90;
colorG = 76;
colorB = 181;
}
}
For this week’s project, I first thought of flower petals when I was looking at the possible curves. I looked up flower petals and liked the colors and shapes of these, so I used ranuncloid curves to create them. Ranuncloid curves are essentially epicycloids with 5 cusps. For interactivity, I thought it would be interesting to make the flower “grow” using the mouseY position as well as randomly alternate between the flower colors depicted above with mouse clicks. I purposely had the flowers overlap with each other at its largest size because I thought that it formed an interesting pattern.