X-Git-Url: https://git.r.bdr.sh/rbdr/heart/blobdiff_plain/f895bdac3edf5d607331628798fd6d1b6d8d6f0e..43764349c0c78925e5d83ab5dad2d0e51a152d60:/js/lib/heart_renderer.js

diff --git a/js/lib/heart_renderer.js b/js/lib/heart_renderer.js
index fd4adf6..19ff137 100644
--- a/js/lib/heart_renderer.js
+++ b/js/lib/heart_renderer.js
@@ -3,9 +3,6 @@
 ((window) => {
 
   const kColorIteratorLimit = 256;
-  const kRedSpeed = 0.1;
-  const kGreenSpeed = 0.2;
-  const kBlueSpeed = 0.15;
 
   /**
    * Renders a Heart, has its own canvas, which will be placed in the element
@@ -47,17 +44,65 @@
        * @instance
        * @name heartSize
        * @type Number
-       * @default 50
+       * @default 40
        */
-      this.heartSize = 50;
+      this.heartSize = 40;
 
+      /**
+       * The max size of the heart as a percentage of the canvas smallest dimension
+       *
+       * @memberof HeartRenderer
+       * @instance
+       * @name maxHeartSize
+       * @type Number
+       * @default 75
+       */
+      this.maxHeartSize = 75;
+
+      /**
+       * The min size of the heart as a percentage of the canvas smallest dimension
+       *
+       * @memberof HeartRenderer
+       * @instance
+       * @name minHeartSize
+       * @type Number
+       * @default 10
+       */
+      this.minHeartSize = 10;
+
+      this._ticking = false; // Lock for wheel event.
+      this._resizeMagnitude = 0.1; // Multiplies the wheel delta to resize the heart
+      this._resizeSpeed = 1; // How many percent points per frame we'll resize to match target
+      this._trackingSpeed = 10; // How many pixels per frame will we move to match target
+      this._following = null; // The status of mouse follow.
+      this._center = null; // The actual center
+      this._targetHeartSize = this.heartSize;
+      this._
+      this._targetCenter = {
+        x: 0,
+        y: 0
+      }; // the target coordinates
       this._animating = false; // The status of the animation.
       this._previousFrameTime = Date.now(); // The timestamp of the last frame for fps control
+      this._cursorTimeout = 500; // Timeout to hide the cursor in milliseconds
       this._currentColor = { // The current color that will be painted
         red: 100,
         blue: 0,
         green: 50
       };
+      this._colorSpeed = {
+        red: 0.1,
+        blue: 0.2,
+        green: 0.15
+      };
+      this._colorDirection = {
+        red: 1,
+        blue: 1,
+        green: 1
+      };
+
+      this._detectWheel();
+      this.startFollowingMouse();
 
       Object.assign(this, config);
     }
@@ -73,6 +118,11 @@
     render(element) {
 
       element.appendChild(this.canvas);
+
+      this._targetCenter = {
+        x: Math.round(this.canvas.width / 2),
+        y: Math.round(this.canvas.height / 2)
+      }; // the target coordinates
       this.resize();
     }
 
@@ -82,7 +132,6 @@
      * @memberof HeartRenderer
      * @function render
      * @instance
-     * @param {HTMLElement} element the element where we will attach our canvas
      */
     resize() {
 
@@ -92,6 +141,40 @@
       }
     }
 
+    /**
+     * Follows the mouse
+     *
+     * @memberof HeartRenderer
+     * @function startFollowingMouse
+     * @instance
+     */
+    startFollowingMouse() {
+
+      if (!this._following) {
+        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) {
+        this.canvas.removeEventListener('mouseover', this._following);
+        this._following = null;
+        this._targetCenter = {
+          x: Math.round(this.canvas.width / 2),
+          y: Math.round(this.canvas.height / 2)
+        }; // the target coordinates
+      }
+    }
+
     /**
      * Gets the context from the current canvas and starts the animation process
      *
@@ -160,9 +243,31 @@
     // 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;
+      const red = this._updateColorComponent('red', delta);
+      const green = this._updateColorComponent('green', delta);
+      const blue = this._updateColorComponent('blue', delta);
+
+      console.log(red, green, blue);
+
+      this._currentColor.red = red;
+      this._currentColor.green = green;
+      this._currentColor.blue = blue;
+    }
+
+    // Updates a single color component.
+    _updateColorComponent(component, delta) {
+      let color = Math.round(this._currentColor[component] + (delta * this._colorSpeed[component] * this._colorDirection[component]));
+      if (color >= kColorIteratorLimit) {
+        this._colorDirection[component] = -1;
+        color = kColorIteratorLimit;
+      }
+
+      if (color <= 0) {
+        this._colorDirection[component] = 1;
+        color = 0;
+      }
+
+      return color;
     }
 
     // Draws a heart
@@ -173,10 +278,27 @@
 
       const referenceDimension = canvasWidth < canvasHeight ? canvasWidth : canvasHeight;
 
+      this.heartSize += Math.sign(this._targetHeartSize - this.heartSize) * this._resizeSpeed;
+
       const heartSize = Math.round(referenceDimension * this.heartSize * .01);
       const radius = heartSize / 2;
-      const canvasCenterX = Math.round(canvasWidth / 2);
-      const canvasCenterY = Math.round(canvasHeight / 2);
+
+      if (!this._center) {
+        this._center = {};
+        this._center.x = Math.round(canvasWidth / 2);
+        this._center.y = Math.round(canvasHeight / 2);
+      }
+
+      const deltaY = this._targetCenter.y - this._center.y;
+      const deltaX = this._targetCenter.x - this._center.x;
+      const angle = Math.atan2(deltaY, deltaX);
+
+      // Move towards the target
+      this._center.x += Math.cos(angle) * this._trackingSpeed;
+      this._center.y += Math.sin(angle) * this._trackingSpeed;
+
+      const canvasCenterX = this._center.x;
+      const canvasCenterY = this._center.y;
       const centerX = -radius;
       const centerY = -radius;
 
@@ -203,6 +325,57 @@
 
       context.setTransform(1, 0, 0, 1, 0, 0);
     }
+
+    // Sets the center from mouse
+    _setCenterFromMouse(event) {
+
+      this._showCursor();
+      this._targetCenter.x = event.offsetX;
+      this._targetCenter.y = event.offsetY;
+      setTimeout(this._hideCursor.bind(this), this._cursorTimeout);
+    }
+
+    // Binds the wheel event to resize the heart
+    _detectWheel() {
+
+      this.canvas.addEventListener('wheel', this._onWheel.bind(this));
+    }
+
+    // Handle the mouse wheel movement
+    _onWheel(event) {
+
+      if (!this._ticking) {
+        this._ticking = true;
+        window.requestAnimationFrame(this._resizeHeartFromDelta.bind(this, event.deltaY));
+      }
+    }
+
+    // Use delta to resize the heart
+    _resizeHeartFromDelta(delta) {
+
+      let heartSize = this.heartSize + (this._resizeMagnitude * delta);
+
+      if (heartSize > this.maxHeartSize) {
+        heartSize = this.maxHeartSize;
+      }
+
+      if (heartSize < this.minHeartSize) {
+        heartSize = this.minHeartSize;
+      }
+
+      this._targetHeartSize = heartSize;
+      this._ticking = false;
+    }
+
+    // Apply a class to show the cursor.
+    _showCursor() {
+      this.canvas.classList.add('mouse-moving');
+    }
+
+    // Remove class to hide the cursor.
+    _hideCursor() {
+      this.canvas.classList.remove('mouse-moving');
+    }
   };