From: Ben Beltran Date: Thu, 16 Feb 2017 07:18:48 +0000 (-0600) Subject: Add mouse following X-Git-Url: https://git.r.bdr.sh/rbdr/heart/commitdiff_plain/eb188a5eb4368c9857c7e376bf3d23175a06f8d8?ds=sidebyside;hp=765a8ac8bcf2e024c69921305554ce815203f4b1 Add mouse following --- diff --git a/js/app.js b/js/app.js index 12065b2..63990dc 100644 --- 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 fd4adf6..78ca182 100644 --- 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; + } };