mirror of
https://github.com/YusufB5/ASCILINE.git
synced 2026-06-17 22:35:13 +02:00
e3f282910d
The binary protocol re-sent the full grid every frame. This adds an opt-in
per-frame codec that picks the smallest of three encodings and tags it in a
1-byte header, without changing the rendered output:
0 RAW framebuffer as-is (legacy)
1 ZLIB zlib(framebuffer)
2 DELTA only the cells changed since the previous frame, patched on top
Clients opt in via /ws?codec=adaptive; omitting it yields the original protocol
byte-for-byte, so existing clients are unaffected. A keyframe is forced
periodically for resync. codec.js is shared by the browser and the Node test,
so the shipped decode path is the tested one.
Optional --quality {lossless,high,balanced,low} enables lossy temporal delta
(conditional replenishment): a colour cell is only re-sent once it drifts past a
tolerance from what the viewer already sees; the character plane stays exact.
Default lossless = bit-exact.
Measured wire savings (mode 5, 200x80): static screen 0.3% of legacy (~375x),
pixel mode 11.6%, high-motion 63% (never worse). Encoder tuned (zlib level 3,
smart candidate selection) to stay well under the frame budget.
Verified bit-exact two independent ways: Python->Node vectors and a live
adaptive-vs-legacy WebSocket diff. (A fuller mutation + Autobahn conformance
harness exists on request.)
83 lines
No EOL
3.2 KiB
HTML
83 lines
No EOL
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ASCILINE - Dynamic Typography Engine</title>
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">
|
|
|
|
<!-- Core Styles -->
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Header Section -->
|
|
<header class="blog-header">
|
|
<h1>ASCILINE</h1>
|
|
<p>Turning the web into a living, breathing typographic canvas.</p>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="blog-container">
|
|
<article class="blog-post">
|
|
<h2 class="post-title">The Web Was Never Meant to Be Static</h2>
|
|
<div class="post-meta">Manifesto // May 4, 2026 // ASCILINE Core Team</div>
|
|
|
|
<p class="post-content">
|
|
Every character on this page is potential energy. The web was built on text — HTML,
|
|
the very skeleton of every site you visit, is nothing but structured characters. Yet
|
|
somewhere along the way, we forgot that text itself can be the medium, not just the
|
|
message. ASCILINE exists to remind us: every glyph is a pixel waiting to move.
|
|
</p>
|
|
|
|
<!-- Video Wrapper -->
|
|
<div class="video-wrapper">
|
|
<div id="status" class="status">System Ready</div>
|
|
|
|
<!-- Main Player Container -->
|
|
<div id="player-container">
|
|
<!-- Text-based rendering (B&W Mode) -->
|
|
<pre id="ascii-player"></pre>
|
|
|
|
<!-- Canvas-based rendering (Color Modes) -->
|
|
<canvas id="ascii-canvas"></canvas>
|
|
|
|
<!-- Interaction Overlay -->
|
|
<div id="play-overlay">
|
|
<div class="play-btn"></div>
|
|
<span class="play-label">Initialize Uplink</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Player Controls Bar -->
|
|
<div class="player-controls">
|
|
<!-- Volume Control -->
|
|
<div class="ctrl-group">
|
|
<span class="ctrl-icon">VOL_</span>
|
|
<input id="volume-slider" type="range" min="0" max="1" step="0.05" value="1">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden Audio Element -->
|
|
<audio id="ascii-audio" preload="none"></audio>
|
|
</div>
|
|
|
|
<p class="post-content">
|
|
This is not a video player in the traditional sense. There is no <video> tag here,
|
|
no compressed binary stream decoded by your GPU. Instead, a WebSocket pushes raw
|
|
character data at 24+ frames per second, and your browser renders it as pure text —
|
|
the same primitive that built the entire internet. The web becomes dynamic not through
|
|
heavier payloads, but by rethinking what was already there.
|
|
</p>
|
|
</article>
|
|
</main>
|
|
|
|
<!-- Core Engine Logic -->
|
|
<script src="/static/codec.js"></script>
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
|
|
</html> |