var nPoints=300;
function setup() {
createCanvas(480, 480);
}
function draw() {
background(255, 230, 238, mouseX);
var angle = mouseX/300;
//draws the curve
for(i=1; i<4; i++){
push();
translate(width/2,height/2);
rotate(angle*mouseY/100);
drawHeartCurve();
//http://mathworld.wolfram.com/HeartCurve.html
pop();
}
}
function drawHeartCurve(){
var x;
var y;
var a = constrain(mouseX/100,0,width);
fill(255, 230, 238);
stroke(255, 179, 204);
strokeWeight(2);
beginShape();
for(var i = 0; i<nPoints; i++){
var t= map(i,0,nPoints,0,TWO_PI);
x =a * (16 * sin(t)* sin(t)* sin(t));
y =a * ((13 * cos(t))-(6*cos(2*t))-(2*cos(3*t))-cos(4*t));
vertex(x,y);
vertex(x*i*a,y*i*a);
}
endShape(CLOSE);
}
I first spent a while trying to find curves that I was interested in. I thought about making a Quadrifolium but after looking around more, I found the Heart Curve. I tried fiddling around with it a little and then got the heart to show up. I then tried to add some other things to it which resulted in the lines next to the heart.