I chose the bicorn curve, which looks somewhat like an upside down smiley face, which is why I reversed it. I made the mouseX control the width, and the mouseY control the depth of the curve as well as the size of the dots drawing it.
x =
y =
var points = 50;
function setup() {
createCanvas(600, 600);
frameRate(25);
fill("#B1EEE8");//teal
noStroke();
}
function draw() {
background(250);
push();
translate(width/2, 0);
drawBicorn();
pop();
}
function drawBicorn(){
//http://mathworld.wolfram.com/Bicorn.html
var g = map(mouseX, 0, width, 0, width/2);
var y;
var a = map(sq(mouseY), 0, height, 0, 1);
beginShape();
for (var i = 0; i < points; i++) {
var t = map(i, 0, points, 0, radians(360))
x = g * sin(t);
y = (a * cos(t) * cos(t) * (2 + cos(t))) / (3 + sin(t) * sin(t));
// vertex(x,y);
ellipse(x, y, map(mouseY, 0, height, 1, 10), map(mouseY, 0, height, 1, 10));
}
endShape(CLOSE);
}