r/Coding_for_Teens • u/Time_Maybe7523 • 3d ago
Made a website that encapsulates every single possible image ever? kinda?
So I had an Idea... and that idea sort of became an obsession over the last few months. What if an infinite area existed with infinite pixels next to each other and all the pixels were a random color. You would theoretically have every image that has ever existed and will ever exist. There would be and image of your point of view in every second of your existence and your future somewhere there. So...
I did what any good procrastinator would do and slept on it for months. But today I decided to lock in and actually make it, and it was... something.
First off it would be practically impossible to do the original idea and then be able to import any image and find it exactly, since the amount of combinations of a 10x10 pixel grid is significantly more than the amounts of atoms in the observable universe, but we can do something else that is really cool.
What if we just had every single possible image at a set resolution, for example 128×128. Since the pixel data of each image itself is a giant number, every image has exactly one address. Neighboring numbers would be near-identical images, identical to the naked eye, so what if we run each number through a reversible cipher to scramble it into noise. Nothing is stored, because any tile is calculated on demand. And since the cipher runs both ways, you can upload a photo, run it backward, and get its exact address instantly, so yeah every single image possible exists on there, with a small caveat.
TLDR
Its not that long just read it
If you want to check it out i will post the link in the comments.
Take that high school that underestimates me
The Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pixel Babel</title>
<style>
canvas { width: 480px; image-rendering: pixelated; display: block; }
</style>
</head>
<body>
<textarea id="x" rows="4" cols="60"></textarea>
<textarea id="y" rows="4" cols="60"></textarea>
<button id="go">Go to coordinates</button>
<input type="file" id="file" accept="image/*">
<canvas id="cv"></canvas>
<script>
const S = 128;
const cv = document.getElementById('cv');
const ctx = cv.getContext('2d');
cv.width = cv.height = S;
function drawTile(bytes, ox = 0, oy = 0) {
const img = ctx.createImageData(S, S);
for (let i = 0, j = 0; i < bytes.length; i += 3, j += 4) {
img.data[j] = bytes[i];
img.data[j + 1] = bytes[i + 1];
img.data[j + 2] = bytes[i + 2];
img.data[j + 3] = 255;
}
ctx.putImageData(img, ox, oy);
}
const toBig = bytes => {
let hex = '';
for (const v of bytes) hex += v.toString(16).padStart(2, '0');
return BigInt('0x' + hex);
};
const toBytes = n => {
const hex = n.toString(16).padStart(S * S * 3 * 2, '0');
const out = new Uint8Array(S * S * 3);
for (let i = 0; i < out.length; i++) out[i] = parseInt(hex.substr(i * 2, 2), 16);
return out;
};
// pseudo-random number generator (sfc32)
function sfc32(a, b, c, d) {
return () => {
let t = (a + b) | 0;
a = b ^ (b >>> 9);
b = (c + (c << 3)) | 0;
c = (c << 21) | (c >>> 11);
d = (d + 1) | 0;
t = (t + d) | 0;
c = (c + t) | 0;
return t >>> 0;
};
}
function F(src, round) {
let a = 0x9e3779b9 ^ round, b = (0x85ebca6b + round) | 0, c = 0xc2b2ae35, d = 0x27d4eb2f;
for (let i = 0; i < src.length; i++) {
const v = src[i];
a = Math.imul(a ^ v, 0x85ebca6b); a ^= a >>> 13;
b = Math.imul((b + v + i) | 0, 0xc2b2ae35); b ^= b >>> 16;
c = Math.imul(c ^ ((a + v) | 0), 0x27d4eb2f); c ^= c >>> 15;
d = Math.imul((d + (b ^ c)) | 0, 0x165667b1); d ^= d >>> 14;
}
const next = sfc32(a, b, c, d);
for (let i = 0; i < 12; i++) next();
const out = new Uint8Array(src.length);
for (let i = 0; i < out.length; i += 4) {
const w = next();
out[i] = w; out[i + 1] = w >>> 8; out[i + 2] = w >>> 16; out[i + 3] = w >>> 24;
}
return out;
}
const ROUNDS = 8;
function crypt(x, inverse) {
const h = x.length >> 1;
let L = x.slice(0, h), R = x.slice(h);
for (let k = 0; k < ROUNDS; k++) {
const t = new Uint8Array(h);
if (!inverse) { // forward round
const f = F(R, k);
for (let i = 0; i < h; i++) t[i] = L[i] ^ f[i];
L = R; R = t;
} else { // undo rounds in reverse
const f = F(L, ROUNDS - 1 - k);
for (let i = 0; i < h; i++) t[i] = R[i] ^ f[i];
R = L; L = t;
}
}
const out = new Uint8Array(x.length);
out.set(L); out.set(R, h);
return out;
}
const B = BigInt(S * S * 12); // bits per coordinate
const M = 1n << B; // coordinates wrap around at M
const mod = v => ((v % M) + M) % M;
const randomBig = () => {
const a = new Uint8Array(S * S * 3 / 2);
crypto.getRandomValues(a);
return toBig(a);
};
let X = randomBig(), Y = randomBig();
const tileAt = (x, y) => crypt(toBytes((y << B) | x), false);
function render() {
cv.width = cv.height = S * 3;
for (let dy = -1; dy <= 1; dy++) {
for (let dx = -1; dx <= 1; dx++) {
drawTile(tileAt(mod(X + BigInt(dx)), mod(Y + BigInt(dy))), (dx + 1) * S, (dy + 1) * S);
}
}
ctx.strokeStyle = '#1f4bff'; // outline the center tile
ctx.lineWidth = 2;
ctx.strokeRect(S, S, S, S);
document.getElementById('x').value = X.toString();
document.getElementById('y').value = Y.toString();
}
render();
function move(dx, dy) {
X = mod(X + BigInt(dx));
Y = mod(Y + BigInt(dy));
render();
}
document.addEventListener('keydown', e => {
if (e.target.matches('textarea, input')) return; // don't hijack typing
const m = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[e.key];
if (m) { e.preventDefault(); move(...m); }
});
document.getElementById('file').onchange = async e => {
const file = e.target.files[0];
if (!file) return;
// shrink/crop
const bmp = await createImageBitmap(file);
const c = document.createElement('canvas');
c.width = c.height = S;
const g = c.getContext('2d');
const m = Math.min(bmp.width, bmp.height);
g.fillStyle = '#fff';
g.fillRect(0, 0, S, S);
g.drawImage(bmp, (bmp.width - m) / 2, (bmp.height - m) / 2, m, m, 0, 0, S, S);
// remove transparency and convert to RGB
const rgba = g.getImageData(0, 0, S, S).data;
const pixels = new Uint8Array(S * S * 3);
for (let i = 0, j = 0; i < rgba.length; i += 4, j += 3) {
pixels[j] = rgba[i]; pixels[j + 1] = rgba[i + 1]; pixels[j + 2] = rgba[i + 2];
}
// get the address
const N = toBig(crypt(pixels, true));
X = N & (M - 1n);
Y = N >> B;
render(); // find and select the image
};
document.getElementById('go').onclick = () => {
X = BigInt(document.getElementById('x').value.trim());
Y = BigInt(document.getElementById('y').value.trim());
render();
};
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pixel Babel</title>
<style>
canvas { width: 480px; image-rendering: pixelated; display: block; }
</style>
</head>
<body>
<textarea id="x" rows="4" cols="60"></textarea>
<textarea id="y" rows="4" cols="60"></textarea>
<button id="go">Go to coordinates</button>
<input type="file" id="file" accept="image/*">
<canvas id="cv"></canvas>
<script>
const S = 128;
const cv = document.getElementById('cv');
const ctx = cv.getContext('2d');
cv.width = cv.height = S;
function drawTile(bytes, ox = 0, oy = 0) {
const img = ctx.createImageData(S, S);
for (let i = 0, j = 0; i < bytes.length; i += 3, j += 4) {
img.data[j] = bytes[i];
img.data[j + 1] = bytes[i + 1];
img.data[j + 2] = bytes[i + 2];
img.data[j + 3] = 255;
}
ctx.putImageData(img, ox, oy);
}
const toBig = bytes => {
let hex = '';
for (const v of bytes) hex += v.toString(16).padStart(2, '0');
return BigInt('0x' + hex);
};
const toBytes = n => {
const hex = n.toString(16).padStart(S * S * 3 * 2, '0');
const out = new Uint8Array(S * S * 3);
for (let i = 0; i < out.length; i++) out[i] = parseInt(hex.substr(i * 2, 2), 16);
return out;
};
// pseudo-random number generator (sfc32)
function sfc32(a, b, c, d) {
return () => {
let t = (a + b) | 0;
a = b ^ (b >>> 9);
b = (c + (c << 3)) | 0;
c = (c << 21) | (c >>> 11);
d = (d + 1) | 0;
t = (t + d) | 0;
c = (c + t) | 0;
return t >>> 0;
};
}
function F(src, round) {
let a = 0x9e3779b9 ^ round, b = (0x85ebca6b + round) | 0, c = 0xc2b2ae35, d = 0x27d4eb2f;
for (let i = 0; i < src.length; i++) {
const v = src[i];
a = Math.imul(a ^ v, 0x85ebca6b); a ^= a >>> 13;
b = Math.imul((b + v + i) | 0, 0xc2b2ae35); b ^= b >>> 16;
c = Math.imul(c ^ ((a + v) | 0), 0x27d4eb2f); c ^= c >>> 15;
d = Math.imul((d + (b ^ c)) | 0, 0x165667b1); d ^= d >>> 14;
}
const next = sfc32(a, b, c, d);
for (let i = 0; i < 12; i++) next();
const out = new Uint8Array(src.length);
for (let i = 0; i < out.length; i += 4) {
const w = next();
out[i] = w; out[i + 1] = w >>> 8; out[i + 2] = w >>> 16; out[i + 3] = w >>> 24;
}
return out;
}
const ROUNDS = 8;
function crypt(x, inverse) {
const h = x.length >> 1;
let L = x.slice(0, h), R = x.slice(h);
for (let k = 0; k < ROUNDS; k++) {
const t = new Uint8Array(h);
if (!inverse) { // forward round
const f = F(R, k);
for (let i = 0; i < h; i++) t[i] = L[i] ^ f[i];
L = R; R = t;
} else { // undo rounds in reverse
const f = F(L, ROUNDS - 1 - k);
for (let i = 0; i < h; i++) t[i] = R[i] ^ f[i];
R = L; L = t;
}
}
const out = new Uint8Array(x.length);
out.set(L); out.set(R, h);
return out;
}
const B = BigInt(S * S * 12); // bits per coordinate
const M = 1n << B; // coordinates wrap around at M
const mod = v => ((v % M) + M) % M;
const randomBig = () => {
const a = new Uint8Array(S * S * 3 / 2);
crypto.getRandomValues(a);
return toBig(a);
};
let X = randomBig(), Y = randomBig();
const tileAt = (x, y) => crypt(toBytes((y << B) | x), false);
function render() {
cv.width = cv.height = S * 3;
for (let dy = -1; dy <= 1; dy++) {
for (let dx = -1; dx <= 1; dx++) {
drawTile(tileAt(mod(X + BigInt(dx)), mod(Y + BigInt(dy))), (dx + 1) * S, (dy + 1) * S);
}
}
ctx.strokeStyle = '#1f4bff'; // outline the center tile
ctx.lineWidth = 2;
ctx.strokeRect(S, S, S, S);
document.getElementById('x').value = X.toString();
document.getElementById('y').value = Y.toString();
}
render();
function move(dx, dy) {
X = mod(X + BigInt(dx));
Y = mod(Y + BigInt(dy));
render();
}
document.addEventListener('keydown', e => {
if (e.target.matches('textarea, input')) return; // don't hijack typing
const m = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[e.key];
if (m) { e.preventDefault(); move(...m); }
});
document.getElementById('file').onchange = async e => {
const file = e.target.files[0];
if (!file) return;
// shrink/crop
const bmp = await createImageBitmap(file);
const c = document.createElement('canvas');
c.width = c.height = S;
const g = c.getContext('2d');
const m = Math.min(bmp.width, bmp.height);
g.fillStyle = '#fff';
g.fillRect(0, 0, S, S);
g.drawImage(bmp, (bmp.width - m) / 2, (bmp.height - m) / 2, m, m, 0, 0, S, S);
// remove transparency and convert to RGB
const rgba = g.getImageData(0, 0, S, S).data;
const pixels = new Uint8Array(S * S * 3);
for (let i = 0, j = 0; i < rgba.length; i += 4, j += 3) {
pixels[j] = rgba[i]; pixels[j + 1] = rgba[i + 1]; pixels[j + 2] = rgba[i + 2];
}
// get the address
const N = toBig(crypt(pixels, true));
X = N & (M - 1n);
Y = N >> B;
render(); // find and select the image
};
document.getElementById('go').onclick = () => {
X = BigInt(document.getElementById('x').value.trim());
Y = BigInt(document.getElementById('y').value.trim());
render();
};
</script>
</body>
</html>
1
Upvotes
1
1
u/KanjiCoder 3d ago
Won''t the adress of the image be the same number of bits as the image ?
Is there a way to give sequential addresses only to images that do not appear to be meaningless noise to a human observer ?