Creating 2-D Animations on Canvas - lotus

This is an impressive animation of a lotus power.

A beautiful animation based on lotus flower:

The parametric equations for the shape take the following form:

  • x(t) = (a + b) cost − c cos((a/b + t)t)
  • y(t) = (a + b)sin t − c sin((a/b + 1)t)
Finding a good book to master HTML5 can be very challenging: there are so many around - most with eye-catching titles and very complex substance.
Therefore, Vivax Solutions strongly recommends Core HTML5 Canvas for those who really want to delve into HTML5.
Please click the image to access Amazon:

The Digitized Lotus

 

 

The Code for the animation is as follows:

<script>
var canvas = document.getElementById('Canvas_One');
var context = canvas.getContext('2d');
var i, j = 0.01, t = 0;
var col = new Array('green', 'blue', 'red', 'cyan', 'magenta', 'yellow', 'white');
function timing() {
context.clearRect(0, 0, 400, 400);
for (i = 0; i < 2 * Math.PI; i = i + 0.01) { var x = 200 + (100 * Math.cos(3 * i) + 50 * Math.cos((70) * i / 5));
var y = 200 + (100 * Math.sin(3 * i) + 50 * Math.sin((70) * i / 5));
t = t + 1;
if (t > 6) { t = 0; }
context.beginPath();
context.moveTo(200, 200);
context.arc(x, y, 2, 0, 2 * Math.PI);
context.fillStyle = col[t];
context.fill();
}
}
window.setInterval('timing()', 10);
</script>

 

 

 

 

 

 

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