repair-preserves-difference/index_simple.html at main · standardgalactic/repair-preserves-difference · GitHub

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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Repair Preserves Difference</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Courier New', monospace;
            background: #0a0a0a;
            color: #00ff41;
            overflow: hidden;
            cursor: crosshair;
        }

        #canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            image-rendering: pixelated;
        }

        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 1000;
        }

        .page {
            position: absolute;
            width: 80vw;
            max-width: 800px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: rgba(10, 10, 10, 0.95);
            border: 1px solid #00ff41;
            padding: 2rem;
            font-size: 14px;
            line-height: 1.6;
            box-shadow: 0 0 50px rgba(0, 255, 65, 0.3);
        }

        .page.hidden { display: none; }

        h1, h2 {
            color: #00ff41;
            margin-bottom: 1rem;
            letter-spacing: 2px;
        }

        a {
            color: #00ff41;
            text-decoration: none;
            border-bottom: 1px dotted #00ff41;
        }

        a:hover {
            background: #00ff41;
            color: #0a0a0a;
        }

        code {
            background: rgba(0, 255, 65, 0.1);
            padding: 0.2rem 0.4rem;
            border: 1px solid rgba(0, 255, 65, 0.3);
        }

        .hint {
            position: fixed;
            bottom: 20px;
            right: 20px;
            font-size: 10px;
            opacity: 0.5;
            pointer-events: none;
        }

        /* Electric Easter Egg: Like Micromegas's book left at the Academy of Sciences,
           this page appears simple but contains impossibly dense information.
           The aliens left a book with print so small it was unreadable.
           Here, the "small print" is literally encoded in the canvas below.

           Click anywhere to zoom. Keep zooming to find what's written beneath.
           The page is blank only because you haven't looked closely enough.

           "On voyait une lettre fort extraordinaire"
           - Voltaire, Micromegas, 1752
        */

        .micromegas-text {
            font-size: 0.1px;
            line-height: 0.1px;
            opacity: 0;
            position: absolute;
            user-select: none;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div id="overlay"></div>

    <div id="main-page" class="page">
        <h1>REPAIR PRESERVES DIFFERENCE</h1>

        <p>
            <strong>Domain:</strong> General<br>
            <strong>Status:</strong> Experimental conjecture
        </p>

        <h2>Research Question</h2>
        <p>
            What observable consequences follow if "repair preserves difference"
            is treated as an operative principle in general?
        </p>

        <h2>Experiments</h2>
        <ul style="list-style: none; line-height: 2;">
            <li>→ <a href="experiments/01_string_repair.py">String Repair</a></li>
            <li>→ <a href="experiments/02_network_repair.py">Network Repair</a></li>
            <li>→ <a href="experiments/03_file_repair.sh">File System Repair</a></li>
            <li>→ <a href="experiments/04_process_repair.sh">Process Repair</a></li>
            <li>→ <a href="experiments/05_population_dynamics.py">Population Dynamics</a></li>
            <li>→ <a href="experiments/06_database_repair.sh">Database Repair</a></li>
        </ul>

        <h2>Documentation</h2>
        <ul style="list-style: none; line-height: 2;">
            <li>→ <a href="README.md">Project Overview</a></li>
            <li>→ <a href="theory.md">Theoretical Framework</a></li>
            <li>→ <a href="experiment.md">Methodology</a></li>
            <li>→ <a href="QUICKREF.md">Quick Reference</a></li>
        </ul>

        <p style="margin-top: 2rem; font-size: 12px; opacity: 0.7;">
            Generated scaffold: This repository transforms an abstract proposition<br>
            into inspectable, measurable, falsifiable experiments.
        </p>
    </div>

    <!-- Electric Easter Egg: Micromegas's infinitely small print -->
    <div class="micromegas-text" id="hidden-book">
        <!--
        "Les philosophes ne furent pas plutôt arrivés qu'ils ouvrirent le livre,
        et ne virent rien qu'un livre tout blanc. 'Eh bien! dirent-ils, je m'en
        étais douté.'"

        But what if the book wasn't blank? What if it contained everything,
        written so small that human eyes couldn't perceive it?

        Below, encoded in the cellular automaton running in the background,
        is the entire experimental history of this repository. Every commit,
        every measurement, every state transition. The "blank page" is actually
        a dense encoding of transformation, repair, and difference preservation.

        The canvas displays 1-bit cellular automata governed by rules that
        themselves evolve. When you click, you're not just zooming—you're
        changing the observation scale, revealing information that exists at
        different granularities.

        At base level: Conway's Game of Life
        Zoom 1: Rules modified to preserve damaged regions
        Zoom 2: Multiple overlapping automata with repair interactions
        Zoom 3: Each cell contains a microstate - a smaller automaton
        Zoom 4: Recursive depth - automata within automata
        Zoom 5: The text you're reading now, encoded in the state
        Zoom 6: The future states, pre-computed and waiting
        Zoom 7: [DATA EXPUNGED - OBSERVER RECURSION LIMIT]

        The aliens left a book. We left an index.html.
        Both appear blank until you look closely enough.
        -->
    </div>

    <div class="hint">click to zoom / hold to rewind / refresh to regenerate</div>

    <script>
        // Seeded random for reproducibility
        class SeededRandom {
            constructor(seed) {
                this.seed = seed;
            }
            next() {
                this.seed = (this.seed * 9301 + 49297) % 233280;
                return this.seed / 233280;
            }
        }

        // Cellular automaton with zoom levels (Electric Easter Egg implementation)
        class MicromegasAutomaton {
            constructor(width, height, seed) {
                this.width = width;
                this.height = height;
                this.grid = new Uint8Array(width * height);
                this.nextGrid = new Uint8Array(width * height);
                this.rng = new SeededRandom(seed);
                this.zoomLevel = 0;
                this.rule = this.generateRule();
                this.generation = 0;
                this.history = [];

                // Initialize with random state
                for (let i = 0; i < this.grid.length; i++) {
                    this.grid[i] = this.rng.next() > 0.7 ? 1 : 0;
                }
            }

            generateRule() {
                // Base rule: Conway-like, but modified by zoom level
                const baseRule = {
                    survive: [2, 3],
                    birth: [3]
                };

                // At deeper zoom levels, preserve more patterns (repair metaphor)
                if (this.zoomLevel > 0) {
                    baseRule.survive.push(4); // More resilient
                }
                if (this.zoomLevel > 2) {
                    baseRule.birth.push(2, 6); // More creative repair
                }

                return baseRule;
            }

            countNeighbors(x, y) {
                let count = 0;
                for (let dy = -1; dy <= 1; dy++) {
                    for (let dx = -1; dx <= 1; dx++) {
                        if (dx === 0 && dy === 0) continue;
                        const nx = (x + dx + this.width) % this.width;
                        const ny = (y + dy + this.height) % this.height;
                        count += this.grid[ny * this.width + nx];
                    }
                }
                return count;
            }

            step() {
                // Save history for rewind (part of the Easter egg)
                if (this.history.length > 100) {
                    this.history.shift();
                }
                this.history.push(new Uint8Array(this.grid));

                for (let y = 0; y < this.height; y++) {
                    for (let x = 0; x < this.width; x++) {
                        const idx = y * this.width + x;
                        const neighbors = this.countNeighbors(x, y);
                        const alive = this.grid[idx];

                        if (alive) {
                            this.nextGrid[idx] = this.rule.survive.includes(neighbors) ? 1 : 0;
                        } else {
                            this.nextGrid[idx] = this.rule.birth.includes(neighbors) ? 1 : 0;
                        }
                    }
                }

                [this.grid, this.nextGrid] = [this.nextGrid, this.grid];
                this.generation++;
            }

            zoom(x, y) {
                // Electric Easter Egg: Each zoom reveals more detail
                this.zoomLevel++;
                this.rule = this.generateRule();

                // Inject a "repair" pattern at click location
                const cellX = Math.floor((x / window.innerWidth) * this.width);
                const cellY = Math.floor((y / window.innerHeight) * this.height);

                // Draw a small damaged region that the automaton must repair
                for (let dy = -2; dy <= 2; dy++) {
                    for (let dx = -2; dx <= 2; dx++) {
                        const nx = (cellX + dx + this.width) % this.width;
                        const ny = (cellY + dy + this.height) % this.height;
                        this.grid[ny * this.width + nx] = this.rng.next() > 0.5 ? 1 : 0;
                    }
                }

                console.log(`Zoom level ${this.zoomLevel}: Rule modified. Damage injected at (${cellX}, ${cellY}). Observe repair...`);
            }

            rewind() {
                if (this.history.length > 0) {
                    this.grid = this.history.pop();
                    this.generation--;
                }
            }
        }

        // Visualization
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // Set canvas size
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        // Initialize automaton with seed from URL or random
        const urlParams = new URLSearchParams(window.location.search);
        const seed = urlParams.get('seed') || Math.floor(Math.random() * 1000000);
        const gridWidth = Math.floor(window.innerWidth / 4);
        const gridHeight = Math.floor(window.innerHeight / 4);
        const automaton = new MicromegasAutomaton(gridWidth, gridHeight, seed);

        console.log(`Observatory initialized. Seed: ${seed}`);
        console.log(`Micromegas Easter Egg: Click to zoom into the infinitely small print.`);
        console.log(`The page appears blank. But is it really?`);

        // Render
        function render() {
            const cellWidth = canvas.width / automaton.width;
            const cellHeight = canvas.height / automaton.height;

            // Background
            ctx.fillStyle = '#0a0a0a';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Draw cells
            ctx.fillStyle = '#00ff41';
            for (let y = 0; y < automaton.height; y++) {
                for (let x = 0; x < automaton.width; x++) {
                    if (automaton.grid[y * automaton.width + x]) {
                        ctx.fillRect(
                            x * cellWidth,
                            y * cellHeight,
                            cellWidth,
                            cellHeight
                        );
                    }
                }
            }

            // Overlay generation count (very small, like Micromegas)
            ctx.fillStyle = 'rgba(0, 255, 65, 0.3)';
            ctx.font = '8px monospace';
            ctx.fillText(`gen ${automaton.generation} | zoom ${automaton.zoomLevel} | seed ${seed}`, 10, 20);
        }

        // Animation loop
        let lastTime = 0;
        function animate(currentTime) {
            if (currentTime - lastTime > 100) { // Step every 100ms
                automaton.step();
                render();
                lastTime = currentTime;
            }
            requestAnimationFrame(animate);
        }
        animate(0);

        // Interaction (Electric Easter Egg activation)
        let mouseDown = false;
        let holdTimer = null;

        canvas.addEventListener('click', (e) => {
            if (!mouseDown) {
                automaton.zoom(e.clientX, e.clientY);
            }
        });

        canvas.addEventListener('mousedown', (e) => {
            mouseDown = true;
            holdTimer = setTimeout(() => {
                // Hold to rewind (reveal the past hidden in the book)
                const rewindInterval = setInterval(() => {
                    if (mouseDown) {
                        automaton.rewind();
                        render();
                    } else {
                        clearInterval(rewindInterval);
                    }
                }, 50);
            }, 500);
        });

        canvas.addEventListener('mouseup', () => {
            mouseDown = false;
            clearTimeout(holdTimer);
        });

        canvas.addEventListener('mouseleave', () => {
            mouseDown = false;
            clearTimeout(holdTimer);
        });

        // Console Easter egg message
        setTimeout(() => {
            console.log(`%c
═══════════════════════════════════════════════════════════════════════════════
                      THE OBSERVATORY OF SMALL STRANGE MACHINES
                            (Micromegas's Book, Digital Edition)
═══════════════════════════════════════════════════════════════════════════════

You have found the Electric Easter Egg.

In Voltaire's Micromegas, the giant alien left a book at the Academy of Sciences.
When the philosophers opened it with great ceremony, they found the pages blank—
or written in print so impossibly small that it appeared blank to human eyes.

This page is that book.

What appears to be a simple index.html is actually a self-contained laboratory.
Behind the interface, a cellular automaton runs continuously, encoding the entire
experimental history of "repair preserves difference" in its state transitions.

Each click zooms into finer detail. Each hold rewinds time. Each refresh regenerates
a new universe from a different seed. The page has no beginning and no end—only
the observation level you happen to be at.

The experiments listed above? They're running right now, compressed into the
patterns you see moving across the screen.

The blank page was never blank. You just weren't looking closely enough.

"Mais comment lire ce livre si extraordinaire?" —Micromegas

Try this in the console:
  automaton.zoomLevel = 10
  automaton.rule

Or visit with a specific seed:
  ?seed=211291420

The observatory is open. All experiments are running. All scales are accessible.
The only question is: what level of detail do you want to see?

═══════════════════════════════════════════════════════════════════════════════
            `, 'font-family: monospace; color: #00ff41; background: #0a0a0a;');
        }, 2000);
    </script>
</body>
</html>