asciify-engine 1.0.14 → 1.0.16

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.14";
+var EMBED_CDN_VERSION = "1.0.16";
 function buildEmbedOpts(options, rows, cols, width, height, fps, animated) {
   const o = {
     r: rows,
@@ -1120,6 +1120,303 @@ function renderStarsBackground(ctx, width, height, time, mousePos = { x: 0.5, 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 renderAuroraBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
+  const {
+    fontSize = 14,
+    chars = " \xB7\u2219\u2022:;+=\u2261\u2263#@",
+    color,
+    accentColor = "#d4ff00",
+    speed = 1,
+    layers = 5,
+    softness = 1.2,
+    mouseRipple = 0.2,
+    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 cr = 255, cg = 255, cb = 255;
+  if (lightMode) {
+    cr = 0;
+    cg = 0;
+    cb = 0;
+  }
+  if (color) {
+    const p = _parseColor(color);
+    if (p) {
+      cr = p.r;
+      cg = p.g;
+      cb = 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;
+  const layerParams = [];
+  for (let l = 0; l < layers; l++) {
+    const seed = _hash2(l * 17, l * 31 + 7);
+    const seed2 = _hash2(l * 23 + 5, l * 11);
+    layerParams.push({
+      fx: 0.8 + seed * 2.2,
+      // x spatial frequency
+      fy: 1.2 + seed2 * 1.8,
+      // y spatial frequency
+      phase: seed * Math.PI * 4,
+      // phase offset
+      dt: (0.3 + _hash2(l * 7, l * 13 + 3) * 0.5) * (l % 2 === 0 ? 1 : -1),
+      // drift speed & direction
+      amp: 0.55 + _hash2(l * 29, l * 3) * 0.45
+      // amplitude weight
+    });
+  }
+  for (let row = 0; row < rows; row++) {
+    const ny = row / rows;
+    for (let col = 0; col < cols; col++) {
+      const nx = col / cols;
+      const mdx = nx - mousePos.x;
+      const mdy = ny - mousePos.y;
+      const md = Math.sqrt(mdx * mdx + mdy * mdy);
+      const warp = mouseRipple * Math.exp(-md * md / 0.06);
+      const wx = nx + mdx * warp;
+      const wy = ny + mdy * warp;
+      let sum = 0;
+      let totalAmp = 0;
+      for (let l = 0; l < layers; l++) {
+        const { fx, fy, phase, dt, amp } = layerParams[l];
+        const wave = Math.sin(wx * fx * Math.PI * 2 + t * dt + phase) * Math.cos(wy * fy * Math.PI * 2 + t * dt * 0.7 + phase * 1.3);
+        sum += wave * amp;
+        totalAmp += amp;
+      }
+      const rawVal = sum / totalAmp;
+      const curved = 0.5 + 0.5 * Math.tanh(rawVal * softness * 2.2);
+      if (curved < 0.12) continue;
+      const normalized = (curved - 0.12) / 0.88;
+      const charIdx = Math.min(chars.length - 1, Math.floor(normalized * chars.length));
+      const ch = chars[charIdx];
+      const isAccent = curved > 0.82;
+      const alpha = lightMode ? curved * 0.18 : curved * 0.14;
+      ctx.fillStyle = isAccent ? `rgba(${acR},${acG},${acB},${lightMode ? 0.5 : 0.32})` : `rgba(${cr},${cg},${cb},${alpha})`;
+      ctx.fillText(ch, col * charW, row * lineH);
+    }
+  }
+}
 function _parseColor(c) {
   const hex = c.match(/^#([0-9a-f]{3,8})$/i)?.[1];
   if (hex) {
@@ -1188,10 +1485,34 @@ function asciiBackground(target, options = {}) {
     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 buildAuroraOpts = () => ({
+    ...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 if (type === "aurora") optsRef.current = buildAuroraOpts();
     else optsRef.current = buildWaveOpts();
   };
   rebuildOpts();
@@ -1224,6 +1545,14 @@ function asciiBackground(target, options = {}) {
       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 if (type === "aurora") {
+      renderAuroraBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
     } else {
       renderWaveBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
     }
@@ -1705,7 +2034,11 @@ exports.generateEmbedCode = generateEmbedCode;
 exports.gifToAsciiFrames = gifToAsciiFrames;
 exports.imageToAsciiFrame = imageToAsciiFrame;
 exports.mountWaveBackground = mountWaveBackground;
+exports.renderAuroraBackground = renderAuroraBackground;
 exports.renderFrameToCanvas = renderFrameToCanvas;
+exports.renderGridBackground = renderGridBackground;
+exports.renderNoiseBackground = renderNoiseBackground;
+exports.renderPulseBackground = renderPulseBackground;
 exports.renderRainBackground = renderRainBackground;
 exports.renderStarsBackground = renderStarsBackground;
 exports.renderWaveBackground = renderWaveBackground;