This is my floral composition based on mathematical curves and reacts to the mouse’s location on the canvas.
sketch
/*
Joan Lee
Section D
This program draws an interactive floral composition with mathematical curves.
*/
var nPoints = 400;
function setup() {
createCanvas(480, 480);
}
function draw() {
background(28,92,76); //dark green
//drawing flower curve
push();
translate(width/2, height/2);
drawCardioidCurve();
pop();
//drawing leaves curve
push();
translate(width/2, height/2);
drawHypotrochoidCurve();
pop();
}
//--------------------------------------------------
function drawCardioidCurve() {
//cardioid curve
push();
translate(x, y);
rotate(radians(90));
var x = constrain(mouseX, 0, width);
var y = constrain(mouseY, 0, height);
var a = map(x, 0, width, 0, 40);
var b = a/2;
//mouse movement interaction
if (mouseY > height/2) { //color change
fill(244,52,4); //bright red
} else {
fill(252,156,132); //pink
}
//cardioid curve parametric equations
beginShape();
noStroke();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
x = a * (6 * cos(t) - cos(6 * t));
y = a * (6 * sin(t) - sin(6 *t));
vertex(x, y);
}
endShape(CLOSE);
pop();
}
//--------------------------------------------------
function drawHypotrochoidCurve() {
//hypotrochoid curve
noFill();
strokeWeight(1);
//mouse movement interaction
if (mouseX < width/2) { //color change
stroke(4,220,156); // bright green
} else {
stroke(204,236,228); //pale green
}
var x = constrain(mouseX, 0, width);
var y = constrain(mouseY, 0, height);
var a = map(x, 0, width, 50, 150);
var b = map(y, 0, height, 1, 6);
var h = constrain(mouseY, 50, 90);
//hypotrochoid curve parametric equations
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
x = (a - b) * cos(t) + h * cos(t * ((a - b) / b));
y = (a - b) * sin(t) - h * sin(t * ((a - b) / b));
vertex(x, y);
}
endShape(CLOSE);
}