(function(){ var OVERSCAN = 64; // px arriba/abajo/izquierda/derecha var canvas = document.getElementById('stars-canvas'); if(!canvas) return; var ctx = canvas.getContext('2d'); var stars = []; var raf = null; var mounted = false; // --------- Mapa del mundo (WebP con fallback a PNG) ---------- var WORLD_WEBP = '/world-mask.webp'; var WORLD_PNG = '/world-mask.png'; var maskImg = null; var maskLoaded = false; var triedPng = false; var maskCanvas = null; // tamaño viewport (sin overscan; centrado) var maskCtx = null; var maskRect = { x:0, y:0, w:0, h:0 }; // === NUEVO: definición que faltaba === function rebuildIfWorldShape(){ if(!mounted) return; try{ var cfg = readConfig(); if(cfg.worldShape){ makeStars(cfg); } }catch(e){} } function loadMask(){ if(maskImg) return; maskImg = new Image(); maskImg.onload = function(){ maskLoaded = true; prepareMask(); rebuildIfWorldShape(); }; maskImg.onerror = function(){ if(!triedPng){ triedPng = true; maskImg = null; maskLoaded = false; maskImg = new Image(); maskImg.onload = function(){ maskLoaded = true; prepareMask(); rebuildIfWorldShape(); }; maskImg.onerror = function(){ maskLoaded = false; }; maskImg.src = WORLD_PNG; } else { maskLoaded = false; } }; maskImg.src = WORLD_WEBP; } // ----- viewport helpers ----- var lastVp = { w: 0, h: 0 }; function getViewportSize(){ var vv = window.visualViewport; if (vv) return { w: Math.ceil(vv.width), h: Math.ceil(vv.height) }; return { w: window.innerWidth, h: window.innerHeight }; } function getRenderSize(){ var vp = getViewportSize(); return { w: vp.w + OVERSCAN*2, h: vp.h + OVERSCAN*2 }; } function vpChanged(threshold){ var vp = getViewportSize(); return Math.abs(vp.w - lastVp.w) >= threshold || Math.abs(vp.h - lastVp.h) >= threshold; } function prepareMask(){ if(!maskLoaded) return; var vp = getViewportSize(); var w = vp.w, h = vp.h; if(!maskCanvas){ maskCanvas = document.createElement('canvas'); maskCtx = maskCanvas.getContext('2d', { willReadFrequently: true }); } maskCanvas.width = w; maskCanvas.height = h; var imgW = maskImg.naturalWidth, imgH = maskImg.naturalHeight; var scale = Math.min(w / imgW, h / imgH); var drawW = Math.floor(imgW * scale); var drawH = Math.floor(imgH * scale); var offX = Math.floor((w - drawW) / 2); var offY = Math.floor((h - drawH) / 2); maskRect = { x: offX, y: offY, w: drawW, h: drawH }; maskCtx.clearRect(0,0,w,h); maskCtx.drawImage(maskImg, offX, offY, drawW, drawH); } function isLand(x, y){ if(!maskLoaded || !maskCtx) return false; // x,y en coords viewport. Si caen en overscan, no hay mask => false var vp = getViewportSize(); if(x < 0 || y < 0 || x >= vp.w || y >= vp.h) return false; if(x < maskRect.x || y < maskRect.y) return false; if(x >= maskRect.x + maskRect.w || y >= maskRect.h + maskRect.y) return false; var px = maskCtx.getImageData(x, y, 1, 1).data; var lum = (0.2126*px[0] + 0.7152*px[1] + 0.0722*px[2]) / 255; return lum > 0.5; // blanco ≈ tierra } var cfgCache = { density: undefined, maxdist: undefined, worldShape: undefined }; function getDprCap(){ var cs = getComputedStyle(document.documentElement); var cap = parseFloat(cs.getPropertyValue('--dpr-cap')) || 3; var dpr = window.devicePixelRatio || 1; return Math.min(dpr, cap); } function size(){ var dpr = getDprCap(); var vp = getViewportSize(); var rd = getRenderSize(); canvas.width = Math.floor(rd.w * dpr); canvas.height = Math.floor(rd.h * dpr); canvas.style.width = rd.w + 'px'; canvas.style.height = rd.h + 'px'; // desplazamos el canvas para cubrir overscan perimetral canvas.style.transform = 'translate3d(0,0,0)'; // mantener capa propia lastVp = vp; ctx.setTransform(dpr,0,0,dpr,0,0); prepareMask(); } function cssNumber(cs, name, fallback){ var v = parseFloat(cs.getPropertyValue(name)); return isFinite(v) ? v : fallback; } function cssText(cs, name, fallback){ var v = cs.getPropertyValue(name).trim(); return v || fallback; } function readConfig(){ var cs = getComputedStyle(document.documentElement); var density = cssNumber(cs, '--stars-density', 0.9); var mult = cssNumber(cs, '--stars-density-mult', 1); var linkAlpha = cssNumber(cs, '--stars-link-alpha', 0.25); var maxdist = cssNumber(cs, '--stars-maxdist', 140); var twEnable = cssNumber(cs, '--stars-twinkle', 1) > 0 ? 1 : 0; var twSpeed = cssNumber(cs, '--stars-twinkle-speed', 0.9); var twAmp = cssNumber(cs, '--stars-twinkle-amp', 0.9); var dot = cssText(cs, '--stars-dot-rgb', '210,255,235'); var line = cssText(cs, '--stars-line-rgb', '120,255,200'); var worldShape = cssNumber(cs, '--stars-world-shape', 0) > 0.5; return { density: density*mult, linkAlpha, maxdist, twEnable, twSpeed, twAmp, dot, line, worldShape }; } function makeStars(cfg){ stars.length = 0; var vp = getViewportSize(); var rd = getRenderSize(); var count = Math.max(10, Math.floor((vp.w * vp.h) / 1500 * cfg.density)); // densidad basada en viewport function rndInRender(){ return { x: Math.random()*rd.w, y: Math.random()*rd.h }; } function renderToViewport(p){ return { x: p.x - OVERSCAN, y: p.y - OVERSCAN }; } if(cfg.worldShape && maskLoaded && maskCtx){ var maxAttempts = count * 30; var attempts = 0; while(stars.length < count && attempts < maxAttempts){ attempts++; var p = rndInRender(); var vpPt = renderToViewport(p); if(isLand(vpPt.x|0, vpPt.y|0)){ stars.push({ x:p.x, y:p.y, r: Math.random()*1.2 + 0.3, vx: (Math.random()-0.5)*0.15, vy: (Math.random()-0.5)*0.15, tw: Math.random()*Math.PI*2 }); } } while(stars.length < count){ var p2 = rndInRender(); stars.push({ x:p2.x, y:p2.y, r: Math.random()*1.2 + 0.3, vx: (Math.random()-0.5)*0.15, vy: (Math.random()-0.5)*0.15, tw: Math.random()*Math.PI*2 }); } } else { for(var i=0;ird.w) s.x-=rd.w; if(s.y<0) s.y+=rd.h; if(s.y>rd.h) s.y-=rd.h; var step = 0.02 * Math.max(0, cfg.twSpeed); s.tw += step; var amp = Math.max(0, Math.min(2, cfg.twAmp)); var twinkle = cfg.twEnable ? (0.5 + 0.5*Math.sin(s.tw)*amp) : 1; ctx.beginPath(); ctx.fillStyle = 'rgba(' + cfg.dot + ',' + (0.6*twinkle) + ')'; ctx.arc(s.x, s.y, s.r*(0.8 + 0.4*twinkle), 0, Math.PI*2); ctx.fill(); } var maxdist = Math.max(20, cfg.maxdist); ctx.lineWidth = 0.7; for(var a=0;a 0.005){ ctx.strokeStyle = 'rgba(' + cfg.line + ',' + o + ')'; ctx.beginPath(); ctx.moveTo(stars[a].x, stars[a].y); ctx.lineTo(stars[b].x, stars[b].y); ctx.stroke(); } } } } raf = requestAnimationFrame(draw); } function start(){ if(mounted) return; mounted = true; canvas.style.visibility = 'visible'; loadMask(); var cfg = readConfig(); cfgCache.density = cfg.density; cfgCache.maxdist = cfg.maxdist; cfgCache.worldShape = cfg.worldShape; size(); makeStars(cfg); raf = requestAnimationFrame(draw); } function stop(){ mounted = false; if(raf) cancelAnimationFrame(raf); raf = null; ctx && ctx.clearRect(0,0,canvas.width,canvas.height); canvas.style.visibility = 'hidden'; } // Debounce + umbral var resizeRaf = null; var resizeIdle = null; var ORIENT = screen && screen.orientation ? screen.orientation.type : ""; function scheduleResize(){ if(resizeRaf) return; resizeRaf = requestAnimationFrame(function(){ resizeRaf = null; if(resizeIdle) clearTimeout(resizeIdle); resizeIdle = setTimeout(function(){ if(!mounted) return; var mustResize = vpChanged(24) || (screen && screen.orientation && ORIENT !== screen.orientation.type); if(mustResize){ ORIENT = screen && screen.orientation ? screen.orientation.type : ORIENT; size(); var cfg = readConfig(); makeStars(cfg); } }, 140); }); } function resize(){ scheduleResize(); } window.__zstars = { start, stop, resize }; window.addEventListener('resize', resize); if (window.visualViewport) { window.visualViewport.addEventListener('resize', resize); } window.addEventListener('orientationchange', function(){ ORIENT = ""; resize(); }); window.addEventListener('zproject:css-var-change', function(){ /* draw() lo toma en el próximo frame */ }); })();

Downloads