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    }