Add mouse following

diff --git a/js/app.js b/js/app.js
index 12065b2c704e38320730442fee0d41a611237eb8..63990dc1bbca0e80e7cabea851b2f39b35503a34 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -15,6 +15,8 @@
     heartRenderer.activate();
 
     window.addEventListener('resize', heartRenderer.resize.bind(heartRenderer));
+    window.addEventListener('blur', heartRenderer.stopFollowingMouse.bind(heartRenderer));
+    window.addEventListener('focus', heartRenderer.startFollowingMouse.bind(heartRenderer));
 
     /**
      * Exported global object. This will contain the instance of the heart

diff --git a/js/lib/heart_renderer.js b/js/lib/heart_renderer.js
index fd4adf6452e511e7090b1b0e7519dd467ef6829b..78ca182e96f4a38c061685ea66c255a488dc154c 100644 (file)
--- a/js/lib/heart_renderer.js
+++ b/js/lib/heart_renderer.js
@@ -51,6 +51,8 @@
        */
       this.heartSize = 50;
 
+      this._following = null; // The status of mouse follow.
+      this._center = null;
       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
@@ -59,6 +61,8 @@
         green: 50
       };
 
+      this.startFollowingMouse();
+
       Object.assign(this, config);
     }
 
@@ -82,7 +86,6 @@
      * @memberof HeartRenderer
      * @function render
      * @instance
-     * @param {HTMLElement} element the element where we will attach our canvas
      */
     resize() {
 
@@ -92,6 +95,39 @@
       }
     }
 
+    /**
+     * Follows the mouse
+     *
+     * @memberof HeartRenderer
+     * @function startFollowingMouse
+     * @instance
+     */
+    startFollowingMouse() {
+
+      if (!this._following) {
+        console.log('Start Following Mouse');
+        this._following = this._setCenterFromMouse.bind(this);
+        this.canvas.addEventListener('mousemove', this._following);
+      }
+    }
+
+    /**
+     * Stop following the mouse
+     *
+     * @memberof HeartRenderer
+     * @function stopFollowingMouse
+     * @instance
+     */
+    stopFollowingMouse() {
+
+      if (this._following) {
+        console.log('Stop Following Mouse');
+        this.canvas.removeEventListener('mouseover', this._following);
+        this._following = null;
+        this._center = null;
+      }
+    }
+
     /**
      * Gets the context from the current canvas and starts the animation process
      *
@@ -175,8 +211,8 @@
 
       const heartSize = Math.round(referenceDimension * this.heartSize * .01);
       const radius = heartSize / 2;
-      const canvasCenterX = Math.round(canvasWidth / 2);
-      const canvasCenterY = Math.round(canvasHeight / 2);
+      let canvasCenterX = this._center ? this._center.x : Math.round(canvasWidth / 2);
+      let canvasCenterY = this._center ? this._center.y : Math.round(canvasHeight / 2);
       const centerX = -radius;
       const centerY = -radius;
 
@@ -203,6 +239,16 @@
 
       context.setTransform(1, 0, 0, 1, 0, 0);
     }
+
+    // Sets the center from mouse
+    _setCenterFromMouse (event) {
+      this._center = this._center || {};
+
+      console.log('tracking');
+
+      this._center.x = event.offsetX;
+      this._center.y = event.offsetY;
+    }
   };