Animated Heart with Polar Equations

This tutorial shows you how to produce a beautiful animation of a hear using polar equations.

 

 

 

The Code for the above animation is as follows:

<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var i = 0; j = 0.1, t = 0;
var col = new Array('green', 'blue', 'red', 'cyan', 'magenta', 'yellow
function timing() {
t = t + 1;
i = i + j;
if (t > 5) { t = 0; }
//var r=Math.pow(10000*Math.cos(2*i),0.5);
var x = 250 + 160*Math.sin(i)*Math.sin(i)*Math.sin(i); var y = -(-170+ 10*(13*Math.cos(i)- 5*Math.cos(2*i) - 2*Math.cos(3*i) - Math.cos(4*i)));
//context.font="40px Georgia";
//context.textAlign='center';
//context.fillText('.',x,y);
//context.fillStyle='purple';
context.beginPath();
context.moveTo(250, 200);
context.lineTo(x, y);
context.lineCap = 'round';
context.strokeStyle = 'rgba(0,0,255,0.6)';
context.stroke();
context.beginPath();
context.moveTo(250, 200
context.arc(x, y, 8, 0, 2 * Math.PI);
context.fillStyle = col[t];
context.fill();
if (i > 6.5) { j = -0.1; context.clearRect(0, 0, 500, 400); }
if (i < -0.1) { j = 0.1; context.clearRect(0, 0, 500, 400);
}
window.setInterval('timing()', 300

</script>

 

Of course, the code can be easily amended to control the animation: for instance, this animation runs for ever; with setTimeout() function, however, the number of times that the animation runs can be easily controlled.

 

 

 

 

 

Resources at Fingertips

There is a significant selection of tutorials here, covering ASP.Net, HTML5, CSS3 and JavaScript. They are categorized clearly for you to access them easily on any device - desktops/laptops, smartphones and laptops.
There are quite a few of them on HTML5 Canvas and CSS3. In addition, there are tutorials on JavaScript and ASP.Net too.

Email: 

Stand Out - from the crowd

students

"There's no such thing as a free lunch."

The best things in nature are free with no strings attached - fresh air, breathtakingly warm sunshine, scene of meadow on the horizon...

Vivax Solutions, while mimicking nature, offers a huge set of tutorials along with interactive tools for free.

Please use them and excel in the sphere of science education.

Everything is free; not even registration is required.

 

 

Recommended Reading

 

The best book to master HTML5 canvas animations. The author tells you how to manipulate the canvas element with JavaScript in a progressive way - starting from the easier to harder worked examples. It is ideal for anyone who wants to be a game developer in HTML5.

Advertisements

Advertisement