### Creating 2-D Animations on Canvas - Cayley's Sextic

Cayley's Sextic is coming out as a breathtakingly-beautiful figure on HTML5 Canvas, if you use the right combination of colours - and of course, a bit of imagination.

- Cartesian Equation
- - 4(
*x*^{2}+*y*^{2}-*ax*)^{3}= 27*a*^{2}(*x*^{2}+*y*^{2})^{2} - Polar Equation
- - r = 4a cos
^{3}(θ/3)

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 Spiral of Cayley's Sextic

A beautiful animation based on Cayley's Sextic:

The Code for the animation is as follows:

<script>

{

var canvas = document.getElementById('Canvas_One');

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;

var r = 250 * Math.pow(Math.cos(i / 3), 3);

if (t > 5) { t = 0; }

//var r=Math.pow(10000*Math.cos(2*i),0.5);

var x = 200 + r * Math.sin(i); var y = 110 + r * Math.cos(i);

//context.font="40px Georgia";

//context.textAlign='center';

//context.fillText('.',x,y);

//context.fillStyle='purple';

context.beginPath();

context.moveTo(200, 110);

context.lineTo(x, y);

context.lineCap = 'round';

context.strokeStyle = 'rgba(0,0,255,0.6)';

context.stroke();

context.beginPath();

context.moveTo(200, 110);

context.arc(x, y, 10, 0, 2 * Math.PI);

context.fillStyle = col[t];

context.fill();

if (i > 9.4) { j = -0.1; context.clearRect(0, 0, 400, 400); }

if (i < -0.1) { j = 0.1; context.clearRect(0, 0, 400, 400); }

}

window.setInterval('timing()', 300);

</script>

All Canvas Animations