Feat : version 0.0.8 new updates

Neulhan · Mar 31, 2024 · 238928f · 238928f
1 parent 65f033b
commit 238928f
Show file tree

Hide file tree

Showing 32 changed files with 2,768 additions and 32,238 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.gitignore b/.gitignore
@@ -149,4 +149,8 @@ typings/
 !.vscode/extensions.json
 *.code-workspace
 
-# End of https://www.toptal.com/developers/gitignore/api/macos,node,vscode
+# End of https://www.toptal.com/developers/gitignore/api/macos,node,vscode
+
+# Added by cargo
+
+target/
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1 @@
+example/
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "rust-analyzer.linkedProjects": ["./Cargo.toml"]
+}
diff --git a/README.md b/README.md
@@ -1,13 +1,13 @@
-# SnowyJS
+# FallingJS
 
-<img width="1000" src="https://raw.githubusercontent.com/Neulhan/snowyjs/master/example/logo.svg" width="300"/>
+<img width="1000" src="https://raw.githubusercontent.com/Neulhan/fallingjs/master/example/logo.svg" width="300"/>
 
-SnowyJS will help you use the beautiful snowing effect very simply!  
-`example`: https://neulhan.github.io/snowyjs/
+FallingJS will help you use the beautiful snowing effect very simply!  
+`example`: https://neulhan.github.io/fallingjs/
 
 ## Preview
 
-<img src="https://raw.githubusercontent.com/Neulhan/snowyjs/master/example/preview.png" />
+<img src="https://raw.githubusercontent.com/Neulhan/fallingjs/master/example/preview.png" />
 
 ## Get Started
 
@@ -41,4 +41,3 @@ SnowyJS will help you use the beautiful snowing effect very simply!
 - Add event hooks
 - Angle range fix
 - Refactoring frequency process to `requestAnimationFrame`
-
diff --git a/dist/996fea25309be3b6224f.module.wasm b/dist/996fea25309be3b6224f.module.wasm
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/dist/snowy.js b/dist/snowy.js
diff --git a/dist/snowy.js.map b/dist/snowy.js.map
diff --git a/example/getStarted.html b/example/getStarted.html
diff --git a/example/preview.png b/example/preview.png
diff --git a/example/snow.svg b/example/snow.svg
diff --git a/example/snowy.js b/example/snowy.js
diff --git a/example/index.css → examples/index.css b/example/index.css → examples/index.css
@@ -17,7 +17,7 @@ body {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background-color: #1d1e38;
+  background-color: #292931;
   display: flex;
 }
 

diff --git a/example/index.html → examples/index.html b/example/index.html → examples/index.html
@@ -4,13 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SnowJS | example</title>
-    <script src="./snowy.js"></script>
     <link rel="stylesheet" href="./index.css" />
   </head>
   <body>
-    <button id="start">SNOW</button>
+    <!-- <button id="start">SNOW</button> -->
     <div class="snow-area"></div>
-    <div class="controller">
+    <!-- <div class="controller">
       <div class="label">text</div>
       <input type="text" name="text" value="*" bind-value />
       <div class="label">frequency</div>
@@ -89,31 +88,39 @@
       </select>
       <div class="label">colors</div>
       <input type="text" name="colors" value='["#FFFFFF"]' bind-value />
-    </div>
-    <script>
+    </div> -->
+    <!-- <script>
       const snowjs = new SnowJS({
-        el: ".snow-area",
+        el: "body",
+        frequency: 200,
+        type: "square",
+        speedRange: [1, 3],
+        radiusRange: [1, 3],
+        angleRange: [-0.1, 0.1],
       });
-      document.getElementById("start").onclick = () => {
-        snowjs.start();
-      };
+      // document.getElementById("start").onclick = () => {
+      //   snowjs.start();
+      // };
 
       window.onload = () => {
-        [...document.querySelectorAll("[bind-value]")].map((item) => {
-          item.addEventListener("change", () => {
-            const config = { ...snowjs.config };
-            const name = item.getAttribute("name");
-            if (name === "speed" || name === "radius" || name === "angle") {
-              config[`${name}Range`][
-                item.getAttribute("target").replace(name, "") * 1
-              ] = item.value * 1;
-            } else {
-              config[name] = item.value;
-            }
-            snowjs.set(config);
-          });
-        });
+        snowjs.start();
+        // [...document.querySelectorAll("[bind-value]")].map((item) => {
+        //   item.addEventListener("change", () => {
+        //     const config = { ...snowjs.config };
+        //     const name = item.getAttribute("name");
+        //     if (name === "speed" || name === "radius" || name === "angle") {
+        //       config[`${name}Range`][
+        //         item.getAttribute("target").replace(name, "") * 1
+        //       ] = item.value * 1;
+        //     } else {
+        //       config[name] = item.value;
+        //     }
+        //     snowjs.set(config);
+        //   });
+        // });
       };
-    </script>
+    </script> -->
+
+    <script type="module" src="./index.js"></script>
   </body>
 </html>
diff --git a/examples/index.js b/examples/index.js
@@ -0,0 +1,7 @@
+import a from "fallingjs";
+
+window.onload = () => {
+  console.log(a);
+  //   const fallingjs = new FallingJS();
+  //   fallingjs.start();
+};
diff --git a/example/logo.svg → examples/logo.svg b/example/logo.svg → examples/logo.svg
diff --git a/examples/package-lock.json b/examples/package-lock.json
diff --git a/examples/package.json b/examples/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "example",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "fallingjs": "^0.0.7"
+  }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      * {
+        user-select: none;
+        outline: 0;
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body,
+      canvas {
+        width: 100%;
+        height: 100%;
+      }
+      body {
+        background-color: #292931;
+        overflow: hidden;
+      }
+    </style>
+
+    <script type="module">
+      import FallingJS from "./dist/index.js";
+      window.onload = () => {
+        const fallingjs = new FallingJS({ wasm: true });
+        fallingjs.start();
+      };
+    </script>
+  </head>
+  <body></body>
+</html>
diff --git a/lib/index.js b/lib/index.js
@@ -0,0 +1,64 @@
+import SceneFromJS from "./scene.js";
+import * as FallingRS from "fallingrs";
+
+export default class FallingJS {
+  constructor({
+    frequency = 1,
+    minRadius = 1,
+    maxRadius = 3,
+    minSpeed = 1,
+    maxSpeed = 3,
+    minAngle = -0.1,
+    maxAngle = 0.1,
+    colors = ["#FFF"],
+    type_ = "Square",
+    text = "*",
+    el = "body",
+    wasm = false,
+  } = {}) {
+    this.scene = !wasm
+      ? new SceneFromJS({
+          frequency,
+          minRadius,
+          maxRadius,
+          minSpeed,
+          maxSpeed,
+          minAngle,
+          maxAngle,
+          colors,
+          type_,
+          text,
+          el,
+        })
+      : new FallingRS.Scene(
+          new FallingRS.FallingConfig(
+            frequency,
+            minRadius,
+            maxRadius,
+            minSpeed,
+            maxSpeed,
+            minAngle,
+            maxAngle,
+            colors,
+            0,
+            text,
+            el
+          )
+        );
+  }
+
+  async start() {
+    this.scene.resize();
+    window.addEventListener("resize", () => {
+      console.log(this.scene);
+      console.log(this.scene.config);
+      console.log(this.scene.stageWidth);
+    });
+
+    function animate() {
+      this.scene.render();
+      requestAnimationFrame(animate.bind(this));
+    }
+    requestAnimationFrame(animate.bind(this));
+  }
+}
diff --git a/src/snowFlake.js → lib/object.js b/src/snowFlake.js → lib/object.js
@@ -1,38 +1,37 @@
 import { getRandomFloat, getRandomInt } from "./utils.js";
 
-export class SnowFlake {
+export class FallingObject {
   constructor(stageWidth, stageHeight, config) {
     this.x = getRandomFloat(0, stageWidth);
     this.y = 0;
-    this.speed = getRandomFloat(config.speedRange[0], config.speedRange[1]);
-    this.angle = getRandomFloat(config.angleRange[0], config.angleRange[1]);
+    this.speed = getRandomFloat(config.minSpeed, config.maxSpeed);
+    this.angle = getRandomFloat(config.minAngle, config.maxAngle);
     this.color = config.colors[getRandomInt(0, config.colors.length)];
-    this.radius = getRandomFloat(config.radiusRange[0], config.radiusRange[1]);
-    this.type = config.type;
+    this.radius = getRandomFloat(config.minRadius, config.maxRadius);
+    this.type = config.type_;
     this.text = config.text;
   }
 
   update() {
     this.x += this.angle * this.speed;
     this.y += this.speed;
+    return this.y;
   }
 
-  draw(ctx) {
-    this.update();
-
+  render(ctx) {
     ctx.beginPath();
 
     switch (this.type) {
-      case "circle":
+      case "Circle":
         ctx.fillStyle = this.color;
         ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, true);
         ctx.fill();
         break;
-      case "square":
+      case "Square":
         ctx.fillStyle = this.color;
         ctx.fillRect(this.x, this.y, this.radius * 2, this.radius * 2);
         break;
-      case "text":
+      case "Text":
         ctx.font = `${this.radius * 5}px serif`;
         ctx.fillStyle = this.color;
         ctx.fillText(this.text, this.x, this.y);

diff --git a/lib/scene.js b/lib/scene.js
@@ -0,0 +1,46 @@
+import { FallingObject } from "./object.js";
+
+export default class {
+  constructor(config) {
+    this.config = config;
+    this.canvas = document.createElement("canvas");
+    this.ctx = this.canvas.getContext("2d");
+    this.objects = [];
+    this.elem = document.querySelector(config.el);
+    this.elem.appendChild(this.canvas);
+    this.elem.style.pointerEvents = "none";
+    this.resize();
+    window.addEventListener("resize", this.resize.bind(this));
+  }
+  start() {
+    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);
+  }
+  resize() {
+    this.stageWidth = this.elem.clientWidth;
+    this.stageHeight = this.elem.clientHeight;
+    this.canvas.width = this.stageWidth * 2;
+    this.canvas.height = this.stageHeight * 2;
+    this.ctx.scale(2, 2);
+  }
+  render(t) {
+    this.ctx.clearRect(0, 0, this.stageWidth, this.stageHeight);
+    this.objects = this.objects.filter((obj) => obj.deleted != true);
+    this.addObjects();
+    for (let i = 0; i < this.objects.length; i++) {
+      if (this.objects[i].update() > this.stageHeight) {
+        this.objects[i].deleted = true;
+      }
+      this.objects[i].render(this.ctx);
+    }
+  }
+}
diff --git a/src/utils.js → lib/utils.js b/src/utils.js → lib/utils.js