asciify-engine 1.0.13 → 1.0.15

package/dist/index.cjs

@@ -381,7 +381,7 @@ async function gifToAsciiFrames(buffer, options, targetWidth, targetHeight, onPr
       prevCtx.clearRect(0, 0, logicalW, logicalH);
       prevCtx.drawImage(compCanvas, 0, 0);
     }
-    const frameImageData = new ImageData(patch, dims.width, dims.height);
+    const frameImageData = new ImageData(new Uint8ClampedArray(patch.buffer), dims.width, dims.height);
     const tempCanvas = document.createElement("canvas");
     tempCanvas.width = dims.width;
     tempCanvas.height = dims.height;
@@ -832,7 +832,7 @@ async function asciifyVideo(source, canvas, { fontSize = 10, style = "classic",
     cancelAnimationFrame(animId);
   };
 }
-var EMBED_CDN_VERSION = "1.0.12";
+var EMBED_CDN_VERSION = "1.0.15";
 function buildEmbedOpts(options, rows, cols, width, height, fps, animated) {
   const o = {
     r: rows,
@@ -999,6 +999,335 @@ function renderWaveBackground(ctx, width, height, time, mousePos = { x: 0.5, y:
     }
   }
 }
+function renderRainBackground(ctx, width, height, time, options = {}) {
+  const {
+    fontSize = 13,
+    chars = "0123456789ABCDEF@#$&*+=/<>",
+    accentColor = "#d4ff00",
+    color,
+    speed = 1,
+    density = 0.55,
+    tailLength = 14,
+    lightMode = false
+  } = options;
+  const charW = fontSize * 0.62;
+  const lineH = fontSize * 1.4;
+  const cols = Math.ceil(width / charW);
+  const rows = Math.ceil(height / lineH);
+  ctx.clearRect(0, 0, width, height);
+  ctx.font = `${fontSize}px monospace`;
+  ctx.textBaseline = "top";
+  let br = 255, bg = 255, bb = 255;
+  if (lightMode) {
+    br = 0;
+    bg = 0;
+    bb = 0;
+  }
+  if (color) {
+    const p = _parseColor(color);
+    if (p) {
+      br = p.r;
+      bg = p.g;
+      bb = p.b;
+    }
+  }
+  let acR = 212, acG = 255, acB = 0;
+  const ap = _parseColor(accentColor);
+  if (ap) {
+    acR = ap.r;
+    acG = ap.g;
+    acB = ap.b;
+  }
+  const period = rows + tailLength;
+  for (let c = 0; c < cols; c++) {
+    if (_hash2(c * 17, 3) > density) continue;
+    const colSpeed = (0.5 + _hash2(c * 31, 7) * 1.5) * speed;
+    const phase = _hash2(c * 13, 11) * period;
+    const headRow = Math.floor((time * colSpeed * 7 + phase) % period);
+    const x = c * charW;
+    for (let k = 0; k <= tailLength; k++) {
+      const row = headRow - (tailLength - k);
+      if (row < 0 || row >= rows) continue;
+      const y = row * lineH;
+      const charSeed = _hash2(c * 53 + Math.floor(time * 5 + k), row * 7);
+      const ch = chars[Math.floor(charSeed * chars.length)];
+      const t = k / tailLength;
+      if (k === tailLength) {
+        ctx.fillStyle = `rgba(${acR},${acG},${acB},${lightMode ? 0.7 : 0.85})`;
+      } else {
+        const alpha = lightMode ? t * 0.22 : t * 0.15;
+        ctx.fillStyle = `rgba(${br},${bg},${bb},${alpha})`;
+      }
+      ctx.fillText(ch, x, y);
+    }
+  }
+}
+function renderStarsBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
+  const {
+    fontSize = 14,
+    chars = " . \xB7 * + \xB0 \u2605",
+    accentColor = "#d4ff00",
+    color,
+    speed = 1,
+    count = 180,
+    lightMode = false
+  } = options;
+  ctx.clearRect(0, 0, width, height);
+  ctx.textBaseline = "middle";
+  ctx.textAlign = "center";
+  const cx = width * (0.2 + mousePos.x * 0.6);
+  const cy = height * (0.2 + mousePos.y * 0.6);
+  const maxR = Math.sqrt(width * width + height * height) * 0.65;
+  let br = 255, bg = 255, bb = 255;
+  if (lightMode) {
+    br = 0;
+    bg = 0;
+    bb = 0;
+  }
+  if (color) {
+    const p = _parseColor(color);
+    if (p) {
+      br = p.r;
+      bg = p.g;
+      bb = p.b;
+    }
+  }
+  let acR = 212, acG = 255, acB = 0;
+  const ap = _parseColor(accentColor);
+  if (ap) {
+    acR = ap.r;
+    acG = ap.g;
+    acB = ap.b;
+  }
+  const charArr = chars.replace(/ /g, "").split("");
+  if (charArr.length === 0) return;
+  for (let i = 0; i < count; i++) {
+    const angle = _hash2(i * 17, 3) * Math.PI * 2;
+    const baseSpd = 0.15 + _hash2(i * 31, 7) * 0.85;
+    const phase = _hash2(i * 13, 11);
+    const r = (time * baseSpd * speed * 0.22 + phase) % 1;
+    const x = cx + Math.cos(angle) * r * maxR;
+    const y = cy + Math.sin(angle) * r * maxR;
+    if (x < -20 || x > width + 20 || y < -20 || y > height + 20) continue;
+    const sz = Math.max(6, fontSize * (0.4 + r * 0.9));
+    ctx.font = `${sz}px monospace`;
+    const charIdx = Math.min(charArr.length - 1, Math.floor(r * charArr.length));
+    const ch = charArr[charIdx];
+    const isAccent = r > 0.72;
+    const alpha = lightMode ? r * 0.28 : r * 0.2;
+    ctx.fillStyle = isAccent ? `rgba(${acR},${acG},${acB},${Math.min(lightMode ? 0.45 : 0.32, alpha * 2.2)})` : `rgba(${br},${bg},${bb},${alpha})`;
+    ctx.fillText(ch, x, y);
+  }
+  ctx.textAlign = "left";
+}
+function renderPulseBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
+  const {
+    fontSize = 13,
+    chars = " .:-=+*#%@",
+    accentColor = "#d4ff00",
+    color,
+    rings = 6,
+    speed = 1,
+    sharpness = 4,
+    lightMode = false
+  } = options;
+  const charW = fontSize * 0.62;
+  const lineH = fontSize * 1.4;
+  const cols = Math.ceil(width / charW);
+  const rows = Math.ceil(height / lineH);
+  ctx.clearRect(0, 0, width, height);
+  ctx.font = `${fontSize}px monospace`;
+  ctx.textBaseline = "top";
+  const maxR = Math.sqrt(width * width + height * height) * 0.5;
+  const ox = mousePos.x * width;
+  const oy = mousePos.y * height;
+  let br = 255, bg2 = 255, bb = 255;
+  if (lightMode) {
+    br = 0;
+    bg2 = 0;
+    bb = 0;
+  }
+  if (color) {
+    const p = _parseColor(color);
+    if (p) {
+      br = p.r;
+      bg2 = p.g;
+      bb = p.b;
+    }
+  }
+  let acR = 212, acG = 255, acB = 0;
+  const ap = _parseColor(accentColor);
+  if (ap) {
+    acR = ap.r;
+    acG = ap.g;
+    acB = ap.b;
+  }
+  const t = time * speed;
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      const px = col * charW + charW * 0.5;
+      const py = row * lineH + lineH * 0.5;
+      const dist = Math.sqrt((px - ox) ** 2 + (py - oy) ** 2);
+      const norm = dist / maxR;
+      const phase = (norm * rings - t * 1.4) % 1;
+      const wave = Math.pow(Math.max(0, Math.cos(phase * Math.PI * 2)), sharpness);
+      if (wave < 0.02) continue;
+      const charIdx = Math.floor(wave * (chars.length - 1));
+      const ch = chars[charIdx];
+      if (ch === " ") continue;
+      const isAccent = wave > 0.75;
+      const alpha = lightMode ? wave * 0.22 : wave * 0.14;
+      ctx.fillStyle = isAccent ? `rgba(${acR},${acG},${acB},${lightMode ? 0.5 : 0.35})` : `rgba(${br},${bg2},${bb},${alpha})`;
+      ctx.fillText(ch, col * charW, row * lineH);
+    }
+  }
+}
+function renderNoiseBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
+  const {
+    fontSize = 14,
+    chars = " .\xB7:;=+*#%@\u2591\u2592\u2593",
+    accentColor = "#d4ff00",
+    color,
+    octaves = 4,
+    speed = 1,
+    scale = 1,
+    accentThreshold = 0.78,
+    mouseWarp = 0.3,
+    lightMode = false
+  } = options;
+  const charW = fontSize * 0.62;
+  const lineH = fontSize * 1.4;
+  const cols = Math.ceil(width / charW);
+  const rows = Math.ceil(height / lineH);
+  ctx.clearRect(0, 0, width, height);
+  ctx.font = `${fontSize}px monospace`;
+  ctx.textBaseline = "top";
+  let br = 255, bgc = 255, bb = 255;
+  if (lightMode) {
+    br = 0;
+    bgc = 0;
+    bb = 0;
+  }
+  if (color) {
+    const p = _parseColor(color);
+    if (p) {
+      br = p.r;
+      bgc = p.g;
+      bb = p.b;
+    }
+  }
+  let acR = 212, acG = 255, acB = 0;
+  const ap = _parseColor(accentColor);
+  if (ap) {
+    acR = ap.r;
+    acG = ap.g;
+    acB = ap.b;
+  }
+  const noiseScale = 0.035 * scale;
+  const t = time * speed;
+  const oct = Math.min(6, Math.max(1, octaves));
+  const fbmN = (x, y) => {
+    let v = 0, amp = 0.5, freq = 1, norm = 0;
+    for (let o = 0; o < oct; o++) {
+      v += _vnoise(x * freq, y * freq) * amp;
+      norm += amp;
+      amp *= 0.5;
+      freq *= 2.1;
+    }
+    return v / norm;
+  };
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      const nx = col * noiseScale + t * 0.06;
+      const ny = row * noiseScale * 1.3 - t * 0.04;
+      const dx = col / cols - mousePos.x;
+      const dy = row / rows - mousePos.y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      const warp = mouseWarp > 0 ? Math.max(0, 1 - dist / mouseWarp) * 0.12 : 0;
+      const wx = nx + warp * Math.sin(t * 1.3 + dy * 8);
+      const wy = ny + warp * Math.cos(t * 0.9 + dx * 8);
+      const raw = fbmN(wx, wy);
+      const norm2 = raw * 0.5 + 0.5;
+      if (norm2 < 0.12) continue;
+      const charIdx = Math.floor(norm2 * (chars.length - 1));
+      const ch = chars[charIdx];
+      if (ch === " ") continue;
+      const isAccent = norm2 > accentThreshold;
+      const alpha = lightMode ? norm2 * 0.2 : norm2 * 0.13;
+      ctx.fillStyle = isAccent ? `rgba(${acR},${acG},${acB},${lightMode ? 0.42 : 0.28})` : `rgba(${br},${bgc},${bb},${alpha})`;
+      ctx.fillText(ch, col * charW, row * lineH);
+    }
+  }
+}
+function renderGridBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
+  const {
+    fontSize = 12,
+    chars = "\xB7-=+|/",
+    accentColor = "#d4ff00",
+    color,
+    bands = 3,
+    speed = 1,
+    bandWidth = 0.12,
+    glitch = true,
+    lightMode = false
+  } = options;
+  const charW = fontSize * 0.62;
+  const lineH = fontSize * 1.4;
+  const cols = Math.ceil(width / charW);
+  const rows = Math.ceil(height / lineH);
+  ctx.clearRect(0, 0, width, height);
+  ctx.font = `${fontSize}px monospace`;
+  ctx.textBaseline = "top";
+  let br = 255, bgv = 255, bb = 255;
+  if (lightMode) {
+    br = 0;
+    bgv = 0;
+    bb = 0;
+  }
+  if (color) {
+    const p = _parseColor(color);
+    if (p) {
+      br = p.r;
+      bgv = p.g;
+      bb = p.b;
+    }
+  }
+  let acR = 212, acG = 255, acB = 0;
+  const ap = _parseColor(accentColor);
+  if (ap) {
+    acR = ap.r;
+    acG = ap.g;
+    acB = ap.b;
+  }
+  const t = time * speed;
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      const ny = row / rows;
+      const scanPhase = ((ny * bands - t * 0.5) % 1 + 1) % 1;
+      const bandIntensity = Math.max(0, 1 - scanPhase / bandWidth);
+      const gridSeed = _hash2(col * 3, row * 7);
+      const gridBase = (gridSeed * 0.5 + 0.5) * 0.35;
+      let glitchBump = 0;
+      if (glitch) {
+        const dx = col / cols - mousePos.x;
+        const dy = ny - mousePos.y;
+        const d = Math.sqrt(dx * dx + dy * dy);
+        if (d < 0.18) {
+          const g = _hash2(col * 11 + Math.floor(t * 12), row * 5);
+          glitchBump = Math.max(0, 1 - d / 0.18) * (g > 0.5 ? g - 0.3 : 0);
+        }
+      }
+      const intensity = Math.min(1, gridBase + bandIntensity * 0.8 + glitchBump * 0.6);
+      if (intensity < 0.04) continue;
+      const charIdx = Math.floor(intensity * (chars.length - 1));
+      const ch = chars[charIdx];
+      const isAccent = bandIntensity > 0.55;
+      const alpha = lightMode ? intensity * 0.2 : intensity * 0.12;
+      ctx.fillStyle = isAccent ? `rgba(${acR},${acG},${acB},${lightMode ? 0.46 : 0.28})` : `rgba(${br},${bgv},${bb},${alpha})`;
+      ctx.fillText(ch, col * charW, row * lineH);
+    }
+  }
+}
 function _parseColor(c) {
   const hex = c.match(/^#([0-9a-f]{3,8})$/i)?.[1];
   if (hex) {
@@ -1011,6 +1340,7 @@ function _parseColor(c) {
 }
 function asciiBackground(target, options = {}) {
   const {
+    type = "wave",
     opacity = 0.2,
     className,
     zIndex = 0,
@@ -1050,16 +1380,49 @@ function asciiBackground(target, options = {}) {
     if (colorScheme === "dark") return false;
     return mq.matches;
   };
-  let parsedColor = null;
-  if (color) parsedColor = _parseColor(color);
-  const buildOpts = () => ({
+  const parsedColor = color ? _parseColor(color) : null;
+  const buildWaveOpts = () => ({
     ...renderOpts,
     lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
     baseColor: parsedColor ? `rgba(${parsedColor.r},${parsedColor.g},${parsedColor.b},{a})` : renderOpts.baseColor
   });
-  const optsRef = { current: buildOpts() };
+  const buildRainOpts = () => ({
+    ...renderOpts,
+    lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
+    color: color ?? renderOpts.color
+  });
+  const buildStarsOpts = () => ({
+    ...renderOpts,
+    lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
+    color: color ?? renderOpts.color
+  });
+  const buildPulseOpts = () => ({
+    ...renderOpts,
+    lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
+    color: color ?? renderOpts.color
+  });
+  const buildNoiseOpts = () => ({
+    ...renderOpts,
+    lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
+    color: color ?? renderOpts.color
+  });
+  const buildGridOpts = () => ({
+    ...renderOpts,
+    lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
+    color: color ?? renderOpts.color
+  });
+  const optsRef = { current: buildWaveOpts() };
+  const rebuildOpts = () => {
+    if (type === "rain") optsRef.current = buildRainOpts();
+    else if (type === "stars") optsRef.current = buildStarsOpts();
+    else if (type === "pulse") optsRef.current = buildPulseOpts();
+    else if (type === "noise") optsRef.current = buildNoiseOpts();
+    else if (type === "grid") optsRef.current = buildGridOpts();
+    else optsRef.current = buildWaveOpts();
+  };
+  rebuildOpts();
   const onSchemeChange = () => {
-    optsRef.current = buildOpts();
+    rebuildOpts();
   };
   if (colorScheme === "auto") mq.addEventListener("change", onSchemeChange);
   const resize = () => {
@@ -1083,7 +1446,19 @@ function asciiBackground(target, options = {}) {
     smoothMouse.x += (mouse.x - smoothMouse.x) * 0.07;
     smoothMouse.y += (mouse.y - smoothMouse.y) * 0.07;
     const r = container.getBoundingClientRect();
-    renderWaveBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
+    if (type === "rain") {
+      renderRainBackground(ctx, r.width, r.height, time, optsRef.current);
+    } else if (type === "stars") {
+      renderStarsBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
+    } else if (type === "pulse") {
+      renderPulseBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
+    } else if (type === "noise") {
+      renderNoiseBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
+    } else if (type === "grid") {
+      renderGridBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
+    } else {
+      renderWaveBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
+    }
     time += 0.016;
     raf = requestAnimationFrame(tick);
   };
@@ -1563,6 +1938,11 @@ exports.gifToAsciiFrames = gifToAsciiFrames;
 exports.imageToAsciiFrame = imageToAsciiFrame;
 exports.mountWaveBackground = mountWaveBackground;
 exports.renderFrameToCanvas = renderFrameToCanvas;
+exports.renderGridBackground = renderGridBackground;
+exports.renderNoiseBackground = renderNoiseBackground;
+exports.renderPulseBackground = renderPulseBackground;
+exports.renderRainBackground = renderRainBackground;
+exports.renderStarsBackground = renderStarsBackground;
 exports.renderWaveBackground = renderWaveBackground;
 exports.tryCreateWebGLRenderer = tryCreateWebGLRenderer;
 exports.videoToAsciiFrames = videoToAsciiFrames;