feat(snowflake): update speed interpolation smoothing

cahilfoley · Dec 9, 2018 · 816d4d7 · 816d4d7
1 parent 68ff323
commit 816d4d7
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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
diff --git 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
@@ -56,13 +56,10 @@ export default class Snowfall extends React.Component<Props, State> {
   }
 
   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
@@ -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) => {