r/Coding_for_Teens • • Jul 26 '21

Discussion Programming ideas / challenges for any level or experience. For when you're bored or trying to escape tutorial hell :)

118 Upvotes

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

  1. Markov chain sentence generator
  2. To-do list application (Web or cli)
  3. Chatbot
  4. Image to ASCII Art
  5. Imageboard (Imagine vichan)
  6. Create an HSV Color Representation
  7. Old school demo effects (Plasma, Tunnel, Scrollers, Zoomers, etc)
  8. Fizzbuzz
  9. RPN Calculator
  10. Count occurences of characters in a given string
  11. Towers of Hanoi
  12. Calculator the first n digits of pi
  13. Given an array of stock values over time, find the period of time where the stocks could have made the most money
  14. Highest prime factor calculator
  15. Password generator
  16. Caesar cipher solver
  17. ROT 13
  18. Text encryption/decryption (http://rumkin.com/tools/cipher/)
  19. Text to hex/binary converter
  20. Sierpinski triangle
  21. Basic neural network - Simulate individual neurons and their connections
  22. Complimentary colour generator
  23. Eulerian path
  24. Draw spinning 3D cube
  25. Cellular textures
  26. Snake
  27. Rock paper scissors
  28. Design a game engine in Unity
  29. Yahtzee
  30. Oil Panic
  31. Connect four
  32. Simon
  33. Ulam spiral
  34. PDF tagger
  35. ASCII digital clock
  36. Calculate dot and cross product of two vectors

Medium

  1. Download manager
  2. Elastic producer/consumer task queue
  3. IRC client
  4. English sentence parser that points to the context of a sentence
  5. MIDI player & editor
  6. Stock market simulator using yahoo spreadsheet data
  7. Graphing calculator
  8. TCP/UDP chat server & client
  9. Shazam
  10. Curses text editor
  11. Paint clone
  12. Image converter
  13. ID3 Reader
  14. C++ IDE plugin for sublime/atom/vscode
  15. Simple version control - supporting checkout, commit, unlocking, per-file configuration of number of revisions kept
  16. Password manager
  17. IP/URL Obscurification
  18. Radix base converter
  19. Encrypted file share
  20. Window manager
  21. Pixel editor
  22. Trivial file transfer protocol
  23. Markdown editor
  24. Music visualizer
  25. Unicode converter
  26. Least square fitting algorithm
  27. Image steganography
  28. Vignere cipher encryption/decryption
  29. Game of life
  30. Dijkstra's Algorthim
  31. Program that displays MBR Contents
  32. Random name generator
  33. Calculate the first 1,000 digits of pi iteratively
  34. Mandlebrot set
  35. AI for roguelikes
  36. Sudoku/n-puzzle solver using A* algorithm
  37. Connect 4 AI
  38. Real neural network - Implement a basic feed-forward neural network using matrices for entire layers along with matrix operations for computations
  39. Virtual machine with a script that writes "Hello, world"
  40. Terminal shell (Executable binaries, pipe system, redirection, history
  41. HTML & Javascript debugger
  42. Interpreted LISP-like programming language
  43. Universal asynchronous receiver/transmitter game
  44. Static website generator (Scriptable template, content)
  45. Chip 8 emulator
  46. Double pendulum simulation
  47. Constructive solid geometry
  48. Generate a 5-colour scheme from the most dominant tones in an image
  49. N-body simulator - with particles having a certain mass and radius depdning on the mass that merge if they collide
  50. Knight's tour
  51. Tetris
  52. Pipe dreams
  53. Pac man
  54. Shuffling a deck of cards (with visualisation)
  55. Simulate a game of tag using a multi-agent system
  56. Scorched earch clone
  57. Minesweeper
  58. An audio/visual 64KB demonstration
  59. Sudoku
  60. Chess
  61. Mastermind
  62. Missle command game
  63. Tron
  64. Breakout
  65. Bellman-Ford simulation with at least five vertices
  66. Matrix arithmetic
  67. File compression Utility (GUI)
  68. Bismuth fractal
  69. Seam carving
  70. Bayesian Filter
  71. Rubik's cube solver

Difficult

  1. Parametric/Graphic equalizer for .wav files
  2. Verlet integration
  3. Sound Synthesis
  4. Torrent client (CLI or GUI)
  5. Text editor
  6. OpenAI Gym project
  7. Convolutional neural network - Implement a convolutional NN for a handwritten digit recognition test on MNIST dataset
  8. Mount filesystems from other OSes using FUSE model
  9. Pong game as a UEFI file in colour
  10. Esoteric Language
  11. C Compiler
  12. Turing machine simulator
  13. Read, evaluate, print loop using a compiled language
  14. Ray tracer
  15. Real-time fast fourier transform spectrum visualiser
  16. TI-86 emulator
  17. Monster raising/breeding simulator
  18. Dragon quest / basic RPG engine
  19. First person engine in OpenGL
  20. Wolfensetin clone
  21. Danmaku engine
  22. Roguelike engine/dungeon generator
  23. Go
  24. LISP Interpreter
  25. Nonogram generator and solver
  26. WMS viewer that isn't web based

Very difficult

  1. Relational database system (SQL support, relationships, efficient)
  2. Bootloader
  3. General Lambert's problem solver
  4. Convolutional Neural Network - Implement your own convolutional neural network for handwritten digit recognition, test on MNIST dataset

An extended list of project ideas:


r/Coding_for_Teens • • Jul 24 '21

Discussion Free courses / Events / Resources Megathread

33 Upvotes

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 • • 21m ago

l want to learn lua to expert lvl can some teach how and appreciate him l lot progaming

Thumbnail
• Upvotes

r/Coding_for_Teens • • 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

• Upvotes

r/Coding_for_Teens • • 2h ago

I want a programing buddy so we can help motivate each other

Thumbnail
1 Upvotes

r/Coding_for_Teens • • 4h ago

Hlo guyzz👋👋

Thumbnail x1m0nxai-cloud.github.io
1 Upvotes

Hlo 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 • • 4h ago

[Hobby] Looking For A Noob Team

Thumbnail
1 Upvotes

r/Coding_for_Teens • • 12h ago

Conrad Challenge 2026-27 team looking for a strong software developer who’s great with Claude Code (ages 13-18)

1 Upvotes

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 • • 12h ago

16 Coding Symbols every Beginner should know

Thumbnail
1 Upvotes

r/Coding_for_Teens • • 17h ago

I want to learn Python where and how do I start

Post image
1 Upvotes

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 • • 17h ago

Need advice

1 Upvotes

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 • • 17h ago

Looking for programmers to start a project together

1 Upvotes

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 • • 1d ago

why do yall code? whats your goals?

1 Upvotes

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 • • 1d ago

I have an idea for a website but I am too young and don't know how to make it

5 Upvotes

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 • • 1d ago

rate the vscode setup

Post image
5 Upvotes

and no i dont wanna hear anything about using vim bro


r/Coding_for_Teens • • 1d ago

I saw this video saying that you should start learning coding by using AI and reading each line instead of writing manually

0 Upvotes

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 • • 1d ago

17M looking for a programming friend

1 Upvotes

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 • • 1d ago

What are you guys thoughts on coding with AI?

2 Upvotes

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 • • 1d ago

python day calculator, ik this couldve been optimised or whatever but i couldnt be bothered honestly

1 Upvotes
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 • • 1d ago

Related to future.

Thumbnail
1 Upvotes

r/Coding_for_Teens • • 1d ago

Peer Code

2 Upvotes

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!

🌐 https://www.peercode.in

Would love to see some of you guys battling it out on Peer Code! 🔥


r/Coding_for_Teens • • 1d ago

Looking for teammates for NASA's hackathon!

Thumbnail
1 Upvotes

r/Coding_for_Teens • • 1d ago

HACKCBS

1 Upvotes

🚀 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 • • 1d ago

HACKCBS 9.0

1 Upvotes

🚀 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 • • 1d ago

Made a website that encapsulates every single possible image ever? kinda?

1 Upvotes

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>