### 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)

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>

All Canvas Animations