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