From 816d4d7cac74d4e3153a72de8a3b941a757b2036 Mon Sep 17 00:00:00 2001 From: Cahil Foley Date: Sun, 9 Dec 2018 15:37:21 +0800 Subject: [PATCH] feat(snowflake): update speed interpolation smoothing --- lib/Snowfall.js | 4 ---- lib/Snowflake.d.ts | 4 +++- lib/Snowflake.js | 20 ++++++-------------- package-lock.json | 2 +- package.json | 2 +- src/Snowfall.tsx | 11 ++++------- src/Snowflake.ts | 19 ++++++------------- 7 files changed, 21 insertions(+), 41 deletions(-) diff --git a/lib/Snowfall.js b/lib/Snowfall.js index d7b5868..49cb1fe 100644 --- a/lib/Snowfall.js +++ b/lib/Snowfall.js @@ -66,10 +66,6 @@ function (_React$Component) { _this.setState({ height: document.body.clientHeight, width: document.body.clientWidth - }, function () { - return _this.snowflakes.forEach(function (snowflake) { - return snowflake.resized(); - }); }); }); diff --git a/lib/Snowflake.d.ts b/lib/Snowflake.d.ts index c6c520b..1c296b9 100644 --- a/lib/Snowflake.d.ts +++ b/lib/Snowflake.d.ts @@ -23,12 +23,14 @@ interface SnowflakeParams { nextSpeed: number; nextWind: number; } +/** + * An individual snowflake that will update it's location every call to `draw` + */ declare class Snowflake { config: SnowflakeProps; params: SnowflakeParams; framesSinceLastUpdate: number; constructor(canvas: HTMLCanvasElement, config?: SnowflakeConfig); - updateData: (canvas: HTMLCanvasElement) => void; resized: () => boolean; draw: (canvas: HTMLCanvasElement) => void; translate: () => void; diff --git a/lib/Snowflake.js b/lib/Snowflake.js index f5fff75..6437cf5 100644 --- a/lib/Snowflake.js +++ b/lib/Snowflake.js @@ -26,9 +26,12 @@ var defaultConfig = { radius: [0.5, 3.0], speed: [1, 3], wind: [-0.5, 2], - changeFrequency: 250 + changeFrequency: 200 }; +/** + * An individual snowflake that will update it's location every call to `draw` + */ var Snowflake = function Snowflake(_canvas, config) { var _this = this; @@ -40,11 +43,6 @@ var Snowflake = function Snowflake(_canvas, config) { _defineProperty(this, "framesSinceLastUpdate", void 0); - _defineProperty(this, "updateData", function (canvas) { - _this.params.x = (0, _utils.random)(0, canvas.offsetWidth); - _this.params.y = (0, _utils.random)(-canvas.offsetHeight, 0); - }); - _defineProperty(this, "resized", function () { return _this.params.isResized = true; }); @@ -64,8 +62,8 @@ var Snowflake = function Snowflake(_canvas, config) { _defineProperty(this, "translate", function () { _this.params.y += _this.params.speed; _this.params.x += _this.params.wind; - _this.params.speed = (0, _utils.lerp)(_this.params.speed, _this.params.nextSpeed, 0.005); - _this.params.wind = (0, _utils.lerp)(_this.params.wind, _this.params.nextWind, 0.005); + _this.params.speed = (0, _utils.lerp)(_this.params.speed, _this.params.nextSpeed, 0.01); + _this.params.wind = (0, _utils.lerp)(_this.params.wind, _this.params.nextWind, 0.01); if (_this.framesSinceLastUpdate++ > _this.config.changeFrequency) { _this.updateTargetParams(); @@ -87,12 +85,6 @@ var Snowflake = function Snowflake(_canvas, config) { if (_this.params.y > canvas.offsetHeight) { _this.params.y = 0; } - - if (_this.params.isResized) { - _this.updateData(canvas); - - _this.params.isResized = false; - } }); _defineProperty(this, "update", function (canvas) { diff --git a/package-lock.json b/package-lock.json index d236602..1f346ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@cahil/snowfall", - "version": "0.1.1", + "version": "0.1.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 3cab602..a3a27b1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cahil/snowfall", - "version": "0.1.2", + "version": "0.1.3", "description": "A react component that creates a snowfall effect", "main": "./lib/Snowfall.js", "scripts": { diff --git a/src/Snowfall.tsx b/src/Snowfall.tsx index bb5d80b..b9af47f 100644 --- a/src/Snowfall.tsx +++ b/src/Snowfall.tsx @@ -56,13 +56,10 @@ export default class Snowfall extends React.Component { } resize = () => { - this.setState( - { - height: document.body.clientHeight, - width: document.body.clientWidth - }, - () => this.snowflakes.forEach(snowflake => snowflake.resized()) - ) + this.setState({ + height: document.body.clientHeight, + width: document.body.clientWidth + }) } get canvas() { diff --git a/src/Snowflake.ts b/src/Snowflake.ts index 4183a97..7ba2080 100644 --- a/src/Snowflake.ts +++ b/src/Snowflake.ts @@ -21,7 +21,7 @@ const defaultConfig: SnowflakeProps = { radius: [0.5, 3.0], speed: [1, 3], wind: [-0.5, 2], - changeFrequency: 250 + changeFrequency: 200 } interface SnowflakeParams { @@ -36,6 +36,9 @@ interface SnowflakeParams { nextWind: number } +/** + * An individual snowflake that will update it's location every call to `draw` + */ class Snowflake { config: SnowflakeProps params: SnowflakeParams @@ -65,11 +68,6 @@ class Snowflake { this.framesSinceLastUpdate = 0 } - updateData = (canvas: HTMLCanvasElement) => { - this.params.x = random(0, canvas.offsetWidth) - this.params.y = random(-canvas.offsetHeight, 0) - } - resized = () => (this.params.isResized = true) draw = (canvas: HTMLCanvasElement) => { @@ -87,8 +85,8 @@ class Snowflake { this.params.y += this.params.speed this.params.x += this.params.wind - this.params.speed = lerp(this.params.speed, this.params.nextSpeed, 0.005) - this.params.wind = lerp(this.params.wind, this.params.nextWind, 0.005) + this.params.speed = lerp(this.params.speed, this.params.nextSpeed, 0.01) + this.params.wind = lerp(this.params.wind, this.params.nextWind, 0.01) if (this.framesSinceLastUpdate++ > this.config.changeFrequency) { this.updateTargetParams() @@ -109,11 +107,6 @@ class Snowflake { if (this.params.y > canvas.offsetHeight) { this.params.y = 0 } - - if (this.params.isResized) { - this.updateData(canvas) - this.params.isResized = false - } } update = (canvas: HTMLCanvasElement) => {