]> git.r.bdr.sh - rbdr/heart/blob - js/lib/heart_renderer.js
Add basic animator project
[rbdr/heart] / js / lib / heart_renderer.js
1 'use strict';
2
3 ((window) => {
4
5 const kColorIteratorLimit = 256;
6 const kRedSpeed = 0.1;
7 const kGreenSpeed = 0.2;
8 const kBlueSpeed = 0.15;
9
10 /**
11 * Renders a Heart, has its own canvas, which will be placed in the element
12 * set by calling #render.
13 *
14 * @class HeartRenderer
15 * @param {object} config configuration, extends any member of the renderer
16 */
17 const HeartRenderer = class HeartRenderer {
18
19 constructor(config) {
20
21 /**
22 * The instance of the heart renderer being used
23 *
24 * @memberof HeartRenderer
25 * @instance
26 * @name canvas
27 * @type HTMLCanvasElement
28 * @default A brand new full width and height canvas
29 */
30 this.canvas = window.document.createElement('canvas');
31 this.canvas.style.height = '100%';
32 this.canvas.style.width = '100%';
33
34 /**
35 * The maximum fps that will be used
36 *
37 * @memberof HeartRenderer
38 * @instance
39 * @name fps
40 * @type Number
41 * @default 60
42 */
43 this.fps = 60;
44
45 this._animating = false; // The status of the animation.
46 this._previousFrameTime = Date.now(); // The timestamp of the last frame for fps control
47 this._currentColor = { // The current color that will be painted
48 red: 100,
49 blue: 0,
50 green: 50
51 };
52
53 Object.assign(this, config);
54 }
55
56 /**
57 * Attaches the canvas to an HTML element
58 *
59 * @memberof HeartRenderer
60 * @function render
61 * @instance
62 * @param {HTMLElement} element the element where we will attach our canvas
63 */
64 render(element) {
65
66 element.appendChild(this.canvas);
67 }
68
69 /**
70 * Gets the context from the current canvas and starts the animation process
71 *
72 * @memberof HeartRenderer
73 * @function activate
74 * @instance
75 */
76 activate() {
77
78 const context = this.canvas.getContext('2d');
79 this._startAnimating(context);
80 }
81
82 /**
83 * Stops the animation process
84 *
85 * @memberof HeartRenderer
86 * @function deactivate
87 * @instance
88 */
89 deactivate() {
90
91 this._stopAnimating();
92 }
93
94 // Starts the animation loop
95 _startAnimating(context) {
96
97 this._frameDuration = 1000 / this.fps;
98 this._animating = true;
99
100 this._animate(context);
101 }
102
103 // Stops the animation on the next frame.
104 _stopAnimating() {
105
106 this._animating = false;
107 }
108
109 // Runs the animation step controlling the FPS
110 _animate(context) {
111
112 if (!this._animating) {
113 return;
114 }
115
116 window.requestAnimationFrame(this._animate.bind(this, context));
117
118 const currentFrameTime = Date.now();
119 const delta = currentFrameTime - this._previousFrameTime;
120
121 if (delta > this._frameDuration) {
122 this._previousFrameTime = Date.now();
123 this._animateStep(context, delta);
124 }
125 }
126
127 // The actual animation processing function.
128 _animateStep(context, delta) {
129
130 this._currentColor.red = Math.round(this._currentColor.red + delta * kRedSpeed) % kColorIteratorLimit;
131 this._currentColor.green = Math.round(this._currentColor.green + delta * kGreenSpeed) % kColorIteratorLimit;
132 this._currentColor.blue = Math.round(this._currentColor.blue + delta * kBlueSpeed) % kColorIteratorLimit;
133
134 context.fillStyle = `rgb(${this._currentColor.red}, ${this._currentColor.green}, ${this._currentColor.blue})`;
135 context.fillRect(0, 0, this.canvas.scrollWidth, this.canvas.scrollHeight);
136 }
137 };
138
139
140 window.HeartRenderer = HeartRenderer;
141 })(window);