JavaScript Canvas - Animation
Written by Ian Elliot   
Monday, 03 May 2021
Article Index
JavaScript Canvas - Animation
Speed
Full Program

Listing - Ball 1

The complete program can also be found and tried on the I/O Press website: www.iopress.info.

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Graphics</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                initial-scale=1.0">
  </head>
  <body>   
    <input id="fps">
    <script>
      	function createCanvas(h, w) {
     		var c = document.createElement("canvas");
		c.width = w;
		c.height = h;
		return c;
	}
function Pos(x, y) {
	this.x = x;
	this.y = y;
}
function Vel(x, y) {
	this.x = x;
	this.y = y;
}
function Acc(x, y) {
	this.x = x;
 	this.y = y;
}
function Ball(pos, vel, acc, r) {
	this.pos = pos;
	this.vel = vel;
	this.acc = acc;
	this.update = function () {
		this.pos.x += this.vel.x;
		this.pos.y += this.vel.y;
		this.vel.x += this.acc.x;
		this.vel.y += this.acc.y;
		
		if (this.pos.x + r > ctx.canvas.width) {
	         this.pos.x = ctx.canvas.width - r;
	         this.vel.x = -this.vel.x;
		}
	    	if (this.pos.y + r > ctx.canvas.height) {
	 		this.pos.y = ctx.canvas.height - r;
			this.vel.y = -this.vel.y;
	   	}
	   	if (this.pos.x - r < 0) {
			this.pos.x = r;
			this.vel.x = -this.vel.x;
		}
		if (this.pos.y - r < 0) {
			this.pos.y = r;
			this.vel.y = -this.vel.y;
		}
	};
	this.render = function () {
	          var path = new Path2D();
                  path.arc(this.pos.x, 
this.pos.y, r, 0, 2 * Math.PI); ctx.fill(path); }; } Animation = {}; Animation.spriteList = []; Animation.clearCanvas = function () { ctx.clearRect(0, 0, ctx.canvas.width,
ctx.canvas.height); }; Animation.run = function (t) { Animation.frameRate(t); Animation.clearCanvas(t); for (var i = 0;i < Animation.spriteList.length;
i++) { Animation.spriteList[i].update(); Animation.spriteList[i].render(); } requestAnimationFrame(Animation.run); }; Animation.frameRate = function (t) { if (typeof t !== "undefined") { Animation.frameRate.temp =
0.8 * Animation.frameRate.temp + 0.2 * (t - Animation.frameRate.tp); Animation.frameRate.tp = t; } Animation.frameRate.count++; if (Animation.frameRate.count === 120) { fps.value = (1000 /
Animation.frameRate.temp).toFixed(2); Animation.frameRate.temp = 0; Animation.frameRate.count = 0; } }; Animation.frameRate.count = 0; Animation.frameRate.tp = 0; Animation.frameRate.temp = 0; var ctx = document.body.appendChild(
createCanvas(600, 600)).getContext("2d"); var noBalls = 3; var balls = []; for (i = 0; i < noBalls; i++) { balls[i] = new Ball( new Pos(Math.floor(Math.random() * 250), Math.floor(Math.random() * 250)), new Vel(Math.floor(Math.random() * 10) – 5, Math.floor(Math.random() * 10) - 5), new Acc(0, 0.1), 20); } Animation.spriteList = balls; Animation.run(); </script> </body> </html>

In book but not in this extract:

  • Using BitBlt
  • Raw Animation

Summary

  • The fundamental way of getting bitmaps into a web page is to use the <img> tag or the Image object.

  • Loading an image is always asynchronous. There is no way to pause and wait for an image to load, no matter how hard you try.

  • The only way to handle asynchronous image loading is to use the onload event handler.

  • A more modern approach is to wrap the event handler in a function that returns a Promise. The function can then be used with async/await to make the asynchronous operation look perfectly like a synchronous load.

  • Once you have an image loaded, you can use the drawImage method to draw the pixels to a canvas.

  • ImageBitmap is the new and faster way to source a bitmap for a canvas.

  • Animation can be achieved by repeated drawing of the animated object or by drawing a bitmap into a new location – BitBlt. In most cases blitting is faster.

  • You can arrange to take into account the time between frames to determine how far an object should have moved.

  • Animation is often best organized around the idea of a sprite, a shape with position, velocity and acceleration.

  • Sprites are perfect for implementation using object-oriented methods. Doing this loses about 1/3 of the speed you can achieve using a non-object-oriented, direct implementation.

Now available as a paperback or ebook from Amazon.

JavaScript Bitmap Graphics
With Canvas

largecover360

 

Contents

  1. JavaScript Graphics
  2. Getting Started With Canvas
  3. Drawing Paths
      Extract: Basic Paths 
      Extract: Bezier Curves 
  4. Stroke and Fill
      Extract: Stroke Properties 
      Extract: Fill and Holes 
  5. Transformations
      Extract: Transformations 
  6. Text
      Extract: Text, Typography & SVG 
      Extract: Unicode 
  7. Clipping, Compositing and Effects
      Extract: Clipping & Basic Compositing 
  8. Generating Bitmaps
      Extract:  Introduction To Bitmaps
      Extract :  Animation **NEW!
  9. WebWorkers & OffscreenCanvas
      Extract: OffscreenCanvas
  10. Bit Manipulation In JavaScript
  11. Typed Arrays
  12. Files, blobs, URLs & Fetch
      Extract: Blobs & Files
      Extract: Read/Writing Local Files 
  13. Image Processing
      Extract: ImageData
      Extract: The Filter API
  14. 3D WebGL
  15. 2D WebGL
    Extract: WebGL Convolutions 

<ASIN:1871962625>

<ASIN:1871962579>

<ASIN:1871962560>

<ASIN:1871962501>

<ASIN:1871962528>

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

square

 



 

Comments




or email your comment to: comments@i-programmer.info



Last Updated ( Monday, 03 May 2021 )