@tsparticles/canvas-utils 4.0.0-alpha.8 → 4.0.0-beta.1

package/README.md

@@ -1,12 +1,12 @@
 [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
 
-# tsParticles Path Utils Library
+# tsParticles Canvas Utils Library
 
 [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/canvas-utils/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/canvas-utils)
 [![npmjs](https://badge.fury.io/js/@tsparticles/canvas-utils.svg)](https://www.npmjs.com/package/@tsparticles/canvas-utils)
 [![npmjs](https://img.shields.io/npm/dt/@tsparticles/canvas-utils)](https://www.npmjs.com/package/@tsparticles/canvas-utils) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
-[tsParticles](https://github.com/tsparticles/tsparticles) path plugin for path utils movement.
+[tsParticles](https://github.com/tsparticles/tsparticles) canvas utils.
 
 ## How to use it
 
@@ -14,7 +14,7 @@
 
 The CDN/Vanilla version JS has one required file in vanilla configuration:
 
-Including the `tsparticles.path.utils.min.js` file will export the function to load the path plugin:
+Including the `tsparticles.canvas.utils.min.js` file will export the function to load the canvas utils:
 
 ```text
 loadCanvasUtilsPath
@@ -22,7 +22,7 @@ loadCanvasUtilsPath
 
 ### Usage
 
-Once the scripts are loaded you can set up `tsParticles` and the path plugin like this:
+Once the scripts are loaded you can set up `tsParticles` and the canvas utils like this:
 
 ```javascript
 (async () => {

package/browser/Utils.js

@@ -1,5 +1,16 @@
-import { defaultAlpha, defaultRgbMin, isNumber, originPoint, safeDocument, } from "@tsparticles/engine";
-const defaultWidth = 0;
+import { defaultAlpha, defaultRgbMin, identity, isNumber, originPoint, safeDocument, } from "@tsparticles/engine";
+const defaultWidth = 0, indexesOffset = {
+    r: 0,
+    g: 1,
+    b: 2,
+    a: 3,
+}, alphaMax = 255, alphaFactor = identity / alphaMax;
+export function drawLine(context, begin, end) {
+    context.beginPath();
+    context.moveTo(begin.x, begin.y);
+    context.lineTo(end.x, end.y);
+    context.closePath();
+}
 export function getCanvasImageData(ctx, size, offset, clear = true) {
     const imageData = ctx.getImageData(originPoint.x, originPoint.y, size.width, size.height).data;
     if (clear) {
@@ -12,12 +23,7 @@ export function getCanvasImageData(ctx, size, offset, clear = true) {
             y: Math.floor(idx / size.width),
         };
         pixels[pos.y] ??= [];
-        const indexesOffset = {
-            r: 0,
-            g: 1,
-            b: 2,
-            a: 3,
-        }, alphaFactor = 255, row = pixels[pos.y];
+        const row = pixels[pos.y];
         if (!row) {
             continue;
         }
@@ -25,7 +31,7 @@ export function getCanvasImageData(ctx, size, offset, clear = true) {
             r: imageData[i + indexesOffset.r] ?? defaultRgbMin,
             g: imageData[i + indexesOffset.g] ?? defaultRgbMin,
             b: imageData[i + indexesOffset.b] ?? defaultRgbMin,
-            a: (imageData[i + indexesOffset.a] ?? defaultAlpha) / alphaFactor,
+            a: (imageData[i + indexesOffset.a] ?? defaultAlpha) * alphaFactor,
         };
     }
     return {

package/cjs/Utils.js

@@ -1,5 +1,16 @@
-import { defaultAlpha, defaultRgbMin, isNumber, originPoint, safeDocument, } from "@tsparticles/engine";
-const defaultWidth = 0;
+import { defaultAlpha, defaultRgbMin, identity, isNumber, originPoint, safeDocument, } from "@tsparticles/engine";
+const defaultWidth = 0, indexesOffset = {
+    r: 0,
+    g: 1,
+    b: 2,
+    a: 3,
+}, alphaMax = 255, alphaFactor = identity / alphaMax;
+export function drawLine(context, begin, end) {
+    context.beginPath();
+    context.moveTo(begin.x, begin.y);
+    context.lineTo(end.x, end.y);
+    context.closePath();
+}
 export function getCanvasImageData(ctx, size, offset, clear = true) {
     const imageData = ctx.getImageData(originPoint.x, originPoint.y, size.width, size.height).data;
     if (clear) {
@@ -12,12 +23,7 @@ export function getCanvasImageData(ctx, size, offset, clear = true) {
             y: Math.floor(idx / size.width),
         };
         pixels[pos.y] ??= [];
-        const indexesOffset = {
-            r: 0,
-            g: 1,
-            b: 2,
-            a: 3,
-        }, alphaFactor = 255, row = pixels[pos.y];
+        const row = pixels[pos.y];
         if (!row) {
             continue;
         }
@@ -25,7 +31,7 @@ export function getCanvasImageData(ctx, size, offset, clear = true) {
             r: imageData[i + indexesOffset.r] ?? defaultRgbMin,
             g: imageData[i + indexesOffset.g] ?? defaultRgbMin,
             b: imageData[i + indexesOffset.b] ?? defaultRgbMin,
-            a: (imageData[i + indexesOffset.a] ?? defaultAlpha) / alphaFactor,
+            a: (imageData[i + indexesOffset.a] ?? defaultAlpha) * alphaFactor,
         };
     }
     return {

package/esm/Utils.js

@@ -1,5 +1,16 @@
-import { defaultAlpha, defaultRgbMin, isNumber, originPoint, safeDocument, } from "@tsparticles/engine";
-const defaultWidth = 0;
+import { defaultAlpha, defaultRgbMin, identity, isNumber, originPoint, safeDocument, } from "@tsparticles/engine";
+const defaultWidth = 0, indexesOffset = {
+    r: 0,
+    g: 1,
+    b: 2,
+    a: 3,
+}, alphaMax = 255, alphaFactor = identity / alphaMax;
+export function drawLine(context, begin, end) {
+    context.beginPath();
+    context.moveTo(begin.x, begin.y);
+    context.lineTo(end.x, end.y);
+    context.closePath();
+}
 export function getCanvasImageData(ctx, size, offset, clear = true) {
     const imageData = ctx.getImageData(originPoint.x, originPoint.y, size.width, size.height).data;
     if (clear) {
@@ -12,12 +23,7 @@ export function getCanvasImageData(ctx, size, offset, clear = true) {
             y: Math.floor(idx / size.width),
         };
         pixels[pos.y] ??= [];
-        const indexesOffset = {
-            r: 0,
-            g: 1,
-            b: 2,
-            a: 3,
-        }, alphaFactor = 255, row = pixels[pos.y];
+        const row = pixels[pos.y];
         if (!row) {
             continue;
         }
@@ -25,7 +31,7 @@ export function getCanvasImageData(ctx, size, offset, clear = true) {
             r: imageData[i + indexesOffset.r] ?? defaultRgbMin,
             g: imageData[i + indexesOffset.g] ?? defaultRgbMin,
             b: imageData[i + indexesOffset.b] ?? defaultRgbMin,
-            a: (imageData[i + indexesOffset.a] ?? defaultAlpha) / alphaFactor,
+            a: (imageData[i + indexesOffset.a] ?? defaultAlpha) * alphaFactor,
         };
     }
     return {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tsparticles/canvas-utils",
-  "version": "4.0.0-alpha.8",
-  "description": "tsParticles path utils library",
+  "version": "4.0.0-beta.1",
+  "description": "tsParticles canvas utils library",
   "homepage": "https://particles.js.org",
   "repository": {
     "type": "git",
@@ -85,8 +85,8 @@
     }
   ],
   "sideEffects": false,
-  "jsdelivr": "tsparticles.path.utils.min.js",
-  "unpkg": "tsparticles.path.utils.min.js",
+  "jsdelivr": "tsparticles.canvas.utils.min.js",
+  "unpkg": "tsparticles.canvas.utils.min.js",
   "browser": "browser/index.js",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -103,7 +103,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "4.0.0-alpha.8"
+    "@tsparticles/engine": "4.0.0-beta.1"
   },
   "type": "module"
 }