Tips and Tricks - HTML5 Animation with JavaScript - page 453

Create waves
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
//assign value to x, y or other property of object
value = center + Math.sin(angle) * range;
angle += speed;
}());
Create circles
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
//assign position to x, y of object, use as drawing coordinates
xposition = centerX + Math.cos(angle) * radius;
yposition = centerY + Math.sin(angle) * radius;
angle += speed;
}());
Create ovals
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
//assign position to x, y of object, use as drawing coordinates
xposition = centerX + Math.cos(angle) * radiusX;
yposition = centerY + Math.sin(angle) * radiusY;
angle += speed;
}());
Get the distance between two points
//points are x1, y1 and x2, y2
//can be object positions, mouse coordinates, etc.
dx = x2 - x1;
dy = y2 - y1;
dist = Math.sqrt(dx * dx + dy * dy);
Chapter 4
Convert hex to decimal
console.log(hexValue);
Convert decimal to hex
console.log(decimalValue.toString(16));