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(x2 + y2 - ax)3 = 27a2(x2 + y2)2
Polar Equation
- r = 4a cos3(θ/3)
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 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

 

 

 

Recommended Reading

Amazon Best Seller

 

Advertisements

Amazon Best Seller

Advertisement