var d=Math.sin,e=Math.cos,f=80,g=40,h=g,j=0,k=j,l=0,m,n,o=0;c.width=680;c.height=510;a.fillRect(0,0,680,510);a.fillStyle="#999";a.font="13px sans-serif";a.fillText("Click for a different kind of love",251,14);a.fillStyle="#000";c.onmousemove=function(p){h=38+4*(p.clientX/680);k=-80+160*(p.clientY/510)};c.onclick=function(){f=160*Math.random()};setInterval(function(){l=0;m=n=void 0;g+=0.02*(h-g);j+=0.04*(k-j);o=(g-40)*j;a.globalAlpha=0.2;a.globalCompositeOperation="source-over";a.fillRect(0,19,680,510);a.globalAlpha=0.5;a.globalCompositeOperation="lighter";a.beginPath();for(i=0;1200>i;i++)l+=0.1,x=340+10*16*Math.pow(d(l),3),y=235+10*-(13*e(l)-5*e(2*l)-2*e(3*l)-e(4*l)),x+=j*e((f-g)/g*l),y-=j*d((f-g)/g*l),a.moveTo(m,n),a.lineTo(x,y),m=x,n=y;a.strokeStyle="hsl("+o+",60%,50%)";a.stroke();a.closePath()},16);
var sin = Math.sin;
var cos = Math.cos;
var w = 680; // Width
var h = 510; // Height
var cw = w * 0.5; // Center width
var ch = h * 0.5; // Center height
var hs = 10; // Heart size
var or = 80; // Outer radius, determines offset to roll inner circle around
var ir = 40; // Inner radius of circle rolled around heart shape
var irt = ir; // Inner radius target, to interpolate/morph between shapes
var d = 0; // Distance of point from center of inner radius
var dt = d; // Distance target, to interpolate/morph between shapes
var t = 0; // Theta
var px, py; // Previous x & y coordinates of last drawing position
var hue = 0;
function lerp(p, a, b) {
return a + (b - a) * p;
}
function onMove(event) {
// Calculate new radius and distance values on mouse location
irt = lerp(event.clientX / w, 38, 42);
dt = lerp(event.clientY / h, -80, 80);
}
function onClick(event) {
// Random outer circle radius changes the 'frequency' of the lines
or = Math.random() * 160;
}
function draw() {
t = 0;
px = py = undefined;
// Interpolate towards target values slowly
ir += (irt - ir) * 0.02;
d += (dt - d) * 0.04;
hue = (ir - 40) * d;
// Clear canvas with a translucent colour to create 'blur'
a.globalAlpha = 0.2;
a.globalCompositeOperation = "source-over";
a.fillRect(0, 19, w, h);
// Set composite so colours add together when overlayed
a.globalAlpha = 0.5;
a.globalCompositeOperation = "lighter";
a.beginPath();
for (i = 0; i < 1200; i++) {
t += 0.1;
// Calculate point along heart shape
x = cw + hs * (16 * (Math.pow(sin(t), 3)));
y = (ch - 20) + hs * -(13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t));
// Calculate point on a circle rolled around the heart shape
x += d * cos(((or - ir) / ir) * t);
y -= d * sin(((or - ir) / ir) * t);
a.moveTo(px, py);
a.lineTo(x, y);
px = x;
py = y;
}
a.strokeStyle = "hsl("+hue+",60%,50%)";
a.stroke();
a.closePath();
}
c.width = w;
c.height = h;
// Text at the top of the canvas
a.fillRect(0, 0, w, h);
a.fillStyle = "#999";
a.font = "13px sans-serif";
a.fillText("Click for a different kind of love", cw - 89, 14);
a.fillStyle = "#000";
c.onmousemove = onMove;
c.onclick = onClick;
// Start the render loop (approx 60fps)
setInterval(draw, 16);
