aurora-gradient - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

lib/Gradient.d.ts

@@ -1,8 +0,9 @@
-import { Uniform } from './Uniform';
-import Material from './Material';
-import Mesh from './Mesh';
-import PlaneGeometry from './PlaneGeometry';
+import { Uniform } from "./Uniform";
+import Material from "./Material";
+import Mesh from "./Mesh";
+import PlaneGeometry from "./PlaneGeometry";
 interface GradientOptions {
     canvas: HTMLCanvasElement | null;
     colors: string[];
+    onTimeUpdate?: (time: number) => void;
     wireframe?: boolean;
@@ -12,2 +13,3 @@ density?: [number, number];
     amplitude?: number;
+    time?: number;
     static?: boolean;
@@ -28,3 +30,2 @@ loadedClass?: string;
     width: number | null;
-    minWidth: number;
     height: number;
@@ -51,3 +52,3 @@ xSegCount: number | null;
     constructor(options: GradientOptions);
-    getOption<T extends any>(name: keyof GradientOptions, defaultValue?: T | null | undefined): T;
+    getOption<K extends keyof GradientOptions, T extends GradientOptions[K]>(name: K, defaultValue?: T | null | undefined): T;
     findCanvas(selector: string | HTMLCanvasElement): HTMLCanvasElement | null;
@@ -54,0 +55,0 @@ setCanvas(canvas: HTMLCanvasElement): void;

lib/Gradient.js

@@ -20,3 +20,3 @@ "use strict";
         this.uniforms = {};
-        this.time = 1253106; // @todo work out why this number has been choosen.
+        this.time = 0; // @todo work out why this number has been choosen.
         this.mesh = null;
@@ -28,3 +28,2 @@ this.material = null;
         this.width = null;
-        this.minWidth = 1111;
         this.height = 600;
@@ -42,10 +41,10 @@ this.xSegCount = null;
             blend: Blend_1.default,
-            fragment: Fragment_1.default
+            fragment: Fragment_1.default,
         };
         this.options = {
             canvas: null,
-            colors: Gradient.defaultOptions.colors
+            colors: Gradient.defaultOptions.colors,
         };
         this._flags = {
-            playing: true
+            playing: true,
         };
@@ -55,5 +54,8 @@ this._canvas = null;
         this.resize = () => {
-            var _a, _b, _c, _d;
-            const [densityX, densityY] = this.getOption('density');
-            this.width = (_b = (_a = this._canvas) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : window.innerWidth;
+            var _a, _b, _c, _d, _e, _f;
+            const [densityX, densityY] = this.getOption("density");
+            this.width =
+                (_b = (_a = this._canvas) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : window.innerWidth;
+            this.height =
+                (_d = (_c = this._canvas) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().height) !== null && _d !== void 0 ? _d : window.innerHeight;
             this._minigl.setSize(this.width, this.height);
@@ -63,14 +65,19 @@ this._minigl.setOrthographicCamera();
             this.ySegCount = Math.ceil(this.height * densityY);
-            (_c = this.mesh) === null || _c === void 0 ? void 0 : _c.geometry.setTopology(this.xSegCount, this.ySegCount);
-            (_d = this.mesh) === null || _d === void 0 ? void 0 : _d.geometry.setSize(this.width, this.height);
+            (_e = this.mesh) === null || _e === void 0 ? void 0 : _e.geometry.setTopology(this.xSegCount, this.ySegCount);
+            (_f = this.mesh) === null || _f === void 0 ? void 0 : _f.geometry.setSize(this.width, this.height);
             if (this.mesh) {
-                this.mesh.material.uniforms.u_shadow_power.value = this.width < 600 ? 5 : 6;
+                this.mesh.material.uniforms.u_shadow_power.value =
+                    this.width < this.height ? 5 : 6;
             }
         };
         this.animate = (event = 0) => {
-            const shouldSkipFrame = !!window.document.hidden || (!this.getFlag('playing') || (typeof event === 'number' ? event : parseInt(event, 10)) % 2 === 0);
-            let lastFrame = this.getFlag('lastFrame', 0);
+            var _a;
+            const shouldSkipFrame = !!window.document.hidden ||
+                !this.getFlag("playing") ||
+                (typeof event === "number" ? event : parseInt(event, 10)) % 2 === 0;
+            let lastFrame = this.getFlag("lastFrame", 0);
             if (!shouldSkipFrame) {
                 this.time += Math.min(event - lastFrame, 1000 / 15);
-                lastFrame = this.setFlag('lastFrame', event);
+                (_a = this.getOption("onTimeUpdate")) === null || _a === void 0 ? void 0 : _a(this.time);
+                lastFrame = this.setFlag("lastFrame", event);
                 if (this.mesh) {
@@ -82,7 +89,7 @@ this.mesh.material.uniforms.u_time.value = this.time;
             // @todo support static gradient.
-            if (lastFrame !== 0 && this.getOption('static')) {
+            if (lastFrame !== 0 && this.getOption("static")) {
                 this._minigl.render();
                 return this.disconnect();
             }
-            if ( /*this.getFlag('isIntersecting') && */this.getFlag('playing')) {
+            if ( /*this.getFlag('isIntersecting') && */this.getFlag("playing")) {
                 this.handle = requestAnimationFrame(this.animate);
@@ -92,4 +99,5 @@ }
         this.options = options;
-        this.setCanvas(this.findCanvas(this.getOption('canvas')));
+        this.setCanvas(this.findCanvas(this.getOption("canvas")));
         this._minigl = new MiniGL_1.default(this.getCanvas(), this.getCanvas().offsetWidth, this.getCanvas().offsetHeight);
+        this.time = this.getOption("time");
     }
@@ -104,3 +112,5 @@ getOption(name, defaultValue = undefined) {
         var _a;
-        const canvas = typeof selector === 'string' ? document.querySelector(selector) : selector;
+        const canvas = typeof selector === "string"
+            ? document.querySelector(selector)
+            : selector;
         return (_a = canvas) !== null && _a !== void 0 ? _a : null;
@@ -111,4 +121,4 @@ }
             this._canvas = canvas;
-            this._context = canvas.getContext('webgl', {
-                antialias: true
+            this._context = canvas.getContext("webgl", {
+                antialias: true,
             });
@@ -123,3 +133,3 @@ }
         if (!this._canvas) {
-            throw new Error('Missing Canvas. Pass the canvas to the Gradient constructor.');
+            throw new Error("Missing Canvas. Pass the canvas to the Gradient constructor.");
         }
@@ -132,3 +142,3 @@ return this._canvas;
     setFlag(name, value) {
-        return this._flags[name] = value;
+        return (this._flags[name] = value);
     }
@@ -141,4 +151,4 @@ getFlag(name, defaultValue = undefined) {
         this.scrollingTimeout = setTimeout(this.handleScrollEnd, this.scrollingRefreshDelay);
-        if (this.getFlag('playing')) {
-            this.setFlag('isScrolling', true);
+        if (this.getFlag("playing")) {
+            this.setFlag("isScrolling", true);
             this.pause();
@@ -148,4 +158,4 @@ }
     handleScrollEnd() {
-        this.setFlag('isScrolling', false);
-        if (this.getFlag('isIntersecting')) {
+        this.setFlag("isScrolling", false);
+        if (this.getFlag("isIntersecting")) {
             this.play();
@@ -155,7 +165,7 @@ }
     pause() {
-        this.setFlag('playing', false);
+        this.setFlag("playing", false);
     }
     play() {
         this.handle = requestAnimationFrame(this.animate);
-        this.setFlag('playing', true);
+        this.setFlag("playing", true);
     }
@@ -173,10 +183,17 @@ disconnect() {
          */
-        const colors = this.getOption('colors').map(hex => {
+        const colors = this.getOption("colors")
+            .map((hex) => {
             // Check if shorthand hex value was used and double the length so the conversion in normalizeColor will work.
             if (hex.length === 4) {
-                const hexTemp = hex.substr(1).split('').map(hexTemp => hexTemp + hexTemp).join('');
+                const hexTemp = hex
+                    .substr(1)
+                    .split("")
+                    .map((hexTemp) => hexTemp + hexTemp)
+                    .join("");
                 hex = `#${hexTemp}`;
             }
             return hex && `0x${hex.substr(1)}`;
-        }).filter(Boolean).map(this.normalizeColor);
+        })
+            .filter(Boolean)
+            .map(this.normalizeColor);
         this.uniforms = {
@@ -189,22 +206,23 @@ u_time: new Uniform_1.FloatUniform(this._minigl, 0),
                 noiseFreq: new Uniform_1.Vec2Uniform(this._minigl, [this.freqX, this.freqY]),
-                noiseSpeed: new Uniform_1.FloatUniform(this._minigl, 0.000005)
+                noiseSpeed: new Uniform_1.FloatUniform(this._minigl, 0.000005),
             }),
             u_vertDeform: new Uniform_1.StructUniform(this._minigl, {
-                incline: new Uniform_1.FloatUniform(this._minigl, Math.sin(this.getOption('angle')) / Math.cos(this.getOption('angle'))),
+                incline: new Uniform_1.FloatUniform(this._minigl, Math.sin(this.getOption("angle")) /
+                    Math.cos(this.getOption("angle"))),
                 offsetTop: new Uniform_1.FloatUniform(this._minigl, -0.5),
                 offsetBottom: new Uniform_1.FloatUniform(this._minigl, -0.5),
                 noiseFreq: new Uniform_1.Vec2Uniform(this._minigl, [3, 4]),
-                noiseAmp: new Uniform_1.FloatUniform(this._minigl, this.getOption('amplitude')),
+                noiseAmp: new Uniform_1.FloatUniform(this._minigl, this.getOption("amplitude")),
                 noiseSpeed: new Uniform_1.FloatUniform(this._minigl, 10),
                 noiseFlow: new Uniform_1.FloatUniform(this._minigl, 3),
-                noiseSeed: new Uniform_1.FloatUniform(this._minigl, this.seed)
+                noiseSeed: new Uniform_1.FloatUniform(this._minigl, this.seed),
             }, {
-                excludeFrom: 'fragment'
+                excludeFrom: "fragment",
             }),
             u_baseColor: new Uniform_1.Vec3Uniform(this._minigl, colors[0], {
-                excludeFrom: 'fragment'
+                excludeFrom: "fragment",
             }),
             u_waveLayers: new Uniform_1.ArrayUniform(this._minigl, [], {
-                excludeFrom: 'fragment'
-            })
+                excludeFrom: "fragment",
+            }),
         };
@@ -214,3 +232,6 @@ for (let e = 1; e < colors.length; e += 1) {
                 color: new Uniform_1.Vec3Uniform(this._minigl, colors[e]),
-                noiseFreq: new Uniform_1.Vec2Uniform(this._minigl, [2 + e / colors.length, 3 + e / colors.length]),
+                noiseFreq: new Uniform_1.Vec2Uniform(this._minigl, [
+                    2 + e / colors.length,
+                    3 + e / colors.length,
+                ]),
                 noiseSpeed: new Uniform_1.FloatUniform(this._minigl, 11 + 0.3 * e),
@@ -220,3 +241,3 @@ noiseFlow: new Uniform_1.FloatUniform(this._minigl, 6.5 + 0.3 * e),
                 noiseFloor: new Uniform_1.FloatUniform(this._minigl, 0.1),
-                noiseCeil: new Uniform_1.FloatUniform(this._minigl, 0.63 + 0.07 * e)
+                noiseCeil: new Uniform_1.FloatUniform(this._minigl, 0.63 + 0.07 * e),
             });
@@ -228,3 +249,3 @@ this.uniforms.u_waveLayers.value.push(waveLayerUniform);
             this.shaderFiles.blend,
-            this.shaderFiles.vertex
+            this.shaderFiles.vertex,
         ].join("\n\n");
@@ -235,5 +256,5 @@ return new Material_1.default(this._minigl, this.vertexShader, this.shaderFiles.fragment, this.uniforms);
         this.material = this.initMaterial();
-        this.geometry = new PlaneGeometry_1.default(this._minigl, 0, 0, 0, 0, 'xz');
+        this.geometry = new PlaneGeometry_1.default(this._minigl, 0, 0, 0, 0, "xz");
         this.mesh = new Mesh_1.default(this._minigl, this.geometry, this.material);
-        this.mesh.wireframe = this.getOption('wireframe');
+        this.mesh.wireframe = this.getOption("wireframe");
     }
@@ -248,3 +269,3 @@ updateFrequency(e) {
     init() {
-        const loadedClass = this.getOption('loadedClass');
+        const loadedClass = this.getOption("loadedClass");
         if (loadedClass) {
@@ -256,3 +277,3 @@ this.getCanvas().classList.add(loadedClass);
         this.handle = requestAnimationFrame(this.animate);
-        window.addEventListener('resize', this.resize);
+        window.addEventListener("resize", this.resize);
     }
@@ -262,5 +283,5 @@ normalizeColor(hexCode) {
         return [
-            (hex >> 16 & 255) / 255,
-            (hex >> 8 & 255) / 255,
-            (255 & hex) / 255
+            ((hex >> 16) & 255) / 255,
+            ((hex >> 8) & 255) / 255,
+            (255 & hex) / 255,
         ];
@@ -271,11 +292,12 @@ }
     canvas: null,
-    colors: ['#f00', '#0f0', '#00f'],
+    colors: ["#f00", "#0f0", "#00f"],
     wireframe: false,
-    density: [.06, .16],
+    density: [0.06, 0.16],
+    time: 1253106,
     angle: 0,
     amplitude: 320,
-    static: false, // Enable non-animating gradient
-    loadedClass: 'is-loaded',
+    static: false,
+    loadedClass: "is-loaded",
 };
 exports.default = Gradient;
 //# sourceMappingURL=Gradient.js.map

package.json

 {
   "name": "aurora-gradient",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "A forked version of thelevicole/stripe-gradient adapted for TypeScript",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

93898

increased by0.55%

Lines of code

1394

increased by1.68%

No dependency changes