new comet effects, improved config reload

flodlc · Jan 30, 2022 · 9188e61 · 9188e61
1 parent 8934873
commit 9188e61
Show file tree

Hide file tree

Showing 17 changed files with 241 additions and 202 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 ## Nebula
-### Nebula is a lightweight (1kb compressed) JavaScript library for creating beautifull universe animations with React / Next / Gatsby.
+### Nebula is a lightweight (1kb compressed) JavaScript library that creates beautiful universe animations with React / Next / Gatsby.
 Including configurable Stars, Nebulas, Comets, Planets and Suns.  
 Compatible with SSR
 
@@ -43,12 +43,12 @@ The canvas is positioned ``absolute`` and takes the size of its parent.
 ### `Config`
 key | option type | default | Comment
 ---|-----------|---|---
-`starsCount` | `number` | `350` | Recommended to keep smaller than `1000`
+`starsCount` | `number` | `350` | Recommended: < `1000`
 `starsColor` | `string` | `#ffffff`
 `starsRotationSpeed` | `number` | `3`
-`cometFrequence` | `number` | `2` | Value `0` disables the comets
+`cometFrequence` | `number` | `10` | `0` disables the comets
 `nebulasIntensity` | `number` | `10`
 `nebulasColors` | `string[]` accept rgb and hex | `["rgb(5,63,157)", "rgb(42,112,25)", "rgb(182,41,44)"]`
-`solarSystemScale` | `number` | `1` | Value `0` hides the solar system
-`solarSystemDistance` | `number` | `65` | Values greater than `100` can be out of screen 
+`solarSystemScale` | `number` | `1` | `0` hides the solar system
+`solarSystemDistance` | `number` | `65` |  Recommended: < `100`
 `solarSystemRotationSpeed` | `number` | `100`
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@flodlc/nebula",
-  "version": "1.0.27",
+  "version": "1.0.30",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "typings": "dist/index.d.ts",

diff --git a/src/DEFAULT_CONFIG.ts b/src/DEFAULT_CONFIG.ts
@@ -2,7 +2,7 @@ export const DEFAULT_CONFIG = {
   starsCount: 350,
   starsColor: "#FFFFFF",
   starsRotationSpeed: 3,
-  cometFrequence: 2,
+  cometFrequence: 10,
   nebulasIntensity: 10,
   nebulasColors: ["rgb(27,2,140)", "rgb(22,91,2)", "#880554"],
   solarSystemScale: 1,

diff --git a/src/View/draw.ts b/src/View/draw.ts
@@ -1,4 +1,5 @@
 import { Astre } from "src/astres/Astre";
+import { Drawable } from "src/astres/types";
 
 export const drawAstres = ({
   astres,
@@ -8,7 +9,7 @@ export const drawAstres = ({
   clear = true,
   fps = 60,
 }: {
-  astres: Record<string, Astre>;
+  astres: Record<string, Drawable>;
   canvas: HTMLCanvasElement;
   bgColor?: string;
   play: boolean;

diff --git a/src/View/useAstres.ts b/src/View/useAstres.ts
@@ -1,4 +1,4 @@
-import { RefObject, useLayoutEffect } from "react";
+import { RefObject, useLayoutEffect, useRef } from "react";
 import { SystemConfig } from "src/types";
 import { generateStars } from "src/utils/generateStars";
 import { Star } from "src/astres/Star";
@@ -7,6 +7,9 @@ import { Planet } from "src/astres/Planet";
 import { Sun } from "src/astres/Sun";
 import { drawAstres } from "src/View/draw";
 import { generateSolarSytem } from "src/utils/generateSolarSytem";
+import { Comet } from "src/astres/Comet";
+import { FPS } from "src/config";
+import { Drawable } from "src/astres/types";
 
 export const useAstres = ({
   canvasSize,
@@ -17,63 +20,76 @@ export const useAstres = ({
   canvasRef: RefObject<HTMLCanvasElement>;
   config: Required<SystemConfig>;
 }) => {
+  const astres = useRef<Record<string, Drawable>>();
   useLayoutEffect(() => {
     if (!canvasSize.width) return () => undefined;
-    const ctx = (canvasRef.current as HTMLCanvasElement).getContext("2d");
-    const stars = generateStars({
-      rotationSpeed: config.starsRotationSpeed,
-      count: config.starsCount,
-      color: config.starsColor,
-    }).reduce(
-      (stars, starConfig) => ({
-        ...stars,
-        [starConfig.name]: new Star({
-          ...(starConfig as any),
-          ctx,
-        }),
-      }),
-      {} as Record<string, Star>
-    );
+    const canvas = canvasRef.current as HTMLCanvasElement;
+    const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
 
-    const comets = generateComet({
-      frequence: config.cometFrequence,
-    }).reduce(
-      (comets, cometConfig) => ({
-        ...comets,
-        [cometConfig.name]: new Star({
-          ctx,
-          ...(cometConfig as any),
-          origin: cometConfig.origin ? comets[cometConfig.origin] : undefined,
-        }),
-      }),
-      {} as Record<string, Star>
-    );
+    if (!astres.current) {
+      astres.current = createAstres({ config, ctx });
+    }
 
-    const planets = generateSolarSytem({
-      scale: config.solarSystemScale,
-      distance: config.solarSystemDistance,
-      rotationSpeed: config.solarSystemRotationSpeed,
-    }).reduce((planets, planetConfig) => {
-      const Type = {
-        planet: Planet,
-        sun: Sun,
-      }[planetConfig.type as "sun" | "planet"];
-      return {
-        ...planets,
-        [planetConfig.name]: new Type({
-          ctx,
-          ...(planetConfig as any),
-          origin: planetConfig.origin
-            ? planets[planetConfig.origin]
-            : undefined,
-        }),
-      };
-    }, {} as Record<string, Star>);
     return drawAstres({
-      astres: { ...stars, ...comets, ...planets },
+      astres: astres.current,
       canvas: canvasRef.current as HTMLCanvasElement,
       play: true,
-      fps: 40,
+      fps: FPS,
     });
   }, [canvasSize.width, canvasSize.height, config]);
 };
+
+const createAstres = ({
+  config,
+  ctx,
+}: {
+  config: Required<SystemConfig>;
+  ctx: CanvasRenderingContext2D;
+}) => {
+  const stars = generateStars({
+    rotationSpeed: config.starsRotationSpeed,
+    count: config.starsCount,
+    color: config.starsColor,
+  }).reduce(
+    (stars, starConfig) => ({
+      ...stars,
+      [starConfig.name]: new Star({
+        ...(starConfig as any),
+        ctx,
+      }),
+    }),
+    {} as Record<string, Drawable>
+  );
+
+  const planets = generateSolarSytem({
+    scale: config.solarSystemScale,
+    distance: config.solarSystemDistance,
+    rotationSpeed: config.solarSystemRotationSpeed,
+  }).reduce((planets, planetConfig) => {
+    const Type = {
+      planet: Planet,
+      sun: Sun,
+    }[planetConfig.type as "sun" | "planet"];
+    return {
+      ...planets,
+      [planetConfig.name]: new Type({
+        ctx,
+        ...(planetConfig as any),
+        origin: planetConfig.origin ? planets[planetConfig.origin] : undefined,
+      }),
+    };
+  }, {} as Record<string, Drawable>);
+
+  const comets = generateComet({ frequence: config.cometFrequence }).reduce(
+    (stars, cometConfig) => ({
+      ...stars,
+      [cometConfig.name]: new Comet({
+        ...cometConfig,
+        ctx,
+      }),
+    }),
+    {} as Record<string, Drawable>
+  );
+
+  return { ...stars, ...comets, ...planets };
+};
diff --git a/src/View/useNebulas.ts b/src/View/useNebulas.ts
@@ -1,8 +1,9 @@
-import { RefObject, useLayoutEffect } from "react";
+import { RefObject, useLayoutEffect, useRef } from "react";
 import { generateNebulas } from "src/utils/generateNebulas";
 import { Nebula } from "src/astres/Nebula";
 import { drawAstres } from "src/View/draw";
 import { SystemConfig } from "src/types";
+import { Drawable } from "src/astres/types";
 
 export const useNebulas = ({
   canvasSize,
@@ -13,28 +14,43 @@ export const useNebulas = ({
   canvasRef: RefObject<HTMLCanvasElement>;
   config: Required<SystemConfig>;
 }) => {
+  const nebulas = useRef<Record<string, Drawable>>();
   useLayoutEffect(() => {
     if (!canvasSize.width) return () => undefined;
-    const ctx = (canvasRef.current as HTMLCanvasElement).getContext("2d");
-    const nebulas = generateNebulas({
-      intensity: config.nebulasIntensity,
-      colors: config.nebulasColors,
-    }).reduce(
-      (comets, nebulaConfig) => ({
-        ...comets,
-        [nebulaConfig.name]: new Nebula({
-          ...(nebulaConfig as any),
-          ctx,
-        }),
-      }),
-      {} as Record<string, Nebula>
-    );
+    const canvas = canvasRef.current as HTMLCanvasElement;
+    const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
+
+    if (!nebulas.current) {
+      nebulas.current = createNebulas({ ctx, config });
+    }
 
     return drawAstres({
-      astres: nebulas,
+      astres: nebulas.current,
       canvas: canvasRef.current as HTMLCanvasElement,
       play: false,
       bgColor: "rgb(8, 8, 8)",
     });
   }, [canvasSize.width, canvasSize.height, config]);
 };
+
+const createNebulas = ({
+  config,
+  ctx,
+}: {
+  config: Required<SystemConfig>;
+  ctx: CanvasRenderingContext2D;
+}) => {
+  return generateNebulas({
+    intensity: config.nebulasIntensity,
+    colors: config.nebulasColors,
+  }).reduce(
+    (comets, nebulaConfig) => ({
+      ...comets,
+      [nebulaConfig.name]: new Nebula({
+        ...(nebulaConfig as any),
+        ctx,
+      }),
+    }),
+    {} as Record<string, Nebula>
+  );
+};
diff --git a/src/astres/Astre.ts b/src/astres/Astre.ts
@@ -6,10 +6,10 @@ export abstract class Astre implements Drawable {
   rgb: [number, number, number];
   rotateSpeed: number;
   angle: number;
-  origin?: Drawable;
+  origin?: Astre;
   relativeDistance: number;
 
-  constructor({
+  protected constructor({
     ctx,
     width,
     rotateSpeed,
@@ -23,7 +23,7 @@ export abstract class Astre implements Drawable {
     rotateSpeed: number;
     distance: number;
     rgb: [number, number, number];
-    origin?: Drawable;
+    origin?: Astre;
     invisible?: boolean;
     startAngle?: number;
   }) {