Merge pull request #2 from react18-tools/scale

Aspect Ratio Preservation, Mouse Tracking Fix, and Entropy Improvement

Author: mayank1513

examples/nextjs/src/app/page.tsx

@@ -24,6 +24,16 @@ export default function Page(): JSX.Element {
           origin: [0, -1],
         }}
       />
+      <Particles
+        style={{
+          height: "300px",
+          width: "60vw",
+          position: "absolute",
+          left: "20vw",
+          top: 0,
+          zIndex: 5,
+        }}
+      />
       <Demo />
     </LandingPage>
   );

lib/CHANGELOG.md

@@ -0,0 +1,9 @@
+# webgl-generative-particles
+
+## 0.0.1
+
+### Patch Changes
+
+- 8717bbb: Fix mouse following for non-fullscreen layout elements.
+- 5414b18: Add extra random number for better entropy.
+- 0a8900d: Scale the rendering to preserve aspect ratio.

lib/package.json

@@ -2,7 +2,7 @@
   "name": "webgl-generative-particles",
   "author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
   "private": false,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "An efficient WebGL-based generative particle system.",
   "license": "MPL-2.0",
   "main": "./dist/index.js",

lib/src/react/particles/particles.test.tsx

@@ -2,12 +2,17 @@ import { cleanup, render, screen } from "@testing-library/react";
 import { afterEach, describe, test } from "vitest";
 import { Particles } from "./particles";
 
-describe.concurrent("particles", () => {
-	afterEach(cleanup);
+describe("particles", () => {
+  afterEach(cleanup);
 
-	test("Dummy test - test if renders without errors", ({ expect }) => {
-		const clx = "my-class";
-		render(<Particles className={clx} />);
-		expect(screen.getByTestId("particles").classList).toContain(clx);
-	});
+  test("Test if renders without errors", ({ expect }) => {
+    const clx = "my-class";
+    render(<Particles className={clx} />);
+    expect(screen.getByTestId("particles").classList).toContain(clx);
+  });
+
+  test("Test fullScreen overlay mode", ({ expect }) => {
+    render(<Particles fullScreenOverlay />);
+    expect(screen.getByTestId("particles").style.width).toBe("100vw");
+  });
 });

lib/src/react/particles/particles.tsx

@@ -34,7 +34,8 @@ export const Particles = ({ options, overlay, fullScreenOverlay, ...props }: Par
     () =>
       canvasRef.current
         ? renderParticles(canvasRef.current, { ...options, overlay: resolvedOverlay })
-        : undefined,
+        : /* v8 ignore next */
+          undefined,
     [options, resolvedOverlay],
   );
   return <canvas ref={canvasRef} style={style} {...props} data-testid="particles" />;

lib/src/simulator.ts

@@ -57,12 +57,12 @@ export interface ParticlesOptions {
 const defaultOptions: ParticlesOptions = {
   rgba: [1, 0, 0, 0.5],
   maxParticles: 1000,
-  generationRate: 0.25,
+  generationRate: 0.5,
   // setting range from -PI to PI craetes some patches because of overflows
   angleRange: [-2 * PI, 2 * PI],
   origin: [-1, -1],
-  speedRange: [0.01, 0.1],
-  ageRange: [0.01, 0.5],
+  speedRange: [0.02, 0.2],
+  ageRange: [0.01, 0.6],
   forceField: [0, 0.1],
 };
 
@@ -339,10 +339,13 @@ export const renderParticles = (canvas: HTMLCanvasElement, options?: ParticlesOp
   const onMouseMove = (e: MouseEvent) => {
     const height = canvas.height;
     const width = canvas.width;
+    const boundingRect = canvas.getBoundingClientRect();
+    const xPos = e.pageX - boundingRect.left - scrollX;
+    const yPos = e.pageY - boundingRect.top - scrollY;
     const scale = height > width ? [1, height / width] : [width / height, 1];
     setOrigin(
-      ((e.clientX / canvas.width) * 2 - 1) * scale[0],
-      (1 - (e.clientY / canvas.height) * 2) * scale[1],
+      ((xPos / canvas.width) * 2 - 1) * scale[0],
+      (1 - (yPos / canvas.height) * 2) * scale[1],
     );
   };
 

packages/shared/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @repo/shared
+
+## 0.0.1
+
+### Patch Changes
+
+- Updated dependencies [8717bbb]
+- Updated dependencies [5414b18]
+- Updated dependencies [0a8900d]
+  - [email protected]

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repo/shared",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "private": true,
   "sideEffects": false,
   "main": "./dist/index.js",