asciify-engine 1.0.15 → 1.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +336 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +83 -3
- package/dist/index.d.ts +83 -3
- package/dist/index.js +333 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -407,6 +407,86 @@ declare function renderGridBackground(ctx: CanvasRenderingContext2D, width: numb
|
|
|
407
407
|
x: number;
|
|
408
408
|
y: number;
|
|
409
409
|
}, options?: GridBackgroundOptions): void;
|
|
410
|
+
interface AuroraBackgroundOptions {
|
|
411
|
+
/** Character grid density. Default 14. */
|
|
412
|
+
fontSize?: number;
|
|
413
|
+
/** Character ramp from sparse to dense. Default fine gradient ramp. */
|
|
414
|
+
chars?: string;
|
|
415
|
+
/** Base character color. Default theme-aware white/black. */
|
|
416
|
+
color?: string;
|
|
417
|
+
/** Accent color for intensity peaks. Default '#d4ff00'. */
|
|
418
|
+
accentColor?: string;
|
|
419
|
+
/** Animation speed multiplier. Default 1. */
|
|
420
|
+
speed?: number;
|
|
421
|
+
/** Number of wave layers stacked. More = richer interference. Default 5. */
|
|
422
|
+
layers?: number;
|
|
423
|
+
/** Wave spread/softness — higher = broader, more diffuse bands. Default 1.2. */
|
|
424
|
+
softness?: number;
|
|
425
|
+
/** Mouse distortion radius (0–1). Elegant ripple that follows the cursor. Default 0.2. */
|
|
426
|
+
mouseRipple?: number;
|
|
427
|
+
/** Force light mode (dark chars on light bg). Default false. */
|
|
428
|
+
lightMode?: boolean;
|
|
429
|
+
}
|
|
430
|
+
declare function renderAuroraBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, mousePos?: {
|
|
431
|
+
x: number;
|
|
432
|
+
y: number;
|
|
433
|
+
}, options?: AuroraBackgroundOptions): void;
|
|
434
|
+
interface SilkBackgroundOptions {
|
|
435
|
+
/** Character grid density. Default 13. */
|
|
436
|
+
fontSize?: number;
|
|
437
|
+
/** Base character color. Default theme-aware white/black. */
|
|
438
|
+
color?: string;
|
|
439
|
+
/** Accent color for intensity peaks. Default '#d4ff00'. */
|
|
440
|
+
accentColor?: string;
|
|
441
|
+
/** Animation speed multiplier. Default 0.4 (intentionally slow). */
|
|
442
|
+
speed?: number;
|
|
443
|
+
/** Number of flow-field layers. More = richer ribbons. Default 4. */
|
|
444
|
+
layers?: number;
|
|
445
|
+
/** Flow turbulence (0–2). Higher = more folded, tangled ribbons. Default 0.8. */
|
|
446
|
+
turbulence?: number;
|
|
447
|
+
/** Force light mode. Default false. */
|
|
448
|
+
lightMode?: boolean;
|
|
449
|
+
}
|
|
450
|
+
declare function renderSilkBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, options?: SilkBackgroundOptions): void;
|
|
451
|
+
interface VoidBackgroundOptions {
|
|
452
|
+
/** Character grid density. Default 13. */
|
|
453
|
+
fontSize?: number;
|
|
454
|
+
/** Character ramp. Default space-to-dense. */
|
|
455
|
+
chars?: string;
|
|
456
|
+
/** Base character color. Default theme-aware. */
|
|
457
|
+
color?: string;
|
|
458
|
+
/** Accent color for the inner singularity ring. Default '#d4ff00'. */
|
|
459
|
+
accentColor?: string;
|
|
460
|
+
/** Animation speed multiplier. Default 1. */
|
|
461
|
+
speed?: number;
|
|
462
|
+
/** Gravity well radius (fraction of canvas width). Default 0.38. */
|
|
463
|
+
radius?: number;
|
|
464
|
+
/** Spiral tightness — higher = more rotation per unit distance. Default 3. */
|
|
465
|
+
swirl?: number;
|
|
466
|
+
/** Force light mode. Default false. */
|
|
467
|
+
lightMode?: boolean;
|
|
468
|
+
}
|
|
469
|
+
declare function renderVoidBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, mousePos?: {
|
|
470
|
+
x: number;
|
|
471
|
+
y: number;
|
|
472
|
+
}, options?: VoidBackgroundOptions): void;
|
|
473
|
+
interface MorphBackgroundOptions {
|
|
474
|
+
/** Character grid density. Default 14. */
|
|
475
|
+
fontSize?: number;
|
|
476
|
+
/** Character ramp. Default clean gradient. */
|
|
477
|
+
chars?: string;
|
|
478
|
+
/** Base character color. Default theme-aware. */
|
|
479
|
+
color?: string;
|
|
480
|
+
/** Accent color for intensity peaks. Default '#d4ff00'. */
|
|
481
|
+
accentColor?: string;
|
|
482
|
+
/** Animation speed multiplier. Default 0.5 (intentionally slow). */
|
|
483
|
+
speed?: number;
|
|
484
|
+
/** How many frequency harmonics per cell. More = richer shimmer. Default 3. */
|
|
485
|
+
harmonics?: number;
|
|
486
|
+
/** Force light mode. Default false. */
|
|
487
|
+
lightMode?: boolean;
|
|
488
|
+
}
|
|
489
|
+
declare function renderMorphBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, options?: MorphBackgroundOptions): void;
|
|
410
490
|
/**
|
|
411
491
|
* Drop-in helper that mounts an interactive ASCII wave background onto any
|
|
412
492
|
* element. Injects a canvas, wires DPR resize, mouse tracking, and the RAF
|
|
@@ -429,7 +509,7 @@ declare function renderGridBackground(ctx: CanvasRenderingContext2D, width: numb
|
|
|
429
509
|
* useEffect(() => asciiBackground(ref.current).destroy, []);
|
|
430
510
|
* ```
|
|
431
511
|
*/
|
|
432
|
-
interface AsciiBackgroundOptions extends WaveBackgroundOptions, RainBackgroundOptions, StarsBackgroundOptions, PulseBackgroundOptions, NoiseBackgroundOptions, GridBackgroundOptions {
|
|
512
|
+
interface AsciiBackgroundOptions extends WaveBackgroundOptions, RainBackgroundOptions, StarsBackgroundOptions, PulseBackgroundOptions, NoiseBackgroundOptions, GridBackgroundOptions, AuroraBackgroundOptions, SilkBackgroundOptions, VoidBackgroundOptions, MorphBackgroundOptions {
|
|
433
513
|
/**
|
|
434
514
|
* Which background to render (default: 'wave').
|
|
435
515
|
* - 'wave' — interactive ASCII field with vortex, sparkles, breathe
|
|
@@ -439,7 +519,7 @@ interface AsciiBackgroundOptions extends WaveBackgroundOptions, RainBackgroundOp
|
|
|
439
519
|
* - 'noise' — slow-drifting organic fractal noise field
|
|
440
520
|
* - 'grid' — CRT-style horizontal scan bands with cursor glitch zone
|
|
441
521
|
*/
|
|
442
|
-
type?: 'wave' | 'rain' | 'stars' | 'pulse' | 'noise' | 'grid';
|
|
522
|
+
type?: 'wave' | 'rain' | 'stars' | 'pulse' | 'noise' | 'grid' | 'aurora' | 'silk' | 'void' | 'morph';
|
|
443
523
|
/** CSS opacity applied to the canvas element (default: 0.2) */
|
|
444
524
|
opacity?: number;
|
|
445
525
|
/** Extra CSS class names added to the injected canvas */
|
|
@@ -485,4 +565,4 @@ interface WebGLRenderer {
|
|
|
485
565
|
*/
|
|
486
566
|
declare function tryCreateWebGLRenderer(canvas: HTMLCanvasElement): WebGLRenderer | null;
|
|
487
567
|
|
|
488
|
-
export { ART_STYLE_PRESETS, type AnimationStyle, type ArtStyle, type AsciiBackgroundOptions, type AsciiCell, type AsciiFrame, type AsciiOptions, type AsciiResult, type AsciifySimpleOptions, CHARSETS, type CharsetKey, type ColorMode, DEFAULT_OPTIONS, type GridBackgroundOptions, HOVER_PRESETS, type HoverEffect, type HoverPreset, type MountWaveOptions, type NoiseBackgroundOptions, type PulseBackgroundOptions, type RainBackgroundOptions, type RenderMode, type SourceType, type StarsBackgroundOptions, type WaveBackgroundOptions, type WebGLRenderer, asciiBackground, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderFrameToCanvas, renderGridBackground, renderNoiseBackground, renderPulseBackground, renderRainBackground, renderStarsBackground, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };
|
|
568
|
+
export { ART_STYLE_PRESETS, type AnimationStyle, type ArtStyle, type AsciiBackgroundOptions, type AsciiCell, type AsciiFrame, type AsciiOptions, type AsciiResult, type AsciifySimpleOptions, type AuroraBackgroundOptions, CHARSETS, type CharsetKey, type ColorMode, DEFAULT_OPTIONS, type GridBackgroundOptions, HOVER_PRESETS, type HoverEffect, type HoverPreset, type MorphBackgroundOptions, type MountWaveOptions, type NoiseBackgroundOptions, type PulseBackgroundOptions, type RainBackgroundOptions, type RenderMode, type SilkBackgroundOptions, type SourceType, type StarsBackgroundOptions, type VoidBackgroundOptions, type WaveBackgroundOptions, type WebGLRenderer, asciiBackground, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderAuroraBackground, renderFrameToCanvas, renderGridBackground, renderMorphBackground, renderNoiseBackground, renderPulseBackground, renderRainBackground, renderSilkBackground, renderStarsBackground, renderVoidBackground, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };
|
package/dist/index.d.ts
CHANGED
|
@@ -407,6 +407,86 @@ declare function renderGridBackground(ctx: CanvasRenderingContext2D, width: numb
|
|
|
407
407
|
x: number;
|
|
408
408
|
y: number;
|
|
409
409
|
}, options?: GridBackgroundOptions): void;
|
|
410
|
+
interface AuroraBackgroundOptions {
|
|
411
|
+
/** Character grid density. Default 14. */
|
|
412
|
+
fontSize?: number;
|
|
413
|
+
/** Character ramp from sparse to dense. Default fine gradient ramp. */
|
|
414
|
+
chars?: string;
|
|
415
|
+
/** Base character color. Default theme-aware white/black. */
|
|
416
|
+
color?: string;
|
|
417
|
+
/** Accent color for intensity peaks. Default '#d4ff00'. */
|
|
418
|
+
accentColor?: string;
|
|
419
|
+
/** Animation speed multiplier. Default 1. */
|
|
420
|
+
speed?: number;
|
|
421
|
+
/** Number of wave layers stacked. More = richer interference. Default 5. */
|
|
422
|
+
layers?: number;
|
|
423
|
+
/** Wave spread/softness — higher = broader, more diffuse bands. Default 1.2. */
|
|
424
|
+
softness?: number;
|
|
425
|
+
/** Mouse distortion radius (0–1). Elegant ripple that follows the cursor. Default 0.2. */
|
|
426
|
+
mouseRipple?: number;
|
|
427
|
+
/** Force light mode (dark chars on light bg). Default false. */
|
|
428
|
+
lightMode?: boolean;
|
|
429
|
+
}
|
|
430
|
+
declare function renderAuroraBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, mousePos?: {
|
|
431
|
+
x: number;
|
|
432
|
+
y: number;
|
|
433
|
+
}, options?: AuroraBackgroundOptions): void;
|
|
434
|
+
interface SilkBackgroundOptions {
|
|
435
|
+
/** Character grid density. Default 13. */
|
|
436
|
+
fontSize?: number;
|
|
437
|
+
/** Base character color. Default theme-aware white/black. */
|
|
438
|
+
color?: string;
|
|
439
|
+
/** Accent color for intensity peaks. Default '#d4ff00'. */
|
|
440
|
+
accentColor?: string;
|
|
441
|
+
/** Animation speed multiplier. Default 0.4 (intentionally slow). */
|
|
442
|
+
speed?: number;
|
|
443
|
+
/** Number of flow-field layers. More = richer ribbons. Default 4. */
|
|
444
|
+
layers?: number;
|
|
445
|
+
/** Flow turbulence (0–2). Higher = more folded, tangled ribbons. Default 0.8. */
|
|
446
|
+
turbulence?: number;
|
|
447
|
+
/** Force light mode. Default false. */
|
|
448
|
+
lightMode?: boolean;
|
|
449
|
+
}
|
|
450
|
+
declare function renderSilkBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, options?: SilkBackgroundOptions): void;
|
|
451
|
+
interface VoidBackgroundOptions {
|
|
452
|
+
/** Character grid density. Default 13. */
|
|
453
|
+
fontSize?: number;
|
|
454
|
+
/** Character ramp. Default space-to-dense. */
|
|
455
|
+
chars?: string;
|
|
456
|
+
/** Base character color. Default theme-aware. */
|
|
457
|
+
color?: string;
|
|
458
|
+
/** Accent color for the inner singularity ring. Default '#d4ff00'. */
|
|
459
|
+
accentColor?: string;
|
|
460
|
+
/** Animation speed multiplier. Default 1. */
|
|
461
|
+
speed?: number;
|
|
462
|
+
/** Gravity well radius (fraction of canvas width). Default 0.38. */
|
|
463
|
+
radius?: number;
|
|
464
|
+
/** Spiral tightness — higher = more rotation per unit distance. Default 3. */
|
|
465
|
+
swirl?: number;
|
|
466
|
+
/** Force light mode. Default false. */
|
|
467
|
+
lightMode?: boolean;
|
|
468
|
+
}
|
|
469
|
+
declare function renderVoidBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, mousePos?: {
|
|
470
|
+
x: number;
|
|
471
|
+
y: number;
|
|
472
|
+
}, options?: VoidBackgroundOptions): void;
|
|
473
|
+
interface MorphBackgroundOptions {
|
|
474
|
+
/** Character grid density. Default 14. */
|
|
475
|
+
fontSize?: number;
|
|
476
|
+
/** Character ramp. Default clean gradient. */
|
|
477
|
+
chars?: string;
|
|
478
|
+
/** Base character color. Default theme-aware. */
|
|
479
|
+
color?: string;
|
|
480
|
+
/** Accent color for intensity peaks. Default '#d4ff00'. */
|
|
481
|
+
accentColor?: string;
|
|
482
|
+
/** Animation speed multiplier. Default 0.5 (intentionally slow). */
|
|
483
|
+
speed?: number;
|
|
484
|
+
/** How many frequency harmonics per cell. More = richer shimmer. Default 3. */
|
|
485
|
+
harmonics?: number;
|
|
486
|
+
/** Force light mode. Default false. */
|
|
487
|
+
lightMode?: boolean;
|
|
488
|
+
}
|
|
489
|
+
declare function renderMorphBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, options?: MorphBackgroundOptions): void;
|
|
410
490
|
/**
|
|
411
491
|
* Drop-in helper that mounts an interactive ASCII wave background onto any
|
|
412
492
|
* element. Injects a canvas, wires DPR resize, mouse tracking, and the RAF
|
|
@@ -429,7 +509,7 @@ declare function renderGridBackground(ctx: CanvasRenderingContext2D, width: numb
|
|
|
429
509
|
* useEffect(() => asciiBackground(ref.current).destroy, []);
|
|
430
510
|
* ```
|
|
431
511
|
*/
|
|
432
|
-
interface AsciiBackgroundOptions extends WaveBackgroundOptions, RainBackgroundOptions, StarsBackgroundOptions, PulseBackgroundOptions, NoiseBackgroundOptions, GridBackgroundOptions {
|
|
512
|
+
interface AsciiBackgroundOptions extends WaveBackgroundOptions, RainBackgroundOptions, StarsBackgroundOptions, PulseBackgroundOptions, NoiseBackgroundOptions, GridBackgroundOptions, AuroraBackgroundOptions, SilkBackgroundOptions, VoidBackgroundOptions, MorphBackgroundOptions {
|
|
433
513
|
/**
|
|
434
514
|
* Which background to render (default: 'wave').
|
|
435
515
|
* - 'wave' — interactive ASCII field with vortex, sparkles, breathe
|
|
@@ -439,7 +519,7 @@ interface AsciiBackgroundOptions extends WaveBackgroundOptions, RainBackgroundOp
|
|
|
439
519
|
* - 'noise' — slow-drifting organic fractal noise field
|
|
440
520
|
* - 'grid' — CRT-style horizontal scan bands with cursor glitch zone
|
|
441
521
|
*/
|
|
442
|
-
type?: 'wave' | 'rain' | 'stars' | 'pulse' | 'noise' | 'grid';
|
|
522
|
+
type?: 'wave' | 'rain' | 'stars' | 'pulse' | 'noise' | 'grid' | 'aurora' | 'silk' | 'void' | 'morph';
|
|
443
523
|
/** CSS opacity applied to the canvas element (default: 0.2) */
|
|
444
524
|
opacity?: number;
|
|
445
525
|
/** Extra CSS class names added to the injected canvas */
|
|
@@ -485,4 +565,4 @@ interface WebGLRenderer {
|
|
|
485
565
|
*/
|
|
486
566
|
declare function tryCreateWebGLRenderer(canvas: HTMLCanvasElement): WebGLRenderer | null;
|
|
487
567
|
|
|
488
|
-
export { ART_STYLE_PRESETS, type AnimationStyle, type ArtStyle, type AsciiBackgroundOptions, type AsciiCell, type AsciiFrame, type AsciiOptions, type AsciiResult, type AsciifySimpleOptions, CHARSETS, type CharsetKey, type ColorMode, DEFAULT_OPTIONS, type GridBackgroundOptions, HOVER_PRESETS, type HoverEffect, type HoverPreset, type MountWaveOptions, type NoiseBackgroundOptions, type PulseBackgroundOptions, type RainBackgroundOptions, type RenderMode, type SourceType, type StarsBackgroundOptions, type WaveBackgroundOptions, type WebGLRenderer, asciiBackground, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderFrameToCanvas, renderGridBackground, renderNoiseBackground, renderPulseBackground, renderRainBackground, renderStarsBackground, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };
|
|
568
|
+
export { ART_STYLE_PRESETS, type AnimationStyle, type ArtStyle, type AsciiBackgroundOptions, type AsciiCell, type AsciiFrame, type AsciiOptions, type AsciiResult, type AsciifySimpleOptions, type AuroraBackgroundOptions, CHARSETS, type CharsetKey, type ColorMode, DEFAULT_OPTIONS, type GridBackgroundOptions, HOVER_PRESETS, type HoverEffect, type HoverPreset, type MorphBackgroundOptions, type MountWaveOptions, type NoiseBackgroundOptions, type PulseBackgroundOptions, type RainBackgroundOptions, type RenderMode, type SilkBackgroundOptions, type SourceType, type StarsBackgroundOptions, type VoidBackgroundOptions, type WaveBackgroundOptions, type WebGLRenderer, asciiBackground, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderAuroraBackground, renderFrameToCanvas, renderGridBackground, renderMorphBackground, renderNoiseBackground, renderPulseBackground, renderRainBackground, renderSilkBackground, renderStarsBackground, renderVoidBackground, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };
|
package/dist/index.js
CHANGED
|
@@ -830,7 +830,7 @@ async function asciifyVideo(source, canvas, { fontSize = 10, style = "classic",
|
|
|
830
830
|
cancelAnimationFrame(animId);
|
|
831
831
|
};
|
|
832
832
|
}
|
|
833
|
-
var EMBED_CDN_VERSION = "1.0.
|
|
833
|
+
var EMBED_CDN_VERSION = "1.0.17";
|
|
834
834
|
function buildEmbedOpts(options, rows, cols, width, height, fps, animated) {
|
|
835
835
|
const o = {
|
|
836
836
|
r: rows,
|
|
@@ -1326,6 +1326,305 @@ function renderGridBackground(ctx, width, height, time, mousePos = { x: 0.5, y:
|
|
|
1326
1326
|
}
|
|
1327
1327
|
}
|
|
1328
1328
|
}
|
|
1329
|
+
function renderAuroraBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
|
|
1330
|
+
const {
|
|
1331
|
+
fontSize = 14,
|
|
1332
|
+
chars = " \xB7\u2219\u2022:;+=\u2261\u2263#@",
|
|
1333
|
+
color,
|
|
1334
|
+
accentColor = "#d4ff00",
|
|
1335
|
+
speed = 1,
|
|
1336
|
+
layers = 5,
|
|
1337
|
+
softness = 1.2,
|
|
1338
|
+
mouseRipple = 0.2,
|
|
1339
|
+
lightMode = false
|
|
1340
|
+
} = options;
|
|
1341
|
+
const charW = fontSize * 0.62;
|
|
1342
|
+
const lineH = fontSize * 1.4;
|
|
1343
|
+
const cols = Math.ceil(width / charW);
|
|
1344
|
+
const rows = Math.ceil(height / lineH);
|
|
1345
|
+
ctx.clearRect(0, 0, width, height);
|
|
1346
|
+
ctx.font = `${fontSize}px monospace`;
|
|
1347
|
+
ctx.textBaseline = "top";
|
|
1348
|
+
let cr = 255, cg = 255, cb = 255;
|
|
1349
|
+
if (lightMode) {
|
|
1350
|
+
cr = 0;
|
|
1351
|
+
cg = 0;
|
|
1352
|
+
cb = 0;
|
|
1353
|
+
}
|
|
1354
|
+
if (color) {
|
|
1355
|
+
const p = _parseColor(color);
|
|
1356
|
+
if (p) {
|
|
1357
|
+
cr = p.r;
|
|
1358
|
+
cg = p.g;
|
|
1359
|
+
cb = p.b;
|
|
1360
|
+
}
|
|
1361
|
+
}
|
|
1362
|
+
let acR = 212, acG = 255, acB = 0;
|
|
1363
|
+
const ap = _parseColor(accentColor);
|
|
1364
|
+
if (ap) {
|
|
1365
|
+
acR = ap.r;
|
|
1366
|
+
acG = ap.g;
|
|
1367
|
+
acB = ap.b;
|
|
1368
|
+
}
|
|
1369
|
+
const t = time * speed;
|
|
1370
|
+
const layerParams = [];
|
|
1371
|
+
for (let l = 0; l < layers; l++) {
|
|
1372
|
+
const seed = _hash2(l * 17, l * 31 + 7);
|
|
1373
|
+
const seed2 = _hash2(l * 23 + 5, l * 11);
|
|
1374
|
+
layerParams.push({
|
|
1375
|
+
fx: 0.8 + seed * 2.2,
|
|
1376
|
+
// x spatial frequency
|
|
1377
|
+
fy: 1.2 + seed2 * 1.8,
|
|
1378
|
+
// y spatial frequency
|
|
1379
|
+
phase: seed * Math.PI * 4,
|
|
1380
|
+
// phase offset
|
|
1381
|
+
dt: (0.3 + _hash2(l * 7, l * 13 + 3) * 0.5) * (l % 2 === 0 ? 1 : -1),
|
|
1382
|
+
// drift speed & direction
|
|
1383
|
+
amp: 0.55 + _hash2(l * 29, l * 3) * 0.45
|
|
1384
|
+
// amplitude weight
|
|
1385
|
+
});
|
|
1386
|
+
}
|
|
1387
|
+
for (let row = 0; row < rows; row++) {
|
|
1388
|
+
const ny = row / rows;
|
|
1389
|
+
for (let col = 0; col < cols; col++) {
|
|
1390
|
+
const nx = col / cols;
|
|
1391
|
+
const mdx = nx - mousePos.x;
|
|
1392
|
+
const mdy = ny - mousePos.y;
|
|
1393
|
+
const md = Math.sqrt(mdx * mdx + mdy * mdy);
|
|
1394
|
+
const warp = mouseRipple * Math.exp(-md * md / 0.06);
|
|
1395
|
+
const wx = nx + mdx * warp;
|
|
1396
|
+
const wy = ny + mdy * warp;
|
|
1397
|
+
let sum = 0;
|
|
1398
|
+
let totalAmp = 0;
|
|
1399
|
+
for (let l = 0; l < layers; l++) {
|
|
1400
|
+
const { fx, fy, phase, dt, amp } = layerParams[l];
|
|
1401
|
+
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);
|
|
1402
|
+
sum += wave * amp;
|
|
1403
|
+
totalAmp += amp;
|
|
1404
|
+
}
|
|
1405
|
+
const rawVal = sum / totalAmp;
|
|
1406
|
+
const curved = 0.5 + 0.5 * Math.tanh(rawVal * softness * 2.2);
|
|
1407
|
+
if (curved < 0.12) continue;
|
|
1408
|
+
const normalized = (curved - 0.12) / 0.88;
|
|
1409
|
+
const charIdx = Math.min(chars.length - 1, Math.floor(normalized * chars.length));
|
|
1410
|
+
const ch = chars[charIdx];
|
|
1411
|
+
const isAccent = curved > 0.82;
|
|
1412
|
+
const alpha = lightMode ? curved * 0.18 : curved * 0.14;
|
|
1413
|
+
ctx.fillStyle = isAccent ? `rgba(${acR},${acG},${acB},${lightMode ? 0.5 : 0.32})` : `rgba(${cr},${cg},${cb},${alpha})`;
|
|
1414
|
+
ctx.fillText(ch, col * charW, row * lineH);
|
|
1415
|
+
}
|
|
1416
|
+
}
|
|
1417
|
+
}
|
|
1418
|
+
function renderSilkBackground(ctx, width, height, time, options = {}) {
|
|
1419
|
+
const {
|
|
1420
|
+
fontSize = 13,
|
|
1421
|
+
color,
|
|
1422
|
+
accentColor = "#d4ff00",
|
|
1423
|
+
speed = 0.4,
|
|
1424
|
+
layers = 4,
|
|
1425
|
+
turbulence = 0.8,
|
|
1426
|
+
lightMode = false
|
|
1427
|
+
} = options;
|
|
1428
|
+
const charW = fontSize * 0.62;
|
|
1429
|
+
const lineH = fontSize * 1.4;
|
|
1430
|
+
const cols = Math.ceil(width / charW);
|
|
1431
|
+
const rows = Math.ceil(height / lineH);
|
|
1432
|
+
ctx.clearRect(0, 0, width, height);
|
|
1433
|
+
ctx.font = `${fontSize}px monospace`;
|
|
1434
|
+
ctx.textBaseline = "top";
|
|
1435
|
+
let cr = 255, cg = 255, cb = 255;
|
|
1436
|
+
if (lightMode) {
|
|
1437
|
+
cr = 0;
|
|
1438
|
+
cg = 0;
|
|
1439
|
+
cb = 0;
|
|
1440
|
+
}
|
|
1441
|
+
if (color) {
|
|
1442
|
+
const p = _parseColor(color);
|
|
1443
|
+
if (p) {
|
|
1444
|
+
cr = p.r;
|
|
1445
|
+
cg = p.g;
|
|
1446
|
+
cb = p.b;
|
|
1447
|
+
}
|
|
1448
|
+
}
|
|
1449
|
+
let acR = 212, acG = 255, acB = 0;
|
|
1450
|
+
const ap = _parseColor(accentColor);
|
|
1451
|
+
if (ap) {
|
|
1452
|
+
acR = ap.r;
|
|
1453
|
+
acG = ap.g;
|
|
1454
|
+
acB = ap.b;
|
|
1455
|
+
}
|
|
1456
|
+
const t = time * speed;
|
|
1457
|
+
const dirChars = ["\u2500", "\u2500", "\u254C", "\xB7", "\u254C", "\u2500", "\u2500", "\u254C", "\xB7"];
|
|
1458
|
+
for (let row = 0; row < rows; row++) {
|
|
1459
|
+
const ny = row / rows;
|
|
1460
|
+
for (let col = 0; col < cols; col++) {
|
|
1461
|
+
const nx = col / cols;
|
|
1462
|
+
let angleSum = 0;
|
|
1463
|
+
let intensitySum = 0;
|
|
1464
|
+
for (let l = 0; l < layers; l++) {
|
|
1465
|
+
const ls = _hash2(l * 13, l * 7 + 3);
|
|
1466
|
+
const ls2 = _hash2(l * 29, l * 11 + 1);
|
|
1467
|
+
const fx = 1.1 + ls * 2.4;
|
|
1468
|
+
const fy = 0.9 + ls2 * 2;
|
|
1469
|
+
const ph = ls * Math.PI * 6;
|
|
1470
|
+
const dr = (0.2 + _hash2(l * 41, l * 17) * 0.5) * (l % 2 === 0 ? 1 : -1.3);
|
|
1471
|
+
const u = Math.sin(nx * fx * Math.PI * 2 + t * dr + ph);
|
|
1472
|
+
const v = Math.cos(ny * fy * Math.PI * 2 + t * dr * 0.6 + ph * 1.7);
|
|
1473
|
+
const cross = Math.sin(nx * fy * Math.PI * turbulence + ny * fx * Math.PI * turbulence + t * dr * 0.4);
|
|
1474
|
+
angleSum += Math.atan2(v + cross * 0.3, u);
|
|
1475
|
+
intensitySum += (u * v + 1) * 0.5;
|
|
1476
|
+
}
|
|
1477
|
+
const angle = angleSum / layers;
|
|
1478
|
+
const intensity = Math.min(1, intensitySum / layers);
|
|
1479
|
+
if (intensity < 0.1) continue;
|
|
1480
|
+
const angleNorm = (angle + Math.PI) / (Math.PI * 2);
|
|
1481
|
+
const charIdx = Math.floor(angleNorm * dirChars.length) % dirChars.length;
|
|
1482
|
+
const ch = dirChars[charIdx];
|
|
1483
|
+
const isAccent = intensity > 0.8;
|
|
1484
|
+
const alpha = lightMode ? intensity * 0.16 : intensity * 0.13;
|
|
1485
|
+
ctx.fillStyle = isAccent ? `rgba(${acR},${acG},${acB},${lightMode ? 0.44 : 0.26})` : `rgba(${cr},${cg},${cb},${alpha})`;
|
|
1486
|
+
ctx.fillText(ch, col * charW, row * lineH);
|
|
1487
|
+
}
|
|
1488
|
+
}
|
|
1489
|
+
}
|
|
1490
|
+
function renderVoidBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
|
|
1491
|
+
const {
|
|
1492
|
+
fontSize = 13,
|
|
1493
|
+
chars = " \xB7:;=+*#%@",
|
|
1494
|
+
color,
|
|
1495
|
+
accentColor = "#d4ff00",
|
|
1496
|
+
speed = 1,
|
|
1497
|
+
radius = 0.38,
|
|
1498
|
+
swirl = 3,
|
|
1499
|
+
lightMode = false
|
|
1500
|
+
} = options;
|
|
1501
|
+
const charW = fontSize * 0.62;
|
|
1502
|
+
const lineH = fontSize * 1.4;
|
|
1503
|
+
const cols = Math.ceil(width / charW);
|
|
1504
|
+
const rows = Math.ceil(height / lineH);
|
|
1505
|
+
const aspect = width / height;
|
|
1506
|
+
ctx.clearRect(0, 0, width, height);
|
|
1507
|
+
ctx.font = `${fontSize}px monospace`;
|
|
1508
|
+
ctx.textBaseline = "top";
|
|
1509
|
+
let cr = 255, cg = 255, cb = 255;
|
|
1510
|
+
if (lightMode) {
|
|
1511
|
+
cr = 0;
|
|
1512
|
+
cg = 0;
|
|
1513
|
+
cb = 0;
|
|
1514
|
+
}
|
|
1515
|
+
if (color) {
|
|
1516
|
+
const p = _parseColor(color);
|
|
1517
|
+
if (p) {
|
|
1518
|
+
cr = p.r;
|
|
1519
|
+
cg = p.g;
|
|
1520
|
+
cb = p.b;
|
|
1521
|
+
}
|
|
1522
|
+
}
|
|
1523
|
+
let acR = 212, acG = 255, acB = 0;
|
|
1524
|
+
const ap = _parseColor(accentColor);
|
|
1525
|
+
if (ap) {
|
|
1526
|
+
acR = ap.r;
|
|
1527
|
+
acG = ap.g;
|
|
1528
|
+
acB = ap.b;
|
|
1529
|
+
}
|
|
1530
|
+
const t = time * speed;
|
|
1531
|
+
for (let row = 0; row < rows; row++) {
|
|
1532
|
+
const ny = row / rows;
|
|
1533
|
+
for (let col = 0; col < cols; col++) {
|
|
1534
|
+
const nx = col / cols;
|
|
1535
|
+
const dx = (nx - mousePos.x) * aspect;
|
|
1536
|
+
const dy = ny - mousePos.y;
|
|
1537
|
+
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
1538
|
+
const r = dist / radius;
|
|
1539
|
+
if (r > 1) {
|
|
1540
|
+
const outerNoise = _hash2(col * 3, row * 7) * Math.max(0, 1 - (r - 1) * 3);
|
|
1541
|
+
if (outerNoise < 0.62) continue;
|
|
1542
|
+
const alpha2 = outerNoise * (lightMode ? 0.05 : 0.04);
|
|
1543
|
+
const ch2 = chars[1];
|
|
1544
|
+
ctx.fillStyle = `rgba(${cr},${cg},${cb},${alpha2})`;
|
|
1545
|
+
ctx.fillText(ch2, col * charW, row * lineH);
|
|
1546
|
+
continue;
|
|
1547
|
+
}
|
|
1548
|
+
const baseAngle = Math.atan2(dy, dx * aspect);
|
|
1549
|
+
const swirlAmt = (1 - r) * swirl;
|
|
1550
|
+
const angle = baseAngle + swirlAmt + t * 0.4;
|
|
1551
|
+
const pulseRing = Math.max(0, 1 - Math.abs(r - (0.15 + 0.12 * Math.sin(t * 1.1))) / 0.07);
|
|
1552
|
+
const gravity = Math.pow(1 - r, 2.2);
|
|
1553
|
+
const intensity = Math.min(1, gravity + pulseRing * 0.6);
|
|
1554
|
+
if (intensity < 0.06) continue;
|
|
1555
|
+
const angleIdx = Math.floor((angle % (Math.PI * 2) + Math.PI * 2) % (Math.PI * 2) / (Math.PI * 2) * 4);
|
|
1556
|
+
const densityI = Math.floor(intensity * (chars.length - 1));
|
|
1557
|
+
const charIdx = Math.min(chars.length - 1, densityI);
|
|
1558
|
+
const ch = chars[charIdx + (angleIdx > 2 && densityI > 2 ? 0 : 0)];
|
|
1559
|
+
const isAccent = pulseRing > 0.35 || r < 0.08;
|
|
1560
|
+
const alpha = lightMode ? intensity * 0.22 : intensity * 0.18;
|
|
1561
|
+
ctx.fillStyle = isAccent ? `rgba(${acR},${acG},${acB},${lightMode ? 0.55 : 0.38})` : `rgba(${cr},${cg},${cb},${alpha})`;
|
|
1562
|
+
ctx.fillText(ch, col * charW, row * lineH);
|
|
1563
|
+
}
|
|
1564
|
+
}
|
|
1565
|
+
}
|
|
1566
|
+
function renderMorphBackground(ctx, width, height, time, options = {}) {
|
|
1567
|
+
const {
|
|
1568
|
+
fontSize = 14,
|
|
1569
|
+
chars = " \xB7\u2219\u2022:-=+*#",
|
|
1570
|
+
color,
|
|
1571
|
+
accentColor = "#d4ff00",
|
|
1572
|
+
speed = 0.5,
|
|
1573
|
+
harmonics = 3,
|
|
1574
|
+
lightMode = false
|
|
1575
|
+
} = options;
|
|
1576
|
+
const charW = fontSize * 0.62;
|
|
1577
|
+
const lineH = fontSize * 1.4;
|
|
1578
|
+
const cols = Math.ceil(width / charW);
|
|
1579
|
+
const rows = Math.ceil(height / lineH);
|
|
1580
|
+
ctx.clearRect(0, 0, width, height);
|
|
1581
|
+
ctx.font = `${fontSize}px monospace`;
|
|
1582
|
+
ctx.textBaseline = "top";
|
|
1583
|
+
let cr = 255, cg = 255, cb = 255;
|
|
1584
|
+
if (lightMode) {
|
|
1585
|
+
cr = 0;
|
|
1586
|
+
cg = 0;
|
|
1587
|
+
cb = 0;
|
|
1588
|
+
}
|
|
1589
|
+
if (color) {
|
|
1590
|
+
const p = _parseColor(color);
|
|
1591
|
+
if (p) {
|
|
1592
|
+
cr = p.r;
|
|
1593
|
+
cg = p.g;
|
|
1594
|
+
cb = p.b;
|
|
1595
|
+
}
|
|
1596
|
+
}
|
|
1597
|
+
let acR = 212, acG = 255, acB = 0;
|
|
1598
|
+
const ap = _parseColor(accentColor);
|
|
1599
|
+
if (ap) {
|
|
1600
|
+
acR = ap.r;
|
|
1601
|
+
acG = ap.g;
|
|
1602
|
+
acB = ap.b;
|
|
1603
|
+
}
|
|
1604
|
+
const t = time * speed;
|
|
1605
|
+
for (let row = 0; row < rows; row++) {
|
|
1606
|
+
for (let col = 0; col < cols; col++) {
|
|
1607
|
+
let v = 0;
|
|
1608
|
+
for (let h = 0; h < harmonics; h++) {
|
|
1609
|
+
const fBase = _hash2(col * (h + 3) + 7, row * (h + 5) + 11);
|
|
1610
|
+
const fineF = 0.18 + fBase * 1.4;
|
|
1611
|
+
const phase = _hash2(col * (h + 7), row * (h + 9) + 3) * Math.PI * 2;
|
|
1612
|
+
const weight = 1 / (h + 1);
|
|
1613
|
+
v += Math.sin(t * fineF + phase) * weight;
|
|
1614
|
+
}
|
|
1615
|
+
const maxV = Array.from({ length: harmonics }, (_, h) => 1 / (h + 1)).reduce((a, b) => a + b, 0);
|
|
1616
|
+
const norm = (v / maxV + 1) * 0.5;
|
|
1617
|
+
if (norm < 0.28) continue;
|
|
1618
|
+
const remapped = (norm - 0.28) / 0.72;
|
|
1619
|
+
const charIdx = Math.min(chars.length - 1, Math.floor(remapped * chars.length));
|
|
1620
|
+
const ch = chars[charIdx];
|
|
1621
|
+
const isAccent = norm > 0.88;
|
|
1622
|
+
const alpha = lightMode ? remapped * 0.17 : remapped * 0.13;
|
|
1623
|
+
ctx.fillStyle = isAccent ? `rgba(${acR},${acG},${acB},${lightMode ? 0.45 : 0.28})` : `rgba(${cr},${cg},${cb},${alpha})`;
|
|
1624
|
+
ctx.fillText(ch, col * charW, row * lineH);
|
|
1625
|
+
}
|
|
1626
|
+
}
|
|
1627
|
+
}
|
|
1329
1628
|
function _parseColor(c) {
|
|
1330
1629
|
const hex = c.match(/^#([0-9a-f]{3,8})$/i)?.[1];
|
|
1331
1630
|
if (hex) {
|
|
@@ -1409,6 +1708,26 @@ function asciiBackground(target, options = {}) {
|
|
|
1409
1708
|
lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
|
|
1410
1709
|
color: color ?? renderOpts.color
|
|
1411
1710
|
});
|
|
1711
|
+
const buildAuroraOpts = () => ({
|
|
1712
|
+
...renderOpts,
|
|
1713
|
+
lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
|
|
1714
|
+
color: color ?? renderOpts.color
|
|
1715
|
+
});
|
|
1716
|
+
const buildSilkOpts = () => ({
|
|
1717
|
+
...renderOpts,
|
|
1718
|
+
lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
|
|
1719
|
+
color: color ?? renderOpts.color
|
|
1720
|
+
});
|
|
1721
|
+
const buildVoidOpts = () => ({
|
|
1722
|
+
...renderOpts,
|
|
1723
|
+
lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
|
|
1724
|
+
color: color ?? renderOpts.color
|
|
1725
|
+
});
|
|
1726
|
+
const buildMorphOpts = () => ({
|
|
1727
|
+
...renderOpts,
|
|
1728
|
+
lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
|
|
1729
|
+
color: color ?? renderOpts.color
|
|
1730
|
+
});
|
|
1412
1731
|
const optsRef = { current: buildWaveOpts() };
|
|
1413
1732
|
const rebuildOpts = () => {
|
|
1414
1733
|
if (type === "rain") optsRef.current = buildRainOpts();
|
|
@@ -1416,6 +1735,10 @@ function asciiBackground(target, options = {}) {
|
|
|
1416
1735
|
else if (type === "pulse") optsRef.current = buildPulseOpts();
|
|
1417
1736
|
else if (type === "noise") optsRef.current = buildNoiseOpts();
|
|
1418
1737
|
else if (type === "grid") optsRef.current = buildGridOpts();
|
|
1738
|
+
else if (type === "aurora") optsRef.current = buildAuroraOpts();
|
|
1739
|
+
else if (type === "silk") optsRef.current = buildSilkOpts();
|
|
1740
|
+
else if (type === "void") optsRef.current = buildVoidOpts();
|
|
1741
|
+
else if (type === "morph") optsRef.current = buildMorphOpts();
|
|
1419
1742
|
else optsRef.current = buildWaveOpts();
|
|
1420
1743
|
};
|
|
1421
1744
|
rebuildOpts();
|
|
@@ -1454,6 +1777,14 @@ function asciiBackground(target, options = {}) {
|
|
|
1454
1777
|
renderNoiseBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
|
|
1455
1778
|
} else if (type === "grid") {
|
|
1456
1779
|
renderGridBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
|
|
1780
|
+
} else if (type === "aurora") {
|
|
1781
|
+
renderAuroraBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
|
|
1782
|
+
} else if (type === "silk") {
|
|
1783
|
+
renderSilkBackground(ctx, r.width, r.height, time, optsRef.current);
|
|
1784
|
+
} else if (type === "void") {
|
|
1785
|
+
renderVoidBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
|
|
1786
|
+
} else if (type === "morph") {
|
|
1787
|
+
renderMorphBackground(ctx, r.width, r.height, time, optsRef.current);
|
|
1457
1788
|
} else {
|
|
1458
1789
|
renderWaveBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
|
|
1459
1790
|
}
|
|
@@ -1922,6 +2253,6 @@ function tryCreateWebGLRenderer(canvas) {
|
|
|
1922
2253
|
}
|
|
1923
2254
|
}
|
|
1924
2255
|
|
|
1925
|
-
export { ART_STYLE_PRESETS, CHARSETS, DEFAULT_OPTIONS, HOVER_PRESETS, asciiBackground, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderFrameToCanvas, renderGridBackground, renderNoiseBackground, renderPulseBackground, renderRainBackground, renderStarsBackground, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };
|
|
2256
|
+
export { ART_STYLE_PRESETS, CHARSETS, DEFAULT_OPTIONS, HOVER_PRESETS, asciiBackground, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderAuroraBackground, renderFrameToCanvas, renderGridBackground, renderMorphBackground, renderNoiseBackground, renderPulseBackground, renderRainBackground, renderSilkBackground, renderStarsBackground, renderVoidBackground, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };
|
|
1926
2257
|
//# sourceMappingURL=index.js.map
|
|
1927
2258
|
//# sourceMappingURL=index.js.map
|