Draw the basic heart

diff --git a/js/app.js b/js/app.js
index 25d581d8268fe02446f52cc28d9fda453231c7b5..12065b2c704e38320730442fee0d41a611237eb8 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -14,6 +14,8 @@
     heartRenderer.render(mainElement);
     heartRenderer.activate();
 
+    window.addEventListener('resize', heartRenderer.resize.bind(heartRenderer));
+
     /**
      * Exported global object. This will contain the instance of the heart
      * renderer being used. It is set up on load.

diff --git a/js/lib/heart_renderer.js b/js/lib/heart_renderer.js
index f6ece8630d57386ca19c165cdd67fe481d16c2ba..fd4adf6452e511e7090b1b0e7519dd467ef6829b 100644 (file)
--- a/js/lib/heart_renderer.js
+++ b/js/lib/heart_renderer.js
@@ -25,11 +25,9 @@
        * @instance
        * @name canvas
        * @type HTMLCanvasElement
-       * @default A brand new full width and height canvas
+       * @default A brand new canvas
        */
       this.canvas = window.document.createElement('canvas');
-      this.canvas.style.height = '100%';
-      this.canvas.style.width = '100%';
 
       /**
        * The maximum fps that will be used
@@ -42,6 +40,17 @@
        */
       this.fps = 60;
 
+      /**
+       * The size of the heart as a percentage of the canvas smallest dimension
+       *
+       * @memberof HeartRenderer
+       * @instance
+       * @name heartSize
+       * @type Number
+       * @default 50
+       */
+      this.heartSize = 50;
+
       this._animating = false; // The status of the animation.
       this._previousFrameTime = Date.now(); // The timestamp of the last frame for fps control
       this._currentColor = { // The current color that will be painted
@@ -64,6 +73,23 @@
     render(element) {
 
       element.appendChild(this.canvas);
+      this.resize();
+    }
+
+    /**
+     * Resizes the canvas
+     *
+     * @memberof HeartRenderer
+     * @function render
+     * @instance
+     * @param {HTMLElement} element the element where we will attach our canvas
+     */
+    resize() {
+
+      if (this.canvas.parentElement) {
+        this.canvas.width = this.canvas.parentElement.offsetWidth;
+        this.canvas.height = this.canvas.parentElement.offsetHeight;
+      }
     }
 
     /**
@@ -127,12 +153,55 @@
     // The actual animation processing function.
     _animateStep(context, delta) {
 
+      this._updateColor(delta);
+      this._drawHeart(context, delta);
+    }
+
+    // Updates the current color
+    _updateColor(delta) {
+
       this._currentColor.red = Math.round(this._currentColor.red + delta * kRedSpeed) % kColorIteratorLimit;
       this._currentColor.green = Math.round(this._currentColor.green + delta * kGreenSpeed) % kColorIteratorLimit;
       this._currentColor.blue = Math.round(this._currentColor.blue + delta * kBlueSpeed) % kColorIteratorLimit;
+    }
+
+    // Draws a heart
+    _drawHeart(context, delta) {
+
+      const canvasHeight = this.canvas.height;
+      const canvasWidth = this.canvas.width;
 
+      const referenceDimension = canvasWidth < canvasHeight ? canvasWidth : canvasHeight;
+
+      const heartSize = Math.round(referenceDimension * this.heartSize * .01);
+      const radius = heartSize / 2;
+      const canvasCenterX = Math.round(canvasWidth / 2);
+      const canvasCenterY = Math.round(canvasHeight / 2);
+      const centerX = -radius;
+      const centerY = -radius;
+
+
+      // translate and rotate, adjusting for weight of the heart.
+      context.translate(canvasCenterX, canvasCenterY + radius / 4);
+      context.rotate(-45 * Math.PI / 180);
+
+      // Fill the ventricles of the heart
       context.fillStyle = `rgb(${this._currentColor.red}, ${this._currentColor.green}, ${this._currentColor.blue})`;
-      context.fillRect(0, 0, this.canvas.scrollWidth, this.canvas.scrollHeight);
+      context.fillRect(centerX, centerY, heartSize, heartSize);
+
+      // Left atrium
+      context.beginPath();
+      context.arc(centerX + radius, centerY, radius, 0, 2 * Math.PI, false);
+      context.fill();
+      context.closePath();
+
+      // Right atrium
+      context.beginPath();
+      context.arc(centerX + heartSize, centerY + radius, radius, 0, 2 * Math.PI, false);
+      context.fill();
+      context.closePath();
+
+      context.setTransform(1, 0, 0, 1, 0, 0);
     }
   };