better quality on firefox/safari

README.md

@@ -21,11 +21,12 @@ import { createNebula } from "@flodlc/nebula";
 
 <div id="nebula-element"></div>
 
-const element = document.getElementById("nebula-element")
+const element = document.getElementById("nebula-element");
+
 const nebula = createNebula(element, {
     starsCount: 250,
     starsRotationSpeed: 3,
-    solarSystemScale: 1,
+    nebulasIntensity: 8,
     ...
 });
 // ... if needed:
@@ -46,11 +47,11 @@ export default App = () => {
             <ReactNebula config={{
                 starsCount: 250,
                 starsRotationSpeed: 3,
-                solarSystemScale: 1,
+                nebulasIntensity: 8,
                 ...
             }}/>
         </>
-    )
+    );
 }
  ```
 The canvas is positioned ``absolute`` and takes the size of its parent.
@@ -62,7 +63,6 @@ key | option type | default | Comment
 `starsRotationSpeed` | `number` | `3`
 `cometFrequence` | `number` | `15` | `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)"]`
 `sunScale` | `number` | `1` | `0` hides the Sun
 `planetsScale` | `number` | `1` | `0` hides the planets
 `solarSystemOrbite` | `number` | `65` |  Recommended: < `100`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodlc/nebula",
-  "version": "1.0.36",
+  "version": "1.0.37",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "typings": "dist/index.d.ts",
@@ -26,7 +26,6 @@
     "vite": "^2.7.13"
   },
   "dependencies": {
-    "context-filter-polyfill": "^0.2.4",
     "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/DEFAULT_CONFIG.ts

@@ -1,12 +1,12 @@
 import { SystemConfig } from "src/types";
 
 export const DEFAULT_CONFIG = {
-  starsCount: 350,
+  starsCount: 400,
   starsColor: "#FFFFFF",
   starsRotationSpeed: 3,
   cometFrequence: 15,
   nebulasIntensity: 10,
-  nebulasColors: ["rgb(27,2,140)", "rgb(22,91,2)", "#880554"],
+  bgColor: "rgb(8,8,8)",
   sunScale: 1,
   planetsScale: 1,
   solarSystemOrbite: 65,

src/View/Nebula.ts

@@ -4,21 +4,25 @@ import { fillConfig } from "src/DEFAULT_CONFIG";
 import { Comet } from "src/astres/Comet";
 import { Sun } from "src/astres/Sun";
 import { Planet } from "src/astres/Planet";
-import { NebulaAstre } from "src/astres/NebulaAstre";
+import { NebulaColoration } from "src/astres/NebulaColoration";
 import { generateStars } from "src/utils/generateStars";
-import { drawAstres } from "src/View/draw";
+import { drawOnCanvas } from "src/View/drawOnCanvas";
 import { generateSolarSytem } from "src/utils/generateSolarSytem";
 import { generateComet } from "src/utils/generateComet";
-import { generateNebulas } from "src/utils/generateNebulas";
+import { generateNebulaColoration } from "src/utils/generateNebulaColoration";
 import { FPS } from "src/config";
-import "context-filter-polyfill";
+
+const CANVAS_STYLE =
+  "width: 100%;height: 100%;position:absolute;will-change:transform;top: 0;left:0;";
 
 export class Nebula {
   private config: Required<SystemConfig>;
   private element: HTMLElement;
-  private bgCanvas: HTMLCanvasElement;
-  private canvas: HTMLCanvasElement;
-  private nebulas: NebulaAstre[] = [];
+  private readonly bgCanvas: HTMLCanvasElement;
+  private readonly canvas: HTMLCanvasElement;
+  private cancelAnimations: (() => void)[] = [];
+
+  private coloration?: NebulaColoration;
   private stars: Star[] = [];
   private comets: Comet[] = [];
   private planets: (Sun | Planet)[] = [];
@@ -31,8 +35,8 @@ export class Nebula {
     element: HTMLElement;
   }) {
     this.element = element;
-    this.canvas = document.createElement("CANVAS") as HTMLCanvasElement;
     this.bgCanvas = document.createElement("CANVAS") as HTMLCanvasElement;
+    this.canvas = document.createElement("CANVAS") as HTMLCanvasElement;
     element.append(this.bgCanvas);
     element.append(this.canvas);
     this.styleCanvas();
@@ -47,28 +51,20 @@ export class Nebula {
   };
 
   private styleCanvas = () => {
-    this.canvas.setAttribute(
-      "style",
-      "width: 100%;height: 100%;position:absolute;top: 0;left:0;"
-    );
-
-    this.bgCanvas.setAttribute(
-      "style",
-      "width: 100%;height: 100%;position:absolute;top: 0;left:0;"
-    );
+    this.bgCanvas.setAttribute("style", CANVAS_STYLE);
+    this.bgCanvas.width = this.element.offsetWidth / 3;
+    this.bgCanvas.height = this.element.offsetHeight / 3;
+    this.canvas.setAttribute("style", CANVAS_STYLE);
     this.canvas.width = this.element.offsetWidth * 2;
     this.canvas.height = this.element.offsetHeight * 2;
-    this.bgCanvas.width = this.element.offsetWidth * 2;
-    this.bgCanvas.height = this.element.offsetHeight * 2;
   };
 
   setConfig(config: SystemConfig) {
     this.config = fillConfig(config);
-    this.nebulas = generateNebulas({
-      nebulas: this.nebulas,
+    this.coloration = generateNebulaColoration({
+      coloration: this.coloration,
       ctx: this.bgCanvas.getContext("2d") as CanvasRenderingContext2D,
       intensity: this.config.nebulasIntensity,
-      colors: this.config.nebulasColors,
     });
     this.stars = generateStars({
       stars: this.stars,
@@ -96,26 +92,24 @@ export class Nebula {
     this.draw();
   }
 
-  private cancelAnimations: (() => void)[] = [];
   draw() {
     this.cancelAnimations.forEach((callback) => callback());
     this.cancelAnimations = [
-      drawAstres({
-        astres: this.nebulas,
-        play: false,
+      drawOnCanvas({
         canvas: this.bgCanvas,
-        bgColor: "rgb(8, 8, 8)",
+        drawings: [this.coloration as NebulaColoration],
+        bgColor: this.config.bgColor,
       }),
-      drawAstres({
-        astres: [...this.stars, ...this.comets, ...this.planets],
-        fps: FPS,
-        play: true,
+      drawOnCanvas({
         canvas: this.canvas,
+        drawings: [...this.stars, ...this.comets, ...this.planets],
+        fps: FPS,
       }),
     ];
   }
 
   destroy() {
+    window.removeEventListener("resize", this.onResize);
     this.cancelAnimations.forEach((callback) => callback());
     this.cancelAnimations = [];
     this.bgCanvas.parentElement?.removeChild(this.bgCanvas);

src/View/draw.ts → src/View/drawOnCanvas.ts

@@ -1,16 +1,14 @@
 import { Drawable } from "src/astres/Drawable";
 
-export const drawAstres = ({
-  astres,
+export const drawOnCanvas = ({
   canvas,
+  drawings,
   bgColor,
-  play,
-  fps = 60,
+  fps = 0,
 }: {
-  astres: Drawable[];
   canvas: HTMLCanvasElement;
+  drawings: Drawable[];
   bgColor?: string;
-  play: boolean;
   fps?: number;
 }) => {
   const width = canvas.width;
@@ -21,11 +19,11 @@ export const drawAstres = ({
   ctx.save();
   let animation: number | undefined;
 
-  let lastTimestamp = 0,
-    timestep = 1000 / fps; // ms for each frame
+  let lastTimestamp = 0;
+  let timestep = 1000 / fps;
 
   const drawMainCanvas = () => {
-    if (play) {
+    if (fps) {
       animation = requestAnimationFrame(drawMainCanvas);
       const timestamp = Date.now();
       if (timestamp - lastTimestamp < timestep) return;
@@ -38,9 +36,11 @@ export const drawAstres = ({
       ctx.fillRect(0, 0, width, height);
     }
 
-    astres.forEach((astre) => astre.draw());
+    drawings.forEach((drawing) => drawing.draw());
   };
+
   drawMainCanvas();
+
   return () => {
     ctx.restore();
     if (animation) {

src/astres/Astre.ts

@@ -53,6 +53,10 @@ export abstract class Astre extends Drawable {
     return this.angle;
   }
 
+  getRefAngle(): number {
+    return this.getAngle() + (this.origin?.getAngle() ?? 0);
+  }
+
   getWidth(): number {
     return this.width;
   }

src/astres/Comet.ts

@@ -1,6 +1,6 @@
 import { FPS } from "src/config";
 import { Drawable } from "src/astres/Drawable";
-import { parseColor } from "src/utils/parseColor";
+import { getRGB, parseColor } from "src/utils/parseColor";
 
 const SPEED = 160;
 
@@ -75,7 +75,7 @@ export class Comet extends Drawable {
         direction: fromAngle + Math.PI + (Math.random() * Math.PI) / 6,
         distanceToTarget: maxSideSize * 0.6 * (0.7 + Math.random() * 0.6),
         speed: SPEED * (0.7 + Math.random() * 0.6),
-        rgb: parseColor("rgb(255,207,207)"),
+        rgb: parseColor("rgb(255,231,231)"),
         width: 0.2 + Math.random() * 0.6,
         startOpacity: 0,
       };
@@ -106,14 +106,8 @@ export class Comet extends Drawable {
       this.y,
       90
     );
-    gradiant.addColorStop(
-      0,
-      `rgba(${this.showConfig.rgb[0]}, ${this.showConfig.rgb[1]}, ${this.showConfig.rgb[2]}, 1)`
-    );
-    gradiant.addColorStop(
-      1,
-      `rgba(${this.showConfig.rgb[0]}, ${this.showConfig.rgb[1]}, ${this.showConfig.rgb[2]}, 0)`
-    );
+    gradiant.addColorStop(0, getRGB(this.showConfig.rgb, 1));
+    gradiant.addColorStop(1, getRGB(this.showConfig.rgb, 0));
     this.ctx.fillStyle = gradiant;
     this.ctx.fill();
     this.ctx.restore();

src/astres/Drawable.ts

@@ -18,4 +18,8 @@ export abstract class Drawable {
   protected get canvasMinSide() {
     return Math.min(this.getCanvasHeight(), this.getCanvasWidth());
   }
+
+  protected get canvasMaxSide() {
+    return Math.max(this.getCanvasHeight(), this.getCanvasWidth());
+  }
 }