Feat : 0.0.13

README.md

@@ -21,15 +21,15 @@ FallingJS will help you use the beautiful snowing effect very simply!
 | Name        | Type            | Description                                      | Required | Default    |
 | ----------- | --------------- | ------------------------------------------------ | -------- | ---------- |
 | `el`        | `String`        | Falling effect area by css selector              | No       | `body`     |
-| `frequency` | `Number`        | Set falling object adding frequency to the area  | No       | `1`        |
+| `frequency` | `Number`        | Set falling object adding frequency to the area  | No       | `0.1`      |
 | `minSpeed`  | `Number`        | Set min speed of snowflakes                      | No       | `0.5`      |
-| `maxSpeed`  | `Number`        | Set max speed of snowflakes                      | No       | `3`        |
-| `minRadius` | `Number`        | Set min radius of snowflakes                     | No       | `0.5`      |
+| `maxSpeed`  | `Number`        | Set max speed of snowflakes                      | No       | `2`        |
+| `minRadius` | `Number`        | Set min radius of snowflakes                     | No       | `1`        |
 | `maxRadius` | `Number`        | Set max radius of snowflakes                     | No       | `3`        |
-| `minAngle`  | `Number`        | Set min angle of snowflakes (-1 ~ 1 recommended) | No       | `-0.1`     |
-| `maxAngle`  | `Number`        | Set max angle of snowflakes (-1 ~ 1 recommended) | No       | `0.1`      |
+| `minAngle`  | `Number`        | Set min angle of snowflakes (-1 ~ 1 recommended) | No       | `-0.2`     |
+| `maxAngle`  | `Number`        | Set max angle of snowflakes (-1 ~ 1 recommended) | No       | `0.2`      |
 | `colors`    | `Array<String>` | Color palette array for snowflakes               | No       | `["#FFF"]` |
-| `wasm`      | `Boolean`       | Use rust-wasm version rendering                  | No       | `["#FFF"]` |
+| `wasm`      | `Boolean`       | Use rust-wasm version rendering                  | No       | `false`    |
 
 ## Future Updates
 

examples/index.html

@@ -7,8 +7,13 @@
     <link rel="stylesheet" type="text/css" href="./index.css" />
     <script type="module">
       import FallingJS from "https://cdn.jsdelivr.net/npm/[email protected]";
+      // import FallingJS from "../lib/index.js";
 
-      const fallingjs = new FallingJS({ el: ".my-el" });
+      const fallingjs = new FallingJS({
+        el: ".my-el",
+        minAngle: -1.5,
+        maxAngle: 1.5,
+      });
       fallingjs.start();
     </script>
   </head>

lib/index.js

@@ -3,15 +3,15 @@ import * as FallingRS from "fallingrs";
 
 export default class FallingJS {
   constructor({
-    frequency = 1,
+    frequency = 0.1,
     minRadius = 1,
     maxRadius = 3,
-    minSpeed = 1,
-    maxSpeed = 3,
-    minAngle = -0.1,
-    maxAngle = 0.1,
+    minSpeed = 0.5,
+    maxSpeed = 2,
+    minAngle = -0.2,
+    maxAngle = 0.2,
     colors = ["#FFF"],
-    type_ = "Square",
+    type_ = "Circle",
     text = "*",
     el = "body",
     wasm = false,
@@ -43,7 +43,7 @@ export default class FallingJS {
             minAngle,
             maxAngle,
             colors,
-            0,
+            FallingRS.FlakeType[type_],
             text,
             el
           )
@@ -53,13 +53,11 @@ export default class FallingJS {
   async start() {
     this.scene.resize();
     window.addEventListener("resize", () => {
-      console.log(this.scene);
-      console.log(this.scene.config);
-      console.log(this.scene.stageWidth);
+      this.scene.resize();
     });
 
-    function animate() {
-      this.scene.render();
+    function animate(t) {
+      this.scene.render(t);
       requestAnimationFrame(animate.bind(this));
     }
     requestAnimationFrame(animate.bind(this));

lib/scene.js

@@ -16,14 +16,25 @@ export default class {
     this.objects = [];
     requestAnimationFrame(this.animate.bind(this));
   }
-  addObjects() {
-    var i = 0;
-    do {
-      i++;
-      this.objects.push(
-        new FallingObject(this.stageWidth, this.stageHeight, this.config)
-      );
-    } while (i <= this.config.frequency);
+  addObjects(t) {
+    if (this.config.frequency >= 1) {
+      var i = 0;
+      do {
+        i++;
+        this.objects.push(
+          new FallingObject(this.stageWidth, this.stageHeight, this.config)
+        );
+      } while (i <= this.config.frequency);
+    } else {
+      if (!this.time) this.time = t;
+      let now = t - this.time;
+      if (now > 1 / this.config.frequency) {
+        this.time = t;
+        this.objects.push(
+          new FallingObject(this.stageWidth, this.stageHeight, this.config)
+        );
+      }
+    }
   }
   resize() {
     this.stageWidth = this.elem.clientWidth;
@@ -35,7 +46,7 @@ export default class {
   render(t) {
     this.ctx.clearRect(0, 0, this.stageWidth, this.stageHeight);
     this.objects = this.objects.filter((obj) => obj.deleted != true);
-    this.addObjects();
+    this.addObjects(t);
     for (let i = 0; i < this.objects.length; i++) {
       if (this.objects[i].update() > this.stageHeight) {
         this.objects[i].deleted = true;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fallingjs",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "FallingJS will help you use the beautiful falling effect(snow) very simply!",
   "browser": "dist/index.js",
   "scripts": {
@@ -34,6 +34,6 @@
     "dist/"
   ],
   "dependencies": {
-    "fallingrs": "^0.1.5"
+    "fallingrs": "^0.1.6"
   }
 }