# index # - featured # - games for kids visiting my site # - Gunn games # - the House series # - more games? # - tools # - video editors # - image transformers # - Scratch # - text files # - calculators # - memey stuff # - school math # - blogs # - penland/penworld # - school tools # - more visual things # - nerdy things # - AI attempts # - directories # - Eyo - path: /all/ image: img/all2-smaller.png name: Almost everything description: >- A sitemap of effectively all the files on this site. tags: - directory - path: /platformre/ image: img/plat.webp name: Platformre description: >- A tile-based platformer with a random level generator. tags: - game - recommend - path: /platformre/a/ image: img/aplat-smaller.png name: A Platformer description: >- A series of platformer levels translated from my Scratch project. tags: - game - recommend - path: /javascripts/audio-editor/ image: img/audio-editor-smaller.png name: Audio Editor description: >- An audio editor based on stolen code from Scratch. tags: - recommend - utility - path: /javascripts/shepform/colour.html image: img/colourpick-smaller.png name: Colour input II description: >- A colour input translated from a Scratch project. tags: - recommend - utility - path: /hello-world/largetext.html image: img/largetext.webp name: Large Text description: >- Write text in a large font to show to your friend next to you or across the room. I initially made this as a local file on my Chromebook for when I couldn't comfortably speak due to a sore throat. I eventually uploaded it online since my friend wanted it too. I now use it to talk to my friends during lecture. tags: - recommend - utility - path: /platformre/maker/ image: img/platmakre-smaller.png name: Level editor description: >- A level creator and editor for Platformre. tags: - game - utility - path: /gamepro5/minigames/turkeys/ image: img/turkeys.png name: Turkeys description: >- A turkey collection game. tags: - game - incomplete - path: /telegraph/ image: img/tele-smaller.png name: Telegraph description: >- A morse code game for a history project. tags: - game - school - path: /javascripts/clicker/ image: img/click-smaller.png name: Clicker Game description: >- A basic clicker game. tags: - game - path: /gamepro5/minigames/dodgedots.html image: img/reds-smaller.png name: Dodge dots game thing description: >- A minimalist dodging game translated from a Scratch project. tags: - game - path: /gamepro5/minigames/explodeyothello.html image: img/explodeyothello.webp name: Explodey Othello description: >- A clone of a Scratch game by @joshrawesome involving shooting at enemies to prevent them from spreading bad tiles. tags: - game - path: /gamepro5/minigames/color.html image: img/color.png name: Color fight thing description: >- A simple two-player game based on a Scratch project. tags: - game - path: https://orbiit.github.io/gunn-web-app/games/connect4.html image: img/connect4-smaller.png name: Connect 3 description: >- A proof-of-concept connect 3 game. tags: - game - path: /gunn-student-sim/ image: img/gunn student simulator-smaller.png name: Gunn student simulator description: >- A game satirizing the lives of students at my school. tags: - game - school - path: /fun-gunn-run/ image: img/fgr-smaller.png name: “Fun” Gunn Run description: >- A Temple Run clone set at my school. tags: - game - school - path: /yesnt/ image: img/yesnt-smaller.png name: YESNT description: >- An unintuitive and rather difficult escape game based on a true phenomenon at my school. tags: - game - school - unintuitive - path: /unclear-target-w-very-confusing-critique/ image: img/pistole-smaller.png name: Pistole offers a wide range of opportunities. description: >- My satire project for English class criticizing a specific institution at my school. tags: - game - school - path: /gamepro5/minigames/choice.html image: img/choice.webp name: Escape from SELF description: >- A short and simple choose-your-own adventure game. It was mostly a proof-of-concept or base engine that could be used for a larger game in the future. tags: - game - school - path: /thingkingland/bookmarklets/theHouse.html image: img/house-smaller.png name: The House description: >- A choose-your-own adventure game. tags: - game - path: /thingkingland/the-hotel/ image: img/hotel-smaller.png name: The Hotel description: >- The sequel to the House. tags: - game - path: /hello-world/hh23-rhythm/src/javascript-impatience/ image: img/rhythm.webp name: Rhythm Game description: >- This was our submission for Hard Hacks 2023, a hardware hackathon. The hardware part relied on a circuit board that we no longer had (it was borrowed from the event sponsors), plugged into the computer by a USB cable. The web interface would access the board's sensors using the Web Serial API. Since I don't have the board anymore, and neither do you, I've replaced the board controls with keyboard controls: left/right arrows for the left/right buttons, and the mouse/touchscren to swipe left and right. tags: - game - school - path: /thingkingland/games/PFPFPF/ image: img/pfpfpf-smaller.png name: PFPFPF description: >- A simple game where you move your cursor around to pop bubbles quickly. tags: - game - path: /thingkingland/games/Roshambo/roshambo.html image: img/roshambo-smaller.png name: Roshambo description: >- Fast-paced rock paper scissors. tags: - game - path: /thingkingland/games/SHF/ image: img/shf.webp name: SHF description: >- A typing game. tags: - game - path: /javascripts/towering-game.html image: img/tower.webp name: Tower builder description: >- A clone of those tower builder games where you stack blocks by timing your release so that the block lands on the tower. If you mistime releasing the block, then the tower gets narrower. The block moves back and forth faster over time. tags: - game - path: /javascripts/gif-frames-viewer.html image: img/gif-frame.webp name: GIF frames viewer description: >- If a GIF is moving too fast, upload it here to inspect each individual frame. tags: - new - utility - path: /javascripts/one-pdf.html image: img/one-pdf.webp name: Combine images into single PDF description: >- During Covid, we often had to submit photos or screenshots of our work as a single PDF. This just puts each image on one page. It can support pages of different sizes, if you want that. You can also add pages containing text if you want, but honestly they're kind of ugly (and a bit buggy). tags: - utility - school - path: /words-go-here/misc/kamala.html image: img/brat.webp name: Brat album generator description: >- Put whatever text you want on the characteristic chartreuse green of Brat's album cover, and maintain its iconic blur and stretch. tags: - new - utility - path: /javascripts/video/shit/ image: img/openshit-smaller.png name: OpenShit description: >- A less simple video editor. tags: - utility - unintuitive - path: /javascripts/video/ image: img/smothered-smaller.png name: Smothered Rock description: >- A primitive video editor. tags: - utility - path: /javascripts/sstv-encoder.html image: img/sstv.webp name: SSTV encoder description: >- Encodes the given image for SSTV, using Scottie S1. This allows you to transmit images over radio. tags: - utility - path: /words-go-here/misc/fft.html image: img/fft.webp name: Spectrogram description: >- Analyze the frequencies received by your device's microphone. tags: - utility - path: /words-go-here/misc/filter.html image: img/filters.webp name: Audio filter explorer description: >- Explore how different filters in signal processing, such as low-pass and high-pass filters, affect audio. This uses the Web Audio API's BiquadFilterNode, which has many filters built into the browser. tags: - new - utility - path: /words-go-here/misc/left-ear.html image: img/left-ear.webp name: Pan left and right description: >- Lets you pan audio left and right so you can check if your stereo speakers are working, or to see which speaker/earbud is the right one, or to figure out how deaf your left ear is. tags: - utility - path: /words-go-here/misc/8bit-sound.html image: img/8bit.webp name: Make audio low quality description: >- Reduces the bit depth of the samples in your audio to 8 bits, resulting in very crunchy, compressed audio. tags: - utility - path: /javascripts/mp4-analyze.html image: img/mp4.webp name: MP4 analyzer description: >- Analyzes the components of an mp4 file, and allows you to edit its fields and download the result. The most compelling use case for this is editing the duration of the video. Even if you don't add any movie data, many video players, like Discord's, will show whatever you set the duration to, at least until near the end of the video when it knows how long it really is. This way, you can create videos that seem to be days long without going over upload limits. I know that it works for mp4 files produced by OBS, but it doesn't work with all mp4 files, like the ones taken by my phone. tags: - utility - path: /qr/ image: img/qr.webp name: QR Code Generator & Scanner description: >- This is a QR code transceiver: it can "transmit" (generate) and "receive" (scan) QR codes, all in one web app. I use this to send links, passwords, and other text between devices, phones and laptops, as long as they have a camera or webcam. I've used this to set up my company-issued laptop during my internship. I'm surprised no one has something like this yet. Many stock camera apps on phones can scan QR codes, and many websites can generate QR codes, but none of them (that I know of) can do both. This app is just a user interface for two libraries, node-qrcode for generating QR codes and qr-scanner for scanning them. tags: - new - utility - path: /words-go-here/misc/path.html image: img/path.webp name: SVG path editor description: >- Edit the vertices of an SVG path, with all of the SVG path types (lines, cubic beziers, arcs) available. Although it could benefit with some more features, I still find it occasionally useful for inspecting paths that fit on the canvas. tags: - utility - path: /words-go-here/misc/svgtopng.html image: img/svgtopng-smaller.png name: SVG to PNG description: >- An SVG to PNG converter with options to resize. tags: - utility - path: /javascripts/tosvg.html image: img/bitmap-to-vector.webp name: Embed image inside SVG description: >- Embeds an image (which can be a GIF) inside an SVG file. This allows you to upload bitmap images of any size to Scratch, which would otherwise reduce its resolution to 480 by 360. This is basically PNG to SVG. tags: - utility - path: /javascripts/jpg-quality.html image: img/jpg-quality.jpg name: JPG Quality description: >- An image-to-JPG converter with an option to reduce the quality for maximum artifacts. tags: - utility - path: /javascripts/chopper.html image: img/chopper.webp name: Image chopper description: >- Chop an image into square pieces. This can be used for turning a large image into a grid of Discord emoji or Instagram posts. tags: - utility - path: /text-save/ image: img/text-save-smaller.png name: text-save description: >- A primitive note-taking web app. tags: - utility - path: /javascripts/charcopy.html image: img/charcopy-smaller.png name: Character copy area description: >- Click to copy a special character or a string. tags: - utility - path: /javascripts/cryptography.html image: img/crypto-smaller.png name: Cryptography description: >- Encoders and decoders for common ciphers used on Scratch. tags: - utility - path: /htmlifier/ image: img/htmlifier-smaller.png name: HTMLifier description: >- A Scratch project packager that spits out a fat HTML file. tags: - utility - path: /scratch-gui/ image: img/eyangicques-smaller.png name: E羊icques description: >- A mod of Scratch 3.0 that adds small changes like custom aspect ratio support and loading extensions from a URL. tags: - utility - path: /javascripts/webhook-sender.html image: img/webhook.webp name: Discord webhook sender description: >- A WYSIWYG editor for creating messages to send to a webhook. It allows you to add embeds and see (more or less) what your message will look like before sending it. To send a message to a webhook, paste the webhook URL in the bar at the bottom then press enter while your cursor is blinking in the URL field. tags: - utility - path: /javascripts/floating-sticky-note.html image: img/sticky.webp name: Pin sticky note on top description: >- The new Document Picture-in-Picture API lets websites make a pop-up window that always stays on top, even above other non-browser windows. This lets you take notes on a little floating notepad while browsing a news article, for example, instead of having to split your screen in half. For some reason, many notes apps do not have this feature. tags: - utility - path: /words-go-here/misc/diff.html image: img/diff.webp name: Diff Checker description: >- Uses the diff checker provided by Monaco (VS Code's text editor) to highlight the differences in two versions of text. The diff checkers online have too many ads; I just want to get straight to the diffing. tags: - visual - path: /javascripts/large-file-viewer.html image: img/large-file-viewer.png name: Large file viewer description: >- View the contents of a large text file without lagging. Useful for debugging files produced by the HTMLifier. tags: - utility - unintuitive - path: /javascripts/carecalc.html image: img/carecalc-smaller.png name: Grade Care Calculator description: >- A minimum necessary grade calculator. tags: - utility - school - path: /javascripts/height.html image: img/height.png name: Centimeter converter description: >- Convert between centimeters and feet and inches because Google can only convert from centimeters to either feet or inches, but not both, but my dumb American mind can only understand a person's height in feet and inches. tags: - utility - path: /javascripts/cyrillic-finder.html image: img/cyrillic-smaller.png name: Special character finder description: >- A detector of non-US-keyboard characters. tags: - utility - path: /javascripts/discord-transformer.html image: img/transformer.webp name: Text transformer description: >- Transform each letter in a message for Discord. You can put each letter in its own spoiler to annoy people, or convert each letter into its corresponding regional indicator emoji to show them in big blue box letters. tags: - utility - path: /javascripts/tts.html image: img/tts.webp name: Text to Speech description: >- Lets you use your browser's built-in text-to-speech engine. tags: - utility - path: /javascripts/gif-caption.html image: img/gif-caption.png name: GIF caption editor description: >- Add a text label above a GIF. tags: - utility - path: /hello-world/weird-flex.html image: img/weird-flex-but-ok-smaller.png name: Weird flex but ok description: >- A generator replacing each word in the phrase with a synonym. tags: - utility - path: /words-go-here/misc/no-prereqs.html image: img/prereqs.webp name: There are no prereqs description: >- Make UCSD roast someone for you! UCSD's Schedule of Classes will print whatever is given in the URL, and "There are no prerequisites for" leaves room for a number of creative phrases. You can disguise your message in the URL using the URL obfuscator. tags: - school - path: /javascripts/obfuscate-url.html image: img/obfuscate.webp name: URL obfuscator description: >- Obfuscate words in a URL by URL-encoding every letter, even though it's not necessary. tags: - utility - path: /words-go-here/misc/queens.html image: img/queens.webp name: LinkedIn Queens solver description: >- Deprive yourself of fun and easily beat 90% of CEOs by screenshotting LinkedIn's daily puzzle and letting the website solve it for you. tags: - new - utility - path: /hello-world/attitude.html image: img/attitude-smaller.png name: Attitude description: >- Calculates the sum of each letter's value in a word. tags: - utility - path: /trumpdays/ image: img/trumpdays-smaller.png name: Trump days description: >- A countdown for Trump's second term. tags: - visual - path: /hello-world/drills.html image: img/drills-smaller.png name: Trig Drill Generator description: >- A generator of sine and cosine problems with basic angles. tags: - utility - school - path: /words-go-here/misc/trig.html image: img/trig.webp name: Trig and calculus cheat sheet description: >- A reference sheet for my high school trigonometry and calculus classes with identities, derivatives, and antiderivatives for trigonometric functions. And Taylor series. This basically is a list of math equations I have to memorize and don't want to. tags: - visual - school - path: /words-go-here/misc/math20d.html image: img/math20d.webp name: Differential calculus cheat sheet description: >- A reference sheet for MATH 20D, my differential calculus class, listing all the types of differential equations we were taught and how to solve them. tags: - visual - school - path: /words-go-here/misc/big-o.html image: img/big-o.webp name: Big O notations description: >- A reference sheet comparing the various big-O notations and what they mean. Many of my theoretical CS classes keep referencing the different notations, and I keep forgetting what they mean. tags: - visual - school - path: /javascripts/rounded-decimal-to-fraction.html image: img/convert-to-fraction.webp name: Convert decimal to fraction description: >- Convert a decimal expansion to possible fractions that may be rounded as the decimal. Fairly useful for figuring out what fraction a decimal may have come from. tags: - utility - path: /hello-world/sigfig.html image: img/sigfig.webp name: Sig fig counter description: >- Counts the number of significant figures in a number, at least according to the rules taught in my high school Chemistry Honors class. To specify ×10^, use e. For example, 2.3e-2 is equal to 0.023. 100 is assumed to have one sig fig. To specify that the trailing zeroes are significant, leave a trailing decimal point (e.g. 100.). This goes against sig fig conventions that I've seen in other contexts, like AP Physics. This alternate convention treats 100 as having three significant figures, and uses 1e2 to specify one sig fig. tags: - utility - school - path: /roots/ image: img/roots-smaller.png name: Roots and Affixes description: >- Some Greek and Latin roots. tags: - school - incomplete - path: /happynumbers/ image: img/mems-smaller.png name: Happy Number Finder description: >- A calculator for happy numbers. tags: - school - path: /happynumbers/sieve/ image: img/sieve-smaller.png name: Sieve of Eranthoses description: >- A prime number and factor finder. tags: - utility - school - path: /animations/ image: img/anima.png name: Animations description: >- Some CSS-based animations. tags: - visual - directory - path: /sentence/ image: img/sentence-smaller.png name: Sentence Generator description: >- A primitive and gibberish sentence generator. tags: - visual - path: /longer-tweets/ image: img/longtweets-smaller.png name: Longer Tweets description: >- A blog because every website owner has one. tags: - directory - path: /words-go-here/f-word/ image: img/fword-smaller.png name: F Word description: >- A primitive social medium based on Firebase, of course. tags: - utility - path: /platformre/penland/inv.html image: img/penland-smaller.png name: Penland description: >- A 2D sandbox game translated from my Scratch project. tags: - game - unintuitive - path: /platformre/nova/penland/ image: img/newpenland.png name: Penland Nova description: >- A tile-based 2D world simulator. tags: - game - incomplete - unintuitive - path: /platformre/penworld/ image: img/penworld-canvas2d.webp name: Penworld (Canvas2D) description: >- My first voxel rendering attempt using Canvas2D, which isn't meant for drawing 3D graphics (it's more akin to Scratch pen or Khan Academy's Processing JS). Still, it features rudimentary raycasting, breaking and placing blocks, and transparent block faces, though the raycasting algorithm is quite inaccurate. tags: - visual - incomplete - path: /platformre/webgl/penworld.html image: img/penworld-webgl.webp name: Penworld (WebGL) description: >- A voxel rendering demo using WebGL. I made it after learning enough WebGL to feel confident in making a voxel renderer. From my previous attempt with Canvas2D, this demo features textures, a better (but still buggy) raycasting algorithm for placing and breaking blocks, and support for multiple chunks. This demo also features a transparent block, like the Canvas2D version. tags: - visual - incomplete - path: /words-go-here/misc/kaaba/ image: img/kaaba.webp name: Kaaba description: >- Kaaba is my third attempt at rendering voxels. I made it after learning enough WebGPU to feel confident in rendering voxels. The chunk size was increased to 32 in each axis, and there is more than one chunk by default, with randomly placed blocks to test performance by adding more block faces. Compared to the previous WebGL version, this verison isn't as powerful: there's no block placing or breaking, and block faces aren't culled between chunks. This was mostly a demo on the GPU side. Uploading data to the GPU is slow, so I only uploaded block positions and used instanced rendering to create 6 vertices per face (3 vertices for each triangle in the square). I also adjusted how pixels are grabbed from the block texture atlas to prevent atlas bleeding, where a strip of the next texture in the atlas shows on the edges of a block face; this was an issue in the WebGL version. I also added post-processing effects mostly for the fun of it, since this was mostly a GPU learning experience. tags: - visual - unintuitive - path: /doufu/ image: img/doufu.webp name: Doufu description: >- Doufu is based on further work from Kaaba, which was just a tech demo, to turn my WebGPU voxel renderer into a playable Minecraft clone, including world generation and multiplayer support. tags: - new - visual - incomplete - path: /platformre/nova/paint.html image: img/mspaint-smaller.png name: Platformer Paint description: >- Two-player Splatoon using the Platformre engine. tags: - game - path: /words-go-here/misc/hangman.html image: img/hangman.png name: 3-letter hangman description: >- A simple implementation of the word guessing game Hangman. You have to guess the word randomly chosen on each page load, but to make it easier, you only have to guess three letters. tags: - game - path: /javascripts/sudoku-ruiner.html image: img/sudoku.webp name: Sudoku solver description: >- Ruins the fun of sudoku by automatically calculating hints, the possible numbers that could go in each space, to help solve the puzzles. If a space has exactly one option for it, then you can fill it in to eliminate more options. This was inspired by a sudoku app my dad made, which had an option to do the same thing. tags: - utility - game - path: https://orbiit.github.io/gunn-web-app/ image: img/ugwa-smaller.png name: Unofficial Gunn Web App description: >- A web app that displays the schedule for my school. tags: - utility - school - path: https://orbiit.github.io/ugwisha/ image: img/ugwisha-smaller.png name: Ugwisha description: >- A (subjectively) better-designed version of UGWA. tags: - utility - visual - school - path: https://orbiit.github.io/elimination/ image: img/elimination-smaller.png name: Elimination description: >- A website for playing Elimination at my school where people have to locate their assigned target in real life to ask for their elimination sequence, which can be entered into the site to mark them as eliminated. There is a public leaderboard, and the last one standing wins. tags: - school - path: /olamreee/ image: img/olamreee-smaller.png name: OlamREEE description: >- Digital cards for fictional elements for a school project. tags: - utility - school - path: /uxdy/classrooms/ image: img/classrooms.png name: UCSD classroom schedule description: >- Shows the locations of each building at UCSD, lists their classrooms, and displays each classroom's class schedule. Helps people find interesting lectures to attend or unoccupied classrooms to study in. tags: - utility - school - path: /ucsd-sunset/ image: img/sunset.jpg name: SunSET description: >- An initiative to crowdsource grade distributions for past classes at UCSD to better inform students about what electives are most likely to give A's. tags: - utility - school - path: https://cse110-sp23-group20.github.io/8ball/ image: img/8ball.webp name: Magic 8 Ball description: >- This was our first mini-project for CSE 110: Software Engineering at UCSD. It was spring 2023, and our professor, Thomas A. Powell, had recently discovered ChatGPT and was immediately enthralled by its potential to disrupt the future, so he made the quarter fortune telling themed. This assignment was an "exploratory project" to play around with ChatGPT and other generative AI models and use it to create a magic 8-ball web app. I think he wanted us to discover the limits of using AI to generate code, but we didn't really encounter any issues. We were also encouraged to take advantage of web features like the Web Speech API. Our group used ChatGPT to slap together the functionality of the app. Then, I came in to pimp up the design. I took this opportunity to gain more experience with CSS gradient animations. tags: - school - visual - path: https://cse110-sp23-group20.github.io/fortune-teller/source/home-page/ image: img/cse110.webp name: Envision Your Destiny description: >- This was our final project for CSE 110: Software Engineering at UCSD. It was spring 2023, and our professor, Thomas A. Powell, had recently discovered ChatGPT and was immediately enthralled by its potential to disrupt the future, so he made us make a fortune-telling app. We were encouraged to use AI to generate code and images for the app, so that's what our team did. We split up our team members into different fortune telling concepts, and we each developed a prototype with basic functionality. Then, in the final week, I went through and pimped up all the styling so that not only did the website look cohesive, but there were also many fancy animations and effects. I learned more techniques for CSS animations, like how visibility can be "animated" to create exit animations, so it was somewhat worthwhile. As a software engineering class, we were expected to follow software engineering principles, such as writing tests, doing code reviews, and pacing our workload evenly, and supposedly this was supposed to be reflected in our grade. However, we did none of that. Instead, we approached it more like a hackathon, grinding out features in the final days of the project. Our TA did not care. She was dazzled by the fancy CSS animations and gave us an A. Meanwhile, other students who followed AGILE more meticulously received lower grades, which for some of them were their first B's. In addition to the midterm being graded on quantity over quality (i.e. long, BS answers), I came out of the class with one of the higher grades without knowing what AGILE is. Scuffed class. tags: - school - visual - path: https://members.acmucsd.com/ image: img/acm.webp name: ACM Membership Portal description: >- ACM at UCSD, which stands for many words that don't mean anything, is basicially the computer science org at UC San Diego. The membership portal was originally created to facilitate tracking how many students attended our events to prove to our student council that their funding wasn't going to waste. Its scope was later expanded to have a leaderboard for students who attended the most events, and a merch store where attendance points can be used to buy ACM-branded clothes and other swag. The original website was written in React, and client-side rendering wasn't that trendy anymore, so around the time I joined ACM, they were starting to rewrite and redesign the entire website in Next.js. I helped to speed up the rewrite, as well as making the website look fancier with fancy animations for the home dashboard, storefront, and user profile pages. tags: - school - unintuitive - path: https://cyber.acmucsd.com/ image: img/cyber.webp name: ACM Cyber description: >- ACM Cyber wanted a website to put CTF writeups and other resources on. I helped create almost all of the website, including the design. Not having to follow a Figma design helped to speed up the development because I was free to improvise. The website is made with NextJS 15's app router. I had been using the pages router before, so it was a nice opportunity to learn modern NextJS. tags: - new - school - visual - path: /words-go-here/misc/google-directory-names.html image: img/google-contacts-names.webp name: Most common names at UCSD description: >- An initiative to crowdsource grade distributions for past classes at UCSD to better inform students about what electives are most likely to give A's. tags: - new - utility - school - path: /words-go-here/misc/fluent-emoji.html image: img/fluent-emoji.png name: Fluent emoji list description: >- A list of Microsoft's animated 3D fluent emoji, shamelessly stolen from Microsoft Teams. Click on an emoji to download its animation as a 100×100 gif. tags: - visual - path: /themes/billy-goat/index-dark.html image: img/billy-goat-smaller.png name: Billy Goat blog theme description: >- A blog website design. tags: - visual - path: /javascripts/countdown.html image: img/countdown.webp name: Countdown description: >- Create a URL that shows the days left or since a selected date. I think I made this to count the days left in summer before school started. tags: - visual - path: /javascripts/still-2020.html image: img/covid.webp name: It's still March 2020 description: >- March 2020 never ended. So what day would it be? For non-Americans, March 13, 2020 was when my county's school districts (among other things) were finally forced to close due to Covid-19 (back then, the novel coronavirus). tags: - visual - path: /animations/pi.html image: img/pi.webp name: Proof that π = 4 description: >- An animation of a wheel of diameter 1 unravelling its circumference onto a number line, showing that its circumference is 4 and therefore π = 4. tags: - visual - path: /contextmenutest.html image: img/rightclick-smaller.png name: Context Menu Test description: >- An infuriating custom context menu design. tags: - visual - path: /hello-world/plaincolour.html image: img/plaincolor.webp name: PNG bomb description: >- Create a massive image that's only a few kilobytes in size. For example, a 10000 by 10000 image (a hundred million pixels) can be expressed in a single 12 kB PNG file. This is the PNG equivalent of a ZIP bomb. You can sneak a large image past a file size restriction, and whoever ends up trying to process the image will trip up deflating thousands of pixels from a single byte. Since these images only have one color, we can use a 2-color palette for the image, using one bit per pixel, or 8 pixels per byte. PNG files use the Deflate algorithm to compress the pixel data. Since there's only one color, all the bytes are the same, so we hit Deflate's maximum compression ratio of 1000:1. All in all, up to around 8000 pixels can be represented by one byte in a PNG image. tags: - utility - path: /javascripts/imagetoscheme.html image: img/scheme-smaller.png name: Image to ASCII description: >- A converter based on the average lightness of pixels. tags: - utility - path: /toastia/editor/ image: img/tile-editor-smaller.png name: Tile editor description: >- An editor for creating worlds for an abandoned game. tags: - utility - incomplete - path: /javascripts/cheat-sheet.html image: img/js-cheat-sheet.png name: JavaScript reference sheet description: >- A cheat sheet for a portion of the essential JavaScript built-in functions a beginner web developer should know. tags: - visual - unintuitive - path: /javascripts/terminal/ image: img/terminal-smaller.png name: Terminal description: >- A terminal design with primitive commands. tags: - visual - path: /javascripts/putty-serial.html image: img/usb.webp name: USB PuTTY reader description: >- Uses the Web Serial API to read text from a USB port's terminal console. I used this during Hard Hacks 2023 (a hardware hackathon) to read the console from an Infineon circuit board because I was struggling to access the USB ports from WSL2 (which does not support USBs). This was later used to connect our rhythm game's web interface to the circuit board like a controller. tags: - utility - unintuitive - path: /words-go-here/misc/pxl_time.html image: img/pxl-time.webp name: Get date of Google Pixel photo from name description: >- Get the date and time a photo or video was taken based on the file name generated by Google Pixels. Perhaps unsurprisingly, this will only work for photos and videos taken on a Google Pixel. I made this for when uploading videos to YouTube from my phone. I would paste the file name in the video description, then on my laptop I would use this tool to know what date to select for the video's recording date. tags: - new - utility - unintuitive - path: /words-go-here/misc/world-map.html image: img/world-map.webp name: World map colorer description: >- Color-code countries on a world map for any data visualization needs. I created this to visualize groups of countries for Wikipedia articles. tags: - new - utility - unintuitive - path: /words-go-here/misc/flappy-again.html image: img/flappy-smaller.png name: Flappy bird AI description: >- Simulates evolution of flappy birds by having only the fittest pass on their genes. tags: - visual - unintuitive - path: /words-go-here/misc/artificial-thonkulos/khwvahy/ image: img/khwvahy-smaller.png name: κλωναλγ description: >- Simulates the evolution of cars traversing a maze. It's not very efficient though. tags: - visual - unintuitive - path: /gamepro5/minigames/particles.html image: img/particles.webp name: Chain reaction particles description: >- Popping a circle with a particle will make it explode into more particles, which can go on to pop more circles, resulting in a chain reaction. tags: - visual - path: /life/ image: img/life.webp name: Conway's Game of Life description: >- Draw cells on an infinite expanse, then simulate Conway's Game of Life. Being an old project, the interface doesn't work well on mobile, and it doesn't perform any optimizations such as memoizing large patterns of cells. This was inspired by a Scratch project that also had a UI to add patterns from a library, but I never got around to adding it. tags: - visual - path: /javascripts/mutate.html image: img/life.png name: Cell simulation description: >- A cellular automata attempting to simulate evolution. tags: - visual - path: /mars/ image: img/mars-smaller.png name: Mars description: >- An attempt at an incremental game. tags: - game - incomplete - path: /ovinetopia/ image: img/ovinetopia-smaller.png name: Ovinetopia description: >- Another attempt at an incremental game. tags: - visual - incomplete - path: /gamepro5/minigames/elements.html image: img/elements.webp name: Elements description: >- Discover all the substances by combining pairs of the basic 5 elements. I didn't add many substances to discover because the project served as a backbone or proof-of-concept for a possible larger game. Inspired by Elemental on the HTwins website. tags: - game - path: /gamepro5/minigames/traffic.html image: img/traffic.webp name: Red Light, Green Light description: >- A simple implementation of red light, green light. To move, press the space bar or tap on the screen as quickly as possible. If you move when you're not supposed to, your progress resets. In Chinese school, we played a version like this called 一二三木頭人. The name translates to "one, two, three, wooden person," and I think it means that you're supposed to act like you're made of wood when time is up. It's kind of like Sneaky Statues, where after the person counts down, they turn around, and if they see you move, you lose. Your goal is to tag the person counting down. Squid Game also adapted this, but they sing a song to count down instead. Both Asian versions let you know how much time you have to move, while this American version does not. tags: - game - path: /javascripts/ image: img/js-smaller.png name: Javascripts description: >- Things I made. tags: - directory - path: /words-go-here/misc/ image: img/misc-smaller.png name: Miscellaneous description: >- Things I made and didn't put in JavaScripts for some reason. tags: - directory - path: /thingkingland/sitemap.html image: img/thingkingland-smaller.png name: Thingkingland description: >- The pages I made while learning HTML/CSS/JS. tags: - directory - path: /javascripts/particles/ image: img/particles-smaller.png name: Particles description: >- Some cool particle effects. tags: - visual - directory - path: /gamepro5/minigames/ image: img/minigames-smaller.png name: Minigames description: >- Simple but usually boring little game ideas. tags: - game - directory - path: /hello-world/ image: img/helloworlddir-smaller.png name: Chromebook creations description: >- HTML files I made on and uploaded from my Chromebook. tags: - directory - path: /hello-world/userscripts/ image: img/userscripts-smaller.png name: Userscripts and userstyles description: >- A collection of helpful userscripts and userstyles I made. tags: - utility - directory - path: /eyo-dictionary/ image: img/eyo-smaller.png name: Eyo dictionary description: >- A searchable list of words in my first constructed language. tags: - utility - unintuitive - path: /eyo-dictionary/validator.html image: img/die-smaller.png name: Eyo word validator description: >- A validator for the minimalist alphabet in my first constructed language. tags: - utility - unintuitive