Skip to content

Commit 4e1201b

Browse files
mdbenchmdbench
authored
update to ScyWeb
1 parent 1f9c493 commit 4e1201b

1 file changed

Lines changed: 134 additions & 0 deletions

File tree

‎ScyWebCompressor.html‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>ScyWeb // v3.1.8 LUMA-DELTA</title>
6+
<style>
7+
:root { --accent-purple: #bc13fe; --deep-black: #050505; --panel-grey: #121212; --terminal-green: #00ff41; }
8+
body { font-family: 'Consolas', monospace; background: var(--deep-black); color: #d1d1d1; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
9+
.dashboard { width: 100%; max-width: 900px; background: var(--panel-grey); border-top: 3px solid var(--accent-purple); padding: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.8); }
10+
canvas { max-width: 100%; border: 1px solid #1a1a1a; image-rendering: pixelated; background: #000; display: block; margin: 20px auto; }
11+
button { background: transparent; color: var(--accent-purple); border: 1px solid var(--accent-purple); padding: 10px; cursor: pointer; text-transform: uppercase; font-size: 0.7rem; width: 100%; margin-top: 10px; }
12+
button:hover { background: var(--accent-purple); color: #fff; }
13+
.terminal { background: #000; padding: 15px; font-size: 0.8em; border: 1px solid #222; height: 100px; overflow-y: auto; color: var(--terminal-green); margin-bottom: 10px; }
14+
</style>
15+
</head>
16+
<body>
17+
<div class="dashboard">
18+
<h1 style="text-align:center;">ScyWeb LUMA-DELTA <span style="color:var(--accent-purple); font-size:0.8rem;">v3.1.8 LUMA-WEIGHTED</span></h1>
19+
<div class="terminal" id="terminal">Fractal RLE Active. Prioritizing Edge Luminance...</div>
20+
<div style="display:grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0;">
21+
<div class="zone">
22+
<input type="file" id="imageInput" accept="image/*" style="font-size:0.7rem;">
23+
<button onclick="exportWeighted()">1. Export ScyWeb Core .scy</button>
24+
</div>
25+
<div class="zone">
26+
<input type="file" id="scyInput" accept=".scy" style="font-size:0.7rem;">
27+
<button onclick="importDelta()">2. Unfold Core Identity</button>
28+
</div>
29+
</div>
30+
<canvas id="outputCanvas"></canvas>
31+
</div>
32+
33+
<script>
34+
const canvas = document.getElementById('outputCanvas');
35+
const ctx = canvas.getContext('2d');
36+
const terminal = document.getElementById('terminal');
37+
38+
function log(msg) { terminal.innerHTML += `> ${msg}<br>`; terminal.scrollTop = terminal.scrollHeight; }
39+
40+
function d2xy(n, d) {
41+
let t = d, x = 0, y = 0;
42+
for (let s = 1; s < n; s <<= 1) {
43+
let rx = 1 & (t / 2); let ry = 1 & (t ^ rx);
44+
[x, y] = rot(s, x, y, rx, ry);
45+
x += s * rx; y += s * ry; t /= 4;
46+
}
47+
return [x, y];
48+
}
49+
50+
function rot(n, x, y, rx, ry) {
51+
if (ry == 0) {
52+
if (rx == 1) { x = n - 1 - x; y = n - 1 - y; }
53+
return [y, x];
54+
}
55+
return [x, y];
56+
}
57+
58+
function exportWeighted() {
59+
const file = document.getElementById('imageInput').files[0];
60+
if (!file) return;
61+
const img = new Image();
62+
img.onload = function() {
63+
if (img.width !== img.height) {
64+
log(`<br>ScyWeb Error: Image must be a square (Current: ${img.width}x${img.height})`);
65+
return;
66+
}
67+
const n = 256; canvas.width = n; canvas.height = n;
68+
ctx.drawImage(img, 0, 0, n, n);
69+
const pix = ctx.getImageData(0, 0, n, n).data;
70+
71+
log("ANALYZING VISUAL ENTROPY...");
72+
const deltaStream = [];
73+
let lastR = -1, lastG = -1, lastB = -1, run = 0;
74+
75+
// v3.1.8 WEIGHTS
76+
const EPSILON_LUMA = 8; // Tight for edges
77+
const EPSILON_CHROMA = 15; // Relaxed for color fields
78+
79+
for (let i = 0; i < n * n; i++) {
80+
const [x, y] = d2xy(n, i);
81+
const idx = (y * n + x) * 4;
82+
const r = pix[idx], g = pix[idx+1], b = pix[idx+2];
83+
84+
// Standard Luminance calculation
85+
const luma = 0.299 * r + 0.587 * g + 0.114 * b;
86+
const lastLuma = 0.299 * lastR + 0.587 * lastG + 0.114 * lastB;
87+
88+
const lumaDiff = Math.abs(luma - lastLuma);
89+
const colorDiff = Math.max(Math.abs(r-lastR), Math.abs(g-lastG), Math.abs(b-lastB));
90+
91+
if (lumaDiff < EPSILON_LUMA && colorDiff < EPSILON_CHROMA && run < 255) {
92+
run++;
93+
} else {
94+
if (i > 0) deltaStream.push(run);
95+
deltaStream.push(r, g, b);
96+
lastR = r; lastG = g; lastB = b; run = 1;
97+
}
98+
}
99+
deltaStream.push(run);
100+
101+
const buffer = new Uint8Array([0, n/2, 0, n/2, ...deltaStream]);
102+
const blob = new Blob([buffer], {type: "application/octet-stream"});
103+
const a = document.createElement("a"); a.href = URL.createObjectURL(blob);
104+
a.download = "scyweb_v3.1.8.scy"; a.click();
105+
log(`FRACTAL TRANSCODING COMPLETE: ${(buffer.byteLength / 1024).toFixed(1)} KB.`);
106+
};
107+
img.src = URL.createObjectURL(file);
108+
}
109+
110+
async function importDelta() {
111+
const file = document.getElementById('scyInput').files[0];
112+
if (!file) return;
113+
const buf = new Uint8Array(await file.arrayBuffer());
114+
const n = 256; canvas.width = n; canvas.height = n;
115+
const out = ctx.createImageData(n, n);
116+
117+
log("RECONSTRUCTING FROM MATH SURFACE...");
118+
let pIdx = 4, pixelCount = 0;
119+
while (pIdx < buf.length) {
120+
const r = buf[pIdx++], g = buf[pIdx++], b = buf[pIdx++], run = buf[pIdx++];
121+
for (let j = 0; j < run; j++) {
122+
if (pixelCount >= n * n) break;
123+
const [x, y] = d2xy(n, pixelCount++);
124+
const outIdx = (y * n + x) * 4;
125+
out.data[outIdx] = r; out.data[outIdx+1] = g;
126+
out.data[outIdx+2] = b; out.data[outIdx+3] = 255;
127+
}
128+
}
129+
ctx.putImageData(out, 0, 0);
130+
log("IDENTITY RECONSTRUCTION COMPLETE.");
131+
}
132+
</script>
133+
</body>
134+
</html>

0 commit comments

Comments
 (0)