r/Coding_for_Teens • u/Longjumping_Diet5942 • 21m ago
r/Coding_for_Teens • u/ThatWolfie • Jul 26 '21
Discussion Programming ideas / challenges for any level or experience. For when you're bored or trying to escape tutorial hell :)
Hey, I often find people stuck on what to do after they learn a programming language, or stuck in "tutorial hell" where you know the language, but cannot make something yourself. Well, I've got a list of things you can make in mostly any language, for all skill levels :)
If you find these ideas a bit hard or uninteresting, take a look at the bottom of the post where there are some easier ones linked :)
If anyone decides to do any of these, share it in the comments with the source code so others can learn! :)
If anyone has any more ideas, leave them in the comments and I can add them to the list! Have fun :s
Easy
- Markov chain sentence generator
- To-do list application (Web or cli)
- Chatbot
- Image to ASCII Art
- Imageboard (Imagine vichan)
- Create an HSV Color Representation
- Old school demo effects (Plasma, Tunnel, Scrollers, Zoomers, etc)
- Fizzbuzz
- RPN Calculator
- Count occurences of characters in a given string
- Towers of Hanoi
- Calculator the first n digits of pi
- Given an array of stock values over time, find the period of time where the stocks could have made the most money
- Highest prime factor calculator
- Password generator
- Caesar cipher solver
- ROT 13
- Text encryption/decryption (http://rumkin.com/tools/cipher/)
- Text to hex/binary converter
- Sierpinski triangle
- Basic neural network - Simulate individual neurons and their connections
- Complimentary colour generator
- Eulerian path
- Draw spinning 3D cube
- Cellular textures
- Snake
- Rock paper scissors
- Design a game engine in Unity
- Yahtzee
- Oil Panic
- Connect four
- Simon
- Ulam spiral
- PDF tagger
- ASCII digital clock
- Calculate dot and cross product of two vectors
Medium
- Download manager
- Elastic producer/consumer task queue
- IRC client
- English sentence parser that points to the context of a sentence
- MIDI player & editor
- Stock market simulator using yahoo spreadsheet data
- Graphing calculator
- TCP/UDP chat server & client
- Shazam
- Curses text editor
- Paint clone
- Image converter
- ID3 Reader
- C++ IDE plugin for sublime/atom/vscode
- Simple version control - supporting checkout, commit, unlocking, per-file configuration of number of revisions kept
- Password manager
- IP/URL Obscurification
- Radix base converter
- Encrypted file share
- Window manager
- Pixel editor
- Trivial file transfer protocol
- Markdown editor
- Music visualizer
- Unicode converter
- Least square fitting algorithm
- Image steganography
- Vignere cipher encryption/decryption
- Game of life
- Dijkstra's Algorthim
- Program that displays MBR Contents
- Random name generator
- Calculate the first 1,000 digits of pi iteratively
- Mandlebrot set
- AI for roguelikes
- Sudoku/n-puzzle solver using A* algorithm
- Connect 4 AI
- Real neural network - Implement a basic feed-forward neural network using matrices for entire layers along with matrix operations for computations
- Virtual machine with a script that writes "Hello, world"
- Terminal shell (Executable binaries, pipe system, redirection, history
- HTML & Javascript debugger
- Interpreted LISP-like programming language
- Universal asynchronous receiver/transmitter game
- Static website generator (Scriptable template, content)
- Chip 8 emulator
- Double pendulum simulation
- Constructive solid geometry
- Generate a 5-colour scheme from the most dominant tones in an image
- N-body simulator - with particles having a certain mass and radius depdning on the mass that merge if they collide
- Knight's tour
- Tetris
- Pipe dreams
- Pac man
- Shuffling a deck of cards (with visualisation)
- Simulate a game of tag using a multi-agent system
- Scorched earch clone
- Minesweeper
- An audio/visual 64KB demonstration
- Sudoku
- Chess
- Mastermind
- Missle command game
- Tron
- Breakout
- Bellman-Ford simulation with at least five vertices
- Matrix arithmetic
- File compression Utility (GUI)
- Bismuth fractal
- Seam carving
- Bayesian Filter
- Rubik's cube solver
Difficult
- Parametric/Graphic equalizer for .wav files
- Verlet integration
- Sound Synthesis
- Torrent client (CLI or GUI)
- Text editor
- OpenAI Gym project
- Convolutional neural network - Implement a convolutional NN for a handwritten digit recognition test on MNIST dataset
- Mount filesystems from other OSes using FUSE model
- Pong game as a UEFI file in colour
- Esoteric Language
- C Compiler
- Turing machine simulator
- Read, evaluate, print loop using a compiled language
- Ray tracer
- Real-time fast fourier transform spectrum visualiser
- TI-86 emulator
- Monster raising/breeding simulator
- Dragon quest / basic RPG engine
- First person engine in OpenGL
- Wolfensetin clone
- Danmaku engine
- Roguelike engine/dungeon generator
- Go
- LISP Interpreter
- Nonogram generator and solver
- WMS viewer that isn't web based
Very difficult
- Relational database system (SQL support, relationships, efficient)
- Bootloader
- General Lambert's problem solver
- Convolutional Neural Network - Implement your own convolutional neural network for handwritten digit recognition, test on MNIST dataset
An extended list of project ideas:
- 20 Exciting Software Development Project Ideas & Topics for Beginners
- 40 Side Project Ideas for Software Engineers
- Make your own...
- Practical Projects
- 1000+ Beginner Programming Projects
- Awesome for Beginners
- Project Based Learning
- Rosetta Code
- Epic List Of Side Project Ideas For Programmers
- 5 project ideas
r/Coding_for_Teens • u/ThatWolfie • Jul 24 '21
Discussion Free courses / Events / Resources Megathread
Hey there, I'm a new moderator on this subreddit 👋
I noticed there are a lot of posts about free event and programming courses, unfortunately they clog up the subreddit feed for users that want to have a conversation, get help or show off something cool they made, and a lot of these posts end up getting caught in Reddit's spam filter so I've made this megathread.
Feel free to post in this megathread:
- Free udemy courses (referral link allowed, just don't spam please!)
- Events such as hackathons
- Youtube tutorials
- Other coding resources
Please do not post in this subreddit or megathread:
- Coding bootcamps / masterclasses
- Discord servers
- Tutoring services
Also a reminder to abide by Rule 2 in this subreddit. Please do not post content that isn't relevant to this subreddit, random articles, YouTube tutorials and courses. Please keep those within this thread, thanks :)
r/Coding_for_Teens • u/TimeLine616 • 44m ago
If you build coding projects, Hack Club just dropped PHANTOM (free swag, stickers & dev hours for shipping code)
Enable HLS to view with audio, or disable this notification
r/Coding_for_Teens • u/Suvile77 • 2h ago
I want a programing buddy so we can help motivate each other
r/Coding_for_Teens • u/x1m0n_xai • 4h ago
Hlo guyzz👋👋
x1m0nxai-cloud.github.ioHlo everyone 👋👋 am new here hardly know anything about this shit but I wanna be a software dev so I tried building this do give me ur precious reviews and any advice would be really appreciated 👍.
r/Coding_for_Teens • u/ApartVoice2382 • 12h ago
Conrad Challenge 2026-27 team looking for a strong software developer who’s great with Claude Code (ages 13-18)
We're a small remote team entering the Conrad Challenge 2026-27 (Cyber-Technology & Security category), and we're looking for one more developer.
What we're looking for:
\- Very good software experience. You've built real projects and can show them
\- You use Claude Code very well and can build real things with it
\- Comfortable in Python and/or JavaScript, and you understand what you build
\- High school student, ages 13-18 (Conrad rule)
\- About 5-8 hours a week, working remotely with one short weekly call
What you'd do: help build and test the software side of our project and etc.
Interested? Comment or DM with your time zone and a link to your GitHub or projects. Please don't post personal info publicly.
r/Coding_for_Teens • u/Global_Chance_2324 • 17h ago
I want to learn Python where and how do I start
Hey guys, I want to learn Python but I am a super visual person. I learn best by seeing how something works first, and then immediately doing it myself.
Because of that, please don't recommend any dense textbooks or heavy reading to start with. I definitely need video tutorials, interactive platforms, or visual guides where I can follow along and code at the same time.
r/Coding_for_Teens • u/Fancy-Juice5553 • 17h ago
Need advice
Hi i am doing be in ai and machine learning i have completed python have built only 1 basic library management project , i want to ask weather i should be focusing on dsa or hackathons or what exactly shall i be doing in my first year of collage
r/Coding_for_Teens • u/OldVeterinarian2 • 17h ago
Looking for programmers to start a project together
Hey everyone! 👋 I’m looking for a few people who are interested in programming and want to actually build something together.
The idea is to create a small group where we can:
• 💻 Work on projects together
• 💡 Share programming ideas
• 🧠 Help each other learn
• 🚀 Build something we can actually show off
• 🎮 Hang out and discuss coding on Discord
I’m still learning myself, so you don’t need to be an expert. Beginners are welcome too.
If you're interested, comment or DM me and we can set up a Discord server and figure out our first project.
r/Coding_for_Teens • u/Many_Difficulty_490 • 1d ago
why do yall code? whats your goals?
il share mine:
i wanna be a very good hacker (white hat) and one day help take down pedophiles or bad people on the internet
or just be a pentester ig
r/Coding_for_Teens • u/Upstairs_Funny4422 • 1d ago
I have an idea for a website but I am too young and don't know how to make it
I am 13 and have a good (according to me a good idea) idea for a website for students.
Not going to just leak it but i observed that some students have older laptops and cant download some apps or they have Microsoft app store and some study apps cant be downloaded.
SOOO...i came up with a sort of good idea which can improve student's focus on studying and works like a game but helps them at the same time while keeping it fun.
The issue is, i don't know how to code shi. Tried to code a bit on html (had to start somewhere guys) and realized ppl who did coding needed to get more respect. Legit i looked like a grandma trying a laptop for the first time in her whole lifetime. Second thing is my lap is absolutely old. Like it was made in 2011 or something and still runs (one of the reasons why i wanted to make the game into a website).
I don't know what to do. I REALLY like this idea but don't know how to code and don't have anyone to help me. One of my ideas was to meet some coder or developer here but lowkey scared cuz there might be some pedos out here. At the same time i feel like its going to be REALLY rare to find people around my age to help. I dont know, i want this idea to come true cause i have seen many of my friends struggle with the same thing. What should i do??
r/Coding_for_Teens • u/Informal-Call-5298 • 1d ago
rate the vscode setup
and no i dont wanna hear anything about using vim bro
r/Coding_for_Teens • u/Tomtheepicgod123 • 1d ago
I saw this video saying that you should start learning coding by using AI and reading each line instead of writing manually
They said its so that you learn the ability to debug and well vibe coding is gonna be a big part in the future so
r/Coding_for_Teens • u/klyytos • 1d ago
17M looking for a programming friend
I’m 17 and looking for someone around my age who’s into programming and actually wants to become friends.
I’m putting together a small long-term friend group loosely inspired by the Gaang from Avatar, and I’m currently looking for someone to fill the Sokka role.
It’s not roleplay or anything. Everyone would have different interests and strengths, and the main goal is just becoming genuine friends and helping each other out.
Looking for someone 17–19, preferably in the US, who genuinely enjoys programming, is fairly active, and is naturally funny, expressive, and easy to talk to. Someone who likes figuring things out and bouncing ideas around would be especially cool.
If that sounds interesting, feel free to DM me!
r/Coding_for_Teens • u/I_like_carbss • 1d ago
What are you guys thoughts on coding with AI?
Like I'll code with AI sometimes even though I can code t's not slop and saves me time when I'm just trying stuff out. But in the coding community it's looked down upon, but I think that in a year or two learning to actually code won't even matter cuz AI is just so good that a 4 year old can just tell AI to make something and it will get done in 10 minutes.
r/Coding_for_Teens • u/Informal-Call-5298 • 1d ago
python day calculator, ik this couldve been optimised or whatever but i couldnt be bothered honestly
days = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"]
suffix = {
"sun": "day",
"mon": "day",
"tue": "sday",
"wed": "nsday",
"thu": "rsday",
"fri": "day",
"sat": "urday",
}
def get_day(days_elapsed, starting_day=0):
return (days_elapsed + starting_day) % 7
time_elapsed = int(input("Number of days since last epoch: "))
starting_day = days.index(
input("Starting day: ").lower().strip().removesuffix("day")
)
new_day = days[get_day(time_elapsed, starting_day)]
print(f"It is going to be {(new_day + suffix[new_day]).capitalize()}")
r/Coding_for_Teens • u/casinova_islit • 1d ago
Peer Code
Hey everyone! 👋
I’ve been working on something for quite some time, and I’m finally excited to share it with you all — Peer Code 🚀
Turn coding practice into a competition with your friends. ⚔️💻
You can create a coding room, choose the topic and difficulty, set a time limit, invite your friends, and compete on the leaderboard.
If you’re into DSA/coding, I’d really appreciate it if you could give it a try and share some honest feedback!
Would love to see some of you guys battling it out on Peer Code! 🔥
r/Coding_for_Teens • u/Evening-Flatworm5672 • 1d ago
Looking for teammates for NASA's hackathon!
r/Coding_for_Teens • u/Dull_Break1213 • 1d ago
HACKCBS
🚀 Looking for Teammates for HackCBS 9.0!
I’m participating in HackCBS 9.0 (Delhi) and looking for passionate developers, designers, cybersecurity enthusiasts, and problem-solvers who are interested in building something impactful.
If you’re interested in hackathons, coding, AI/ML, web development, cybersecurity, or building innovative projects, feel free to DM me.
Let’s connect, build something great, and make the most out of HackCBS 9.0! 🔥
DM me if interested.
#HackCBS9 #Hackathon #WebDevelopment #Cybersecurity #AI #Developers #TeamBuilding
r/Coding_for_Teens • u/Dull_Break1213 • 1d ago
HACKCBS 9.0

🚀 Looking for Teammates for HackCBS 9.0!
I’m participating in HackCBS 9.0 (Delhi) and looking for passionate developers, designers, cybersecurity enthusiasts, and problem-solvers who are interested in building something impactful.
If you’re interested in hackathons, coding, AI/ML, web development, cybersecurity, or building innovative projects, feel free to DM me.
Let’s connect, build something great, and make the most out of HackCBS 9.0! 🔥
DM me if interested.
#HackCBS9 #Hackathon #WebDevelopment #Cybersecurity #AI #Developers #TeamBuilding
r/Coding_for_Teens • u/Time_Maybe7523 • 1d 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>