{"id":2437,"date":"2011-10-22T17:03:37","date_gmt":"2011-10-22T22:03:37","guid":{"rendered":"http:\/\/www.lonhosford.com\/lonblog\/?p=2437"},"modified":"2015-07-31T18:25:49","modified_gmt":"2015-07-31T23:25:49","slug":"html5-canvas-bobbing-circle-animation-demonstrating-sine-wave-movement","status":"publish","type":"post","link":"https:\/\/www.lonhosford.com\/lonblog\/2011\/10\/22\/html5-canvas-bobbing-circle-animation-demonstrating-sine-wave-movement\/","title":{"rendered":"HTML5 Canvas Bobbing Circle Animation Demonstrating Sine Wave Movement"},"content":{"rendered":"

This is an example of using the HTML5 canvas and using JavaScript Math.sin to produce a bobbing animation of a circle. \"\" <\/p>\n

Demo<\/a><\/strong><\/p>\n

Download Source<\/a><\/strong><\/p>\n

This example is in one HTML document that contains all the JavaScript.

<\/a>\"\"Foundation HTML5 Animation with JavaScript<\/a>\"\"
\n
Learn More<\/figcaption><\/figure><\/p>\n

JQuery is included only to detect when the document is ready and start the timer for the animation. The timer calls an update function which updates the data values for the items on the canvas. In this case it is just the animated object. The timer also calls the draw function that calls the animated object’s draw function. <\/p>\n

I am using the Google CDN for JQuery.<\/p>\n

This example adds the canvas node to the body dynamically in JavaScript and is just a technique. You could include the canvas tag statically.<\/p>\n

You can view the full html file at the end of the post. I will excerpt parts to explain what is going on inside the code.<\/p>\n

[ad name=”Google Adsense”]<\/p>\n

Once JQuery is ready the animation timer is started. The timer calls the update and draw methods. <\/p>\n

\r\n\t\/\/ JQuery ready\r\n\t$(function() \r\n\t{\r\n\t\t\/\/ Start here.\r\n\t\t\/\/ Timer for animation.\r\n\t\tsetInterval(function() \r\n\t\t{\r\n\t\t\tupdate();\r\n\t\t\tdraw();\r\n\t\t}, 1000\/FPS);\r\n\t});\r\n<\/pre>\n
This is the draw method. It simply clears the canvas, draws the canvas background and border, and then calls the draw method of the animation object called player. <\/p>\n
\r\n\t\/\/ Draw the views\r\n\tfunction draw() \r\n\t{\r\n\t\tcanvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);\r\n\t\tcanvas.strokeStyle = "red";\r\n\t\tcanvas.strokeRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);\r\n\t\tcanvas.fillStyle = "#ccc";\r\n\t\tcanvas.fillRect(.5, .5, CANVAS_WIDTH-1, CANVAS_HEIGHT-1);\r\n\t\tplayer.draw();\r\n\t}\r\n<\/pre>\n
The model animation data is maintained in the update function. There is the angle and the player x and y positions to update.<\/p>\n
The player x value is the horizontal center of the canvas. That does not change in this example.<\/p>\n
Line 57 computes the player y value. The values of 1 to -1 are computed from the angle using the Math.sin function. The angle variable increments infinitely. The Math.sin function uses the angle values as real possible angles in geometry you are accustomed to using.<\/p>\n
The yRange value of 200 multiplied by Math.sin(angle) results in values between -200 and 200. <\/p>\n
Adding the result to canvasCenterY, the vertical center of the canvas, creates the y value plus or minus the vertical center of the canvas.<\/p>\n
\r\n\t\/\/ Update the model data.\r\n\tfunction update() \r\n\t{\r\n\t\t\/\/ Coordinate for x is center canvas width.\r\n\t\tplayer.x = canvasCenterX;\r\n\t\t\/\/ Coordinate y is the sine of the angle \r\n\t\t\/\/ for a positive or negative percentage of the range \r\n\t\t\/\/ using the canvas vertical for the center of the range.\r\n\t\tplayer.y = canvasCenterY + Math.sin(angle) * yRange;\r\n\t\t\/\/ Angle changed by speed.\r\n\t\tangle += speed;\r\n\t}\r\n<\/pre>\n
[ad name=”Google Adsense”]
\nThis is the object that is being animated. It contains some basic properties for a circle and contains a method for drawing.<\/p>\n
\r\n\tvar player = {\r\n\t\tcolor: "#00A",\r\n\t\tx: 0,  \t\/\/ Starting x\r\n\t\ty: 0,\t\/\/ Starting y\r\n\t\twidth: 32,\r\n\t\theight: 32,\r\n\t\tradius: 20,\r\n\t\tdraw: function() \/\/ Draw the player.\r\n\t\t{\r\n\t\t\tcanvas.fillStyle = this.color;\t\t\r\n\t\t\tcanvas.beginPath();  \r\n\t\t\tcanvas.arc(this.x,this.y,this.radius,0,Math.PI*2,true); \r\n\t\t\tcanvas.fill();\r\n\t\t\tcanvas.lineWidth = 5;\r\n    \t\tcanvas.strokeStyle = "black";\r\n    \t\tcanvas.stroke();\r\n\t  \t}\r\n\t};\t\r\n<\/pre>\n
The entire HTML document for your convenience to view and copy.<\/p>\n
\r\n<!DOCTYPE HTML>\r\n<html>\r\n<head>\r\n<meta charset="UTF-8">\r\n<script language="javascript" src="https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.6.4\/jquery.min.js" type="text\/javascript"><\/script>\r\n<title>HTML5 Canvas Based Animation Sine Wave Movement Using Bobbing Circle<\/title>\r\n<\/head>\r\n<body>\r\n<script type='text\/javascript'>\r\n\tvar CANVAS_WIDTH = 480;\t\t\/\/ Canvas width\r\n\tvar CANVAS_HEIGHT = 480;\t\/\/ Canvas height\r\n\tvar FPS = 30;\t\t\t\t\/\/ Frames per second\r\n\t\/\/ Canvas center points adjusted for stroke.\r\n\tvar canvasCenterX = (CANVAS_WIDTH - 1) \/ 2;\r\n\tvar canvasCenterY = (CANVAS_HEIGHT - 1) \/ 2;\r\n\t\/\/ Speed of movement\r\n\tvar speed = .05;\r\n\t\/\/ Angle for computing cosine and sin.\r\n\tvar angle = 0;\r\n\t\/\/ Range of the vertical movement.\r\n\tvar yRange = 200;\r\n\t\/\/ Create a canvas element variable.\r\n\tvar canvasElement = $("<canvas width='" + CANVAS_WIDTH + \r\n\t  "' height='" + CANVAS_HEIGHT + "'><\/canvas");\r\n\t\/\/ Reference to the canvas 2d context.\r\n\tvar canvas = canvasElement.get(0).getContext("2d");\r\n\t\/\/ Dynamically append a canvas element to the body tag.\r\n\tcanvasElement.appendTo('body');\t\r\n\t\/\/ Object defining the player we are moving.\r\n\tvar player = {\r\n\t\tcolor: "#00A",\r\n\t\tx: 0,  \t\/\/ Starting x\r\n\t\ty: 0,\t\/\/ Starting y\r\n\t\twidth: 32,\r\n\t\theight: 32,\r\n\t\tradius: 20,\r\n\t\tdraw: function() \/\/ Draw the player.\r\n\t\t{\r\n\t\t\tcanvas.fillStyle = this.color;\t\t\r\n\t\t\tcanvas.beginPath();  \r\n\t\t\tcanvas.arc(this.x,this.y,this.radius,0,Math.PI*2,true); \r\n\t\t\tcanvas.fill();\r\n\t\t\tcanvas.lineWidth = 5;\r\n    \t\tcanvas.strokeStyle = "black";\r\n    \t\tcanvas.stroke();\r\n\t  \t},\r\n\t};\t\r\n\t\/\/ Update the model data.\r\n\tfunction update() \r\n\t{\r\n\t\t\/\/ Coordinate for x is center canvas width.\r\n\t\tplayer.x = canvasCenterX;\r\n\t\t\/\/ Coordinate y is the sine of the angle \r\n\t\t\/\/ for a positive or negative percentage of the range \r\n\t\t\/\/ using the canvas vertical for the center of the range.\r\n\t\tplayer.y = canvasCenterY + Math.sin(angle) * yRange;\r\n\t\t\/\/ Angle changed by speed.\r\n\t\tangle += speed;\r\n\t}\r\n\t\/\/ Draw the views\r\n\tfunction draw() \r\n\t{\r\n\t\tcanvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);\r\n\t\tcanvas.strokeStyle = "red";\r\n\t\tcanvas.strokeRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);\r\n\t\tcanvas.fillStyle = "#ccc";\r\n\t\tcanvas.fillRect(.5, .5, CANVAS_WIDTH-1, CANVAS_HEIGHT-1);\r\n\t\tplayer.draw();\r\n\t}\r\n\t\/\/ JQuery ready\r\n\t$(function() \r\n\t{\r\n\t\t\/\/ Start here.\r\n\t\t\/\/ Timer for animation.\r\n\t\tsetInterval(function() \r\n\t\t{\r\n\t\t\tupdate();\r\n\t\t\tdraw();\r\n\t\t}, 1000\/FPS);\r\n\t});\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/div>\n