HTML and CSS Reference
In-Depth Information
};
</script>
</body>
</html>
The principles are the same. You have a center point (which is 100% scale, in this case), a range, and a
speed. But don't stop there—you can apply sine waves to different kinds of properties to create interesting
visual effects.
Waves with two angles
Here's another idea to get you started: Rather than just a single angle, set up two angles, along with
separate centers and speeds for both. Apply one sine wave to one property and the other sine wave to
another property, such as position and scale.
Here's something to get you started. This example takes two angles, speeds, and centers, and applies one
of the angles to the ball's x position and the other angle to the y position. The result is something like a bug
flying around a room. Although it is mathematically predetermined, it looks pretty random. Here's the code
(document
06-random.html
):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Random</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script src="ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
ball = new Ball(),
angleX = 0,
angleY = 0,
range = 50,
centerX = canvas.width / 2,
centerY = canvas.height / 2,
xspeed = 0.07,
yspeed = 0.11;
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
ball.x = centerX + Math.sin(angleX) * range;
ball.y = centerY + Math.sin(angleY) * range;
angleX += xspeed;
angleY += yspeed;
