-
Notifications
You must be signed in to change notification settings - Fork 64
Expand file tree
/
Copy pathindex.html
More file actions
44 lines (44 loc) · 122 KB
/
index.html
File metadata and controls
44 lines (44 loc) · 122 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<!-- Hi! This file was generated, so it's hard to read. The source code is at home-page/index.html.scss -->
<html prefix="og: http://ogp.me/ns/website#" lang="en" dir="ltr"><head><meta charset="UTF-8"><script src="/home-page/redirects/index.js"></script><meta name="viewport" content="width=device-width, initial-scale=1"><title>SheepTester</title><meta name="description" content="A list of some projects I have made using fancy web technologies."><meta name="keywords" content="sheeptester, sheep tester, sheep_tester"><meta name="theme-color" content="#4fa1a7"><meta name="google-site-verification" content="hVAKq2ipG9tPimbCmGiDbT-Qq1-UEv35XweisVQ5VEE"><meta name="title" content="SheepTester"><meta property="og:title" content="SheepTester"><meta property="og:type" content="website"><meta property="og:url" content="https://sheeptester.github.io/"><meta property="og:image" content="https://sheeptester.github.io/home-page/preview/opengraph.png"><meta property="og:description" content="A directory of some things I made."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="SheepTester"><meta name="twitter:description" content="A directory of some things I made."><meta name="twitter:image" content="https://sheeptester.github.io/home-page/preview/opengraph.png"><link rel="canonical" href="https://sheeptester.github.io/"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/manifest.json"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#4fa1a7"><link rel="search" type="application/opensearchdescription+xml" href="/all/search/opensearch.xml" title="SheepTester"><link rel="stylesheet" type="text/css" href="/sheep3.css"><link rel="stylesheet" type="text/css" href="/all/search/search.css"><link rel="stylesheet" type="text/css" href="/home-page/style.css"><script src="/sheep3.js"></script></head><body role="main"><script>const params = new URL(window.location).searchParams; if (params.get('from')?.startsWith('sheep')) { window.history.replaceState({}, '', '/'); document.body.classList.add('from-sheep'); } document.body.classList.add('has-js'); window.jsSuccess = true;</script><script>if (!window.jsSuccess) { document.body.className = 'old-js'; }</script><div class="strip"></div><div class="intro"><div class="intro-back"></div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480" width="45" aria-hidden="true" class="logo"><path d="M90 90 a50 50 0 0 0 0 100 H98.579 A150 150 0 1 0 381.421 190 H390 a50 50 0 0 0 0 -100 a50 50 0 1 1 -100 0 a50 50 0 1 1 -100 0 a50 50 0 1 1 -100 0 z" class="logo-path"/></svg></div><div class="about"><a href="#projects" class="visually-hidden a11y-link">Skip to my projects</a><div class="card"><h1 id="hello">Hello,</h1><img src="./img/sean-at-sutro-baths-by-cat.jpg" alt="Me standing on a wall surrounded by water at Sutro Baths with the sun setting behind me." width="700" class="me-photo"><div class="gradient"></div><p class="about-me">I’m Sean. For most of my life, I was in school—most recently UC San Diego and Gunn High School—and now I expect to spend double that time employed. Currently, I’m a software engineer at Tesla Energy.</p><p class="datum"><span class="attribute">Pronounce</span><span class="colon">: </span><span lang="en-fonipa">/ʃɑːn/</span></p><p class="datum"><span class="attribute">Pronouns</span><span class="colon">: </span>he/him/his <span class="emoji">♂️</span></p><p class="datum"><span class="attribute">Location</span><span class="colon">: </span>Palo Alto</p><p class="datum"><span class="attribute">Time Zone</span><span class="colon">: </span>Pacific Time</p><p class="datum"><span class="attribute">Age</span><span class="colon">: </span><span role="text" id="age">at least 13</span> years</p><p class="datum"><span class="attribute">Zodiac</span><span class="colon">: </span>sheep <span lang="zh">羊</span>, Aries <span class="emoji">♈</span></p><p>I made this website for anyone who is or was once a kid. If you're an employer, check out my <a href="/résumé/" class="link">résumé</a>.</p></div><div class="card"><h2 id="stalk">How to stalk me</h2><ul class="socials"><li><a href="https://github.com/SheepTester" style="background-color:#181717" title="GitHub" class="social"><span class="ball"></span><span class="social-name">GitHub</span></a></li><li><a href="https://www.instagram.com/sheeptester/" title="Instagram" class="social social-instagram"><span style="border-color:white;" class="ball border-ball"></span><span class="social-name">Instagram</span></a></li><li><a href="https://www.youtube.com/@seanthesheep" style="background-color:#FF0000" title="YouTube" class="social"><span style="background-color:white" class="ball"></span><span class="social-name">YouTube</span></a></li><li><a href="https://scratch.mit.edu/users/Sheep_maker/" style="background-color:#25AFF4" title="Scratch" class="social"><span style="border-color:white;background-color:#F8A839" class="ball border-ball"></span><span class="social-name">Scratch</span></a></li><li><a href="https://www.tiktok.com/@sheeptester" style="background-color:black" title="TikTok" class="social social-tiktok"><span style="border-color:white;background-color:black" class="ball border-ball"></span><span class="social-name">TikTok</span></a></li><li><a href="https://open.spotify.com/user/31zcjmb6bcjvgtonur5e2miiziz4" style="background-color:#1ed760" title="Spotify" class="social"><span style="border-color:black;" class="ball border-ball"></span><span class="social-name">Spotify</span></a></li><li><a href="https://www.linkedin.com/in/yen-sean/" style="background-color:#0B66C2" title="LinkedIn" class="social"><span class="ball"></span><span class="social-name">LinkedIn</span></a></li><li><a href="https://twitter.com/Sheep_tester/" title="Twitter" class="social"><span style="background-color:#1DA1F2" class="ball"></span><span class="social-name">Twitter</span></a></li><li><a href="https://bsky.app/profile/sheeptester.github.io" title="Bluesky" class="social"><span style="background-color:#0085ff" class="ball"></span><span class="social-name">Bluesky</span></a></li><li><a href="https://www.reddit.com/user/Sheep_Tester" style="background-color:#FF4500" title="Reddit" class="social"><span class="ball"></span><span class="social-name">Reddit</span></a></li><li><a href="https://news.ycombinator.com/user?id=sheept" style="background-color:#FB651E" title="Hacker News" class="social"><span class="ball"></span><span class="social-name">Hacker News</span></a></li><li><a href="https://www.snapchat.com/add/sheeptester" style="background-color:#FEFC00" title="Snapchat" class="social"><span style="border-color:black;background-color:white" class="ball border-ball"></span><span class="social-name">Snapchat</span></a></li><li><a href="https://bere.al/sheeptester" style="background-color:black" title="BeReal" class="social"><span style="background-color:white" class="ball"></span><span class="social-name">BeReal</span></a></li><li><a href="https://beliapp.co/app/sheepea" style="background-color:white" title="Beli" class="social"><span style="background-color:#134F5C" class="ball"></span><span class="social-name">Beli</span></a></li><li><a href="https://www.threads.net/@sheeptester" style="background-color:black" title="Threads" class="social"><span style="border-color:white;" class="ball border-ball"></span><span class="social-name">Threads</span></a></li><li><a href="https://account.venmo.com/u/sheeptester" style="background-color:#008CFF" title="Venmo" class="social"><span class="ball"></span><span class="social-name">Venmo</span></a></li><li><a href="https://steamcommunity.com/id/sheeptester/" title="Steam" class="social social-steam"><span class="ball"></span><span class="social-name">Steam</span></a></li><li><a href="https://monkeytype.com/profile/sheeptester" style="background-color:#323437" title="Monkeytype" class="social"><span style="border-color:#e2b714;" class="ball border-ball"></span><span class="social-name">Monkeytype</span></a></li><li><a href="https://jsfiddle.net/user/SheepTester/" style="background-color:#0483FF" title="JSFiddle" class="social"><span class="ball border-ball"></span><span class="social-name">JSFiddle</span></a></li><li><a href="https://www.twitch.tv/sheeptester" style="background-color:#6441A4" title="Twitch" class="social"><span style="background-color:white" class="ball"></span><span class="social-name">Twitch</span></a></li><li><a href="https://sora.chatgpt.com/profile/ovinai" title="Sora" class="social social-sora"><span class="ball"></span><span class="social-name">Sora</span></a></li><li><a href="https://plus.google.com/u/0/+SeanYentheHumansperson" style="background-color:#DC4E41" title="Google+" class="social"><span class="ball"></span><span class="social-name">Google+</span></a></li><li><a href="https://www.facebook.com/sheeptester/" style="background-color:#1A77F2" title="Facebook" class="social"><span class="ball"></span><span class="social-name">Facebook</span></a></li><li><a href="https://www.duolingo.com/syen5" style="background-color:#50C800" title="Duolingo" class="social social-thick"><span style="border-color:#8EE000;background-color:white" class="ball border-ball"></span><span class="social-name">Duolingo</span></a></li><li><a href="https://replit.com/@Sheep_tester" style="background-color:#F4F4F5" title="Replit" class="social social-thick"><span style="border-color:#697C84;background-color:#4F5151" class="ball border-ball"></span><span class="social-name">Replit</span></a></li><li><a href="https://app.codesignal.com/profile/sheeptester" style="background-color:#dde4f8" title="CodeSignal" class="social"><span style="border-color:#1062FB;" class="ball border-ball"></span><span class="social-name">CodeSignal</span></a></li><li><a href="https://www.codingame.com/profile/7338447a65f53edd10117a7ad07622c14994643" style="background-color:#FCD207" title="CodinGame" class="social"><span style="background-color:#1F2528" class="ball"></span><span class="social-name">CodinGame</span></a></li><li><a href="https://jsbench.me/user/sheeptester" title="JSBench.me" class="social"><span style="border-color:#020202;background-color:#0C77B9" class="ball border-ball"></span><span class="social-name">JSBench.me</span></a></li><li><a href="https://jsperf.com/browse/SheepTester" title="JSPerf" class="social social-jsperf"><span class="ball"></span><span class="social-name">JSPerf</span></a></li><li><a href="https://www.shadertoy.com/user/sheeptester" style="background-color:#404040" title="Shadertoy" class="social"><span style="border-color:white;" class="ball border-ball"></span><span class="social-name">Shadertoy</span></a></li><li><a href="https://en.gravatar.com/sheeptester" style="background-color:#1E8CBE" title="Gravatar" class="social"><span class="ball"></span><span class="social-name">Gravatar</span></a></li><li><a href="https://quizlet.com/sean_but_not_really" style="background-color:#4458B0" title="Quizlet" class="social"><span class="ball"></span><span class="social-name">Quizlet</span></a></li><li><a href="https://gitlab.com/SheepTester" style="background-color:#2D2D61" title="GitLab" class="social"><span style="background-color:#E1452D" class="ball"></span><span class="social-name">GitLab</span></a></li><li><a href="https://snap.berkeley.edu/user?user=sheeptester" style="background-color:#E6A822" title="Snap!" class="social"><span style="background-color:#4A6CD4" class="ball"></span><span class="social-name">Snap!</span></a></li><li><a href="https://account.xbox.com/en-us/Profile?Gamertag=SeanICUP" style="background-color:#107C10" title="Xbox" class="social"><span class="ball"></span><span class="social-name">Xbox</span></a></li><li><a href="https://www.piskelapp.com/user/5860704475676672" style="background-color:#00B600" title="Piskel" class="social social-piskel"><span class="ball"></span><span class="social-name">Piskel</span></a></li><li><a href="https://en.wikipedia.org/wiki/User:SheepTester" title="Wikipedia" class="social"><span style="background-color:#000000" class="ball"></span><span class="social-name">Wikipedia</span></a></li><li><a href="https://community.fandom.com/wiki/User:SheepTester" style="background-color:#FA015A" title="Fandom" class="social"><span style="background-color:#FFC502" class="ball"></span><span class="social-name">Fandom</span></a></li><li><a href="https://www.npmjs.com/~sheeptester" style="background-color:#CB3837" title="npm" class="social"><span class="ball"></span><span class="social-name">npm</span></a></li><li><a href="https://pypi.org/user/sheeptester/" title="PyPI" class="social"><span style="border-color:#ccc;background-color:#efeeea" class="ball border-ball"></span><span class="social-name">PyPI</span></a></li><li><a href="https://www.figma.com/@sheeptester" title="Figma" class="social social-figma"><span style="background-color:#00B6FF" class="ball"></span><span class="social-name">Figma</span></a></li><li><a href="https://devpost.com/SheepTester" style="background-color:#003E54" title="Devpost" class="social social-devpost"><span class="ball"></span><span class="social-name">Devpost</span></a></li><li><a href="https://imgur.com/user/sheeptester" style="background-color:#21B66E" title="Imgur" class="social"><span style="border-color:white;background-color:#25CC8B" class="ball border-ball"></span><span class="social-name">Imgur</span></a></li><li><a href="https://www.xiaohongshu.com/user/profile/677150c60000000018015c67" style="background-color:#ff2842" title="小紅書" class="social"><span style="border-color:white;" class="ball border-ball"></span><span class="social-name">小紅書</span></a></li><li><a href="https://www.bilibili.tv/en/space/2014199585" title="Bilibili" class="social"><span style="border-color:#4C93FF;" class="ball border-ball"></span><span class="social-name">Bilibili</span></a></li><li><a href="https://stepik.org/users/411870143" style="background-color:#222222" title="Stepik" class="social"><span class="ball"></span><span class="social-name">Stepik</span></a></li><li><a href="https://expo.dev/@sheeptester" title="Expo" class="social"><span style="background-color:#1B1F23" class="ball"></span><span class="social-name">Expo</span></a></li><li><a href="https://maps.app.goo.gl/kfWB94sEpb12bC9z9" style="background-color:#33A853" title="Google Maps" class="social social-gmaps"><span class="ball"></span><span class="social-name">Google Maps</span></a></li><li><a href="https://nextdoor.com/profile/01c25GHPShGNt_8Bb/" style="background-color:#8ED500" title="Nextdoor" class="social"><span style="border-color:white;" class="ball border-ball"></span><span class="social-name">Nextdoor</span></a></li><li><a href="https://hypixel.net/members/sheeptester.5640761/" style="background-color:#282C32" title="Hypixel" class="social"><span style="background-color:#F5C030" class="ball"></span><span class="social-name">Hypixel</span></a></li><li><a href="https://www.roblox.com/users/3894475568/profile" style="background-color:#dee1e3" title="Roblox" class="social"><span style="border-color:#393b3d;" class="ball border-ball"></span><span class="social-name">Roblox</span></a></li><li><a href="https://www.multisim.com/contributors/907619-syen/" style="background-color:#57B685" title="Multisim" class="social"><span style="border-color:white;" class="ball border-ball"></span><span class="social-name">Multisim</span></a></li><li><a href="https://cssbattle.dev/player/sheeptester" style="background-color:#0F1116" title="CSSBattle" class="social"><span style="border-color:#FFDF00;" class="ball border-ball"></span><span class="social-name">CSSBattle</span></a></li><li><a href="https://www.hackerrank.com/sheeptester" style="background-color:#39424E" title="HackerRank" class="social"><span style="background-color:#2EC866" class="ball"></span><span class="social-name">HackerRank</span></a></li><li><a href="https://linktr.ee/sheeptester" style="background-color:#43e660" title="Linktree" class="social"><span style="border-color:black;" class="ball border-ball"></span><span class="social-name">Linktree</span></a></li><li><a href="https://leetcode.com/sheeptester/" title="LeetCode" class="social social-leetcode"><span class="ball"></span><span class="social-name">LeetCode</span></a></li><li><a href="https://archive.org/details/@sheep_tester" style="background-color:#000000" title="Internet Archive" class="social"><span class="ball"></span><span class="social-name">Internet Archive</span></a></li><li><a href="https://app.hackthebox.com/users/1034768" style="background-color:#111927" title="Hack The Box" class="social"><span style="border-color:#9FEF00;" class="ball border-ball"></span><span class="social-name">Hack The Box</span></a></li><li><a href="https://ctftime.org/user/134841" style="background-color:#E3000B" title="CTFtime" class="social"><span style="border-color:white;" class="ball border-ball"></span><span class="social-name">CTFtime</span></a></li><li><a href="https://public.tableau.com/app/profile/sean.yen" style="background-color:#2D4B65" title="Tableau Public" class="social"><span style="border-color:white;" class="ball border-ball"></span><span class="social-name">Tableau Public</span></a></li><li><a href="https://members.acmucsd.com/profile/38095aec-5a2f-4e06-9d46-7629393b6d3f" title="ACM @ UCSD" class="social social-acm"><span class="ball"></span><span class="social-name">ACM @ UCSD</span></a></li><li><a href="https://forums.autodesk.com/t5/user/viewprofilepage/user-id/13411589" style="background-color:black" title="Autodesk Forums" class="social"><span class="ball"></span><span class="social-name">Autodesk Forums</span></a></li><li><a href="https://www.chess.com/member/whatifsheepwasachesspiece" style="background-color:#262421" title="Chess.com" class="social"><span style="background-color:#a3d160" class="ball"></span><span class="social-name">Chess.com</span></a></li><li><a href="https://tenor.com/users/sheeptester" style="background-color:#007add" title="Tenor" class="social"><span style="border-color:white;" class="ball border-ball"></span><span class="social-name">Tenor</span></a></li><li><a href="https://suno.com/@sheeptester" title="Suno" class="social social-suno"><span style="border-color:white;" class="ball border-ball"></span><span class="social-name">Suno</span></a></li><li><a href="https://huggingface.co/sheeptester" title="Hugging Face" class="social"><span style="border-color:#ff9d0b;background-color:#ffd21e" class="ball border-ball"></span><span class="social-name">Hugging Face</span></a></li><li><a href="https://lernu.net/en/uzanto/313379/profilo" style="background-color:#347F78" title="lernu!" class="social"><span class="ball"></span><span class="social-name">lernu!</span></a></li><li><a href="https://web.archive.org/web/20210119204535/https://www.storyboardthat.com/storyboards/you_egg" title="Storyboard That" class="social"><span style="background-color:#729DC8" class="ball"></span><span class="social-name">Storyboard That</span></a></li><li><a href="https://truthsocial.com/@ieee754" style="background-color:#5448ee" title="Truth Social" class="social"><span style="background-color:white" class="ball"></span><span class="social-name">Truth Social</span></a></li><li><a href="https://sheep-tester.tumblr.com/" style="background-color:#36465D" title="Tumblr" class="social"><span class="ball"></span><span class="social-name">Tumblr</span></a></li><li><a href="https://ucsd.joinhandshake.com/profiles/nhepng" style="background-color:#D3FB52" title="Handshake" class="social"><span style="background-color:#052326" class="ball"></span><span class="social-name">Handshake</span></a></li><li><a href="https://mobile.capcutshare.com/s/ZmFprApLx/" style="background-color:white" title="Capcut" class="social"><span style="border-color:black;" class="ball border-ball"></span><span class="social-name">Capcut</span></a></li><li><a href="https://boxofsean.blogspot.com/" style="background-color:#FF5722" title="Blogger" class="social"><span class="ball"></span><span class="social-name">Blogger</span></a></li><li><a href="https://www.codecademy.com/profiles/SeanICUP" title="Codecademy" class="social"><span style="border-color:#1F4056;" class="ball border-ball"></span><span class="social-name">Codecademy</span></a></li></ul><ul class="usernames"><li><a href="https://namemc.com/profile/ovinu.1" class="username"><span style="background-color:#6CD45A" title="Minecraft (Java)" class="social username-icon"><span style="background-color:#000000" class="ball"></span><span class="social-name">Minecraft (Java)</span></span><span><span class="colon">: </span>ovinu</span></a></li><li><a href="https://discord.gg/srtYgbVw4H" class="username"><span style="background-color:#7289DA" title="Discord" class="social username-icon"><span class="ball"></span><span class="social-name">Discord</span></span><span><span class="colon">: </span>sheeptester</span></a></li><li><span class="username"><span style="background-color:#E4E4E4" title="Gmail" class="social username-icon"><span style="border-color:#D14836;" class="ball border-ball"></span><span class="social-name">Gmail</span></span><span><span class="colon">: </span>ussa.say</span></span></li><li><a href="mailto:seanthesheep22+st@outlook.com" class="username"><span style="background-color:#0072C6" title="Outlook" class="social username-icon"><span class="ball border-ball"></span><span class="social-name">Outlook</span></span><span><span class="colon">: </span>seanthesheep22</span></a></li><li><a href="https://wireless2.fcc.gov/UlsApp/UlsSearch/license.jsp?licKey=4767849" class="username"><span style="background-color:#ffff9a" title="Amateur Radio License" class="social username-icon"><span style="border-color:#1c3664;background-color:white" class="ball border-ball"></span><span class="social-name">Amateur Radio License</span></span><span><span class="colon">: </span>KN6ZWB</span></a></li></ul><a href="./guestbook/" class="block-link"><span class="block-link-content"><span class="block-link-title">Sign the Guestbook<span class="colon">: </span></span><span class="block-link-subtitle">Leave comments, ask questions, or share what's on your mind. </span></span></a> <a href="https://discord.gg/srtYgbVw4H" class="block-link"><span class="block-link-content"><span class="block-link-title">Contact me through Discord<span class="colon">; </span></span><span class="block-link-subtitle">Join my server to message me without a friend request. </span></span><span class="block-link-icon-wrapper"><span style="background-color:#7289DA" title="Discord" class="social block-link-icon"><span class="ball"></span><span class="social-name">Discord</span></span></span></a> <a href="https://www.instagram.com/sheeptester/" class="block-link no-subtitle"><span class="block-link-content"><span class="block-link-title">Follow me on Instagram<span class="colon">; </span></span></span><span class="block-link-icon-wrapper"><span title="Instagram" class="social block-link-icon social-instagram"><span style="border-color:white;" class="ball border-ball"></span><span class="social-name">Instagram</span></span></span></a> <a href="/résumé/" class="block-link no-subtitle"><span class="block-link-content"><span class="block-link-title">View my résumé</span></span><span class="block-link-icon-wrapper"><span class="block-link-icon resume-icon"></span></span></a></div></div><div class="projects-info projects-heading"><h1 class="projects-header" id="projects">Projects</h1><p class="projects-note">There’s some more on <a href="https://scratch.mit.edu/users/Sheep_maker/" class="link">Scratch</a> and <a href="https://github.com/SheepTester?tab=repositories" class="link">GitHub</a>.</p><p class="warning old-js-warning">Note that many of these projects require new web features that your browser doesn’t support. Please use a modern browser.</p><noscript><p class="warning no-js">Note that many of these projects require JavaScript, which you do not have enabled.</p></noscript></div><div class="projects-info search-button-wrapper"><button class="search search-button" id="search-button">Search everything<kbd class="search-shortcut">/</kbd></button></div><dialog inert class="search-modal" id="search-modal"><form autocomplete="off" action="/all/search/" class="search-wrapper" id="search-form"><input type="search" name="q" placeholder="Search everything" aria-label="Search everything" class="search" id="search"><div class="suggestions no-results" id="suggestions"></div></form></dialog><fieldset class="projects-info tags-wrapper"><legend class="filter-by" id="filter-by">Filter by</legend><p class="filters"><input type="checkbox" class="visually-hidden filter-checkbox" id="filter-by-recommend"><label for="filter-by-recommend" class="filter-tag"><span class="filter-tag-icon base-tag tag-recommend"></span><span class="filter-tag-name">Recommended</span></label> <input type="checkbox" class="visually-hidden filter-checkbox" id="filter-by-game"><label for="filter-by-game" class="filter-tag"><span class="filter-tag-icon base-tag tag-game"></span><span class="filter-tag-name">Game</span></label> <input type="checkbox" class="visually-hidden filter-checkbox" id="filter-by-new"><label for="filter-by-new" class="filter-tag"><span class="filter-tag-icon base-tag tag-new"></span><span class="filter-tag-name">Recently added</span></label> <input type="checkbox" class="visually-hidden filter-checkbox" id="filter-by-utility"><label for="filter-by-utility" class="filter-tag"><span class="filter-tag-icon base-tag tag-utility"></span><span class="filter-tag-name">Tool</span></label> <input type="checkbox" class="visually-hidden filter-checkbox" id="filter-by-visual"><label for="filter-by-visual" class="filter-tag"><span class="filter-tag-icon base-tag tag-visual"></span><span class="filter-tag-name">Visually pleasing</span></label> <input type="checkbox" class="visually-hidden filter-checkbox" id="filter-by-directory"><label for="filter-by-directory" class="filter-tag"><span class="filter-tag-icon base-tag tag-directory"></span><span class="filter-tag-name">Links to links</span></label> <input type="checkbox" class="visually-hidden filter-checkbox" id="filter-by-school"><label for="filter-by-school" class="filter-tag"><span class="filter-tag-icon base-tag tag-school"></span><span class="filter-tag-name">For school</span></label> <input type="checkbox" class="visually-hidden filter-checkbox" id="filter-by-incomplete"><label for="filter-by-incomplete" class="filter-tag"><span class="filter-tag-icon base-tag tag-incomplete"></span><span class="filter-tag-name">Unfinished</span></label> <input type="checkbox" class="visually-hidden filter-checkbox" id="filter-by-unintuitive"><label for="filter-by-unintuitive" class="filter-tag"><span class="filter-tag-icon base-tag tag-unintuitive"></span><span class="filter-tag-name">Hard to use</span></label> </p></fieldset><ul class="projects" id="projects-wrapper"><li class="project project-directory"><a href="/all/" class="project-link"><span class="title">Almost everything</span><img src="img/all2-smaller.png" alt="A sitemap of effectively all the files on this site." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Links to links" class="tag base-tag tag-directory">Links to links</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game project-recommend"><a href="/platformre/" class="project-link"><span class="title">Platformre</span><img src="img/plat.webp" alt="A tile-based platformer with a random level generator." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li> <li title="Recommended" class="tag base-tag tag-recommend">Recommended</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game project-recommend"><a href="/platformre/a/" class="project-link"><span class="title">A Platformer</span><img src="img/aplat-smaller.png" alt="A series of platformer levels translated from my Scratch project." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li> <li title="Recommended" class="tag base-tag tag-recommend">Recommended</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-recommend project-utility"><a href="/javascripts/audio-editor/" class="project-link"><span class="title">Audio Editor</span><img src="img/audio-editor-smaller.png" alt="An audio editor based on stolen code from Scratch." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Recommended" class="tag base-tag tag-recommend">Recommended</li> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-recommend project-utility"><a href="/javascripts/shepform/colour.html" class="project-link"><span class="title">Colour input II</span><img src="img/colourpick-smaller.png" alt="A colour input translated from a Scratch project." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Recommended" class="tag base-tag tag-recommend">Recommended</li> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-recommend project-utility"><a href="/hello-world/largetext.html" class="project-link"><span class="title">Large Text</span><img src="img/largetext.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Recommended" class="tag base-tag tag-recommend">Recommended</li> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game project-utility"><a href="/platformre/maker/" class="project-link"><span class="title">Level editor</span><img src="img/platmakre-smaller.png" alt="A level creator and editor for Platformre." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game project-incomplete"><a href="/gamepro5/minigames/turkeys/" class="project-link"><span class="title">Turkeys</span><img src="img/turkeys.png" alt="A turkey collection game." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li> <li title="Unfinished" class="tag base-tag tag-incomplete">Unfinished</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game project-school"><a href="/telegraph/" class="project-link"><span class="title">Telegraph</span><img src="img/tele-smaller.png" alt="A morse code game for a history project." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game"><a href="/javascripts/clicker/" class="project-link"><span class="title">Clicker Game</span><img src="img/click-smaller.png" alt="A basic clicker game." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game"><a href="/gamepro5/minigames/dodgedots.html" class="project-link"><span class="title">Dodge dots game thing</span><img src="img/reds-smaller.png" alt="A minimalist dodging game translated from a Scratch project." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game"><a href="/gamepro5/minigames/explodeyothello.html" class="project-link"><span class="title">Explodey Othello</span><img src="img/explodeyothello.webp" alt="A clone of a Scratch game by @joshrawesome involving shooting at enemies to prevent them from spreading bad tiles." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game"><a href="/gamepro5/minigames/color.html" class="project-link"><span class="title">Color fight thing</span><img src="img/color.png" alt="A simple two-player game based on a Scratch project." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game"><a href="https://orbiit.github.io/gunn-web-app/games/connect4.html" class="project-link"><span class="title">Connect 3</span><img src="img/connect4-smaller.png" alt="A proof-of-concept connect 3 game." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game project-school"><a href="/gunn-student-sim/" class="project-link"><span class="title">Gunn student simulator</span><img src="img/gunn student simulator-smaller.png" alt="A game satirizing the lives of students at my school." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game project-school"><a href="/fun-gunn-run/" class="project-link"><span class="title">“Fun” Gunn Run</span><img src="img/fgr-smaller.png" alt="A Temple Run clone set at my school." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game project-school project-unintuitive"><a href="/yesnt/" class="project-link"><span class="title">YESNT</span><img src="img/yesnt-smaller.png" alt="An unintuitive and rather difficult escape game based on a true phenomenon at my school." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li> <li title="For school" class="tag base-tag tag-school">For school</li> <li title="Hard to use" class="tag base-tag tag-unintuitive">Hard to use</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game project-school"><a href="/unclear-target-w-very-confusing-critique/" class="project-link"><span class="title">Pistole offers a wide range of opportunities.</span><img src="img/pistole-smaller.png" alt="My satire project for English class criticizing a specific institution at my school." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game project-school"><a href="/gamepro5/minigames/choice.html" class="project-link"><span class="title">Escape from SELF</span><img src="img/choice.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game"><a href="/thingkingland/bookmarklets/theHouse.html" class="project-link"><span class="title">The House</span><img src="img/house-smaller.png" alt="A choose-your-own adventure game." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game"><a href="/thingkingland/the-hotel/" class="project-link"><span class="title">The Hotel</span><img src="img/hotel-smaller.png" alt="The sequel to the House." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game project-school"><a href="/hello-world/hh23-rhythm/src/javascript-impatience/" class="project-link"><span class="title">Rhythm Game</span><img src="img/rhythm.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game"><a href="/thingkingland/games/PFPFPF/" class="project-link"><span class="title">PFPFPF</span><img src="img/pfpfpf-smaller.png" alt="A simple game where you move your cursor around to pop bubbles quickly." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game"><a href="/thingkingland/games/Roshambo/roshambo.html" class="project-link"><span class="title">Roshambo</span><img src="img/roshambo-smaller.png" alt="Fast-paced rock paper scissors." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game"><a href="/thingkingland/games/SHF/" class="project-link"><span class="title">SHF</span><img src="img/shf.webp" alt="A typing game." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game"><a href="/javascripts/towering-game.html" class="project-link"><span class="title">Tower builder</span><img src="img/tower.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-new project-utility"><a href="/javascripts/gif-frames-viewer.html" class="project-link"><span class="title">GIF frames viewer</span><img src="img/gif-frame.webp" alt="If a GIF is moving too fast, upload it here to inspect each individual frame." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Recently added" class="tag base-tag tag-new">Recently added</li> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility project-school"><a href="/javascripts/one-pdf.html" class="project-link"><span class="title">Combine images into single PDF</span><img src="img/one-pdf.webp" alt="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)." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-new project-utility"><a href="/words-go-here/misc/kamala.html" class="project-link"><span class="title">Brat album generator</span><img src="img/brat.webp" alt="Put whatever text you want on the characteristic chartreuse green of Brat's album cover, and maintain its iconic blur and stretch." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Recently added" class="tag base-tag tag-new">Recently added</li> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility project-unintuitive"><a href="/javascripts/video/shit/" class="project-link"><span class="title">OpenShit</span><img src="img/openshit-smaller.png" alt="A less simple video editor." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="Hard to use" class="tag base-tag tag-unintuitive">Hard to use</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/javascripts/video/" class="project-link"><span class="title">Smothered Rock</span><img src="img/smothered-smaller.png" alt="A primitive video editor." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/javascripts/sstv-encoder.html" class="project-link"><span class="title">SSTV encoder</span><img src="img/sstv.webp" alt="Encodes the given image for SSTV, using Scottie S1. This allows you to transmit images over radio." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/words-go-here/misc/fft.html" class="project-link"><span class="title">Spectrogram</span><img src="img/fft.webp" alt="Analyze the frequencies received by your device's microphone." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-new project-utility"><a href="/words-go-here/misc/filter.html" class="project-link"><span class="title">Audio filter explorer</span><img src="img/filters.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Recently added" class="tag base-tag tag-new">Recently added</li> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/words-go-here/misc/left-ear.html" class="project-link"><span class="title">Pan left and right</span><img src="img/left-ear.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/words-go-here/misc/8bit-sound.html" class="project-link"><span class="title">Make audio low quality</span><img src="img/8bit.webp" alt="Reduces the bit depth of the samples in your audio to 8 bits, resulting in very crunchy, compressed audio." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/javascripts/mp4-analyze.html" class="project-link"><span class="title">MP4 analyzer</span><img src="img/mp4.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-new project-utility"><a href="/qr/" class="project-link"><span class="title">QR Code Generator & Scanner</span><img src="img/qr.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Recently added" class="tag base-tag tag-new">Recently added</li> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/words-go-here/misc/path.html" class="project-link"><span class="title">SVG path editor</span><img src="img/path.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/words-go-here/misc/svgtopng.html" class="project-link"><span class="title">SVG to PNG</span><img src="img/svgtopng-smaller.png" alt="An SVG to PNG converter with options to resize." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/javascripts/tosvg.html" class="project-link"><span class="title">Embed image inside SVG</span><img src="img/bitmap-to-vector.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/javascripts/jpg-quality.html" class="project-link"><span class="title">JPG Quality</span><img src="img/jpg-quality.jpg" alt="An image-to-JPG converter with an option to reduce the quality for maximum artifacts." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/javascripts/chopper.html" class="project-link"><span class="title">Image chopper</span><img src="img/chopper.webp" alt="Chop an image into square pieces. This can be used for turning a large image into a grid of Discord emoji or Instagram posts." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/text-save/" class="project-link"><span class="title">text-save</span><img src="img/text-save-smaller.png" alt="A primitive note-taking web app." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/javascripts/charcopy.html" class="project-link"><span class="title">Character copy area</span><img src="img/charcopy-smaller.png" alt="Click to copy a special character or a string." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/javascripts/cryptography.html" class="project-link"><span class="title">Cryptography</span><img src="img/crypto-smaller.png" alt="Encoders and decoders for common ciphers used on Scratch." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/htmlifier/" class="project-link"><span class="title">HTMLifier</span><img src="img/htmlifier-smaller.png" alt="A Scratch project packager that spits out a fat HTML file." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/scratch-gui/" class="project-link"><span class="title">E羊icques</span><img src="img/eyangicques-smaller.png" alt="A mod of Scratch 3.0 that adds small changes like custom aspect ratio support and loading extensions from a URL." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/javascripts/webhook-sender.html" class="project-link"><span class="title">Discord webhook sender</span><img src="img/webhook.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/javascripts/floating-sticky-note.html" class="project-link"><span class="title">Pin sticky note on top</span><img src="img/sticky.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual"><a href="/words-go-here/misc/diff.html" class="project-link"><span class="title">Diff Checker</span><img src="img/diff.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility project-unintuitive"><a href="/javascripts/large-file-viewer.html" class="project-link"><span class="title">Large file viewer</span><img src="img/large-file-viewer.png" alt="View the contents of a large text file without lagging. Useful for debugging files produced by the HTMLifier." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="Hard to use" class="tag base-tag tag-unintuitive">Hard to use</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility project-school"><a href="/javascripts/carecalc.html" class="project-link"><span class="title">Grade Care Calculator</span><img src="img/carecalc-smaller.png" alt="A minimum necessary grade calculator." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/javascripts/height.html" class="project-link"><span class="title">Centimeter converter</span><img src="img/height.png" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/javascripts/cyrillic-finder.html" class="project-link"><span class="title">Special character finder</span><img src="img/cyrillic-smaller.png" alt="A detector of non-US-keyboard characters." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/javascripts/discord-transformer.html" class="project-link"><span class="title">Text transformer</span><img src="img/transformer.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/javascripts/tts.html" class="project-link"><span class="title">Text to Speech</span><img src="img/tts.webp" alt="Lets you use your browser's built-in text-to-speech engine." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/javascripts/gif-caption.html" class="project-link"><span class="title">GIF caption editor</span><img src="img/gif-caption.png" alt="Add a text label above a GIF." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/hello-world/weird-flex.html" class="project-link"><span class="title">Weird flex but ok</span><img src="img/weird-flex-but-ok-smaller.png" alt="A generator replacing each word in the phrase with a synonym." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-school"><a href="/words-go-here/misc/no-prereqs.html" class="project-link"><span class="title">There are no prereqs</span><img src="img/prereqs.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/javascripts/obfuscate-url.html" class="project-link"><span class="title">URL obfuscator</span><img src="img/obfuscate.webp" alt="Obfuscate words in a URL by URL-encoding every letter, even though it's not necessary." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-new project-utility"><a href="/words-go-here/misc/queens.html" class="project-link"><span class="title">LinkedIn Queens solver</span><img src="img/queens.webp" alt="Deprive yourself of fun and easily beat 90% of CEOs by screenshotting LinkedIn's daily puzzle and letting the website solve it for you." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Recently added" class="tag base-tag tag-new">Recently added</li> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/hello-world/attitude.html" class="project-link"><span class="title">Attitude</span><img src="img/attitude-smaller.png" alt="Calculates the sum of each letter's value in a word." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual"><a href="/trumpdays/" class="project-link"><span class="title">Trump days</span><img src="img/trumpdays-smaller.png" alt="A countdown for Trump's second term." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility project-school"><a href="/hello-world/drills.html" class="project-link"><span class="title">Trig Drill Generator</span><img src="img/drills-smaller.png" alt="A generator of sine and cosine problems with basic angles." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual project-school"><a href="/words-go-here/misc/trig.html" class="project-link"><span class="title">Trig and calculus cheat sheet</span><img src="img/trig.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual project-school"><a href="/words-go-here/misc/math20d.html" class="project-link"><span class="title">Differential calculus cheat sheet</span><img src="img/math20d.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual project-school"><a href="/words-go-here/misc/big-o.html" class="project-link"><span class="title">Big O notations</span><img src="img/big-o.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/javascripts/rounded-decimal-to-fraction.html" class="project-link"><span class="title">Convert decimal to fraction</span><img src="img/convert-to-fraction.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility project-school"><a href="/hello-world/sigfig.html" class="project-link"><span class="title">Sig fig counter</span><img src="img/sigfig.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-school project-incomplete"><a href="/roots/" class="project-link"><span class="title">Roots and Affixes</span><img src="img/roots-smaller.png" alt="Some Greek and Latin roots." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="For school" class="tag base-tag tag-school">For school</li> <li title="Unfinished" class="tag base-tag tag-incomplete">Unfinished</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-school"><a href="/happynumbers/" class="project-link"><span class="title">Happy Number Finder</span><img src="img/mems-smaller.png" alt="A calculator for happy numbers." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility project-school"><a href="/happynumbers/sieve/" class="project-link"><span class="title">Sieve of Eranthoses</span><img src="img/sieve-smaller.png" alt="A prime number and factor finder." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual project-directory"><a href="/animations/" class="project-link"><span class="title">Animations</span><img src="img/anima.png" alt="Some CSS-based animations." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li> <li title="Links to links" class="tag base-tag tag-directory">Links to links</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual"><a href="/sentence/" class="project-link"><span class="title">Sentence Generator</span><img src="img/sentence-smaller.png" alt="A primitive and gibberish sentence generator." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-directory"><a href="/longer-tweets/" class="project-link"><span class="title">Longer Tweets</span><img src="img/longtweets-smaller.png" alt="A blog because every website owner has one." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Links to links" class="tag base-tag tag-directory">Links to links</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/words-go-here/f-word/" class="project-link"><span class="title">F Word</span><img src="img/fword-smaller.png" alt="A primitive social medium based on Firebase, of course." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game project-unintuitive"><a href="/platformre/penland/inv.html" class="project-link"><span class="title">Penland</span><img src="img/penland-smaller.png" alt="A 2D sandbox game translated from my Scratch project." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li> <li title="Hard to use" class="tag base-tag tag-unintuitive">Hard to use</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game project-incomplete project-unintuitive"><a href="/platformre/nova/penland/" class="project-link"><span class="title">Penland Nova</span><img src="img/newpenland.png" alt="A tile-based 2D world simulator." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li> <li title="Unfinished" class="tag base-tag tag-incomplete">Unfinished</li> <li title="Hard to use" class="tag base-tag tag-unintuitive">Hard to use</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual project-incomplete"><a href="/platformre/penworld/" class="project-link"><span class="title">Penworld (Canvas2D)</span><img src="img/penworld-canvas2d.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li> <li title="Unfinished" class="tag base-tag tag-incomplete">Unfinished</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual project-incomplete"><a href="/platformre/webgl/penworld.html" class="project-link"><span class="title">Penworld (WebGL)</span><img src="img/penworld-webgl.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li> <li title="Unfinished" class="tag base-tag tag-incomplete">Unfinished</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual project-unintuitive"><a href="/words-go-here/misc/kaaba/" class="project-link"><span class="title">Kaaba</span><img src="img/kaaba.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li> <li title="Hard to use" class="tag base-tag tag-unintuitive">Hard to use</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-new project-visual project-incomplete"><a href="/doufu/" class="project-link"><span class="title">Doufu</span><img src="img/doufu.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Recently added" class="tag base-tag tag-new">Recently added</li> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li> <li title="Unfinished" class="tag base-tag tag-incomplete">Unfinished</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game"><a href="/platformre/nova/paint.html" class="project-link"><span class="title">Platformer Paint</span><img src="img/mspaint-smaller.png" alt="Two-player Splatoon using the Platformre engine." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game"><a href="/words-go-here/misc/hangman.html" class="project-link"><span class="title">3-letter hangman</span><img src="img/hangman.png" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility project-game"><a href="/javascripts/sudoku-ruiner.html" class="project-link"><span class="title">Sudoku solver</span><img src="img/sudoku.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="Game" class="tag base-tag tag-game">Game</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility project-school"><a href="https://orbiit.github.io/gunn-web-app/" class="project-link"><span class="title">Unofficial Gunn Web App</span><img src="img/ugwa-smaller.png" alt="A web app that displays the schedule for my school." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility project-visual project-school"><a href="https://orbiit.github.io/ugwisha/" class="project-link"><span class="title">Ugwisha</span><img src="img/ugwisha-smaller.png" alt="A (subjectively) better-designed version of UGWA." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-school"><a href="https://orbiit.github.io/elimination/" class="project-link"><span class="title">Elimination</span><img src="img/elimination-smaller.png" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility project-school"><a href="/olamreee/" class="project-link"><span class="title">OlamREEE</span><img src="img/olamreee-smaller.png" alt="Digital cards for fictional elements for a school project." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility project-school"><a href="/ucsd-classrooms/" class="project-link"><span class="title">UCSD classroom schedule</span><img src="img/classrooms.png" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility project-school"><a href="/ucsd-sunset/" class="project-link"><span class="title">SunSET</span><img src="img/sunset.jpg" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility project-school"><a href="/ucsd-free-food/" class="project-link"><span class="title">Free Food Events at UCSD</span><img src="img/free-food-ucsd.webp" alt="A lot of events at UC San Diego received funding from student activity fees, and they would often use them to offer food to attract attendees. I liked events with free food because they helped save on dining dollars (our dining halls weren't All-You-Can-Eat), obviated the need to decide what to eat, and was a great opportunity to meet new people.
For most of college, keeping track of events with free food was a very manual process. I had find and follow Instagram accounts for UCSD orgs that would often have free food, scroll through their stories each day, and add any events with free food to my calendar.
Since I got into LA Hacks 2025, I decided to spend the time making an Instagram scraper. It uses Playwright to open up a browser instance and pretend to scroll through posts and stories like a human user. It intercepts the images sent by Instagram to the web page, and sends them to Gemini, which acts as a glorified OCR program to extract event details (time, location) and whether it has free food. After the hackathon, I continued polishing up the scraper, so it mostly runs on its own without requiring significant intervention." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-school project-visual"><a href="https://cse110-sp23-group20.github.io/8ball/" class="project-link"><span class="title">Magic 8 Ball</span><img src="img/8ball.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="For school" class="tag base-tag tag-school">For school</li> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-school project-visual"><a href="https://cse110-sp23-group20.github.io/fortune-teller/source/home-page/" class="project-link"><span class="title">Envision Your Destiny</span><img src="img/cse110.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="For school" class="tag base-tag tag-school">For school</li> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-school project-unintuitive"><a href="https://members.acmucsd.com/events" class="project-link"><span class="title">ACM Membership Portal</span><img src="img/acm.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="For school" class="tag base-tag tag-school">For school</li> <li title="Hard to use" class="tag base-tag tag-unintuitive">Hard to use</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-new project-school project-visual"><a href="https://cyber.acmucsd.com/" class="project-link"><span class="title">ACM Cyber</span><img src="img/cyber.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Recently added" class="tag base-tag tag-new">Recently added</li> <li title="For school" class="tag base-tag tag-school">For school</li> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-new project-utility project-school"><a href="/words-go-here/misc/google-directory-names.html" class="project-link"><span class="title">Most common names at UCSD</span><img src="img/google-contacts-names.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Recently added" class="tag base-tag tag-new">Recently added</li> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="For school" class="tag base-tag tag-school">For school</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual"><a href="/words-go-here/misc/fluent-emoji.html" class="project-link"><span class="title">Fluent emoji list</span><img src="img/fluent-emoji.png" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual"><a href="/themes/billy-goat/index-dark.html" class="project-link"><span class="title">Billy Goat blog theme</span><img src="img/billy-goat-smaller.png" alt="A blog website design." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual"><a href="/javascripts/countdown.html" class="project-link"><span class="title">Countdown</span><img src="img/countdown.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual"><a href="/javascripts/still-2020.html" class="project-link"><span class="title">It's still March 2020</span><img src="img/covid.webp" alt="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)." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual"><a href="/animations/pi.html" class="project-link"><span class="title">Proof that π = 4</span><img src="img/pi.webp" alt="An animation of a wheel of diameter 1 unravelling its circumference onto a number line, showing that its circumference is 4 and therefore π = 4." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual"><a href="/contextmenutest.html" class="project-link"><span class="title">Context Menu Test</span><img src="img/rightclick-smaller.png" alt="An infuriating custom context menu design." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/hello-world/plaincolour.html" class="project-link"><span class="title">PNG bomb</span><img src="img/plaincolor.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility"><a href="/javascripts/imagetoscheme.html" class="project-link"><span class="title">Image to ASCII</span><img src="img/scheme-smaller.png" alt="A converter based on the average lightness of pixels." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility project-incomplete"><a href="/toastia/editor/" class="project-link"><span class="title">Tile editor</span><img src="img/tile-editor-smaller.png" alt="An editor for creating worlds for an abandoned game." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="Unfinished" class="tag base-tag tag-incomplete">Unfinished</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual project-unintuitive"><a href="/javascripts/cheat-sheet.html" class="project-link"><span class="title">JavaScript reference sheet</span><img src="img/js-cheat-sheet.png" alt="A cheat sheet for a portion of the essential JavaScript built-in functions a beginner web developer should know." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li> <li title="Hard to use" class="tag base-tag tag-unintuitive">Hard to use</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual"><a href="/javascripts/terminal/" class="project-link"><span class="title">Terminal</span><img src="img/terminal-smaller.png" alt="A terminal design with primitive commands." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility project-unintuitive"><a href="/javascripts/putty-serial.html" class="project-link"><span class="title">USB PuTTY reader</span><img src="img/usb.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="Hard to use" class="tag base-tag tag-unintuitive">Hard to use</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-new project-utility project-unintuitive"><a href="/words-go-here/misc/pxl_time.html" class="project-link"><span class="title">Get date of Google Pixel photo from name</span><img src="img/pxl-time.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Recently added" class="tag base-tag tag-new">Recently added</li> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="Hard to use" class="tag base-tag tag-unintuitive">Hard to use</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-new project-utility project-unintuitive"><a href="/words-go-here/misc/world-map.html" class="project-link"><span class="title">World map colorer</span><img src="img/world-map.webp" alt="Color-code countries on a world map for any data visualization needs. I created this to visualize groups of countries for Wikipedia articles." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Recently added" class="tag base-tag tag-new">Recently added</li> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="Hard to use" class="tag base-tag tag-unintuitive">Hard to use</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual project-unintuitive"><a href="/words-go-here/misc/flappy-again.html" class="project-link"><span class="title">Flappy bird AI</span><img src="img/flappy-smaller.png" alt="Simulates evolution of flappy birds by having only the fittest pass on their genes." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li> <li title="Hard to use" class="tag base-tag tag-unintuitive">Hard to use</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual project-unintuitive"><a href="/words-go-here/misc/artificial-thonkulos/khwvahy/" class="project-link"><span class="title">κλωναλγ</span><img src="img/khwvahy-smaller.png" alt="Simulates the evolution of cars traversing a maze. It's not very efficient though." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li> <li title="Hard to use" class="tag base-tag tag-unintuitive">Hard to use</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual"><a href="/gamepro5/minigames/particles.html" class="project-link"><span class="title">Chain reaction particles</span><img src="img/particles.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual"><a href="/life/" class="project-link"><span class="title">Conway's Game of Life</span><img src="img/life.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual"><a href="/javascripts/mutate.html" class="project-link"><span class="title">Cell simulation</span><img src="img/life.png" alt="A cellular automata attempting to simulate evolution." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game project-incomplete"><a href="/mars/" class="project-link"><span class="title">Mars</span><img src="img/mars-smaller.png" alt="An attempt at an incremental game." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li> <li title="Unfinished" class="tag base-tag tag-incomplete">Unfinished</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual project-incomplete"><a href="/ovinetopia/" class="project-link"><span class="title">Ovinetopia</span><img src="img/ovinetopia-smaller.png" alt="Another attempt at an incremental game." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li> <li title="Unfinished" class="tag base-tag tag-incomplete">Unfinished</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game"><a href="/gamepro5/minigames/elements.html" class="project-link"><span class="title">Elements</span><img src="img/elements.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game"><a href="/gamepro5/minigames/traffic.html" class="project-link"><span class="title">Red Light, Green Light</span><img src="img/traffic.webp" alt="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." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-directory"><a href="/javascripts/" class="project-link"><span class="title">Javascripts</span><img src="img/js-smaller.png" alt="Things I made." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Links to links" class="tag base-tag tag-directory">Links to links</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-directory"><a href="/words-go-here/misc/" class="project-link"><span class="title">Miscellaneous</span><img src="img/misc-smaller.png" alt="Things I made and didn't put in JavaScripts for some reason." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Links to links" class="tag base-tag tag-directory">Links to links</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-directory"><a href="/thingkingland/sitemap.html" class="project-link"><span class="title">Thingkingland</span><img src="img/thingkingland-smaller.png" alt="The pages I made while learning HTML/CSS/JS." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Links to links" class="tag base-tag tag-directory">Links to links</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-visual project-directory"><a href="/javascripts/particles/" class="project-link"><span class="title">Particles</span><img src="img/particles-smaller.png" alt="Some cool particle effects." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Visually pleasing" class="tag base-tag tag-visual">Visually pleasing</li> <li title="Links to links" class="tag base-tag tag-directory">Links to links</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-game project-directory"><a href="/gamepro5/minigames/" class="project-link"><span class="title">Minigames</span><img src="img/minigames-smaller.png" alt="Simple but usually boring little game ideas." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Game" class="tag base-tag tag-game">Game</li> <li title="Links to links" class="tag base-tag tag-directory">Links to links</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-directory"><a href="/hello-world/" class="project-link"><span class="title">Chromebook creations</span><img src="img/helloworlddir-smaller.png" alt="HTML files I made on and uploaded from my Chromebook." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Links to links" class="tag base-tag tag-directory">Links to links</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility project-directory"><a href="/hello-world/userscripts/" class="project-link"><span class="title">Userscripts and userstyles</span><img src="img/userscripts-smaller.png" alt="A collection of helpful userscripts and userstyles I made." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="Links to links" class="tag base-tag tag-directory">Links to links</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility project-unintuitive"><a href="/eyo-dictionary/" class="project-link"><span class="title">Eyo dictionary</span><img src="img/eyo-smaller.png" alt="A searchable list of words in my first constructed language." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="Hard to use" class="tag base-tag tag-unintuitive">Hard to use</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="project project-utility project-unintuitive"><a href="/eyo-dictionary/validator.html" class="project-link"><span class="title">Eyo word validator</span><img src="img/die-smaller.png" alt="A validator for the minimalist alphabet in my first constructed language." width="100" height="100" loading="lazy" class="thumbnail"></a><ul class="tags"> <li title="Tool" class="tag base-tag tag-utility">Tool</li> <li title="Hard to use" class="tag base-tag tag-unintuitive">Hard to use</li></ul><button type="button" title="Show project info" aria-controls="description-wrapper" class="show-info-btn">Show project info<span class="show-info-icon"></span></button></li><li class="tinder-note">That was merely a preview of what this website has in store. <a href="./all/tinder.html" class="link">Explore and sort through everything else.</a></li></ul><div style="display:none" role="contentinfo" class="description" id="description-wrapper"><div class="description-body"><h2 class="desc-title" id="desc-title"></h2><ul class="description-tags" id="desc-tags"></ul><div class="description-text" id="description"></div></div><a href="#" class="desc-visit" id="desc-link">Visit</a></div><div class="about about-bottom"><div class="card" id="adblock"><h2 id="rawdogging">Why are you rawdogging the internet?</h2><p>It seems you do not have an ad blocker installed. I recommend <a href="https://ublockorigin.com/" class="link">uBlock Origin</a>.</p><p>If you use Chrome, please switch to <a href="https://www.firefox.com/" class="link">Firefox</a> to give <a href="https://privacysandbox.google.com/" class="link">Google less leverage over the internet</a>, or use <a href="https://chromewebstore.google.com/detail/ublock-origin-lite/ddkjiahejlhfcafbddmgiahcphecmpfh" class="link">uBlock Origin Lite</a>.</p></div><div class="card"><h2 id="why-sheep">Why sheep?</h2><p>Because I was born in the year of the sheep, my mom gave me a stuffed animal sheep when I was 8 months old. We named her <span lang="zh">羊羊</span> (Yang-Yang).</p><p>Yang-Yang is the namesake of <a href="https://scratch.mit.edu/users/Yang-Yang2/" class="link">my first Scratch account</a>, and I named its test account <a href="https://scratch.mit.edu/users/Sheep_tester/" class="link">@Sheep_tester</a>. “Sheep Tester” was meant to mean “a sheep who tests,” but people seem to interpret it as “one who tests sheep.”</p></div><div class="card"><h2 id="legal">Legal</h2><p class="legal">This website uses cookies. By continuing, you accept the use of cookies. This website may contain chemicals known to the State of California to cause cancer and birth defects or other reproductive harm. For more information: <a href="https://www.p65warnings.ca.gov/" class="link">www.P65Warnings.ca.gov</a> Most content on this website is licensed under the <a href="https://github.com/SheepTester/sheeptester.github.io/blob/master/LICENSE" class="link">MIT license</a>, unless otherwise noted. This website may contain peanuts. This website was made on the ancestral and unceded lands of the Ohlone Tribe and Kumeyaay Nation. This website contains small parts. Not suitable for children under 3 years. This website contains AI-generated content. For best results, do not train large language models on this website. These statements have not been evaluated by the Food and Drug Administration. This website is not intended to diagnose, treat, cure, or prevent any disease. <a href="/home-page/ok.html" class="link">Do Not Sell My Personal Information</a></p></div></div><footer><div class="footer-gradient"></div><div class="footer-content"><p style="text-align: center;">[<a href="https://pink10000.github.io/ringfairy/sheeptester/previous/">prev</a>] [<a href="https://pink10000.github.io/ringfairy/">upbring</a>] [<a href="https://pink10000.github.io/ringfairy/sheeptester/next/">next</a>]</p><p style="text-align: center;">[<a href="https://pink10000.github.io/gathering/sheeptester/previous/">prev</a>] [<a href="https://pink10000.github.io/gathering/">gathering</a>] [<a href="https://pink10000.github.io/gathering/sheeptester/next/">next</a>]</p><p><img src="/home-page/geocities/spinning construction sign.gif" alt="spinning construction sign" loading="lazy"></p><p><img src="/home-page/geocities/under construction.gif" alt="under construction" loading="lazy"></p><p><img src="/home-page/geocities/workers.gif" alt="workers" loading="lazy"></p></div></footer><script src="/home-page/main.js" type="module"></script></body></html>