Changeset 3441664

Timestamp:

01/17/2026 06:24:54 PM (5 weeks ago)

Author:

svisciano

Message:

Release 0.1.1

Location:

svisciano-snowfall-effect

Files:

• tags/0.1.1 (added)
• tags/0.1.1/admin (added)
• tags/0.1.1/admin/index.php (added)
• tags/0.1.1/admin/settings-page.php (added)
• tags/0.1.1/assets (added)
• tags/0.1.1/assets/css (added)
• tags/0.1.1/assets/css/index.php (added)
• tags/0.1.1/assets/css/settings-page.css (added)
• tags/0.1.1/assets/css/settings-page.min.css (added)
• tags/0.1.1/assets/index.php (added)
• tags/0.1.1/assets/js (added)
• tags/0.1.1/assets/js/color-picker.js (added)
• tags/0.1.1/assets/js/color-picker.min.js (added)
• tags/0.1.1/assets/js/index.php (added)
• tags/0.1.1/assets/js/settings-page.js (added)
• tags/0.1.1/assets/js/settings-page.min.js (added)
• tags/0.1.1/assets/js/svis-snow.js (added)
• tags/0.1.1/assets/js/svis-snow.min.js (added)
• tags/0.1.1/config (added)
• tags/0.1.1/config/index.php (added)
• tags/0.1.1/config/settings-fields.php (added)
• tags/0.1.1/config/settings-presets.php (added)
• tags/0.1.1/includes (added)
• tags/0.1.1/includes/index.php (added)
• tags/0.1.1/includes/svis-framework.php (added)
• tags/0.1.1/languages (added)
• tags/0.1.1/languages/index.php (added)
• tags/0.1.1/readme.txt (added)
• tags/0.1.1/svisciano-snowfall-effect.php (added)
• trunk/assets/js/svis-snow.js (modified) (1 diff)
• trunk/assets/js/svis-snow.min.js (modified) (1 diff)
• trunk/config/settings-presets.php (modified) (3 diffs)
• trunk/readme.txt (modified) (3 diffs)
• trunk/svisciano-snowfall-effect.php (modified) (1 diff)

svisciano-snowfall-effect/trunk/assets/js/svis-snow.js

@@ -1 +1 @@
 if (SVIS_SNOW_DATA.enabled === "1") {
-    const DEBUG_MODE = false;
-    const startTime = performance.now();
-    const TABLE_SIZE = 4096;
-    const TWO_PI = Math.PI * 2;
-    const INV_TWO_PI = 1 / TWO_PI;
-    const sinTable = new Float32Array(TABLE_SIZE);
-    const cosTable = new Float32Array(TABLE_SIZE);
-    for (let i = 0; i < TABLE_SIZE; i++) {
-        const a = i / TABLE_SIZE * TWO_PI;
-        sinTable[i] = Math.sin(a);
-        cosTable[i] = Math.cos(a);
-    }
-    let isScrollable = SVIS_SNOW_DATA.scroll_with_page === "1";
-    let currentWidth = document.documentElement.clientWidth;
-    let currentHeight = isScrollable ? document.documentElement.scrollHeight : document.documentElement.clientHeight;
-    let deviceRatio = window.devicePixelRatio || 1;
-    const isMobile = navigator.hardwareConcurrency <= 2 || /Mobile|Android/i.test(navigator.userAgent);
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d", {
-        alpha: true
+    document.addEventListener("DOMContentLoaded", function() {
+        const DEBUG_MODE = false;
+        const startTime = performance.now();
+        const TABLE_SIZE = 4096;
+        const TWO_PI = Math.PI * 2;
+        const INV_TWO_PI = 1 / TWO_PI;
+        const sinTable = new Float32Array(TABLE_SIZE);
+        const cosTable = new Float32Array(TABLE_SIZE);
+        for (let i = 0; i < TABLE_SIZE; i++) {
+            const a = i / TABLE_SIZE * TWO_PI;
+            sinTable[i] = Math.sin(a);
+            cosTable[i] = Math.cos(a);
+        }
+        let isScrollable = SVIS_SNOW_DATA.scroll_with_page === "1";
+        let currentWidth = document.documentElement.clientWidth;
+        let currentHeight = isScrollable ? document.documentElement.scrollHeight : document.documentElement.clientHeight;
+        let deviceRatio = window.devicePixelRatio || 1;
+        const isMobile = navigator.hardwareConcurrency <= 2 || /Mobile|Android/i.test(navigator.userAgent);
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d", {
+            alpha: true
+        });
+        canvas.style.position = isScrollable ? "absolute" : "fixed";
+        canvas.style.top = "0";
+        canvas.style.left = "0";
+        canvas.style.pointerEvents = "none";
+        canvas.style.zIndex = SVIS_SNOW_DATA.z_index || 9999;
+        let VERTICAL_AREA = 0;
+        let MAX_FLAKES = 0;
+        const flakes = [];
+        function parseVerticalArea(value) {
+            const totalHeight = currentHeight;
+            if (!value) return totalHeight;
+            value = value.trim();
+            if (value.endsWith("%")) {
+                let num = parseFloat(value.replace("%", ""));
+                if (isNaN(num)) return totalHeight;
+                num = Math.min(Math.max(num, 0), 100);
+                return totalHeight * (num / 100);
+            }
+            if (value.endsWith("px")) {
+                let num = parseFloat(value.replace("px", ""));
+                return isNaN(num) ? totalHeight : num;
+            }
+            let num = parseFloat(value);
+            return isNaN(num) ? totalHeight : num;
+        }
+        const QUALITY_MULTIPLIER = isMobile ? 1 : 1.2;
+        const flakeCache = Object.create(null);
+        function getFlakeCanvas(size, color, char) {
+            const dpr = window.devicePixelRatio || 1;
+            const q = dpr * QUALITY_MULTIPLIER;
+            const key = `${size}_${color}_${char}_${q}`;
+            if (flakeCache[key]) return flakeCache[key];
+            const c = document.createElement("canvas");
+            const s = Math.ceil(size * 2);
+            c.width = s * q;
+            c.height = s * q;
+            c.style.width = s + "px";
+            c.style.height = s + "px";
+            const cctx = c.getContext("2d");
+            cctx.scale(q, q);
+            cctx.fillStyle = color;
+            cctx.textAlign = "center";
+            cctx.textBaseline = "middle";
+            cctx.font = `${size}px serif`;
+            cctx.fillText(char, s / 2, s / 2);
+            flakeCache[key] = c;
+            return c;
+        }
+        function rand(min, max) {
+            min = parseFloat(min);
+            max = parseFloat(max);
+            if (isNaN(min) || isNaN(max)) return 0;
+            return Math.random() * (max - min) + min;
+        }
+        const clamp = (value, fieldId) => {
+            const meta = SVIS_SNOW_DATA._field_meta?.[fieldId];
+            if (!meta) return value;
+            let result = value;
+            if (meta.min !== null) result = Math.max(meta.min, result);
+            if (meta.max !== null) result = Math.min(meta.max, result);
+            return result;
+        };
+        function angleToIndex(angle) {
+            let idx = Math.floor(angle % TWO_PI * INV_TWO_PI * TABLE_SIZE);
+            if (idx < 0) idx += TABLE_SIZE;
+            return idx;
+        }
+        let globalGustIntensity = clamp(parseFloat(SVIS_SNOW_DATA.global_gust_strength) || 0, "global_gust_strength");
+        let globalGustX = 0;
+        let globalGustY = 0;
+        let globalGustTimer = 0;
+        let nextGlobalGust = rand(2, 5);
+        function updateGlobalGusts(delta) {
+            globalGustIntensity = clamp(parseFloat(SVIS_SNOW_DATA.global_gust_strength) || 0, "global_gust_strength") * .2;
+            if (globalGustIntensity <= 0) {
+                globalGustX = 0;
+                globalGustY = 0;
+                globalGustTimer = 0;
+                return;
+            }
+            globalGustTimer += delta;
+            if (globalGustTimer > nextGlobalGust) {
+                globalGustX = globalGustIntensity / 10 * rand(-3, 3);
+                globalGustY = globalGustIntensity / 10 * rand(-1.5, 1.5);
+                const maxInterval = 15;
+                const minInterval = 4;
+                const gustFrequency = maxInterval - globalGustIntensity / 10 * (maxInterval - minInterval);
+                nextGlobalGust = globalGustTimer + rand(gustFrequency * .8, gustFrequency * 1.2) * 3;
+            }
+            globalGustX *= .993;
+            globalGustY *= .993;
+        }
+        class Snowflake {
+            isAlive=false;
+            constructor(firstSpawn = false, spawnIndexY = 0, spawnIndexX = 0, totalSpawning = 1) {
+                this.spawn(firstSpawn, spawnIndexY, spawnIndexX, totalSpawning);
+            }
+            spawn(firstSpawn = false, spawnIndexY = 0, spawnIndexX = 0, totalSpawning = 1) {
+                this.size = Math.round(clamp(rand(SVIS_SNOW_DATA.flake_min_size, SVIS_SNOW_DATA.flake_max_size), "flake_min_size")) * 1.5;
+                this.img = getFlakeCanvas(this.size, SVIS_SNOW_DATA.flake_color, SVIS_SNOW_DATA.flake_type);
+                if (firstSpawn && totalSpawning > 1) {
+                    const sliceHeight = VERTICAL_AREA / totalSpawning;
+                    const sliceStartY = spawnIndexY * sliceHeight;
+                    this.y = rand(sliceStartY, sliceStartY + sliceHeight);
+                    const sliceWidth = currentWidth / totalSpawning;
+                    const sliceStartX = spawnIndexX * sliceWidth;
+                    this.x = rand(sliceStartX, sliceStartX + sliceWidth);
+                } else {
+                    this.x = rand(0, currentWidth);
+                    this.y = firstSpawn ? rand(0, VERTICAL_AREA) : -this.size * rand(1, 2);
+                }
+                this.verticalWrapLimit = -this.size * 2 * rand(1, 2);
+                this.baseWindForce = clamp(rand(SVIS_SNOW_DATA.min_wind_speed, SVIS_SNOW_DATA.max_wind_speed), "min_wind_speed") * .15;
+                this.gravityForce = clamp(rand(SVIS_SNOW_DATA.min_fall_speed, SVIS_SNOW_DATA.max_fall_speed), "min_fall_speed") * .1;
+                this.vx = this.baseWindForce;
+                this.vy = this.gravityForce;
+                this.rotation = rand(0, TWO_PI);
+                this.rotationSpeed = clamp(rand(SVIS_SNOW_DATA.min_rotation_speed, SVIS_SNOW_DATA.max_rotation_speed) * .3, "min_rotation_speed");
+                const depthMin = SVIS_SNOW_DATA._field_meta?.flake_depth?.min ?? 0;
+                const depthMax = SVIS_SNOW_DATA._field_meta?.flake_depth?.max ?? 10;
+                let depthValue = clamp(parseFloat(SVIS_SNOW_DATA.flake_depth) || 0, "flake_depth");
+                depthValue = Math.max(depthMin, Math.min(depthMax, depthValue));
+                const depthNormalized = (depthValue - depthMin) / (depthMax - depthMin);
+                const opacityMin = .1;
+                const opacityMax = 1;
+                const lowerLimit = opacityMin + (1 - depthNormalized) * (opacityMax - opacityMin);
+                this.initialOpacity = rand(lowerLimit, opacityMax);
+                this.opacity = this.initialOpacity;
+                this.fadeTop = VERTICAL_AREA + this.size / 2 + rand(0, 0);
+                this.fadeDistance = this.size / 2 + rand(0, this.size);
+                this.fadeBottom = this.fadeTop + this.fadeDistance;
+                this.turbulenceLevel = clamp(parseFloat(SVIS_SNOW_DATA.turbulence) || 0, "turbulence") * .4;
+                if (this.turbulenceLevel > 0) {
+                    this.turbulenceTimer = rand(0, 10);
+                    this.turbulenceOffset = rand(0, TWO_PI);
+                    this.turbulenceFreqX = rand(1.5, 3.5);
+                    this.turbulenceFreqY = rand(1, 2.5);
+                    this.nextTurbulenceChange = rand(1, 3);
+                    this.currentGustX = 0;
+                    this.targetGustX = 0;
+                    this.currentGustY = 0;
+                    this.targetGustY = 0;
+                }
+                if (globalGustIntensity > 0) {
+                    this.currentGlobalGustX = 0;
+                    this.currentGlobalGustY = 0;
+                    const maxPossibleSize = SVIS_SNOW_DATA?._field_meta?.flake_max_size?.max || 100;
+                    const normalizedSize = Math.min(1, this.size / (maxPossibleSize * 1.5));
+                    this.globalGustSensitivity = rand(.8, 1.5) * (1 - Math.pow(normalizedSize, 1.5));
+                }
+            }
+            update(delta) {
+                let targetVx = this.baseWindForce;
+                let targetVy = this.gravityForce;
+                if (this.turbulenceLevel > 0) {
+                    this.turbulenceTimer += delta;
+                    if (this.turbulenceTimer > this.nextTurbulenceChange) {
+                        this.targetGustX = this.turbulenceLevel / 10 * rand(-2, 2);
+                        this.targetGustY = this.turbulenceLevel / 10 * rand(-1, 1);
+                        const gustFrequency = Math.max(.5, 5 - this.turbulenceLevel / 10);
+                        this.nextTurbulenceChange = this.turbulenceTimer + rand(gustFrequency * .8, gustFrequency * 1.5);
+                    }
+                    const lerpSpeed = 4 * delta;
+                    this.currentGustX += (this.targetGustX - this.currentGustX) * lerpSpeed;
+                    this.currentGustY += (this.targetGustY - this.currentGustY) * lerpSpeed;
+                    const baseVariation = this.turbulenceLevel / 10 * 2.5;
+                    const waveX = Math.sin(this.turbulenceTimer * this.turbulenceFreqX + this.turbulenceOffset) * baseVariation;
+                    const waveY = Math.cos(this.turbulenceTimer * this.turbulenceFreqY + this.turbulenceOffset * .7) * baseVariation * .3;
+                    targetVx += this.currentGustX + waveX;
+                    targetVy += this.currentGustY + waveY;
+                }
+                if (globalGustIntensity > 0) {
+                    const globalLerpSpeed = .5 * delta;
+                    this.currentGlobalGustX += (globalGustX - this.currentGlobalGustX) * globalLerpSpeed;
+                    this.currentGlobalGustY += (globalGustY - this.currentGlobalGustY) * globalLerpSpeed;
+                    const globalInfluence = 4e4;
+                    targetVx += this.currentGlobalGustX * globalInfluence * this.globalGustSensitivity * delta;
+                    targetVy += this.currentGlobalGustY * globalInfluence * this.globalGustSensitivity * delta;
+                }
+                this.vx = targetVx;
+                this.vy = targetVy;
+                const TARGET_FPS = 60;
+                const FRAME_TIME = 1 / TARGET_FPS;
+                const deltaNorm = Math.min(3, delta / FRAME_TIME);
+                this.x += this.vx * deltaNorm;
+                this.y += this.vy * deltaNorm;
+                this.rotation += this.rotationSpeed * delta;
+                const w = currentWidth;
+                const h = VERTICAL_AREA;
+                if (this.x < -this.size) {
+                    this.x = w + this.size;
+                    this.y = Math.random() * h;
+                }
+                if (this.x > w + this.size) {
+                    this.x = -this.size;
+                    this.y = Math.random() * h;
+                }
+                if (this.y < this.verticalWrapLimit) {
+                    this.x = Math.random() * w;
+                    this.y = this.fadeBottom - .1;
+                }
+                let t = (this.y - this.fadeTop) / (this.fadeBottom - this.fadeTop);
+                t = Math.max(0, Math.min(1, t));
+                this.opacity = (1 - t) * this.initialOpacity;
+                this.isAlive = this.opacity > 0;
+            }
+            draw() {
+                ctx.globalAlpha = this.opacity;
+                if (this.rotation !== 0 && this.size > 8) {
+                    const ridx = angleToIndex(this.rotation);
+                    const cos = cosTable[ridx];
+                    const sin = sinTable[ridx];
+                    const d = deviceRatio;
+                    ctx.setTransform(cos * d, sin * d, -sin * d, cos * d, this.x * d, this.y * d);
+                    ctx.drawImage(this.img, -this.size, -this.size, this.size * 2, this.size * 2);
+                } else {
+                    const d = deviceRatio;
+                    ctx.setTransform(d, 0, 0, d, (this.x - this.size) * d, (this.y - this.size) * d);
+                    ctx.drawImage(this.img, 0, 0, this.size * 2, this.size * 2);
+                }
+                ctx.globalAlpha = 1;
+            }
+        }
+        function resizeCanvas() {
+            deviceRatio = window.devicePixelRatio || 1;
+            const isScrollable = SVIS_SNOW_DATA.scroll_with_page === "1";
+            currentWidth = document.documentElement.clientWidth;
+            currentHeight = isScrollable ? document.documentElement.scrollHeight : document.documentElement.clientHeight;
+            canvas.width = Math.round(currentWidth * deviceRatio);
+            canvas.height = Math.round(currentHeight * deviceRatio);
+            canvas.style.width = currentWidth + "px";
+            canvas.style.height = currentHeight + "px";
+            VERTICAL_AREA = parseVerticalArea(SVIS_SNOW_DATA.vertical_area);
+            const screenArea = currentWidth * currentHeight;
+            const performanceMultiplier = isMobile ? .7 : 1;
+            const newMaxFlakes = Math.max(5, Math.round(screenArea / 4e5 * parseInt(SVIS_SNOW_DATA.flakes_density) * performanceMultiplier));
+            if (newMaxFlakes > MAX_FLAKES) {
+                const toAdd = newMaxFlakes - MAX_FLAKES;
+                const isInitialSpawn = flakes.length === 0;
+                const xIndices = Array.from({
+                    length: toAdd
+                }, (_, i) => i);
+                if (isInitialSpawn) {
+                    for (let i = xIndices.length - 1; i > 0; i--) {
+                        const j = Math.floor(Math.random() * (i + 1));
+                        [xIndices[i], xIndices[j]] = [ xIndices[j], xIndices[i] ];
+                    }
+                }
+                for (let i = 0; i < toAdd; i++) {
+                    flakes.push(new Snowflake(isInitialSpawn, i, xIndices[i], toAdd));
+                }
+            }
+            if (newMaxFlakes < MAX_FLAKES) {
+                const aliveFlakes = flakes.filter(f => f.isAlive);
+                const toDeactivate = aliveFlakes.length - newMaxFlakes;
+                if (toDeactivate > 0) {
+                    aliveFlakes.sort((a, b) => b.y - a.y).slice(0, toDeactivate).forEach(f => {
+                        f.isFadingOut = true;
+                    });
+                }
+            }
+            MAX_FLAKES = newMaxFlakes;
+        }
+        resizeCanvas();
+        window.addEventListener("resize", resizeCanvas);
+        document.body.appendChild(canvas);
+        let frameCount = 0;
+        let fpsHistory = [];
+        let lastFpsCheck = performance.now();
+        function updatePerformanceLevel(currentFps) {
+            fpsHistory.push(currentFps);
+            if (fpsHistory.length > 20) fpsHistory.shift();
+            const avgFps = Math.min(60, Math.max(0, fpsHistory.reduce((a, b) => a + b) / fpsHistory.length));
+            if (avgFps < 30) {
+                const aliveFlakes = flakes.filter(f => f.isAlive).length;
+                if (aliveFlakes > MAX_FLAKES * .3) {
+                    let toDeactivate = Math.min(2, aliveFlakes - Math.round(MAX_FLAKES * .3));
+                    const sortedFlakes = flakes.map((flake, index) => ({
+                        flake: flake,
+                        index: index
+                    })).filter(item => item.flake.isAlive).sort((a, b) => a.flake.y - b.flake.y);
+                    for (let i = 0; i < toDeactivate && i < sortedFlakes.length; i++) {
+                        sortedFlakes[i].flake.isFadingOut = true;
+                    }
+                }
+            }
+        }
+        let lastTime = performance.now();
+        function animate(now) {
+            let delta = (now - lastTime) / 1e3 || 0;
+            delta = Math.min(delta, .05);
+            lastTime = now;
+            frameCount++;
+            if (now - lastFpsCheck > 1e3) {
+                const currentFps = frameCount;
+                updatePerformanceLevel(currentFps);
+                frameCount = 0;
+                lastFpsCheck = now;
+            }
+            ctx.setTransform(deviceRatio, 0, 0, deviceRatio, 0, 0);
+            ctx.clearRect(0, 0, currentWidth, currentHeight);
+            updateGlobalGusts(delta);
+            for (let i = flakes.length - 1; i >= 0; i--) {
+                const fl = flakes[i];
+                fl.update(delta);
+                if (!fl.isAlive) {
+                    flakes.splice(i, 1);
+                    continue;
+                }
+                fl.draw();
+            }
+            const aliveCount = flakes.filter(f => f.isAlive).length;
+            if (aliveCount < MAX_FLAKES) {
+                const toAdd = MAX_FLAKES - aliveCount;
+                for (let i = 0; i < toAdd; i++) {
+                    flakes.push(new Snowflake);
+                }
+            }
+            drawDebugInfo();
+            requestAnimationFrame(animate);
+        }
+        let outOfBoundsCount = 0;
+        function drawDebugInfo() {
+            if (!DEBUG_MODE) return;
+            const scrollYOffset = isScrollable ? window.scrollY : 0;
+            const now = performance.now();
+            let ms = now - startTime;
+            const hours = Math.floor(ms / 36e5);
+            ms %= 36e5;
+            const minutes = Math.floor(ms / 6e4);
+            ms %= 6e4;
+            const seconds = Math.floor(ms / 1e3);
+            const deci = Math.floor(ms % 1e3 / 100);
+            const uptime = String(hours).padStart(2, "0") + ":" + String(minutes).padStart(2, "0") + ":" + String(seconds).padStart(2, "0") + "." + deci;
+            const avgFps = fpsHistory.length > 0 ? Math.round(fpsHistory.reduce((a, b) => a + b) / fpsHistory.length) : 0;
+            const totalFlakes = flakes.length;
+            const aliveFlakes = flakes.filter(f => f.isAlive).length;
+            const renderEfficiency = Math.round(aliveFlakes / totalFlakes * 100);
+            const debugLines = [ `Uptime: ${uptime}`, ``, `FPS: ${avgFps}`, `Flakes: ${totalFlakes}/${MAX_FLAKES} (alive: ${aliveFlakes})`, `Render efficiency: ${renderEfficiency}%`, `Screen: ${currentWidth}x${currentHeight}`, `Canvas: ${canvas.width}x${canvas.height}`, `Device ratio: ${deviceRatio}`, `Vertical Area: ${VERTICAL_AREA}px`, `Mobile device: ${isMobile ? "Yes" : "No"}`, ``, `Out of bounds (SafeArea): ${outOfBoundsCount}` ];
+            const padding = 40;
+            const lineHeight = 18;
+            const boxWidth = 300;
+            const boxHeight = debugLines.length * lineHeight + 8;
+            ctx.save();
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
+            ctx.scale(deviceRatio, deviceRatio);
+            ctx.globalAlpha = 1;
+            ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
+            ctx.fillRect(padding / 2, padding + scrollYOffset, boxWidth, boxHeight);
+            debugLines.forEach((line, i) => {
+                if (line.startsWith("Out of bounds") && outOfBoundsCount > 0) {
+                    ctx.fillStyle = "red";
+                    ctx.font = "bold 14px monospace";
+                } else {
+                    ctx.fillStyle = "#00ff00";
+                    ctx.font = "14px monospace";
+                }
+                ctx.fillText(line, padding, padding + lineHeight * (i + 1) + scrollYOffset);
+            });
+            ctx.strokeStyle = "yellow";
+            ctx.lineWidth = 1;
+            ctx.setLineDash([ 5, 5 ]);
+            ctx.beginPath();
+            ctx.moveTo(0, VERTICAL_AREA);
+            ctx.lineTo(currentWidth, VERTICAL_AREA);
+            ctx.stroke();
+            ctx.fillStyle = "yellow";
+            ctx.font = "12px monospace";
+            ctx.fillText("VERTICAL_AREA", 5, VERTICAL_AREA - 5);
+            ctx.restore();
+        }
+        function checkSafeArea(flakeArray, canvasWidth, canvasHeight) {
+            const safe = {
+                minX: -canvasWidth * .5,
+                maxX: canvasWidth * 1.5,
+                minY: -canvasHeight * .5,
+                maxY: canvasHeight * 1.5
+            };
+            let removedCount = 0;
+            for (let i = flakeArray.length - 1; i >= 0; i--) {
+                const f = flakeArray[i];
+                if (f.x < safe.minX || f.x > safe.maxX || f.y < safe.minY || f.y > safe.maxY) {
+                    flakeArray.splice(i, 1);
+                    removedCount++;
+                }
+            }
+            outOfBoundsCount += removedCount;
+        }
+        setInterval(() => {
+            checkSafeArea(flakes, currentWidth, VERTICAL_AREA);
+        }, 1e4);
+        requestAnimationFrame(animate);
     });
-    canvas.style.position = isScrollable ? "absolute" : "fixed";
-    canvas.style.top = "0";
-    canvas.style.left = "0";
-    canvas.style.pointerEvents = "none";
-    canvas.style.zIndex = SVIS_SNOW_DATA.z_index || 9999;
-    let VERTICAL_AREA = 0;
-    let MAX_FLAKES = 0;
-    const flakes = [];
-    function parseVerticalArea(value) {
-        const totalHeight = currentHeight;
-        if (!value) return totalHeight;
-        value = value.trim();
-        if (value.endsWith("%")) {
-            let num = parseFloat(value.replace("%", ""));
-            if (isNaN(num)) return totalHeight;
-            num = Math.min(Math.max(num, 0), 100);
-            return totalHeight * (num / 100);
-        }
-        if (value.endsWith("px")) {
-            let num = parseFloat(value.replace("px", ""));
-            return isNaN(num) ? totalHeight : num;
-        }
-        let num = parseFloat(value);
-        return isNaN(num) ? totalHeight : num;
-    }
-    const flakeCache = Object.create(null);
-    function getFlakeCanvas(size, color, char) {
-        const key = `${size}_${color}_${char}`;
-        if (flakeCache[key]) return flakeCache[key];
-        const c = document.createElement("canvas");
-        const s = Math.ceil(size * 2);
-        c.width = s;
-        c.height = s;
-        const cctx = c.getContext("2d");
-        cctx.fillStyle = color;
-        cctx.textAlign = "center";
-        cctx.textBaseline = "middle";
-        cctx.font = `${size}px serif`;
-        cctx.fillText(char, s / 2, s / 2);
-        flakeCache[key] = c;
-        return c;
-    }
-    function rand(min, max) {
-        min = parseFloat(min);
-        max = parseFloat(max);
-        if (isNaN(min) || isNaN(max)) return 0;
-        return Math.random() * (max - min) + min;
-    }
-    const clamp = (value, fieldId) => {
-        const meta = SVIS_SNOW_DATA._field_meta?.[fieldId];
-        if (!meta) return value;
-        let result = value;
-        if (meta.min !== null) result = Math.max(meta.min, result);
-        if (meta.max !== null) result = Math.min(meta.max, result);
-        return result;
-    };
-    function angleToIndex(angle) {
-        let idx = Math.floor(angle % TWO_PI * INV_TWO_PI * TABLE_SIZE);
-        if (idx < 0) idx += TABLE_SIZE;
-        return idx;
-    }
-    let globalGustIntensity = clamp(parseFloat(SVIS_SNOW_DATA.global_gust_strength) || 0, "global_gust_strength");
-    let globalGustX = 0;
-    let globalGustY = 0;
-    let globalGustTimer = 0;
-    let nextGlobalGust = rand(2, 5);
-    function updateGlobalGusts(delta) {
-        globalGustIntensity = clamp(parseFloat(SVIS_SNOW_DATA.global_gust_strength) || 0, "global_gust_strength");
-        if (globalGustIntensity <= 0) {
-            globalGustX = 0;
-            globalGustY = 0;
-            globalGustTimer = 0;
-            return;
-        }
-        globalGustTimer += delta;
-        if (globalGustTimer > nextGlobalGust) {
-            globalGustX = globalGustIntensity / 10 * rand(-3, 3);
-            globalGustY = globalGustIntensity / 10 * rand(-1.5, 1.5);
-            const maxInterval = 15;
-            const minInterval = 4;
-            const gustFrequency = maxInterval - globalGustIntensity / 10 * (maxInterval - minInterval);
-            nextGlobalGust = globalGustTimer + rand(gustFrequency * .8, gustFrequency * 1.2) * 3;
-        }
-        globalGustX *= .993;
-        globalGustY *= .993;
-    }
-    class Snowflake {
-        isAlive=false;
-        constructor(firstSpawn = false, spawnIndexY = 0, spawnIndexX = 0, totalSpawning = 1) {
-            this.spawn(firstSpawn, spawnIndexY, spawnIndexX, totalSpawning);
-        }
-        spawn(firstSpawn = false, spawnIndexY = 0, spawnIndexX = 0, totalSpawning = 1) {
-            this.size = Math.round(clamp(rand(SVIS_SNOW_DATA.flake_min_size, SVIS_SNOW_DATA.flake_max_size), "flake_min_size")) * 1.5;
-            this.img = getFlakeCanvas(this.size, SVIS_SNOW_DATA.flake_color, SVIS_SNOW_DATA.flake_type);
-            if (firstSpawn && totalSpawning > 1) {
-                const sliceHeight = VERTICAL_AREA / totalSpawning;
-                const sliceStartY = spawnIndexY * sliceHeight;
-                this.y = rand(sliceStartY, sliceStartY + sliceHeight);
-                const sliceWidth = currentWidth / totalSpawning;
-                const sliceStartX = spawnIndexX * sliceWidth;
-                this.x = rand(sliceStartX, sliceStartX + sliceWidth);
-            } else {
-                this.x = rand(0, currentWidth);
-                this.y = firstSpawn ? rand(0, VERTICAL_AREA) : -this.size * rand(1, 2);
-            }
-            this.verticalWrapLimit = -this.size * 2 * rand(1, 2);
-            this.baseWindForce = clamp(rand(SVIS_SNOW_DATA.min_wind_speed, SVIS_SNOW_DATA.max_wind_speed), "min_wind_speed") * 1.5;
-            this.gravityForce = clamp(rand(SVIS_SNOW_DATA.min_fall_speed, SVIS_SNOW_DATA.max_fall_speed), "min_fall_speed") * 1;
-            this.vx = this.baseWindForce;
-            this.vy = this.gravityForce;
-            this.rotation = rand(0, TWO_PI);
-            this.rotationSpeed = clamp(rand(SVIS_SNOW_DATA.min_rotation_speed, SVIS_SNOW_DATA.max_rotation_speed) * .1, "min_rotation_speed");
-            const depthMin = SVIS_SNOW_DATA._field_meta?.flake_depth?.min ?? 0;
-            const depthMax = SVIS_SNOW_DATA._field_meta?.flake_depth?.max ?? 10;
-            let depthValue = clamp(parseFloat(SVIS_SNOW_DATA.flake_depth) || 0, "flake_depth");
-            depthValue = Math.max(depthMin, Math.min(depthMax, depthValue));
-            const depthNormalized = (depthValue - depthMin) / (depthMax - depthMin);
-            const opacityMin = .1;
-            const opacityMax = 1;
-            const lowerLimit = opacityMin + (1 - depthNormalized) * (opacityMax - opacityMin);
-            this.initialOpacity = rand(lowerLimit, opacityMax);
-            this.opacity = this.initialOpacity;
-            this.fadeTop = VERTICAL_AREA + this.size / 2 + rand(0, 0);
-            this.fadeDistance = this.size / 2 + rand(0, this.size);
-            this.fadeBottom = this.fadeTop + this.fadeDistance;
-            this.turbulenceLevel = clamp(parseFloat(SVIS_SNOW_DATA.turbulence) || 0, "turbulence") * 4;
-            if (this.turbulenceLevel > 0) {
-                this.turbulenceTimer = rand(0, 10);
-                this.turbulenceOffset = rand(0, TWO_PI);
-                this.turbulenceFreqX = rand(1.5, 3.5);
-                this.turbulenceFreqY = rand(1, 2.5);
-                this.nextTurbulenceChange = rand(1, 3);
-                this.currentGustX = 0;
-                this.targetGustX = 0;
-                this.currentGustY = 0;
-                this.targetGustY = 0;
-            }
-            if (globalGustIntensity > 0) {
-                this.currentGlobalGustX = 0;
-                this.currentGlobalGustY = 0;
-                const maxPossibleSize = SVIS_SNOW_DATA?._field_meta?.flake_max_size?.max || 100;
-                const normalizedSize = Math.min(1, this.size / (maxPossibleSize * 1.5));
-                this.globalGustSensitivity = rand(.8, 1.5) * (1 - Math.pow(normalizedSize, 1.5));
-            }
-        }
-        update(delta) {
-            let targetVx = this.baseWindForce;
-            let targetVy = this.gravityForce;
-            if (this.turbulenceLevel > 0) {
-                this.turbulenceTimer += delta;
-                if (this.turbulenceTimer > this.nextTurbulenceChange) {
-                    this.targetGustX = this.turbulenceLevel / 10 * rand(-2, 2);
-                    this.targetGustY = this.turbulenceLevel / 10 * rand(-1, 1);
-                    const gustFrequency = Math.max(.5, 5 - this.turbulenceLevel / 10);
-                    this.nextTurbulenceChange = this.turbulenceTimer + rand(gustFrequency * .8, gustFrequency * 1.5);
-                }
-                const lerpSpeed = 4 * delta;
-                this.currentGustX += (this.targetGustX - this.currentGustX) * lerpSpeed;
-                this.currentGustY += (this.targetGustY - this.currentGustY) * lerpSpeed;
-                const baseVariation = this.turbulenceLevel / 10 * 2.5;
-                const waveX = Math.sin(this.turbulenceTimer * this.turbulenceFreqX + this.turbulenceOffset) * baseVariation;
-                const waveY = Math.cos(this.turbulenceTimer * this.turbulenceFreqY + this.turbulenceOffset * .7) * baseVariation * .3;
-                targetVx += this.currentGustX + waveX;
-                targetVy += this.currentGustY + waveY;
-            }
-            if (globalGustIntensity > 0) {
-                const globalLerpSpeed = .5 * delta;
-                this.currentGlobalGustX += (globalGustX - this.currentGlobalGustX) * globalLerpSpeed;
-                this.currentGlobalGustY += (globalGustY - this.currentGlobalGustY) * globalLerpSpeed;
-                const globalInfluence = 4e4;
-                targetVx += this.currentGlobalGustX * globalInfluence * this.globalGustSensitivity * delta;
-                targetVy += this.currentGlobalGustY * globalInfluence * this.globalGustSensitivity * delta;
-            }
-            this.vx = targetVx;
-            this.vy = targetVy;
-            this.x += this.vx * delta * 6;
-            this.y += this.vy * delta * 6;
-            this.rotation += this.rotationSpeed * delta;
-            const w = currentWidth;
-            const h = VERTICAL_AREA;
-            if (this.x < -this.size) {
-                this.x = w + this.size;
-                this.y = Math.random() * h;
-            }
-            if (this.x > w + this.size) {
-                this.x = -this.size;
-                this.y = Math.random() * h;
-            }
-            if (this.y < this.verticalWrapLimit) {
-                this.x = Math.random() * w;
-                this.y = this.fadeBottom - .1;
-            }
-            let t = (this.y - this.fadeTop) / (this.fadeBottom - this.fadeTop);
-            t = Math.max(0, Math.min(1, t));
-            this.opacity = (1 - t) * this.initialOpacity;
-            this.isAlive = this.opacity > 0;
-        }
-        draw() {
-            ctx.globalAlpha = this.opacity;
-            if (this.rotation !== 0) {
-                const ridx = angleToIndex(this.rotation);
-                const cos = cosTable[ridx];
-                const sin = sinTable[ridx];
-                const d = deviceRatio;
-                ctx.setTransform(cos * d, sin * d, -sin * d, cos * d, this.x * d, this.y * d);
-                ctx.drawImage(this.img, -this.size, -this.size, this.size * 2, this.size * 2);
-            } else {
-                const d = deviceRatio;
-                ctx.setTransform(d, 0, 0, d, (this.x - this.size) * d, (this.y - this.size) * d);
-                ctx.drawImage(this.img, 0, 0, this.size * 2, this.size * 2);
-            }
-            ctx.globalAlpha = 1;
-        }
-    }
-    function resizeCanvas() {
-        deviceRatio = window.devicePixelRatio || 1;
-        const isScrollable = SVIS_SNOW_DATA.scroll_with_page === "1";
-        currentWidth = document.documentElement.clientWidth;
-        currentHeight = isScrollable ? document.documentElement.scrollHeight : document.documentElement.clientHeight;
-        canvas.width = Math.round(currentWidth * deviceRatio);
-        canvas.height = Math.round(currentHeight * deviceRatio);
-        canvas.style.width = currentWidth + "px";
-        canvas.style.height = currentHeight + "px";
-        VERTICAL_AREA = parseVerticalArea(SVIS_SNOW_DATA.vertical_area);
-        const screenArea = currentWidth * currentHeight;
-        const performanceMultiplier = isMobile ? .7 : 1;
-        const newMaxFlakes = Math.max(5, Math.round(screenArea / 4e5 * parseInt(SVIS_SNOW_DATA.flakes_density) * performanceMultiplier));
-        if (newMaxFlakes > MAX_FLAKES) {
-            const toAdd = newMaxFlakes - MAX_FLAKES;
-            const isInitialSpawn = flakes.length === 0;
-            const xIndices = Array.from({
-                length: toAdd
-            }, (_, i) => i);
-            if (isInitialSpawn) {
-                for (let i = xIndices.length - 1; i > 0; i--) {
-                    const j = Math.floor(Math.random() * (i + 1));
-                    [xIndices[i], xIndices[j]] = [ xIndices[j], xIndices[i] ];
-                }
-            }
-            for (let i = 0; i < toAdd; i++) {
-                flakes.push(new Snowflake(isInitialSpawn, i, xIndices[i], toAdd));
-            }
-        }
-        if (newMaxFlakes < MAX_FLAKES) {
-            const aliveFlakes = flakes.filter(f => f.isAlive);
-            const toDeactivate = aliveFlakes.length - newMaxFlakes;
-            if (toDeactivate > 0) {
-                aliveFlakes.sort((a, b) => b.y - a.y).slice(0, toDeactivate).forEach(f => {
-                    f.isFadingOut = true;
-                });
-            }
-        }
-        MAX_FLAKES = newMaxFlakes;
-    }
-    resizeCanvas();
-    window.addEventListener("resize", resizeCanvas);
-    document.body.appendChild(canvas);
-    let frameCount = 0;
-    let fpsHistory = [];
-    let lastFpsCheck = performance.now();
-    function updatePerformanceLevel(currentFps) {
-        fpsHistory.push(currentFps);
-        if (fpsHistory.length > 20) fpsHistory.shift();
-        const avgFps = Math.min(60, Math.max(0, fpsHistory.reduce((a, b) => a + b) / fpsHistory.length));
-        if (avgFps < 30) {
-            const aliveFlakes = flakes.filter(f => f.isAlive).length;
-            if (aliveFlakes > MAX_FLAKES * .3) {
-                let toDeactivate = Math.min(2, aliveFlakes - Math.round(MAX_FLAKES * .3));
-                const sortedFlakes = flakes.map((flake, index) => ({
-                    flake: flake,
-                    index: index
-                })).filter(item => item.flake.isAlive).sort((a, b) => a.flake.y - b.flake.y);
-                for (let i = 0; i < toDeactivate && i < sortedFlakes.length; i++) {
-                    sortedFlakes[i].flake.isFadingOut = true;
-                }
-            }
-        }
-    }
-    let lastTime = performance.now();
-    function animate(now) {
-        let delta = (now - lastTime) / 1e3 || 0;
-        delta = Math.min(delta, .05);
-        lastTime = now;
-        frameCount++;
-        if (now - lastFpsCheck > 1e3) {
-            const currentFps = frameCount;
-            updatePerformanceLevel(currentFps);
-            frameCount = 0;
-            lastFpsCheck = now;
-        }
-        ctx.setTransform(deviceRatio, 0, 0, deviceRatio, 0, 0);
-        ctx.clearRect(0, 0, currentWidth, currentHeight);
-        updateGlobalGusts(delta);
-        for (let i = flakes.length - 1; i >= 0; i--) {
-            const fl = flakes[i];
-            fl.update(delta);
-            if (!fl.isAlive) {
-                flakes.splice(i, 1);
-                continue;
-            }
-            fl.draw();
-        }
-        const aliveCount = flakes.filter(f => f.isAlive).length;
-        if (aliveCount < MAX_FLAKES) {
-            const toAdd = MAX_FLAKES - aliveCount;
-            for (let i = 0; i < toAdd; i++) {
-                flakes.push(new Snowflake);
-            }
-        }
-        drawDebugInfo();
-        requestAnimationFrame(animate);
-    }
-    let outOfBoundsCount = 0;
-    function drawDebugInfo() {
-        if (!DEBUG_MODE) return;
-        const scrollYOffset = isScrollable ? window.scrollY : 0;
-        const now = performance.now();
-        let ms = now - startTime;
-        const hours = Math.floor(ms / 36e5);
-        ms %= 36e5;
-        const minutes = Math.floor(ms / 6e4);
-        ms %= 6e4;
-        const seconds = Math.floor(ms / 1e3);
-        const deci = Math.floor(ms % 1e3 / 100);
-        const uptime = String(hours).padStart(2, "0") + ":" + String(minutes).padStart(2, "0") + ":" + String(seconds).padStart(2, "0") + "." + deci;
-        const avgFps = fpsHistory.length > 0 ? Math.round(fpsHistory.reduce((a, b) => a + b) / fpsHistory.length) : 0;
-        const totalFlakes = flakes.length;
-        const aliveFlakes = flakes.filter(f => f.isAlive).length;
-        const renderEfficiency = Math.round(aliveFlakes / totalFlakes * 100);
-        const debugLines = [ `Uptime: ${uptime}`, ``, `FPS: ${avgFps}`, `Flakes: ${totalFlakes}/${MAX_FLAKES} (alive: ${aliveFlakes})`, `Render efficiency: ${renderEfficiency}%`, `Screen: ${currentWidth}x${currentHeight}`, `Canvas: ${canvas.width}x${canvas.height}`, `Device ratio: ${deviceRatio}`, `Vertical Area: ${VERTICAL_AREA}px`, `Mobile device: ${isMobile ? "Yes" : "No"}`, ``, `Out of bounds (SafeArea): ${outOfBoundsCount}` ];
-        const padding = 40;
-        const lineHeight = 18;
-        const boxWidth = 300;
-        const boxHeight = debugLines.length * lineHeight + 8;
-        ctx.save();
-        ctx.setTransform(1, 0, 0, 1, 0, 0);
-        ctx.scale(deviceRatio, deviceRatio);
-        ctx.globalAlpha = 1;
-        ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
-        ctx.fillRect(padding / 2, padding + scrollYOffset, boxWidth, boxHeight);
-        debugLines.forEach((line, i) => {
-            if (line.startsWith("Out of bounds") && outOfBoundsCount > 0) {
-                ctx.fillStyle = "red";
-                ctx.font = "bold 14px monospace";
-            } else {
-                ctx.fillStyle = "#00ff00";
-                ctx.font = "14px monospace";
-            }
-            ctx.fillText(line, padding, padding + lineHeight * (i + 1) + scrollYOffset);
-        });
-        ctx.strokeStyle = "yellow";
-        ctx.lineWidth = 1;
-        ctx.setLineDash([ 5, 5 ]);
-        ctx.beginPath();
-        ctx.moveTo(0, VERTICAL_AREA);
-        ctx.lineTo(currentWidth, VERTICAL_AREA);
-        ctx.stroke();
-        ctx.fillStyle = "yellow";
-        ctx.font = "12px monospace";
-        ctx.fillText("VERTICAL_AREA", 5, VERTICAL_AREA - 5);
-        ctx.restore();
-    }
-    function checkSafeArea(flakeArray, canvasWidth, canvasHeight) {
-        const safe = {
-            minX: -canvasWidth * .5,
-            maxX: canvasWidth * 1.5,
-            minY: -canvasHeight * .5,
-            maxY: canvasHeight * 1.5
-        };
-        let removedCount = 0;
-        for (let i = flakeArray.length - 1; i >= 0; i--) {
-            const f = flakeArray[i];
-            if (f.x < safe.minX || f.x > safe.maxX || f.y < safe.minY || f.y > safe.maxY) {
-                flakeArray.splice(i, 1);
-                removedCount++;
-            }
-        }
-        outOfBoundsCount += removedCount;
-    }
-    setInterval(() => {
-        checkSafeArea(flakes, currentWidth, VERTICAL_AREA);
-    }, 1e4);
-    requestAnimationFrame(animate);
 }

svisciano-snowfall-effect/trunk/assets/js/svis-snow.min.js

@@ -1 @@
-if("1"===SVIS_SNOW_DATA.enabled){const t=!1,e=performance.now(),i=4096,s=2*Math.PI,n=1/s,a=new Float32Array(i),r=new Float32Array(i);for(let O=0;O<i;O++){const W=O/i*s;a[O]=Math.sin(W),r[O]=Math.cos(W)}let l="1"===SVIS_SNOW_DATA.scroll_with_page,o=document.documentElement.clientWidth,h=l?document.documentElement.scrollHeight:document.documentElement.clientHeight,c=window.devicePixelRatio||1;const u=navigator.hardwareConcurrency<=2||/Mobile|Android/i.test(navigator.userAgent),d=document.createElement("canvas"),f=d.getContext("2d",{alpha:!0});d.style.position=l?"absolute":"fixed",d.style.top="0",d.style.left="0",d.style.pointerEvents="none",d.style.zIndex=SVIS_SNOW_DATA.z_index||9999;let m=0,_=0;const S=[];function parseVerticalArea(t){const e=h;if(!t)return e;if((t=t.trim()).endsWith("%")){let i=parseFloat(t.replace("%",""));return isNaN(i)?e:(i=Math.min(Math.max(i,0),100),e*(i/100))}if(t.endsWith("px")){let i=parseFloat(t.replace("px",""));return isNaN(i)?e:i}let i=parseFloat(t);return isNaN(i)?e:i}const p=Object.create(null);function getFlakeCanvas(t,e,i){const s=`${t}_${e}_${i}`;if(p[s])return p[s];const n=document.createElement("canvas"),a=Math.ceil(2*t);n.width=a,n.height=a;const r=n.getContext("2d");return r.fillStyle=e,r.textAlign="center",r.textBaseline="middle",r.font=`${t}px serif`,r.fillText(i,a/2,a/2),p[s]=n,n}function rand(t,e){return t=parseFloat(t),e=parseFloat(e),isNaN(t)||isNaN(e)?0:Math.random()*(e-t)+t}const g=(t,e)=>{const i=SVIS_SNOW_DATA._field_meta?.[e];if(!i)return t;let s=t;return null!==i.min&&(s=Math.max(i.min,s)),null!==i.max&&(s=Math.min(i.max,s)),s};function angleToIndex(t){let e=Math.floor(t%s*n*i);return e<0&&(e+=i),e}let A=g(parseFloat(SVIS_SNOW_DATA.global_gust_strength)||0,"global_gust_strength"),b=0,x=0,y=0,v=rand(2,5);function updateGlobalGusts(t){if(A=g(parseFloat(SVIS_SNOW_DATA.global_gust_strength)||0,"global_gust_strength"),A<=0)return b=0,x=0,void(y=0);if(y+=t,y>v){b=A/10*rand(-3,3),x=A/10*rand(-1.5,1.5);const t=15,e=t-A/10*(t-4);v=y+3*rand(.8*e,1.2*e)}b*=.993,x*=.993}class T{isAlive=!1;constructor(t=!1,e=0,i=0,s=1){this.spawn(t,e,i,s)}spawn(t=!1,e=0,i=0,n=1){if(this.size=1.5*Math.round(g(rand(SVIS_SNOW_DATA.flake_min_size,SVIS_SNOW_DATA.flake_max_size),"flake_min_size")),this.img=getFlakeCanvas(this.size,SVIS_SNOW_DATA.flake_color,SVIS_SNOW_DATA.flake_type),t&&n>1){const t=m/n,s=e*t;this.y=rand(s,s+t);const a=o/n,r=i*a;this.x=rand(r,r+a)}else this.x=rand(0,o),this.y=t?rand(0,m):-this.size*rand(1,2);this.verticalWrapLimit=2*-this.size*rand(1,2),this.baseWindForce=1.5*g(rand(SVIS_SNOW_DATA.min_wind_speed,SVIS_SNOW_DATA.max_wind_speed),"min_wind_speed"),this.gravityForce=1*g(rand(SVIS_SNOW_DATA.min_fall_speed,SVIS_SNOW_DATA.max_fall_speed),"min_fall_speed"),this.vx=this.baseWindForce,this.vy=this.gravityForce,this.rotation=rand(0,s),this.rotationSpeed=g(.1*rand(SVIS_SNOW_DATA.min_rotation_speed,SVIS_SNOW_DATA.max_rotation_speed),"min_rotation_speed");const a=SVIS_SNOW_DATA._field_meta?.flake_depth?.min??0,r=SVIS_SNOW_DATA._field_meta?.flake_depth?.max??10;let l=g(parseFloat(SVIS_SNOW_DATA.flake_depth)||0,"flake_depth");l=Math.max(a,Math.min(r,l));const h=.1+.9*(1-(l-a)/(r-a));if(this.initialOpacity=rand(h,1),this.opacity=this.initialOpacity,this.fadeTop=m+this.size/2+rand(0,0),this.fadeDistance=this.size/2+rand(0,this.size),this.fadeBottom=this.fadeTop+this.fadeDistance,this.turbulenceLevel=4*g(parseFloat(SVIS_SNOW_DATA.turbulence)||0,"turbulence"),this.turbulenceLevel>0&&(this.turbulenceTimer=rand(0,10),this.turbulenceOffset=rand(0,s),this.turbulenceFreqX=rand(1.5,3.5),this.turbulenceFreqY=rand(1,2.5),this.nextTurbulenceChange=rand(1,3),this.currentGustX=0,this.targetGustX=0,this.currentGustY=0,this.targetGustY=0),A>0){this.currentGlobalGustX=0,this.currentGlobalGustY=0;const t=SVIS_SNOW_DATA?._field_meta?.flake_max_size?.max||100,e=Math.min(1,this.size/(1.5*t));this.globalGustSensitivity=rand(.8,1.5)*(1-Math.pow(e,1.5))}}update(t){let e=this.baseWindForce,i=this.gravityForce;if(this.turbulenceLevel>0){if(this.turbulenceTimer+=t,this.turbulenceTimer>this.nextTurbulenceChange){this.targetGustX=this.turbulenceLevel/10*rand(-2,2),this.targetGustY=this.turbulenceLevel/10*rand(-1,1);const t=Math.max(.5,5-this.turbulenceLevel/10);this.nextTurbulenceChange=this.turbulenceTimer+rand(.8*t,1.5*t)}const s=4*t;this.currentGustX+=(this.targetGustX-this.currentGustX)*s,this.currentGustY+=(this.targetGustY-this.currentGustY)*s;const n=this.turbulenceLevel/10*2.5,a=Math.sin(this.turbulenceTimer*this.turbulenceFreqX+this.turbulenceOffset)*n,r=Math.cos(this.turbulenceTimer*this.turbulenceFreqY+.7*this.turbulenceOffset)*n*.3;e+=this.currentGustX+a,i+=this.currentGustY+r}if(A>0){const s=.5*t;this.currentGlobalGustX+=(b-this.currentGlobalGustX)*s,this.currentGlobalGustY+=(x-this.currentGlobalGustY)*s;const n=4e4;e+=this.currentGlobalGustX*n*this.globalGustSensitivity*t,i+=this.currentGlobalGustY*n*this.globalGustSensitivity*t}this.vx=e,this.vy=i,this.x+=this.vx*t*6,this.y+=this.vy*t*6,this.rotation+=this.rotationSpeed*t;const s=o,n=m;this.x<-this.size&&(this.x=s+this.size,this.y=Math.random()*n),this.x>s+this.size&&(this.x=-this.size,this.y=Math.random()*n),this.y<this.verticalWrapLimit&&(this.x=Math.random()*s,this.y=this.fadeBottom-.1);let a=(this.y-this.fadeTop)/(this.fadeBottom-this.fadeTop);a=Math.max(0,Math.min(1,a)),this.opacity=(1-a)*this.initialOpacity,this.isAlive=this.opacity>0}draw(){if(f.globalAlpha=this.opacity,0!==this.rotation){const t=angleToIndex(this.rotation),e=r[t],i=a[t],s=c;f.setTransform(e*s,i*s,-i*s,e*s,this.x*s,this.y*s),f.drawImage(this.img,-this.size,-this.size,2*this.size,2*this.size)}else{const t=c;f.setTransform(t,0,0,t,(this.x-this.size)*t,(this.y-this.size)*t),f.drawImage(this.img,0,0,2*this.size,2*this.size)}f.globalAlpha=1}}function resizeCanvas(){c=window.devicePixelRatio||1;const t="1"===SVIS_SNOW_DATA.scroll_with_page;o=document.documentElement.clientWidth,h=t?document.documentElement.scrollHeight:document.documentElement.clientHeight,d.width=Math.round(o*c),d.height=Math.round(h*c),d.style.width=o+"px",d.style.height=h+"px",m=parseVerticalArea(SVIS_SNOW_DATA.vertical_area);const e=o*h,i=u?.7:1,s=Math.max(5,Math.round(e/4e5*parseInt(SVIS_SNOW_DATA.flakes_density)*i));if(s>_){const t=s-_,e=0===S.length,i=Array.from({length:t},(t,e)=>e);if(e)for(let t=i.length-1;t>0;t--){const e=Math.floor(Math.random()*(t+1));[i[t],i[e]]=[i[e],i[t]]}for(let s=0;s<t;s++)S.push(new T(e,s,i[s],t))}if(s<_){const t=S.filter(t=>t.isAlive),e=t.length-s;e>0&&t.sort((t,e)=>e.y-t.y).slice(0,e).forEach(t=>{t.isFadingOut=!0})}_=s}resizeCanvas(),window.addEventListener("resize",resizeCanvas),document.body.appendChild(d);let M=0,w=[],G=performance.now();function updatePerformanceLevel(t){w.push(t),w.length>20&&w.shift();if(Math.min(60,Math.max(0,w.reduce((t,e)=>t+e)/w.length))<30){const t=S.filter(t=>t.isAlive).length;if(t>.3*_){let e=Math.min(2,t-Math.round(.3*_));const i=S.map((t,e)=>({flake:t,index:e})).filter(t=>t.flake.isAlive).sort((t,e)=>t.flake.y-e.flake.y);for(let t=0;t<e&&t<i.length;t++)i[t].flake.isFadingOut=!0}}}let I=performance.now();function animate(t){let e=(t-I)/1e3||0;if(e=Math.min(e,.05),I=t,M++,t-G>1e3){updatePerformanceLevel(M),M=0,G=t}f.setTransform(c,0,0,c,0,0),f.clearRect(0,0,o,h),updateGlobalGusts(e);for(let t=S.length-1;t>=0;t--){const i=S[t];i.update(e),i.isAlive?i.draw():S.splice(t,1)}const i=S.filter(t=>t.isAlive).length;if(i<_){const t=_-i;for(let e=0;e<t;e++)S.push(new T)}drawDebugInfo(),requestAnimationFrame(animate)}let N=0;function drawDebugInfo(){if(!t)return;const i=l?window.scrollY:0;let s=performance.now()-e;const n=Math.floor(s/36e5);s%=36e5;const a=Math.floor(s/6e4);s%=6e4;const r=Math.floor(s/1e3),p=Math.floor(s%1e3/100),g=String(n).padStart(2,"0")+":"+String(a).padStart(2,"0")+":"+String(r).padStart(2,"0")+"."+p,A=w.length>0?Math.round(w.reduce((t,e)=>t+e)/w.length):0,b=S.length,x=S.filter(t=>t.isAlive).length,y=Math.round(x/b*100),v=[`Uptime: ${g}`,"",`FPS: ${A}`,`Flakes: ${b}/${_} (alive: ${x})`,`Render efficiency: ${y}%`,`Screen: ${o}x${h}`,`Canvas: ${d.width}x${d.height}`,`Device ratio: ${c}`,`Vertical Area: ${m}px`,"Mobile device: "+(u?"Yes":"No"),"",`Out of bounds (SafeArea): ${N}`],T=18*v.length+8;f.save(),f.setTransform(1,0,0,1,0,0),f.scale(c,c),f.globalAlpha=1,f.fillStyle="rgba(0, 0, 0, 0.8)",f.fillRect(20,40+i,300,T),v.forEach((t,e)=>{t.startsWith("Out of bounds")&&N>0?(f.fillStyle="red",f.font="bold 14px monospace"):(f.fillStyle="#00ff00",f.font="14px monospace"),f.fillText(t,40,40+18*(e+1)+i)}),f.strokeStyle="yellow",f.lineWidth=1,f.setLineDash([5,5]),f.beginPath(),f.moveTo(0,m),f.lineTo(o,m),f.stroke(),f.fillStyle="yellow",f.font="12px monospace",f.fillText("VERTICAL_AREA",5,m-5),f.restore()}function checkSafeArea(t,e,i){const s=.5*-e,n=1.5*e,a=.5*-i,r=1.5*i;let l=0;for(let e=t.length-1;e>=0;e--){const i=t[e];(i.x<s||i.x>n||i.y<a||i.y>r)&&(t.splice(e,1),l++)}N+=l}setInterval(()=>{checkSafeArea(S,o,m)},1e4),requestAnimationFrame(animate)}
+"1"===SVIS_SNOW_DATA.enabled&&document.addEventListener("DOMContentLoaded",function(){performance.now();const t=4096,e=2*Math.PI,i=1/e,s=new Float32Array(t),n=new Float32Array(t);for(let i=0;i<t;i++){const a=i/t*e;s[i]=Math.sin(a),n[i]=Math.cos(a)}let a="1"===SVIS_SNOW_DATA.scroll_with_page,l=document.documentElement.clientWidth,h=a?document.documentElement.scrollHeight:document.documentElement.clientHeight,r=window.devicePixelRatio||1;const o=navigator.hardwareConcurrency<=2||/Mobile|Android/i.test(navigator.userAgent),c=document.createElement("canvas"),u=c.getContext("2d",{alpha:!0});c.style.position=a?"absolute":"fixed",c.style.top="0",c.style.left="0",c.style.pointerEvents="none",c.style.zIndex=SVIS_SNOW_DATA.z_index||9999;let d=0,_=0;const m=[];const f=o?1:1.2,S=Object.create(null);function p(t,e){return t=parseFloat(t),e=parseFloat(e),isNaN(t)||isNaN(e)?0:Math.random()*(e-t)+t}const A=(t,e)=>{const i=SVIS_SNOW_DATA._field_meta?.[e];if(!i)return t;let s=t;return null!==i.min&&(s=Math.max(i.min,s)),null!==i.max&&(s=Math.min(i.max,s)),s};let g=A(parseFloat(SVIS_SNOW_DATA.global_gust_strength)||0,"global_gust_strength"),x=0,b=0,y=0,v=p(2,5);class T{isAlive=!1;constructor(t=!1,e=0,i=0,s=1){this.spawn(t,e,i,s)}spawn(t=!1,i=0,s=0,n=1){if(this.size=1.5*Math.round(A(p(SVIS_SNOW_DATA.flake_min_size,SVIS_SNOW_DATA.flake_max_size),"flake_min_size")),this.img=function(t,e,i){const s=(window.devicePixelRatio||1)*f,n=`${t}_${e}_${i}_${s}`;if(S[n])return S[n];const a=document.createElement("canvas"),l=Math.ceil(2*t);a.width=l*s,a.height=l*s,a.style.width=l+"px",a.style.height=l+"px";const h=a.getContext("2d");return h.scale(s,s),h.fillStyle=e,h.textAlign="center",h.textBaseline="middle",h.font=`${t}px serif`,h.fillText(i,l/2,l/2),S[n]=a,a}(this.size,SVIS_SNOW_DATA.flake_color,SVIS_SNOW_DATA.flake_type),t&&n>1){const t=d/n,e=i*t;this.y=p(e,e+t);const a=l/n,h=s*a;this.x=p(h,h+a)}else this.x=p(0,l),this.y=t?p(0,d):-this.size*p(1,2);this.verticalWrapLimit=2*-this.size*p(1,2),this.baseWindForce=.15*A(p(SVIS_SNOW_DATA.min_wind_speed,SVIS_SNOW_DATA.max_wind_speed),"min_wind_speed"),this.gravityForce=.1*A(p(SVIS_SNOW_DATA.min_fall_speed,SVIS_SNOW_DATA.max_fall_speed),"min_fall_speed"),this.vx=this.baseWindForce,this.vy=this.gravityForce,this.rotation=p(0,e),this.rotationSpeed=A(.3*p(SVIS_SNOW_DATA.min_rotation_speed,SVIS_SNOW_DATA.max_rotation_speed),"min_rotation_speed");const a=SVIS_SNOW_DATA._field_meta?.flake_depth?.min??0,h=SVIS_SNOW_DATA._field_meta?.flake_depth?.max??10;let r=A(parseFloat(SVIS_SNOW_DATA.flake_depth)||0,"flake_depth");r=Math.max(a,Math.min(h,r));const o=.1+.9*(1-(r-a)/(h-a));if(this.initialOpacity=p(o,1),this.opacity=this.initialOpacity,this.fadeTop=d+this.size/2+p(0,0),this.fadeDistance=this.size/2+p(0,this.size),this.fadeBottom=this.fadeTop+this.fadeDistance,this.turbulenceLevel=.4*A(parseFloat(SVIS_SNOW_DATA.turbulence)||0,"turbulence"),this.turbulenceLevel>0&&(this.turbulenceTimer=p(0,10),this.turbulenceOffset=p(0,e),this.turbulenceFreqX=p(1.5,3.5),this.turbulenceFreqY=p(1,2.5),this.nextTurbulenceChange=p(1,3),this.currentGustX=0,this.targetGustX=0,this.currentGustY=0,this.targetGustY=0),g>0){this.currentGlobalGustX=0,this.currentGlobalGustY=0;const t=SVIS_SNOW_DATA?._field_meta?.flake_max_size?.max||100,e=Math.min(1,this.size/(1.5*t));this.globalGustSensitivity=p(.8,1.5)*(1-Math.pow(e,1.5))}}update(t){let e=this.baseWindForce,i=this.gravityForce;if(this.turbulenceLevel>0){if(this.turbulenceTimer+=t,this.turbulenceTimer>this.nextTurbulenceChange){this.targetGustX=this.turbulenceLevel/10*p(-2,2),this.targetGustY=this.turbulenceLevel/10*p(-1,1);const t=Math.max(.5,5-this.turbulenceLevel/10);this.nextTurbulenceChange=this.turbulenceTimer+p(.8*t,1.5*t)}const s=4*t;this.currentGustX+=(this.targetGustX-this.currentGustX)*s,this.currentGustY+=(this.targetGustY-this.currentGustY)*s;const n=this.turbulenceLevel/10*2.5,a=Math.sin(this.turbulenceTimer*this.turbulenceFreqX+this.turbulenceOffset)*n,l=Math.cos(this.turbulenceTimer*this.turbulenceFreqY+.7*this.turbulenceOffset)*n*.3;e+=this.currentGustX+a,i+=this.currentGustY+l}if(g>0){const s=.5*t;this.currentGlobalGustX+=(x-this.currentGlobalGustX)*s,this.currentGlobalGustY+=(b-this.currentGlobalGustY)*s;const n=4e4;e+=this.currentGlobalGustX*n*this.globalGustSensitivity*t,i+=this.currentGlobalGustY*n*this.globalGustSensitivity*t}this.vx=e,this.vy=i;const s=1/60,n=Math.min(3,t/s);this.x+=this.vx*n,this.y+=this.vy*n,this.rotation+=this.rotationSpeed*t;const a=l,h=d;this.x<-this.size&&(this.x=a+this.size,this.y=Math.random()*h),this.x>a+this.size&&(this.x=-this.size,this.y=Math.random()*h),this.y<this.verticalWrapLimit&&(this.x=Math.random()*a,this.y=this.fadeBottom-.1);let r=(this.y-this.fadeTop)/(this.fadeBottom-this.fadeTop);r=Math.max(0,Math.min(1,r)),this.opacity=(1-r)*this.initialOpacity,this.isAlive=this.opacity>0}draw(){if(u.globalAlpha=this.opacity,0!==this.rotation&&this.size>8){const a=function(s){let n=Math.floor(s%e*i*t);return n<0&&(n+=t),n}(this.rotation),l=n[a],h=s[a],o=r;u.setTransform(l*o,h*o,-h*o,l*o,this.x*o,this.y*o),u.drawImage(this.img,-this.size,-this.size,2*this.size,2*this.size)}else{const t=r;u.setTransform(t,0,0,t,(this.x-this.size)*t,(this.y-this.size)*t),u.drawImage(this.img,0,0,2*this.size,2*this.size)}u.globalAlpha=1}}function M(){r=window.devicePixelRatio||1;const t="1"===SVIS_SNOW_DATA.scroll_with_page;l=document.documentElement.clientWidth,h=t?document.documentElement.scrollHeight:document.documentElement.clientHeight,c.width=Math.round(l*r),c.height=Math.round(h*r),c.style.width=l+"px",c.style.height=h+"px",d=function(t){const e=h;if(!t)return e;if((t=t.trim()).endsWith("%")){let i=parseFloat(t.replace("%",""));return isNaN(i)?e:(i=Math.min(Math.max(i,0),100),e*(i/100))}if(t.endsWith("px")){let i=parseFloat(t.replace("px",""));return isNaN(i)?e:i}let i=parseFloat(t);return isNaN(i)?e:i}(SVIS_SNOW_DATA.vertical_area);const e=l*h,i=o?.7:1,s=Math.max(5,Math.round(e/4e5*parseInt(SVIS_SNOW_DATA.flakes_density)*i));if(s>_){const t=s-_,e=0===m.length,i=Array.from({length:t},(t,e)=>e);if(e)for(let t=i.length-1;t>0;t--){const e=Math.floor(Math.random()*(t+1));[i[t],i[e]]=[i[e],i[t]]}for(let s=0;s<t;s++)m.push(new T(e,s,i[s],t))}if(s<_){const t=m.filter(t=>t.isAlive),e=t.length-s;e>0&&t.sort((t,e)=>e.y-t.y).slice(0,e).forEach(t=>{t.isFadingOut=!0})}_=s}M(),window.addEventListener("resize",M),document.body.appendChild(c);let N=0,O=[],G=performance.now();let W=performance.now();let w=0;setInterval(()=>{!function(t,e,i){const s=.5*-e,n=1.5*e,a=.5*-i,l=1.5*i;let h=0;for(let e=t.length-1;e>=0;e--){const i=t[e];(i.x<s||i.x>n||i.y<a||i.y>l)&&(t.splice(e,1),h++)}w+=h}(m,l,d)},1e4),requestAnimationFrame(function t(e){let i=(e-W)/1e3||0;if(i=Math.min(i,.05),W=e,N++,e-G>1e3){!function(t){if(O.push(t),O.length>20&&O.shift(),Math.min(60,Math.max(0,O.reduce((t,e)=>t+e)/O.length))<30){const t=m.filter(t=>t.isAlive).length;if(t>.3*_){let e=Math.min(2,t-Math.round(.3*_));const i=m.map((t,e)=>({flake:t,index:e})).filter(t=>t.flake.isAlive).sort((t,e)=>t.flake.y-e.flake.y);for(let t=0;t<e&&t<i.length;t++)i[t].flake.isFadingOut=!0}}}(N),N=0,G=e}u.setTransform(r,0,0,r,0,0),u.clearRect(0,0,l,h),function(t){if(g=.2*A(parseFloat(SVIS_SNOW_DATA.global_gust_strength)||0,"global_gust_strength"),g<=0)return x=0,b=0,void(y=0);if(y+=t,y>v){x=g/10*p(-3,3),b=g/10*p(-1.5,1.5);const t=15,e=t-g/10*(t-4);v=y+3*p(.8*e,1.2*e)}x*=.993,b*=.993}(i);for(let t=m.length-1;t>=0;t--){const e=m[t];e.update(i),e.isAlive?e.draw():m.splice(t,1)}const s=m.filter(t=>t.isAlive).length;if(s<_){const t=_-s;for(let e=0;e<t;e++)m.push(new T)}requestAnimationFrame(t)})});

svisciano-snowfall-effect/trunk/config/settings-presets.php

@@ -17 +17 @@
         'min_wind_speed' => -1,
         'max_wind_speed' => 1,
-        'min_rotation_speed' => -3,
-        'max_rotation_speed' => 3,
+        'min_rotation_speed' => -1,
+        'max_rotation_speed' => 1,
         'flakes_density' => 1,
         'flake_depth' => 1,
@@ -33 +33 @@
         'min_wind_speed' => 0,
         'max_wind_speed' => 2,
-        'min_rotation_speed' => -5,
-        'max_rotation_speed' => 5,
+        'min_rotation_speed' => -2,
+        'max_rotation_speed' => 2,
         'flakes_density' => 2,
         'flake_depth' => 3,
@@ -49 +49 @@
         'min_wind_speed' => 2,
         'max_wind_speed' => 4,
-        'min_rotation_speed' => -5,
-        'max_rotation_speed' => 5,
+        'min_rotation_speed' => -3,
+        'max_rotation_speed' => 3,
         'flakes_density' => 3,
         'flake_depth' => 3,

svisciano-snowfall-effect/trunk/readme.txt

@@ -1 +1 @@
 === SVisciano - Snowfall Effect ===
-Contributors: SVisciano
+Contributors: svisciano
 Donate link: https://buymeacoffee.com/svisciano
 Tags: snow, animation, winter, effect, christmas
@@ -6 +6 @@
 Tested up to: 6.9
 Requires PHP: 7.0
-Stable tag: 0.1.0
+Stable tag: 0.1.1
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -47 +47 @@
 2. Heavy snowfall effect with different settings.
 3. Storm snowfall preset with increased density, gusts, and visual impact.
-4. Snow effect correctly layered using z-index, staying behind headers and Vertical Snow Area set to 30% .
+4. Snow effect correctly layered using z-index, staying behind headers and Vertical Snow Area set to 30%.
 5. Plugin settings page inside the WordPress admin panel.
 
-== Development ==
-This plugin uses a simple Node.js build process to generate minified assets.
-Original (non-minified) JavaScript and CSS source files are included in the same path of minified files.
-Minified files (.min.js / .min.css) are generated using:
-- terser
-- postcss + cssnano
+== Changelog ==
+= 0.1.1 =
+* Enhanced stability and performance optimizations
+* Minor internal improvements and bug fixes
 
-== Changelog ==
 = 0.1.0 =
 * Initial release
 
 == Upgrade Notice ==
+= 0.1.1 =
+This update enhances stability and performance optimizations, with minor internal improvements and bug fixes.
+
 = 0.1.0 =
 Initial release.
+

svisciano-snowfall-effect/trunk/svisciano-snowfall-effect.php

@@ -4 +4 @@
  * Plugin Name: SVisciano - Snowfall Effect
  * Description: Add a festive touch to your WordPress site with realistic falling snow animation.
- * Version: 0.1.0
+ * Version: 0.1.1
  * Author: Simone Visciano
  * Author URI: https://www.svisciano.it