diff options
| author | Ben Beltran <ben@nsovocal.com> | 2017-02-16 01:22:26 -0600 |
|---|---|---|
| committer | Ben Beltran <ben@nsovocal.com> | 2017-02-16 01:22:26 -0600 |
| commit | d0f30873ebe2907b241a936a3e70487dedaf0701 (patch) | |
| tree | 4b16a66e8f4b0a566f125d91b18c1dfaf560aafd | |
| parent | a1c6d8138d774cf9b9e6eee7950e2e4ae18376aa (diff) | |
| parent | 552e55c2518dba35f072ce7896e884df033f4dbd (diff) | |
Merge branch 'release/1.0.1'
| -rw-r--r-- | CHANGELOG.md | 8 | ||||
| -rw-r--r-- | js/app.js | 2 | ||||
| -rw-r--r-- | js/lib/heart_renderer.js | 52 | ||||
| -rw-r--r-- | package.json | 2 |
4 files changed, 59 insertions, 5 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 26b9888..4098b59 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/). +## [1.0.1] - 2017-02-16 +### Added +- Add mouse following +- Fix README links + ## 1.0.0 - 2016-11-10 ### Added - Basic configuration for jsdoc @@ -13,4 +18,5 @@ and this project adheres to [Semantic Versioning](http://semver.org/). - This changelog - Heart Renderer -[Unreleased]: https://github.com/olivierlacan/keep-a-changelog/compare/master...develop +[Unreleased]: https://github.com/rbdr/heart/compare/master...develop +[1.0.1]: https://github.com/rbdr/heart/compare/1.0.0...1.0.1 @@ -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() { @@ -93,6 +96,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 * * @memberof HeartRenderer @@ -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; + } }; diff --git a/package.json b/package.json index 36e8f3d..7197e41 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "heart", - "version": "1.0.0", + "version": "1.0.1", "description": "The heart", "main": "index.js", "scripts": { |