For this project, if you move your mouse left and right it changes the size of the left and right petals. If you move your mouse up and down it changes the size of the rose curve and the top and bottom inner petals.
sketch
//num of lines(rose) & size for bifoliate
var nPoints = 100;
function setup() {
createCanvas(400, 400);
frameRate(50);
background(220);
}
function draw() {
background(0);
push();
//moves origin to center of canvas
translate(width/2, height/2);
//inner petals
draw4BifoliateCurve();
//outer curves
drawRoseCurve();
pop();
}
//creating one singular bifoliate curve
function drawBifoliateCurve() {
var x;
var y;
var r;
//conforming a (which controls the size of the bifoliate) to mouseX
var a = constrain(mouseX - 200, -100, 100);
//opaque purple
fill(200, 162, 230, 100);
noStroke();
beginShape();
for (var i = 0; i < nPoints; i++) {
//remap i from 0 to 2PI to create theta
var t = map(i, 0, nPoints, 0, TWO_PI);
//bifoliate equation
r = ((8*cos(t) * (sin(t)**2))/(3 + cos(4*t))) * (a);
print("Value" + a);
x = r * cos(t);
y = r * sin(t);
vertex(x,y);
}
endShape(CLOSE);
}
//creating one bifoliate curve in y-direction
function drawmouseYbifoliateCurve() {
var x;
var y;
var r;
var a = constrain(mouseY-200, -120, 120);
fill(200, 162, 200, 100);
noStroke();
beginShape();
for (var i = 0; i < nPoints; i++) {
//remap i from 0 to 2PI to create theta
var t = map(i, 0, nPoints, 0, TWO_PI);
//bifoliate equation
r = ((8*cos(t) * (sin(t)**2))/(3 + cos(4*t))) * (a);
//print("Value" + a);
//change from polar to x and y
x = r * cos(t);
y = r * sin(t);
vertex(x,y);
}
endShape(CLOSE);
}
//creating 4 Curves (Outer/Inner Petals)
function draw4BifoliateCurve() {
push();
//2 Petals (Top and Bottom)
rotate(PI/5);
drawmouseYbifoliateCurve();
rotate(PI)
drawmouseYbifoliateCurve();
pop();
//2 Petals (Left and Right)
drawBifoliateCurve();
push();
rotate(PI);
drawBifoliateCurve();
pop();
}
//draws rose curve
function drawRoseCurve() {
var x;
var y;
var r;
var a = 1500;
//mouse Y controls how many lines
var n = constrain(mouseY/20, 0, 400/20);
stroke(255, 255, 255, 150);
strokeWeight(0.5);
noFill();
beginShape();
for (var i = 0; i < nPoints; i++) {
//remap i from 0 to 2PI to create theta
var t = map(i, 0, nPoints, 0, TWO_PI);
//rose equation
r = a*sin(n*t);
//change from polar to x and y
x = r * cos(t);
y = r * sin(t);
vertex(x,y);
}
endShape();
}