1     // target frames per second
2     const FPS = 30;
3 const SECONDSBETWEENFRAMES = 1 / FPS;
4 const HALFIMAGEDIMENSION = 75;
5 const HALFCANVASWIDTH = 300;
6 const HALFCANVASHEIGHT = 200;
7 var image = new Image();
8 image.src = "jsplatformer2-smiley.jpg";
9 var canvas = null;
10 var context2D = null;
11 var currentFunction = null;
12 var currentTime = 0;
13 var sineWave = 0;
14 15 window.onload = init;
16 17 function init()
18 {
19 canvas = document.getElementById('canvas');
20 context2D = canvas.getContext('2d');
21 setInterval(draw, SECONDSBETWEENFRAMES * 1000);
22 currentFunction = scale;
23 }
24 25 function draw()
26 {
27 currentTime += SECONDSBETWEENFRAMES;
28 sineWave = (Math.sin(currentTime) + 1) / 2;
29 30 context2D.clearRect(0, 0, canvas.width, canvas.height);
31 32 context2D.save();
33 34 context2D.translate(HALFCANVASWIDTH - HALFIMAGEDIMENSION, HALFCANVASHEIGHT - HALFIMAGEDIMENSION);
35 36 currentFunction();
37 38 context2D.drawImage(image, 0, 0);
39 40 context2D.restore();
41 }
42 43 function alpha()
44 {
45 context2D.globalAlpha = sineWave;
46 }
47 48 function shear()
49 {
50 context2D.transform(1, 0, (sineWave - 0.5), 1, 0, 0);
51 }
52 53 function scale()
54 {
55 context2D.translate(HALFIMAGEDIMENSION * (1 - sineWave), HALFIMAGEDIMENSION * (1 - sineWave));
56 context2D.scale(sineWave, sineWave);
57 }
58 59 function rotate()
60 {
61 context2D.translate(HALFIMAGEDIMENSION, HALFIMAGEDIMENSION);
62 context2D.rotate(sineWave * Math.PI * 2);
63 context2D.translate(-HALFIMAGEDIMENSION, -HALFIMAGEDIMENSION);
64 }