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 }