memalign.github.io

memalign.github.io By memalign https://memalign.github.io/feed.xml 2026-03-13T00:00:00-08:00 Copyright © 2026, memalign https://memalign.github.io/apple-touch-icon.png https://memalign.github.io/apple-touch-icon.png Catch Tap Toy https://memalign.github.io/p/catch.html 2026-03-13T00:00:00-08:00 2026-03-13T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 3/13/2026
Tags: Programming, Games

Introducing Catch Tap Toy, the latest addition to the Tap Toy series.

(See also: Counting Tap Toy, Slice Tap Toy, Fireworks Tap Toy, Tap Toy)

You can play it in the browser or add it to your home screen as a progressive web app.

I used royalty free game assets from Kenney. That site is awesome thanks to its broad selection of high quality game art.

I also used royalty free music. Credit:

Cyber Crime Story by | e s c p | https://www.escp.space
https://escp-music.bandcamp.com

I built this game to satisfy my nostalgia for one of the first games I ever played on a computer, Walnuts (playable on archive.org), which was apparently published in 1994.

The basic gameplay is the same: catch the gems and avoid the spikes. I added a twist: worms you can catch for bonus points.

I recently discovered that this gameplay dates back to Kaboom! (1981) which is itself a clone of Avalanche (1978).

I built this project using Google's Gemini CLI, starting with an old implementation of the game I wrote many years ago in Objective-C.

We're at an interesting phase of AI capability. It's easier than ever to make simple games like this. Is it still worth bothering to make and share something like this?

I think so. I made this for myself and to share with my son. Since I showed him the game first working (I called it a "preview" of a new game I'm making), he has frequently asked to play the "preview" again. That is special.

Also, the choices I make matter. They give this project meaning to myself and maybe also others. I picked the music, the art, and the special twists. Even though the game is simple, there are enough choices to make and options for each choice that nobody else would arrive at the same end result. (I even chose to keep a behavior that could be considered a bug: try playing this game on a phone-sized screen in landscape orientation for an extra amusing challenge) This whole game has been molded and curated for the player's enjoyment.

So I hope you like it!
]]> MemSky https://memalign.github.io/p/memsky.html 2026-01-13T00:00:00-08:00 2026-01-13T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 1/13/2026
Tags: Programming, Tools

Today, I'm sharing a web app for keeping up with your Bluesky timeline: MemSky.

You can use it in the browser or add it to your home screen as a progressive web app.

Everything is local in the web app except for the API calls to Bluesky directly to authenticate and fetch content.

You can browse in two modes:

1. Prioritize Unread Posts (the default) - Keep track of which posts you've already seen and start at the place in the timeline that you left off.

2. Infinite scrolling timeline - Uncheck the Prioritize Unread Posts to use this more standard mode.

In Settings, you can configure Muted Words to filter out any terms you don't care to see.

Why I built this:

I added Bluesky to my collection of news feeds over a year ago. Similar to Mastodon, I found that the official app doesn't do the one thing I want: to read a chronological timeline of posts and reposts from accounts I follow - always keeping my spot since the last time I checked.

For Mastodon, I wrote my own native app to do this in 2023. It's been great, but it's only usable by me. I don't have a developer account to publish native apps.

During the recent winter break, I wondered if a Bluesky client could be built entirely as a web app. I asked ChatGPT to create a one-file web app to see what could be done quickly. It was good enough that I figured I could spend the next week building it into what I want. Why a web app? They work on all platforms and are so easy to share! And LLMs make web apps super fun to whip up regardless of the device you're developing on.

Some technical details:

The hardest part of this project was to load new posts above the posts you have already read. The strategy I landed on: create a snapshot of the page, block user input, load the posts, adjust the scroll offset to pin the posts shown in the snapshot to the exact same position, once scrolling stabilizes remove the snapshot and unblock user input.

Automatic scrolling while pinning elements to the exact same visual position is not well supported by browser APIs. The APIs available let you find the current position of an element in the viewport, but that position needs to be corrected for any change in the viewport size. On iOS, Safari's UI chrome shrinks as a result of scrolling down, so the viewport changes because of the automatic scrolling the web app performs. This was tricky to get right.
]]> Create Your Own Wolfer https://memalign.github.io/p/create-wolfer.html 2025-11-24T00:00:00-08:00 2025-11-24T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 11/24/2025
Tags: Programming, Parenting, Games, Tools

In my post about Wolfers, I mentioned working on a way to generate new game variants.

I'm ready to share that today. Please check out the Create Your Own Wolfer page!

That page is a step-by-step guide to generate your own Wolfer game with only an English description. It also provides a way to load and test your game before submitting it to be included on the official Wolfers page.

I had the best results generating games with ChatGPT, though I provide links to additional AI chat bot choices.

Wolfers games can be educational or just plain fun. Check out this novelty Wolfer game where you have to determine whether a name is a Pokémon or a prescription medication: Wolfer: PokéPrescription.

Some technical details:

- Like PCEImage Editor, I'm using CodeMirror for in-line code editing.

- For user submissions, I'm using a Google Form because it's easy, free, and my projects are just statically hosted files.
]]> Wolfers https://memalign.github.io/p/wolfers.html 2025-11-03T00:00:00-08:00 2025-11-03T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 11/3/2025
Tags: Programming, Parenting, Games, Math

Introducing Wolfers!

Wolfers is a series of games, playable in your web browser, inspired by the iconic Word Munchers and Number Munchers games of the 1980s/1990s. Wolf down correct answers while avoiding the WoeBots! Take refuge in the Safe Space... if it appears in time!

I've wanted to bring this style of educational game back to life for a long time.

In the early 90s, my grandmother had a Macintosh with educational games. She was a teacher who specialized in teaching reading. She showed me how to play Word Munchers and I had a blast munching words with the right vowel sounds.

Around 2021, I started building a version of this game while on new parent leave from work shortly after my son was born. I returned to work before it was complete and the game was left in stasis.

After that, I got the itch to build many other projects, most of which I've shared here already. These are passion projects. I pursue what interests me the most at any given time, even when that leaves some other project on the backburner. Recently, teaching my son has inspired me to make several apps and this also revived my interest in Wolfers.

These days, I don't have much time or energy for programming because of demanding work and life responsibilities. Yet I still have interest. I still have the itch to build. I also still have a desire to use cutting-edge tools. I decided to give Gemini CLI a try. Google currently offers a fairly generous free tier for Gemini. I ended up impressed. Even though Gemini could be slow, go off-track, and need correction, I was able to get a lot done on evenings when I was otherwise too tired to program.

The project even ended up more sophisticated and polished as a result. I ended up with animations for game character movement that I would never have pursued had Gemini not made a quick almost-working initial implementation.

One of my biggest challenges with hobby projects is regaining momentum after a break. I found that using a coding agent like Gemini made it much easier to start and rebuild momentum after stalls. And it also prevented some stalls entirely: on nights I otherwise wouldn't have had time to do anything, I could write a quick prompt and end up with a patch for a task on the TODO list.

I found it vital to have unit test coverage. Gemini did a pretty good job adding coverage when I requested it. As test coverage became extensive, I was able to move quickly without breaking important game behaviors. It was great to enable Gemini to run unit tests using node to vet and fix new logic in a loop. Before using Gemini on this project, I had a backlog of tests I needed but didn't feel like writing. With Gemini, I had all of them written in a few evenings.

I approach Gemini with a high level of scrutiny: I run Gemini as a separate Linux user, with filesystem permissions only for the project directory. I review and approve every command it runs. I review and often edit every patch before committing it. This is working well for me.

Other useful tools:

- As usual, I used PCEImage Editor to create many graphics, including animation frames.

- I used Frank Force's tiny ZzFX library for sound effects. (backup)

- I am working on an LLM prompt to make it easy to create new Wolfers game variants. I hope to make a "create your own Wolfer" page where people can create a Wolfers game and submit it. I used the work-in-progress prompt to create Phonics Wolfer.
- Update: Create Your Own Wolfer is now live! (Details)

- Wolfers games look good on phones, iPads, and can also be installed as progressive web apps on your home screen. I recently found a simpler way to make PWAs thanks to this minimal-pwa project. I made this a bit more dynamic and self-contained in Wolfer's pwa.js and added offline PWA support in sw.js.
]]> Phonics Flashcards https://memalign.github.io/p/phonics.html 2025-10-27T00:00:00-08:00 2025-10-27T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 10/27/2025
Tags: Programming, Tools, Parenting

Introducing Phonics Flashcards!

My 4-year-old son is learning the basics of reading, starting with the sounds of every alphabet letter.

A friend of ours recommended cardboard flashcards by toddlersread.com.

This company shared a few helpful videos on how to use phonics flashcards effectively and what sound to learn first for each letter.

The cards we like best are sold out so I made this web app to use in the meantime.

Key features:

- Focus on just a few letters at a time. When the page loads, the five letters with the weakest recall are chosen automatically. Tap into the Letters menu to customize which letters are in rotation in the current session.

- Show uppercase and lowercase letters together. These can usually be learned at the same time. If your kid needs to focus on one at a time, this can be customized in the settings panel.

- A fun image is behind the reveal instead of on the front of the card. We want kids to learn the sound based on the letter alone. We don't want them to memorize the sound based on a single image.

- When there's an "easy recall" streak, there's a fun confetti animation to keep kids engaged.

- Flashcards are chosen and sorted using a spaced repetition algorithm (the same one used in my Mandarin Flashcards). That's why there are three buttons (and swipe actions) to quickly indicate whether the flashcard was not-yet-known, slow to recall, or easy to recall. Not-yet-known and slow cards are shown more frequently until recall improves.

- This web app should look good on phones, iPads, and can also be installed as a PWA on your home screen. ]]> Mandarin Flashcards https://memalign.github.io/p/mandarin-flashcards.html 2025-02-05T00:00:00-08:00 2025-02-05T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 2/5/2025
Tags: Programming, Tools, Parenting

Introducing Mandarin Flashcards!

I'm expanding on Mandarin Communication Board by using the same data to create a set of flashcards.

These flashcards use spaced repetition, a memorization method where cards you don't know yet will appear frequently and cards you know well will appear less often. This technique has been popularized by the Anki flashcards app.

When you review each card, you indicate whether you don't know it, you recalled it with effort, or it was easy to recall. The web app then calculates and schedules the next time it should be reviewed. Over time, well-known cards will be scheduled several days into the future.

With this technique, you can spend ~10 minutes a day reviewing cards to learn hundreds of words.

Some technical details:

- Learn more about its companion project's development details: About Mandarin Communication Board
- I reused almost everything from this project

- I implemented a swipe left/up/right UI that should feel great on iPhone. I find it a lot of fun to play with the cards!

- I originally tried to have ChatGPT implement the swipe UI. After several rounds of iteration, I had an 80% working implementation but it was so tangled that I started looking for another option. I found this great and simple codepen with no dependencies which I switched to as my starting point.

- Click the settings gear to see your learning statistics!

- Unmute your device and turn up the volume if you don't hear anything when clicking the "Speak" button

- This website can be added to your home screen as a PWA
]]> Mandarin Communication Board https://memalign.github.io/p/mandarin.html 2025-01-29T00:00:00-08:00 2025-01-29T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 1/29/2025
Tags: Programming, Tools, Parenting

Happy Lunar New Year!

Introducing the Mandarin Communication Board, a tool for learning and communicating in Mandarin Chinese.

My son recently started showing interest in learning Mandarin thanks to some singing books sent by a friend of ours.

I made this tool to help us expand our vocabulary and enable us to communicate about every day stuff.

My favorite part as I dabble in Mandarin is that there is no verb conjugation! Grammar tends to be fairly simple, too, which means that you can start saying intelligible sentences quickly by picking up common words.

The toughest part so far is hearing and producing words with the right tones. To my untrained American ears, I often can't tell the difference between words that differ only in their tone. It's been helpful to see the words written in pinyin and spoken aloud using this communication board.

Some technical details:

- I'm using the built-in SpeechSynthesis browser API, which produces audio that's good enough with the voices in Safari. I'm considering using higher quality TTS, like Google's, which appears to have a generous free tier.

- I used ChatGPT to do much of the hard work, including producing a lot of the vocabulary list. ChatGPT also contributed many of the word-to-emoji pairings. I had to remove many that were too abstract or a bad fit, though.

- For some words, I used iOS's new Genmoji feature to create images. I'm happy with the results!

- For other words, I used the wonderful and free images provided by ARASAAC. I found this organization by searching for "AAC images". AAC stands for "Augmentative and Alternative Communication".

- For a few words, I used Unsplash

- There are ~20 words and phrases with no images and I don't think I will find good ones for them

- I want to look into adding the full set of HSK1 and HSK2 vocabulary

- I am targeting Apple devices so it's likely that TTS or the full set of emoji may not show up on other operating systems

- This website can be added to your home screen as a PWA. I'm considering hooking it up to launch when I press the action button on my iPhone for quick reference.

- As a follow-on project, I might use this dataset to create flash cards to use with spaced repetition. Update: check out the flashcards project!
]]> Counting Tap Toy https://memalign.github.io/p/counting.html 2025-01-01T00:00:00-08:00 2025-01-01T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 1/1/2025
Tags: Programming, Art, Games, Parenting

Introducing Counting Tap Toy, the latest addition to the Tap Toy series.

(See also: Slice Tap Toy, Fireworks Tap Toy, Tap Toy)

In Counting Tap Toy, you can tap to count various fish and aquatic creatures. The count is displayed and announced.

I built this game for my 3-year-old son. He's pretty good at counting with one exception: he always skips "14". My hope is that seeing and hearing the numbers will reinforce 14's existence and teach the pattern of the teens and beyond.

Some technical details:

- I whipped this game up in my spare hours during winter break after shipping Space Trader

- The count is announced using the SpeechSynthesis API

- Unlike the prior Tap Toys which use Matter.js, I picked LittleJS by Frank Force. I've admired Frank's work for a long time and I was dissatisfied with Matter.js's inconsistent behavior on devices with different screen refresh rates. I wasn't able to fix that to my satisfaction in Slice Tap Toy -- frame drops are still sometimes noticeable.

- I'm generally pleased with LittleJS in this project. The example projects gave much of what I needed and the engine provides a lot of cool stuff, including systems for creating sound effects and particle effects.

- I needed to hack in a few behavior changes which were tricky to achieve: a full-screen canvas, simultaneous mouse and touch support, direct callbacks for handling user input (since the SpeechSynthesis API seems to ignore calls without that direct tie to input), support for links overlaid on top of the game canvas. Fortunately, the code is straightforward and easy to modify.

- One quirk: image tiles had a weird "bleeding" glitch where I would sometimes see a sliver of the other side of the tile wrapping around. I saw that LittleJS has a hack to solve this (tileFixBleedScale), but that causes other visual glitchiness (to me, it made the tiles look like they were under water, slight stretching and shrinking as the game object moves around). I picked a different solution: having at least a few pixels of padding baked into the image assets.

- As usual, I used PCEImage Editor to create many graphics. I created the PCEImage format and tools so I could simply store and edit graphics as ASCII art. See them here.
- I got the image assets from someone who posted them with a permissive license on itch.io. Then I used PCEImage Editor to import and convert them.

- Music came from chosic.com. Credits for the songs I used.
]]> Space Trader https://memalign.github.io/p/spacetrader.html 2024-12-24T00:00:00-08:00 2024-12-24T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 12/24/2024
Tags: Programming, Games

Introducing my latest game, playable right in your web browser: Space Trader

In Space Trader, you can trade goods, hunt bounties, amass a fortune, buy a moon and retire.

Space Trader can be saved to your home screen as a PWA (Progressive Web App).

Space Trader started as a game written by Pieter Spronck for Palm OS, released in 2002. Wikipedia page. Official website (mirror).

You can play the original on archive.org.

As one of my favorites, this game holds a special place in my heart. I played a ton in middle school and high school. This is the second port of the game I've made.

Like SFCave (recreated as CaveRibbon), I decided to recreate Space Trader as a web app to feed my nostalgia and give the game new life. I hope this version of Space Trader can survive long into the future thanks to the universal availability of web browsers and their devotion to compatibility.

Some technical details:

- As usual, I used PCEImage Editor to create many graphics. I created the PCEImage format and tools so I could simply store and edit graphics as ASCII art. See them here.

- To aid debugging and unit testing, I use a deterministic random number generator called GameRand. In debug mode, I can capture the random seed and log of every action taken in the game. Then I can replay that to reproduce a bug or create a test.
  - I've written many unit / integration tests for Space Trader. See them here.
  - Learn more about GameRand in the post for CaveRibbon.
  - A major downside to this technique for testing is that tests become invalid if a bug fix (or a new feature) changes the amount of random numbers consumed. I ended up remaking many tests one or two times. This added a few days of extra work to the project.
  - You can play the game with cheats and access the replay log on a special version of the game: cheats.html.

- I translated an existing implementation of this game to vanilla JavaScript using ChatGPT. I could translate ~300 lines at a time. I audited every line produced. This worked pretty well and saved me a huge amount of time compared to manually translating the code. This was a somewhat zen activity for me because it was mechanical; tedious but rewarding to see how quickly I could progress through the whole codebase. This was the kind of programming I could do after an exhausting day at work. Major differences/difficulties:
  - The original code relies on integer math, but JavaScript uses float math. I needed to ensure all uses of numbers yielded an expected result. I ended up adding exhaustive runtime asserts and writing automated stress tests to catch problems.
  - ChatGPT would sometimes produce inconsistent translations, especially for enum names. These could lurk, waiting to cause a crash at runtime. I hunted these with stress tests, manual tests, nearly exhaustive code coverage, and replayable game logs (which I turned into tests).
  - Similarly, ChatGPT would inconsistently translate properties and their setters/getters. I left many awkward translations in place to save myself time, even though it makes the code worse.
  - The UI needed to be tailored to the web. I ended up writing almost all new code for the UI.
  - The original code had no tests. I wrote all new tests and a quick-and-dirty system for measuring code coverage. I even discovered several longstanding bugs in the original code.

- Before translating the whole codebase, I investigated using emscripten to reuse as much of the original C code as possible. I decided I wouldn't be satisfied with the result. There wasn't separation of UI and business logic that would have let me easily build new UI tailored to web. There were a lot of Palm OS platform-specific functions that would need to be replaced. I didn't want to struggle to change the existing code where it became necessary.
]]> MemPlayer https://memalign.github.io/p/memplayer.html 2024-07-25T00:00:00-08:00 2024-07-25T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 7/25/2024
Tags: Programming, Tools

I recently whipped up a simple audio player dedicated to listening to long audio files across multiple listening sessions.

It's called MemPlayer and you can try it here.

The problem MemPlayer solves:

I listen to most audiobooks in the excellent Libby app. It nails the core use case: remembers playback position, gives easy controls for jumping back/forward, and gives granular control over playback speed.

Sometimes, though, I have a book (or other long audio recording) as a single standalone audio file. I still need all of those features for easy listening across multiple days.

Instead of finding an existing app with exactly what I need, I experimented to see how quickly I could whip up a simple utility app using ChatGPT. I found the low overhead of web development plus ChatGPT to be a killer combination.

I started with this prompt:

Generate HTML, JavaScript, and CSS for a simple web app with these requirements:
- The user can browse their local disk to select an audio file
- Alternatively, the user can drag and drop an audio file onto the web app
- The web app allows the user to play the audio file, change playback speed, and skip forward and back by 10 seconds
- The web app stores the file in local storage and restores it when the page is refreshed
- The web app stores the current playback position and restores it when the page is refreshed. This way the user can load the page and resume what they were listening to.
- There is a clear button which causes the web app to forget the current audio file and playback position

This produced code for index.html, scripts.js, and styles.css that gave me 90% of what I needed. The UI was good, but the web app did not work perfectly.

I steered it with a few specific suggestions in subsequent prompts, mainly to use IndexedDB to store the audio file because its original choice, localStorage, can't handle big files. I also needed to fix a bug in restoring playback position. I then made some minor style and user experience tweaks, added PWA metadata and icons, and was done!

Overall, I was able to whip this up in about an hour, with some of the fixes and tweaks done on the go.

I think there's a lot of potential to make custom tiny tool web apps with low effort this way. And one of the best parts of the web is that nearly everyone can use these tools without any setup across their phones, tablets, computers, etc. And they will hopefully continue working for decades to come without any developer intervention.
]]> Slice Tap Toy https://memalign.github.io/p/slice.html 2024-05-13T00:00:00-08:00 2024-05-13T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 5/13/2024
Tags: Programming, Games

Introducing my latest project, playable right in your web browser: Slice Tap Toy

Slice Tap Toy can also be saved to your home screen as a PWA (Progressive Web App).

This project is my spin on the touch screen swipe-to-slice concept. Every pizza can be sliced multiple times, down to tiny slivers. Can you unlock the whole menu?

Swiping across a touch screen to slice objects is a delightful and fun mechanic. You might remember some of the best early games for iPhone: Fruit Ninja and Cut The Rope.

Unfortunately, these formerly wonderful games are no longer delightful, now with constant interruptions and ads. Go try them and see for yourself. These games have been ruined.

Slice Tap Toy is a simple passion project so it can be light, fun, and pristine.

Development details:

I was inspired to make Slice Tap Toy when I came across Samurai Sam, an entry to the 2023 JS13KGames competition. This got me thinking about slicing games.

I decided to do some quick prototyping by hacking on Tap Toy's source code. I vetted that I could track slices from touch and mouse input, draw the slices, and detect collisions without much work. Like the original Tap Toy, I use PCEImage for the art.

Like CaveRibbon (project details), I used LLMs to help. I could do some things faster, I was able to get the website to look how I wanted without becoming an expert on CSS, and (new to this project) I was able to get artistic inspiration for the art. I asked DALL-E to generate pizza pixel art. What I got were grotesque abominations that, to this day, have eroded some of my enjoyment of pizza. I stared at flesh colored cheese and glitchy toppings and turned them into my own cleaner pixel art pizzas. I'll spare you the examples.
]]> CaveRibbon https://memalign.github.io/p/caveribbon.html 2024-02-19T00:00:00-08:00 2024-02-19T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 2/19/2024
Tags: Programming, Games

Introducing my latest game, playable right in your web browser: CaveRibbon

CaveRibbon is a one-button game where you control a ribbon gliding through a shrinking cavern. Avoid the walls and obstacles as long as you can. Compete with yourself and your friends by sharing a replay. Submit your high scores to get into the hall of fame!

CaveRibbon can be saved to your home screen as a PWA (Progressive Web App).

This game is a tribute to Sunflat's SFCave for Palm OS. You can play the original on archive.org.

In fact, it was archive.org that stirred up my nostalgia over a year ago by publishing a collection of 565 Palm OS apps, all usable on the web thanks to a Palm OS emulator.

When I was in middle school, I would play SFCave on a Palm m130 at night when I was supposed to go to bed. My dad and I had an ongoing competition to see who could get the highest score.

This was my inspiration to add the replay and share features which let you replay the exact same round, with your previous playthrough visible as a head-to-head competitor.

Some technical details:

- I used PCEImage Editor to create the pixel font and many graphics. I created the PCEImage format and tools so I could simply store and edit graphics as ASCII art. See them here.

- This game is entirely static files. There's no server-side backend. To create replay URLs, I need to serialize the entire game state into the URL itself. This proved to be challenging because there are URL size limits in browsers and messaging apps. In my first approach, I wrote a bunch of code to serialize all of the wall, obstacle, and player positions. This proved to be too much data. I came up with a few tricks to significantly shrink the data:

  - I compress player positions lossily and then interpolate them as part of deserialization. I keep only positions at the top of a peak, bottom of a valley, and when the user is close to an obstacle. I only have to keep ~4% of the original data.

  - I use a deterministic random number generator called GameRand. As long as I reuse the random number generator's seed and don't change the code to use random numbers differently I will get the exact same wall and obstacle positions in a replay.

    - I first came across GameRand in phoboslab's game underrun (source).

    - I searched for the constant 0x49616E42 to find the origins of this function. This led me down a rabbit hole: a StackOverflow post which links to a blog post (now only available on archive.org) which links to this post from 2002 introducing a faster rand function by Stephan Schaem, who appears to be the original author.

  - I couldn't just serialize the replay as JSON. That's not nearly compact enough (every digit is stored as a character!). Instead, I packed raw bytes into a buffer and serialized that into Base64. I did some tweaks to squeeze some additional efficiency (such as replacing characters that need to be percent-encoded in URLs).

  - Replay URLs for scores of 700 or higher get a nice image preview (Open Graph image) that includes the score. I generated all of these files statically using PCEImage and a script.

- This is the first project where I've made use of an LLM to help. I used ChatGPT and it had great positive impact:

  - It helped me do some things faster, such as writing boilerplate or example code that I would have had to write myself while wading through documentation.

  - It helped me do some things I wasn't willing to do myself. I don't have time to learn the right way to get specific UI behaviors using HTML and CSS. I would have compromised the UI design to fit within my current skills. With ChatGPT's help, I was able to get exactly what I wanted much faster than having to learn how to do this on my own.

  - In general, I'm energized to work on more projects with these tools. I found the accuracy to be far above what I expected. It's more than good enough for a non-mission-critical side project.

- I'm trying out some design ideas from Bret Victor's Magic Ink paper (backup). My favorite insights:

  - Most software design should focus on information graphic design, not interaction design

  - The case study of Amazon's book listings drives that point home

  - Try using sentences to describe settings rather than have a list of toggles (illustrated with his BART widget). I use this concept for sound effects settings in CaveRibbon.

  - Instead of requiring interaction, make decisions for the user based on context. I use this idea in CaveRibbon by fading out the rest of the UI during gameplay instead of having a "full screen" button.

See also:

- Sunflat's latest games for iOS and Android
]]> Octogram https://memalign.github.io/p/octogram.html 2023-12-23T00:00:00-08:00 2023-12-23T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 12/23/2023
Tags: Games

In an HN post about a very cool PuzzleScript game called Enigmash, I learned sad news.

Jack Lance, the author of the game, died earlier this year.

I went to his website, jacklance.github.io, and saw that it had been updated to refer to him in the past tense.

Seeing that the site is hosted on GitHub, I looked at the recent updates. I discovered two things:

- He made this update himself, to show up a few days later

- He published one last game, Octogram, but unfortunately made a typo in the URL to the game
- Update 12/30/23: I commented on the git commit and one of Jack's siblings saw it. They pushed a fix and now the link on Jack's website is working!

Here's a working link to Jack Lance's last game: Octogram.

It's a super tricky puzzle game with fun wordplay. Give the source code a peek if you get stuck -- but beware this will spoil all of the answers!

More resources:

- Jack's games
- Jack Lance on Puzzle Wiki
- A blog post about Jack's work
- Another blog post about Jack's work
- Backup of jacklance.github.io
- Due to some technical details of PuzzleScript, none of his PuzzleScript games are in this repo. Instead, they are stored as GitHub gists. I've grabbed a separate backup of every gist linked to by his games page for posterity.
- A YouTube video where Jonathan Blow mentions Jack's death. "...he was 25... he was already one of the best game designers in the world and was on track to be even better"
- Obituary under his real name

]]> Mastodon API https://memalign.github.io/p/mastodon.html 2023-11-27T00:00:00-08:00 2023-11-27T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 11/27/2023
Tags: Programming

In the same vein as FreshRSS, another open source project with a cool API is Mastodon.

Many users I followed on Twitter (now X) have migrated to Mastodon. I found that the Mastodon apps I tried didn't perfect the one thing I want: to read a chronological timeline of posts and reblogs from the accounts I follow - always keeping my spot since the last time I checked.

I had already written my own Twitter client for this, which I've been using for many years, and just finished adapting that for Mastodon.

The Mastodon API made this really easy! I can tell that a lot of care went into making this core use case straightforward. Thank you Mastodon developers!

Here's the short list of requests needed to make a simple Mastodon timeline viewer app:

Below, I'm using https://mstdn.party but you should substitute the Mastodon server you use.

1. Register your app.
- Docs: https://docs.joinmastodon.org/methods/apps/#create
- Replace YOURAPPNAME and YOURWEBSITE below. YOURWEBSITE should be a full url starting with "https://"

curl -X POST -F 'client_name=YOURAPPNAME' -F 'redirect_uris=urn:ietf:wg:oauth:2.0:oob' -F 'website=YOURWEBSITE' https://mstdn.party/api/v1/apps

The response is JSON and includes important fields you will need in later steps: client_id and client_secret. I'll refer to these as YOURCLIENTID and YOURCLIENTSECRET below.

2. Give your app permission to read your account information. Open this URL in your browser and authorize it. You'll be shown an authorization code which I'll refer to as YOURAUTHCODE below.
- Docs: https://docs.joinmastodon.org/methods/oauth/#authorize

https://mstdn.party/oauth/authorize?response_type=code&client_id=YOURCLIENTID&redirect_uri=urn:ietf:wg:oauth:2.0:oob

3. Get an access token for your app to use to request your account's timeline (and make any other helpful API requests).
- Docs: https://docs.joinmastodon.org/methods/oauth/#token

curl -X POST \
       -F 'client_id=YOURCLIENTID' \
       -F 'client_secret=YOURCLIENTSECRET' \
       -F 'redirect_uri=urn:ietf:wg:oauth:2.0:oob' \
       -F 'grant_type=authorization_code' \
       -F 'code=YOURAUTHCODE' \
       -F 'scope=read' \
       https://mstdn.party/oauth/token

The response is JSON and includes the access_token. I'll refer to that as YOURACCESSTOKEN below.

4. Now your app can load your timeline.
- Docs: https://docs.joinmastodon.org/methods/timelines/#home

curl 'https://mstdn.party/api/v1/timelines/home' -H 'Authorization: Bearer YOURACCESSTOKEN'

The result is JSON with everything you need to display the timeline in full. I love that it's all included in a single API request! This even includes account information (display name, username, the image URL for the poster's avatar, and more) for the people you follow and the people whose posts they have reblogged.

One helpful argument to include is "limit". I like to request the max number of posts supported by the API, 40.

curl 'https://mstdn.party/api/v1/timelines/home?limit=40' -H 'Authorization: Bearer YOURACCESSTOKEN'

When refreshing my app, I want to request all posts that are new since the last time I refreshed. I accomplish this by using the max_id argument.

I start by requesting the most recent 40 posts:

curl 'https://mstdn.party/api/v1/timelines/home?limit=40' -H 'Authorization: Bearer YOURACCESSTOKEN'

I check if this includes the last post my app is aware of. If not, I request farther back by including "max_id=" the id of the oldest post in the response I just got. Example:

curl 'https://mstdn.party/api/v1/timelines/home?limit=40&max_id=123456789' -H 'Authorization: Bearer YOURACCESSTOKEN'

I continue loading back like this until any of these conditions are true:
- I find posts that my app already knows about
- I get no posts in response
- I get posts older than 1 month (I don't want to accidentally load back too far)
- I've made more than 5 requests (I don't want to create excess traffic)

And that's it! My app only needs to use a single API to refresh my timeline. I did steps 1 through 3 manually and hard-coded the access token into my app, using it to perform step 4 every time I want to refresh. This is ok because this app is just for me so I don't need a more dynamic authentication flow.
]]> AirDesk https://memalign.github.io/p/airdesk.html 2023-11-26T00:00:00-08:00 2023-11-26T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 11/26/2023
Tags: Parenting, Tools, Leisure

There's not enough time in the day for everything I want and need to do. Parenting, work, exercise, hobbies, sleep, etc.

I've found that even optimizing a few minutes here and there can add up to make life easier and more enjoyable. I still use tools for consuming text and audio/video faster.

Here's one of the biggest new optimizations I was able to make this year.

I had a bunch of work time and a bunch of hobby time I wanted to spend in front of a keyboard. This is thoughtful writing or programming time that couldn't be stolen a few minutes at a time while waiting in line, walking between meetings, etc.

I also had a bunch of underutilized time on a stationary exercise bike. I mostly spent that time reading news feeds or watching TV/movies. I enjoyed that a lot, but it wasn't the right balance of time spent doing that when I had other things I wanted to prioritize.

I searched for a product that would let me use a laptop or iPad + keyboard case while exercising on the stationary bike.

I came across airdesks.com and bought their laptop desk. I got the 64" tall, "Average Size Laptop", No AirShelves config. It's been awesome. I use it on the bike every day and occasionally as a standing desk.

Right now, I'm writing this post while exercising on the bike while my son is napping -- something I couldn't have squeezed in without this desk!
]]> FreshRSS https://memalign.github.io/p/freshrss.html 2023-11-19T00:00:00-08:00 2023-11-19T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 11/19/2023
Tags: Programming, RSS

This year has been rocky for free APIs I've enjoyed adopting in personal projects. Twitter (now X) killed 3rd party clients, Reddit made similarly killer API pricing changes, and now Feedly has started charging too.

Fortunately, Feedly's API pricing is very reasonable right now: $8/mo or $72/year!

Feedly provides a great service, as I wrote in March 2020. It's worth paying for at this price.

I've depended on Feedly ever since Google Reader shut down in 2013. I seamlessly migrated and never had problems for 10 years of use. Feedly is a great way to keep up to date with RSS feeds and there are several great RSS reader apps that support it. Feedly is very reliable and "just works".

But this is an era of paid subscription overload. Even though the price is reasonable, I sought out alternatives that wouldn't carry the risk of incremental price increases over the coming years.

And I found one that, for the past few weeks, has proven to be good enough to replace Feedly for me: FreshRSS (GitHub).

It's a free and open source project but using it came with the cost of time. I spent the past few weeks writing a bunch of code, finding a reliable host, and cross-checking with Feedly to ensure I'm getting good results.

Here are some notes on adopting FreshRSS in a personal project. The complexity and uncertainty are the downsides of using this instead of Feedly. The benefits include its price (free), that it is open source, and the option to self-host.

- Export existing feeds from Feedly as an OPML file. Instructions.

- Find a FreshRSS host or host it yourself. Here's a list of official hosts. I tried one, but found it to be unreliable -- it seemed to purge my history after ~1 week. I switched to a different one and have had better results.

- Once logged into the FreshRSS host, update some settings:
- Profile: create an Authentication token. This will be used to automate updating all feeds. Create an API password. This will be used when you adopt the API to load feed information, news entries, and mark them as read. Take note of the API URL (example: https://host.tld/p/api/).
- Archiving: change settings to keep longer history. I think this helps avoid old articles reappearing as unread in your feeds. These settings do not appear to be honored by all hosts.

- Import OPML file into FreshRSS: In the web UI, click the folder icon, then Subscription Management, then the folder icon (again), then Import / Export. Then you can pick a file to upload to import.

- To reliably refresh all feeds from the source, I've found it necessary to set up a cron job on a server I own to force FreshRSS to refresh. I'm running this every 4 minutes, but FreshRSS will only honor it every ~15-20 minutes. Use your username and the authentication token configured in FreshRSS settings. Make sure to URL encode them (space will need to be replaced by +, special characters will need to be %-encoded).

*/4 * * * * /usr/bin/sh /path/to/updateFreshRSS.sh

updateFreshRSS.sh:

/usr/bin/curl 'https://host.tld/p/i/?c=feed&a=actualize&ajax=1&force=1&user=YOURUSERNAME&token=AUTHENTICATIONTOKENSETABOVE'

  - Most RSS feeds keep enough history that you won't miss entries even if you refresh infrequently. For me, one feed in particular lost entries in FreshRSS compared to Feedly: the unofficial Hacker News front page feed from hnrss.org. Because this feed seems to provide a current snapshot rather than full history, FreshRSS's less frequent refreshes ended up missing entries that Feedly would catch. My frequent cron job plus changing the feed url from https://hnrss.org/frontpage to https://hnrss.org/frontpage?count=100 worked well enough to nearly match Feedly's results (and any discrepancies were actually desirable, like missing posts that were quickly flagged to death).

- Now, you're ready to adopt the API. FreshRSS's API is identical to Google Reader's! The official documentation even links to old web pages that detail the Google Reader API. I found a few docs helpful:
  - The official documentation
  - The server-side code that implements the API
  - This old archived webpage that details the Google Reader API

Some important requests:

Authenticate:
curl 'https://host.tld/p/api/greader.php/accounts/ClientLogin?Email=YOURUSERNAME&Passwd=YOURAPIPASSWORD'

This gives a response that looks like:
SID=YOURUSERNAME/123456123456123456abcdefabcdef1234561234
LSID=null
Auth=YOURUSERNAME/123456123456123456abcdefabcdef1234561234

Save the string that comes after "Auth=". I'll call that YOURAUTH below.

Get a "write token" that will allow you to mark entries as read:
curl -H "Authorization:GoogleLogin auth=YOURAUTH" 'https://host.tld/p/api/greader.php/reader/api/0/token'

The response is a string. Use the string as WRITETOKEN below.

Get all news entries in JSON form:
curl -H "Authorization:GoogleLogin auth=YOURAUTH" 'https://host.tld/p/api/greader.php/reader/api/0/stream/contents/reading-list'

Get all unread news entries in JSON form:
curl -H "Authorization:GoogleLogin auth=YOURAUTH" 'https://host.tld/p/api/greader.php/reader/api/0/stream/contents/reading-list?xt=user/-/state/com.google/read'

Mark an entry (or multiple entries) as read using their entry IDs. In this example, I've put ENTRYID1, ENTRYID2, and ENTRYID3 as example placeholders:
curl -H "Authorization:GoogleLogin auth=YOURAUTH" 'https://host.tld/p/api/greader.php/reader/api/0/edit-tag' -X POST -d 'T=WRITETOKEN&a=user/-/state/com.google/read&i=ENTRYID1&i=ENTRYID2&i=ENTRYID3'

Get your subscription list, which gives you an icon image URL for each feed:
curl -H "Authorization:GoogleLogin auth=YOURAUTH" 'https://host.tld/p/api/greader.php/reader/api/0/subscription/list?output=json'

]]> Fireworks Tap Toy https://memalign.github.io/p/fireworks.html 2023-09-17T00:00:00-08:00 2023-09-17T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 9/17/2023
Tags: Programming, Art, Games

Introducing my latest project: Fireworks Tap Toy

On this year's Fourth of July, my toddler son discovered a love of fireworks. With Fireworks Tap Toy, I'm trying to bring some of that magic to the touch screen.

Tap, click, type, or go into "auto launch" mode.

This project is a remix of a few other projects:

- Tap Toy, which has its own story
  - I copied and modified index.html and progressive web app pieces
  - I copied over touch, mouse, and keyboard support
  - I copied over sound effects and music utilities

- An old codepen (backup) someone created to teach others how to animate fireworks using JavaScript canvas
  - I chose this over fireworks JavaScript frameworks people have shared because it's so much simpler. I don't like the hassle of dependencies. I don't want to install some tool or import an opaque blob. I just want to write some (ideally self-contained, vanilla) code for fun. Here's the top hit for 'fireworks javascript' which I looked into and chose not to use. Where even is the code??

Some tips:

- You can add Fireworks Tap Toy to your home screen on iOS or Android. If you do that, it'll behave more like a normal app. (I did the extra bit of work to make this a "progressive web app")

- If you give this to a kid, you can use Guided Access to prevent them from leaving the app
]]> Remember Forgotten Names https://memalign.github.io/p/remember.html 2023-05-21T00:00:00-08:00 2023-05-21T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 5/21/2023
Tags: Brain Hacking

I use this trick when I can't remember a name I used to know. It works for names of actors, teachers, friends of friends, etc.

The trick:

First, try to remember as much as you can about the person. Imagine their face, appearance, and other biographical information.

Then go through the alphabet saying a name for each letter. Try to pick names that are as plausible as possible for the person you're trying to remember.

Example:

What was my old roommate's girlfriend's name?

She was from Connecticut, they dated for a few years, she had long dark hair, she was allergic to dogs, she worked as an accountant, ...

A... Ashley
B... Blaire
C... Chelsea
D... Daphne
E... Eliza
F... Frances
G... Genevieve
H... Hillary
I... Irene
J... Jessica
K... Katherine
L... Laura
M... Monica
N... Nancy
O... Olivia
P... Penny
Q... Queenie
R... Rachel
S... Stephanie! That's it!

I can almost feel the old dusty neural pathways light up when it finally clicks! ]]> Emscripten on Raspberry Pi 400 https://memalign.github.io/p/pi-emscripten.html 2023-01-15T00:00:00-08:00 2023-01-15T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 1/15/2023
Tags: Programming, Raspberry Pi

I recently completed a harrowing journey to install Emscripten on a Raspberry Pi 400. There were many hiccups along the way that brought back bad memories from the ~8 years that I used Linux (4 on Gentoo, 4 on Debian) as my daily driver OS.

If you're running a well-trodden configuration, things work pretty smoothly. If you're running anything else, you'll spend hours, days, or even years with systems that aren't working 100%.

For Emscripten, Raspberry Pi 400 is not a well-trodden configuration.

Emscripten provides official binaries for many configurations and I bet the official tutorial goes really quickly and smoothly if you are running an x64 CPU.

They even provide binaries if you're running an arm64 CPU, just install using this command (see this ticket for more info):

./emsdk install latest-arm64-linux

But if you are running a 32-bit Intel-based (x86) or ARM CPU, then you will need to build from source.

Raspberry Pi 400 is a 32-bit ARM CPU so I found myself needing to build from source.

And, at least on my machine, the default commands did not work.

(I also tried to get Emscripten installed in the iSH iOS app, which emulates an x86 CPU. The emsdk script spent hours cloning the LLVM repository and then started building from source but iSH consistently crashed early in the build process. I gave up. It's possible this will work in the future.)

Here are the steps I followed, what failed, and how I got it working:

My initial configuration: Raspberry Pi 400 running the Buster (Debian 10) version of Raspbian that came with the SD card. I had installed some packages for other purposes so it's possible I won't mention some packages vital to making these steps work.

I needed to install one package:

sudo apt-get install cmake

I think that the resources emscripten pulls plus the intermediate build products can end up taking tens of gigs of storage (I only checked once during build and it was 22GB). I didn't have that much free space on the Raspberry Pi's SD card so I used a USB-C external drive. My external drive is formatted exfat.

The exfat filesystem doesn't support symlinks and building will fail hours into the process because of that:

[ 50%] Linking CXX shared library ../../lib/libLTO.so
CMake Error: failed to create symbolic link '../../lib/libLTO.so': operation not permitted
CMake Error: cmake_symlink_library: System Error: Operation not permitted
make[2]: *** [tools/lto/CMakeFiles/LTO.dir/build.make:168: lib/libLTO.so.16git] Error 1
make[2]: *** Deleting file 'lib/libLTO.so.16git'
make[1]: *** [CMakeFiles/Makefile2:17719: tools/lto/CMakeFiles/LTO.dir/all] Error 2
make: *** [Makefile:152: all] Error 2
Build failed due to exception!

Instead of reformatting my external drive, I created a very large disk image on it which I formatted as ext4:

# 200GB image - I think this is overkill but I wasn't willing to fail because of insufficient disk space
# Some guides suggest using the fallocate command to create a disk image but I found that command does not work when writing to an exfat drive
dd if=/dev/zero of=image.iso bs=1G count=200

# Format the image ext4
mkfs.ext4 -j image.iso

Then I mounted the disk image and gave the pi user full ownership:

cd /media/
sudo mkdir emscripten-disk
sudo mount /path/to/image.iso emscripten-disk
cd emscripten-disk
sudo chown -R pi:pi .

Within that directory, I ran this:

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install sdk-upstream-main-32bit -j1

The "-j1" argument forces the build to use only one CPU. When I originally attempted to install without that argument, the build failed with very little feedback. Just this generic error, no specific compiler errors:

Error 2
Build failed due to exception!

I think this is caused by the machine running out of memory (or maybe some other kind of compiler crash).

Of course, building with only one CPU makes this whole process take much longer. It took ~16 hours for everything to build.

When the build completes, run this:

./emsdk activate sdk-upstream-main-32bit

Pay attention to the output of that command because it tells you how to add the right directories to PATH for emcc to be found.

After all that, following the official tutorial, I created hello_world.c and tested the compiler:

emcc hello_world.c
node a.out.js

And I got this error:

/path/to/a.out.js:144
throw ex;
^
ReferenceError: globalThis is not defined

This is because Buster's version of nodejs is 10.24.0, a version before globalThis is supported.

This command did produce hello.html which worked as expected in my browser:

emcc hello_world.c -o hello.html

To get node working, I needed to update my Raspberry Pi to Bullseye (Debian 11). I followed this guide.

This was an arduous process of running apt-get update, apt-get upgrade, rebooting, manually editing /etc/apt/sources.list, apt-get update, apt-get upgrade, rebooting, apt-get update, apt-get upgrade, apt-get install nodejs, babysitting all of these commands because some of them require user input, losing SSH access as a result of some updates (make sure to run these commands inside screen or tmux!), physically accessing the device to restart sshd, etc.

Finally at the end of it, this command worked:

node a.out.js
(output) Hello, world!

Hopefully these steps work for you!

Other Useful Info

If at any point you need to clean build, you can do this:

rm -rf llvm/git/build_main_32

I had to do this once when figuring out the workaround for the exfat symlink issue. If you change the directory emsdk is running in between attempts, the build scripts will not let you pick up where you left off.

Here's what got me up to the compiling phase in the iSH app on iPad:

apk add cmake
apk add make
apk add clang
apk add binutils
apk add libc-dev
apk add gcc
apk add libstdc++6
apk add g++
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install sdk-upstream-master-32bit
(note that this will take HOURS to clone LLVM)
Progress compiling got to 2% and then iSH crashes.

(I filed an issue.) ]]> Simplify Picking a Restaurant https://memalign.github.io/p/simplify-picking-restaurant.html 2022-11-22T00:00:00-08:00 2022-11-22T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 11/22/2022
Tags: Food, Parenting, Tools

With a toddler at home, we've come to rely on DoorDash as a quick way for the adults to eat tasty food.

We're lucky to live in an area densely packed with restaurants. Despite the wealth of options, we often struggle to choose when dinnertime arrives.

My spouse and I will end up naming restaurants, taking turns rejecting options one-by-one. On some days, nothing sounds good. On some days, we're exhausted from a night of interrupted sleep and lack the energy to pick. Often both.

I got the idea to make picking a restaurant more mechanical on the hard days.

At first, I considered building a web app with a database and a nice UI for listing restaurants and saving our history. I spend most of my non-work hours taking care of the baby, exercising, or doing chores so even a simple side-project takes months and comes at the cost of precious sleep hours. I needed a lower-effort way to test the idea.

I realized I could make this tool in a shared spreadsheet. I used Numbers on iPhone/iPad and shared the sheet with my spouse using iCloud. Google Sheets could've worked too. Spreadsheets are a great low-effort way to solve problems without writing code. I bet a lot of software engineers underutilize spreadsheets.

Here's how it works:
- Add a row for every restaurant
- Have a column for the last time we ate there
- Have a column for each person with an estimate of how often they are willing to eat at each particular restaurant
- Have a column to note any restaurants someone is actively in the mood to eat at
- The sheet calculates a recommendation for each row:
    - Too soon: neither person is ready to eat there again
    - Let's eat (green): both people are ready OR someone is in the mood
    - Maybe eat (yellow): one person is ready
- At dinnertime, peruse the green and yellow rows to pick efficiently

Grab my example sheet to create your own. ]]> Trippy Art https://memalign.github.io/p/trippy-art.html 2022-11-20T00:00:00-08:00 2022-11-20T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 11/20/2022
Tags: Art

Here's a collection of trippy art from various corners of the internet. Some is generated with the help of neural networks. Some is human-made.

View the collection

]]> Tap Toy https://memalign.github.io/p/taptoy.html 2022-05-30T00:00:00-08:00 2022-05-30T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 5/30/2022
Tags: Programming, Art, Games

Introducing my latest project: Tap Toy

Tap Toy is a fun little web app for relaxation. Tap the screen to launch some characters which then bounce off each other. Turn on sound for satisfying sound effects and relaxing public-domain background music. In some ways, I think this toy brings the catharsis of popping bubble wrap to your touch screen.

I got the idea for this project after watching my then-9-month-old's fascination with my iPhone and iPad. Note that the CDC guidelines recommend "no screen time for children younger than 2 years" (source, backup) but these kids will still find a way to grab your device for a fleeting moment before you take it back.

I wondered if I could make an app to soothe and distract our baby if we ever became truly desperate for a moment of peace. (Fortunately, we still haven't reached this point yet!)

I modeled some of the behavior after Baby Einstein Take Along Tunes, one of the more pleasant sound-making toys we have:

The result, as my wife described it, is "crack". She was having a bad day when Tap Toy was first ready to play with and she ended up zoning out, addicted, tapping it for 30 minutes while some of her stress melted away.

As is usual for me, this side-project is a remix of a few other projects:

- MagicKeyboard.io (backup, source) by Feross Aboukhadijeh
    - Which in turn is inspired by a reddit post about this art project by Moment Factory
    - In fact, I kept the keyboard triggers to launch sprites from the right location along the bottom of the screen
    - I fixed the sound effect code and added background music
    - I also added real multi-touch and mouse support

- PCEImage (note that the Koffing, Pikachu in Tap Toy show up in PCEImage Editor's list of examples)

Some tips:

- You can add this web page to your home screen on iOS or Android. If you do that, it'll behave more like a normal app. (I did the extra bit of work to make this a "progressive web app")

- If you give this to a kid, you can use Guided Access to prevent them from leaving the app

An idea to take this further:

- Holiday-themed Tap Toys: Halloween, Thanksgiving, Christmas, Chanukah, New Year's Eve, etc
]]> PCEImage Editor https://memalign.github.io/p/pceimage-editor.html 2022-02-13T00:00:00-08:00 2022-02-13T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 2/13/2022
Tags: Programming, Art, Tools

After defining the PCEImage specification, I wanted to create a great code editor that can color each character in the image.

Try out the editor in your browser or read on for more details.

I was inspired by the PuzzleScript editor (mentioned in my post about PuzzleScript), especially how sprites are defined and styled. Whereas PuzzleScript sprites use indexed color, PCEImage can use almost any ASCII character as a pixel so I couldn't just reuse the same editor.

I could reuse the same foundations, though! PuzzleScript's editor is built using CodeMirror, an open-source text editor implemented in JavaScript for the browser.

CodeMirror is super customizable and I was able to add the coloring support I needed by writing a parser and making some changes to codemirror.js.

I also added support to the editor to automatically generate PNGs and, to add a little fun, wobbling GIFs.

For the wobble effect, I was inspired by Wobblepaint (mentioned in my PICO-8 post) and did my best to try to capture the same organic and charming wobble zep invented.

I also included some "Color Utilites" on the editor page: a simple color picker, a button to invoke your system color picker, and some example palettes (including PICO-8's). Check out Lospec's Palette List for even more ideas.

If you create any cool PCEImages, I hope you'll consider submitting a pull request to add your example! I'll find some way to credit the submitters on the page if I get any!
]]> PCEImage https://memalign.github.io/p/pceimage.html 2022-02-13T00:00:00-08:00 2022-02-13T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 2/13/2022
Tags: Programming, Art

I recently needed to make pixel art for a game and wanted to define the images in code rather than having separate image asset files.

Defining the images in code comes with some benefits:
- I don't need separate versions of the images for different resolutions. I can easily scale them up automatically.
- I can easily slice the sprites to animate them programmatically
- I can make minor tweaks with a text editor (my tool of choice! I am much more at home in a text editor than image editing software)
- I get useful diffs when changing images in source control

To achieve this, I created a simple format I'm calling "PCEImage" (which is short for "Pixel-Character Encoded Image"). Here's what it looks like:

.:#00000000
@:#444444
#:#5555FF

.......
.@.@...
.@.@...
.@.@...
.@@@.#.
.@.@...
.@.@.#.
.@.@.#.
.@.@.#.
.......

Here's that image as a PNG (drawn with scale 10):

A neat benefit of this encoding is that the images are also ASCII art -- it's easy to see what a PCEImage looks like even without coloring. In fact, this format is a combination of ASCII art and indexed color.

PCEImage Format Specification

The first section of a PCEImage defines what color each character represents. Each line in this section looks like: CHARACTER:HEXCOLOR
Then there's one blank line.
Then the second section is the image itself. Every character in this section (except for the newline at the end of each line) represents a pixel in the image. Every line in this section should be the same length (the width of the image).
There should not be a newline character after the last pixel character on the last line.

PCEImage Reference Implementation

I wrote a reference implementation of this specification in JavaScript here.

I had a little fun and also added a wobble mode (similar to Wobblepaint, mentioned in my PICO-8 post).

See it in action in my PCEImage Editor.

Read more about the editor here.

Related: The X PixMap (XPM) format.
]]> My Beatles Picks https://memalign.github.io/p/beatles.html 2022-02-10T00:00:00-08:00 2022-02-10T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 2/10/2022
Tags: Music

I've had the Beatles on my mind recently thanks to the buzz around Peter Jackson's "The Beatles: Get Back" documentary.

I grew up long after the Beatles had broken up and I had never listened to a full Beatles album despite liking a lot of their songs. I decided to listen to every album in order, looking up interesting details about the albums and songs on Wikipedia along the way. (I wish there were more pop-up videos!)

I now have a lot more appreciation for the Beatles members as people, how hard-working they were, and how their music evolved.

Here are my Beatles picks (in no particular order). Many of these songs are so popular that I already knew them; others I heard for the first time during this listen-through. I left off some songs (Hey Jude, Lucy in the Sky With Diamonds, and many more) that are objectively good but that I don't like enough to consider "my picks". Some of these songs are funny (such as Norwegian Wood, Michelle, Girl (how a pained John Lennon sucks in air through his teeth), Getting Better), some are just fun, and others are among the most beautiful songs I've ever heard.

- In My Life
- Here Comes the Sun
- Something
- All My Loving
- Love Me Do
- Please Please Me
- I'm So Tired
- Dear Prudence
- While My Guitar Gently Weeps
- You Never Give Me Your Money
- And I Love Her
- Eight Days a Week
- Help!
- The Night Before
- Yesterday
- You've Got to Hide Your Love Away
- Drive My Car
- Norwegian Wood
- The Word
- Michelle
- Girl
- Eleanor Rigby
- Sgt. Pepper's Lonely Hearts Club Band
- With a Little Help From My Friends
- Lucy In the Sky with Diamonds
- Getting Better
- Fixing a Hole
- Lovely Rita
- I Am the Walrus
- Strawberry Fields Forever
- Penny Lane
- The Continuing Story of Bungalow Bill
- Sexy Sadie
- I Want You (She's So Heavy)
- Because
- Across the Universe
- A Day In The Life (the version from "The Beatles / 1967-1970"; the original has creepy audio at the end that's not pleasant in a playlist)

Post-Beatles honorable mentions:

- John Lennon - How Do You Sleep?
- John Lennon - Jealous Guy
- Paul McCartney - Maybe I'm Amazed
- Paul McCartney & Michael Jackson - Say Say Say
- Paul McCartney & Wings - Live and Let Die
- Paul McCartney & Kanye West - Only One
- Rihanna & Kanye West & Paul McCartney - FourFiveSeconds
- George Harrison - My Sweet Lord
- George Harrison - Got My Mind Set On You
- George Harrison - Marwa Blues
- Traveling Wilburys - Handle with Care

I also watched the movies Yesterday and Across the Universe and enjoyed them more than I could've if I hadn't heard these albums and learned some of the history beforehand.
]]> SoundsJustLike https://memalign.github.io/p/soundsjustlike.html 2021-12-26T00:00:00-08:00 2021-12-26T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 12/26/2021
Tags: Music

I still enjoy finding songs that sound similar.

I recently listened to Dear Prudence by The Beatles and could've sworn I had heard the chord progression somewhere before. I searched online and found that I probably heard it in Beautiful by Christina Aguilera. The website that gave me this connection is SoundsJustLike.com.

SoundsJustLike.com is pretty cool with a long list of user-submitted song connections. Unfortunately, it's hard to search for a specific song. To make it easier, I created this one-page snapshot of all the songs users have submitted.

There are a lot of great songs on there to explore!
]]> PuzzleScript https://memalign.github.io/p/puzzlescript.html 2021-12-24T00:00:00-08:00 2021-12-24T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 12/24/2021
Tags: Games, Programming

PuzzleScript is a way to make tile-based games that run on the web. It was created by increpare.

An interesting tidbit from the credits page: PuzzleScript's creator is/was flatmates with Terry Cavanagh, who made a bunch of popular and creative games: VVVVVV, Super Hexagon, and (my favorite) Don't Look Back.

The PuzzleScript games I've seen usually have Sokoban elements: pushing/moving crates to solve puzzles. The wrong moves can make a level unbeatable so another core element of PuzzleScript games is unlimited undo by pressing 'z'. Explore the gallery and check out increpare's portfolio of games.

Notable Games

Sokoboros

(backup)
I enjoyed this game the most. Sokoboros combines elements of Sokoban and Snake. The game's name is a clever pun that combines "Sokoban" and "Ouroboros"!

Atlas Shrank

(backup)
I enjoyed this game where you play as the Greek Titan Atlas who has been shrunken down and needs to escape a series increasingly complex of rooms.

Legend of Zokoban

(backup)
This Zelda-inspired game is made by Joshua Minor. Joshua's twitter feed has led me to many interesting projects and ideas, including PuzzleScript and PICO-8! If not for him, these posts wouldn't exist. According to LinkedIn, Joshua's been an engineer at Pixar for 21 years at the time of writing. How cool!

Collapse

(backup)
Terry Cavanagh made this game. I'm reminded slightly of Don't Look Back: the main character is navigating a hellish and dangerous world to retrieve something beautiful.

Love and Pieces

(backup)
Love and Pieces is made by Lexaloffle / Zep, the creator of PICO-8!

Some Technical Details

PuzzleScript source code (backup) reveals some cool details:
- PuzzleScript has its own web-based code editor. I particularly like how it displays colors for the sprite pixels defined in text.
- Instead of hosting its own database of games, it integrates with GitHub's gist API. Every game is just stored in a gist in a user's GitHub account. For example, Atlas Shrank's gist is here. This is an interesting and clever way to avoid hosting your own server.
  - The code to post a new gist can be found in the shareClick function here.
  - The code to load a gist can be found in the getData function here.
  - play.html loads whatever gist id is appended to the url (which looks like: https://www.puzzlescript.net/play.html?p=6994394)
  - I think there's a risk loading content this way: it could look like the website owner published content when really it was published by someone else. The content could be offensive or harmful. To mitigate this, if I use this technique in a project I will probably show a disclaimer on the website that this content is from an external user with a direct link to that user's gist. ]]> Wheat Chex https://memalign.github.io/p/wheat-chex.html 2021-12-19T00:00:00-08:00 2021-12-19T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 12/19/2021
Tags: Food

The Chex cereal pieces in official store-bought Chex Mix are not the same as the pieces you get in cereal boxes!

Just take a look at the photo above. The Wheat Chex on the left is from a bag of Chex Mix. The Wheat Chex on the right is from a cereal box.

Notice how the cereal box one is flatter, denser, has little rectangular holes instead of little square ones.

The taste and texture of the Chex are different too. The one from the Chex Mix tastes better and has a more pleasant crunch.

One may be optimized for delicious dry snackiness while the other is optimized for being eaten in milk.

It's interesting to know we can't replicate store-bought Chex Mix at home because the Chex we can buy make for an inferior snack! ]]> PICO-8 https://memalign.github.io/p/pico8.html 2021-12-12T00:00:00-08:00 2021-12-12T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 12/12/2021
Tags: Games

PICO-8 is a way to make "retro"-style games and then play them anywhere, including on the web.

PICO-8 initially caught my eye with a few beautiful pixelated games and graphics. Just look at the delightful screen capture of Celeste above.

Here's what I love about this platform:

- Thanks to web technologies, these games can be played anywhere. They work great on touchscreens on iOS and Android. They work great with keyboard and mouse.

- I love the aesthetic of these games: the low resolution, the 16-color palette. It's inspiring to see how expressive people have been despite (and thanks to) these limitations.

- Another limitation is code size. This usually means the games are bite-sized and can be played and beaten in a sitting.

- These limitations are chosen on purpose and are part of the magic. From the about page for PICO-8's website: "Lexaloffle is the home of computer games and fantasy consoles made by Joseph White, whose principle mission is to seek out and explore mathematically cute sets of rules that somehow give rise to thematically cute game worlds."

- My taste in games is trapped in the past, probably the SNES era. Even though SNES was slightly before my time, I've had a blast playing those games. In comparison, games that push the limits of today's hardware are impressive but they are too complex for me. What truly brings me joy are simple "retro"-style games.

- PICO-8 introduced me to the concept of a game "demake". When creating a demake, people boil a game down to its essence. They create a game with the same feel or personality as the original game but smaller and much simpler, usually with simpler graphics. My favorite right now is Picopolis, a demake of Sim City.

- PICO-8 games are distributed as PNG "virtual cartridges" with the code embedded in the cartridge image itself. The images look like the physical game cartridges of the 1980s and 90s. How delightful! You can see examples below.

- The creator of PICO-8, Joseph White aka "zep" (twitter), is a prolific software developer. He came up with the idea for PICO-8 and then built all of the development tools for editing code, music, sound effects, graphics, etc. In addition to creating PICO-8, he also built the BBS website where users post, comment on, and collaborate on games. The community is very creative and positive. He's made his own games such as Wobblepaint. He has other projects too, which you can learn about on lexaloffle.com.

Learn more about PICO-8:

- PICO-8 on Wikipedia
- Official FAQ
- Featured cartridges
- Cartridge BBS

Here are some of my favorite games so far:

Demakes and Remakes

Picopolis

(backup)
Demake of Sim City. Usually Sim City has no win condition and I like how the author gave us some way to declare victory: by building a $10 million "Victory Monument". Playing this scratched the itch I had to play classic Sim City. Picopolis is made by Jens Bergensten (aka Jeb) who's best known for significant contributions to Minecraft.

Snowfight

(backup)
This is a remake of an old Flash game winter holidays greeting card. Even the same winning strategy works as it did on the original game. Major nostalgic fun :)

Sonic16x16

(backup)
I love this! Great example of a demake. Sonic is only 2 pixels and yet anyone who's played a side-scrolling Sonic game will recognize the feel of the game, the music, and the iconic Green Hill Zone.

R-Type

(backup)
Intensely challenging remake of the classic side-scrolling shoot'em up game. Fortunately there's a cheat mode!

Pico-Man

(backup)
A clone of Pac-Man. Thoroughly enjoyable just like the original. One user commented, "more proof that games just look cuter on the PICO :3".

Phoenix

(backup)
My introduction to Phoenix-style games was in MirageOS on a TI calculator. It turns out Phoenix was originally an arcade game and this is a more faithful remake.

Lode Runner

(backup)
A clone of Lode Runner. Classic :)

Poom

(backup)
A port of Doom. No platform is complete without one of these! This port really pushes the limits of PICO-8 and works around some of the limitations by splitting its code across several cartridges and then seamlessly jumping between them.

Picones

(backup)
This is a work-in-progress demake of Lumines. The mechanics aren't perfect and the iconic and addictive music and sound effects are missing but this still satisfied my craving for some Lumines action! That's particularly helpful because Lumines is one of those games that has been released several times as a new iOS app only to be abandoned and broken a few years later.

Teaser: Metroid

This demake isn't available to play (yet?) but it looks SO GOOD!

Platformer/Metroidvania

Mea's Castle

(backup)
Really fun Metroid-style game. I played through in one sitting and had a blast :) There were some jumps that were tricky (and frustrating) using the touch controls which might be easier with a keyboard.

Get Me the Spell Outta Here!!

(backup)
Another fun Metroid-style game. You're a witch who uses a growing repertoire of spells to navigate a castle.

Celeste

(backup)
Hardcore platformer that was made in four days as part of a game jam. Very impressive! It was ultimately fleshed out into a full commercially successful game.

Celeste 2

(backup)
A follow-up game with slightly different mechanics. Also tricky and fun like the original.

MetroCUBEvania

(backup)
Play as a bouncing cube gaining new abilities as the game progresses.

Blocks For Life

(backup)
Made by zep, the creator of PICO-8!

Fast platformer

Sprint'a'Gift

(backup)
Endless runner. Made for the 2020 PICO-8 Advent Calendar.

Mistigri

(backup)
Super polished graphics with many different enemies. Fun to play but hard to beat!

U Dead

(backup)
Not technically a platformer but requires precise reaction time. Reminds me of Flappy Bird. The first game like this I ever played was SFCave in black and white on PalmOS (made in 1998!).

RPG

The Lost Night

(backup)
Fairly complete RPG! I like the world and the quests. I don't like how many times I had to play the mini-game. I almost gave up when I was just about to beat the game because I found the mini-game so tedious. It reminded me of how many Zubat you have to fight in Pokémon caves. Grind through and you'll beat the game.

Turn-based

Virush

(backup)
With some tower-defense mechanics too. Fun!

Dungeon Crawler

It Takes Four to Party

(backup)
Another game made by Jens Bergensten. This one has a similar feel to the dungeons in classic Zelda games with roguelike flavor.

3D

Mot's Grand Prix

(backup)
Beautiful in low-res 3D. Amazing this is possible in PICO-8!

Trial of the Sorcerer

(backup)
3D dungeon crawler. Reminiscent of the old Windows 95 3D Maze screensaver (recreated by someone in JavaScript here (backup)). I remember watching this on the PCs in CompUSA.

App

Wobblepaint

(backup)
This is a charming drawing app. The wobble effect adds a lot of personality to the drawings. Another cartridge made by zep -- he has a knack for coming up with charming ideas! Some interesting discussion.

picoCAD

3D modeling! This cartridge is available on itch.io as "name your own price" so I didn't grab a backup. Really impressive work and I love the aesthetic. The Gastly above was posted by an artist here .

Simple

Froggleoid

(backup)
A cute little mini-game by zep. Supports multiple players!

Spoiderboi

(backup)
A one-button Spider-Man-inspired game. I like the feel of the game!

Falling Balls

(backup)
I find this concept really funny!

Dungeon Guy

(backup)
A work-in-progress with a similar feel to Lode Runner. It's really cool that these levels are procedurally generated. ]]> Fussy Baby Checklist https://memalign.github.io/p/fussy-checklist.html 2021-11-14T00:00:00-08:00 2021-11-14T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 11/14/2021
Tags: Parenting

Do you have a fussy infant?

Here's my checklist for trying to resolve fussiness:

- Does the baby need a diaper change? Check for diaper rash - make sure to slather on extra diaper paste if you see redness/bumps. I saw one website say you should spread it on as if "icing a cake". Our first few diaper rashes were caused by the diaper being too small - check whether the next size up is a better fit!

- Does the baby want a pacifier?

- Is the baby hungry? Try offering a bottle even if they recently ate. They might be going through a growth spurt.

- Does the baby need to burp? Try holding them upright and patting their back.

- They might be uncomfortable. Try holding the baby in different positions.

- The baby might be overstimulated after a long and interesting day. Try darkening the room and make it quiet. Try putting them down for sleep. Try putting them in a bouncer. Try putting them on your chest for a rest.

- If you're feeling overwhelmed or desperate, tag your partner in for help!

- Echoing advice from our pediatrician: If your baby won't stop crying no matter what you try and you're at your wit's end, call your pediatrician. Your baby could be telling you something more serious. WebMD has some additional advice. ]]> Fall Asleep https://memalign.github.io/p/zen-sleep.html 2021-11-13T00:00:00-08:00 2021-11-13T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 11/13/2021
Tags: Brain Hacking

I've always had a hard time falling asleep. Closing my eyes invites a whirlwind of thoughts. I can't stop thinking so I can't fall asleep.

Then I found a way to clear my head and fall asleep quickly. It's been working for months now!

Here's what I do:

As I shower and brush my teeth before bed, I spend that ~30 minutes clearing my head. When I notice a thought, I think "ah" and let the thought go, let it dissipate and fade. This isn't the time for thinking and problem solving, it's the time to empty my mind so I can fall asleep.

I repeat this for every thought that creeps in. I've found it also helps to focus on my immediate senses to keep my head emptier: the sound of the toothbrush, the soap/water/friction on my hands. I'm grounded in the present. I'm not thinking about these sounds and feelings; I'm just experiencing them without commentary.

Sometimes this helps me notice a feeling of muscle tightness. Maybe I'm furrowing my brow or frowning. Maybe I have tightness in my shoulders. I release the tension and physically relax.

I continue this meditation as I slide into bed until I fall asleep. And I continue it if I wake up in the middle of the night.

I don't know if this technique is real "meditation" in the Zen Buddhism sense but I was inspired to try it after, months ago, stumbling upon 101 Zen Stories (Wikipedia). (Warning: these are old and may contain antiquated or even racist terms)

I don't understand them even though they are simple. I tried to search for answers about one of the more famous stories: The Sound of One Hand (mirror).

I found a Quora thread with some discussion. No answer was perfectly satisfying but two similar posts stood out:

Khiêm Bảo Thiện:

However, when one asks you about one hand clapping - which is extraordinary, uncommon, unseen, not understandable - your mind starts to set on a quest for answer, which raises a lot of noises, like you throw a big rock into a tranquil lake. ... So, using this koan and similar, for certain situations, helps the learner realize his/her mind's activities.

Chris Peters:

The idea behind this phrase is not literal, but is meant to "blend" your mind Matrix-style and hopefully trick you into observing your mind as it kinda freaks out.

Is the key to enlightenment learning to notice your thoughts and then clear your head? Who knows. I certainly feel lighter when my head is clear, my muscles are relaxed, and I float off to sleep.
]]> Shape Your Destiny https://memalign.github.io/p/shape-your-destiny.html 2021-10-03T00:00:00-08:00 2021-10-03T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 10/3/2021
Tags: Writing, Brain Hacking

A friend of ours shared the eulogy he gave for his dad. In it, he quoted a lesson his father taught him as a kid:

Watch your thoughts, they become words;
watch your words, they become actions;
watch your actions, they become habits;
watch your habits, they become character;
watch your character, for it becomes your destiny.

(This quote and ones with a similar sentiment are often attributed to many different sources. Ultimately, the original is by Frank Outlaw based on Quote Investigator's research.)

I don't think I was taught to watch my thoughts as a kid. At least not in a way that was effective for me.

I was taught that particular actions are bad and why they are bad.

I was taught that jealousy, intolerance, hate, etc are bad.

But I didn't realize that the way I choose to think about things can have a big impact on long-term happiness and fulfillment in life. On friendships and relationships too.

I realized in adulthood that being happy is a choice much of the time. A choice made every day. Focusing on the positive (and even helping to amplify it) can do a lot to diminish the negative: disappointment, annoyance, frustration, misfortune.

Of course, really bad things happen sometimes and you can't just ignore them. It wouldn't be healthy to try to force yourself to be happy when you're truly hurting. But for all the small bad things, with practice it's possible to decide how much energy to spend thinking about them -- and whether to think about them at all. Sometimes negativity can be self-fulfilling: expecting to have a bad time can lead to having a bad time.

This is similar to what I'm trying to say in Day and Night. Thinking envious thoughts leads to envious actions. Comparing yourself to others leads to unempathetic behaviors. And envious actions, unempathetic behaviors lead to a lonely life.

On the other hand, looking for the good and trying to be truly empathetic can lead to happiness, more positivity, and supportive friendships. ]]> Tim's Vermeer https://memalign.github.io/p/tims-vermeer.html 2021-09-25T00:00:00-08:00 2021-09-25T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 9/25/2021
Tags: Art, Leisure

I recently saw news that a painting from the 1650s had been restored to unhide a painting-within-a-painting in the background.

Here's what the "after" and "before" look like:

It's fascinating that modern technology can both find the hidden painted-over image and confirm that it was painted over by someone other than the artist.

I showed my wife who asked "Is that a Vermeer?" which then sent me down another rabbit hole.

I asked "Whoah how could you tell?" and she said that all Vermeer paintings look exactly like this due to similar composition and photo-realistic lighting.

I found that I was already familiar with one of Vermeer's paintings, Girl with a Pearl Earring, possibly due to its use as an example image in computer vision.

Then I stumbled upon Tim's Vermeer, a documentary made by Penn and Teller about an inventor (and successful company founder) named Tim Jenison who had a side-project (bordering on obsession) to understand how Vermeer captured such realistic lighting in paintings and then do so himself.

He ultimately figured out a combination of two mirrors that enable you to color match what's painted exactly to the real scene. It turns the process of painting a brilliant masterpiece into something mechanical, essentially a manual photograph machine with a person holding a paintbrush in the middle.

He starts out copying an old black-and-white photograph this way:

The results are phenomenal! Tim says this was the first painting he's ever made and it was a wholly mechanical process of copying the color he saw in the mirror.

After that successful proof of concept, Tim sets out to completely recreate one of Vermeer's most detailed paintings.

Check out the full documentary (it's only 80 minutes long and you can watch it faster than 1x) to see how he first replicates the physical space and then reproduces the painting. The painting itself takes 130 days.

Here are some snapshots of the mirror setup and the final painting:

By the end of the documentary, I'm convinced that Vermeer used a setup like Tim's. Here's why:

- At one point, Tim realizes that the mirrors cause slight visual distortion in the form of curving of straight lines. He looks at the original Vermeer and discovers the same distortion!
- The lighting in Vermeer paintings goes beyond what the human visual system can detect across the size of the rooms in the paintings
- The fine detail in the rug in the painting is not perceivable from the artist's distance without the magnifying help of the mirrors
- And several more visual quirks of Vermeer's paintings shown in the documentary

But don't take my word for it - check it out yourself!
]]> Day and Night https://memalign.github.io/p/day-and-night.html 2021-09-18T00:00:00-08:00 2021-09-18T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 9/18/2021
Tags: Writing, Poetry

Saul made a friend or two
A friend was successful, Saul celebrated
A friend had misfortune, Saul felt their pain and supported them with kindness
Saul had success, the friends celebrated
Saul had misfortune, they came to the rescue
Sometimes they didn't see each other but could always pick up where they left off
Friendships were sometimes superficial and sometimes deep
They looked past the worst in each other and focused on the best
Consciously managing impulses, starving envy, amplifying empathy
Their warmth welcomed others and their circle grew

Luna had some friends
A friend had professional success, but Luna could have done that job better
A friend had a relationship, but their partner wasn't very intelligent or funny or interesting or attractive or...
A friend tried to stay in touch, but it was just superficial. Why are they even bothering?
A friend was happy to catch up and chat, but they were never the one to initiate. Forget them.
Luna and a friend had an argument. Luna was still upset later and said some hurtful things, as hurtful as possible. Later, with regret, Luna asked, "Why can't we pick back up where we left off? Can't you see I need you? Can't you see I need compassion?"
But no one was left to respond ]]> Lights Off https://memalign.github.io/p/lights-off.html 2021-08-14T00:00:00-08:00 2021-08-14T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 8/14/2021
Tags: Games, Programming

Tap or click and take a trip down memory lane with the historic Lights Off. Exactly fourteen years ago today Wired got the scoop: Lights Off: First iPhone Native Game Arrives.

And today I'm sharing a new implementation that everyone can play in their web browser:

Play here!

Lights Off's story begins with Tiger Electronics who launched their game Lights Out in 1995. Then in 2007 Lucas Newman and Adam Betts cloned the game for the iPhone's touch screen. Notably, they built the game before there was an official iPhone SDK or App Store. It was only available to jailbreakers!

A year later, Craig Hockenberry wrote a post to commemorate the milestone and share the source code (my backup).

Since then the app was rebuilt and modernized by Steve Troughton-Smith as possibly the oldest still-actively-maintained app on the App Store. You can find his version here.

For more history on the App Store and its first killer apps, check out this article (also written by Craig Hockenberry - mirror on the iconfactory website).

In the process of building the web version, I wrote tests (source code) to ensure every level is solvable. To my surprise almost half of the original levels cannot be solved! How cruel! This was probably a mistake in how the levels were generated - maybe by flipping certain lights on without checking that the overall puzzle was valid.

To replace the bad levels, I generated my own levels of increasing difficulty by ramping up the minimum number of taps required to solve each puzzle. My algorithm can be found in the unit tests code in the "test_generateLevels" method. This could even be hooked into the game itself for an "endless" mode.

If ever you can't figure out how to solve a level in the fewest taps, there's a guaranteed method to win called "light chasing" or "chase the lights":
- Start on the top row
- For every lit button in the row, turn it off by tapping the button in the row right below it
- Repeat until you get to the bottom row
- At this point, the bottom row will have one of seven patterns. Based on the pattern, tap the specific circled cells on the top row and repeat these steps. By the time you reach the bottom row again, every light will be off!

⬛⬛⬛⬛⬛ ⬛⭕️⬛⬛⬛
⬛⬛⬛⬛⬛ ⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛ => ⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛ ⬛⬛⬛⬛⬛
🟡🟡🟡⬛⬛ 🟡🟡🟡⬛⬛

⬛⬛⬛⬛⬛ ⬛⬛⬛⭕️⬛
⬛⬛⬛⬛⬛ ⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛ => ⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛ ⬛⬛⬛⬛⬛
⬛⬛🟡🟡🟡 ⬛⬛🟡🟡🟡

⬛⬛⬛⬛⬛ ⬛⬛⭕️⬛⬛
⬛⬛⬛⬛⬛ ⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛ => ⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛ ⬛⬛⬛⬛⬛
🟡🟡⬛🟡🟡 🟡🟡⬛🟡🟡

⬛⬛⬛⬛⬛ ⬛⬛⬛⬛⭕️
⬛⬛⬛⬛⬛ ⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛ => ⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛ ⬛⬛⬛⬛⬛
🟡⬛🟡🟡⬛ 🟡⬛🟡🟡⬛

⬛⬛⬛⬛⬛ ⭕️⬛⬛⬛⬛
⬛⬛⬛⬛⬛ ⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛ => ⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛ ⬛⬛⬛⬛⬛
⬛🟡🟡⬛🟡 ⬛🟡🟡⬛🟡

⬛⬛⬛⬛⬛ ⭕️⭕️⬛⬛⬛
⬛⬛⬛⬛⬛ ⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛ => ⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛ ⬛⬛⬛⬛⬛
🟡⬛⬛⬛🟡 🟡⬛⬛⬛🟡

⬛⬛⬛⬛⬛ ⭕️⬛⬛⭕️⬛
⬛⬛⬛⬛⬛ ⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛ => ⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛ ⬛⬛⬛⬛⬛
⬛🟡⬛🟡⬛ ⬛🟡⬛🟡⬛

While every level can be beaten mechanically like this, it's still more fun (and often faster) to find the fewest taps needed! That's the real challenge.

Have fun! :)
]]> Batman Curve https://memalign.github.io/p/batman-curve.html 2021-08-07T00:00:00-08:00 2021-08-07T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 8/7/2021
Tags: Math

With FormulaGraph now available, it's easier than ever to explore more math shapes.

An interesting one is the "Batman Curve".

A professor named J. Matthew Register created this formula to make math fun. Here's what he says about the history in a post on Quora:
"I wrote it many, many years ago. I was teaching at a few art schools throughout the greater Sacramento area, and I used it to engage my students in the topic of graphing. One of my coolest students (Mr. Wilkinson aka i_luv_ur_mom) posted it to Reddit back in 2011 and it went viral. I'm a full time professor over at American River College, doing every thing I can to make math as enjoyable as possible."

There's a nice breakdown of how the formula's separate pieces come together to make the full shape on Math StackExchange.

While the 6-formula version graphs ok (see here or on Desmos), I noticed that the original single formula version does not work in FormulaGraph or Desmos (it forms a blank graph showing no solutions). User copper.hat on Math StackExchange notes why: there are several terms which introduce an imaginary number (by taking sqrt of a negative number). For this reason, the combined formula does not have the solutions required for the necessary range of x and y values. (Wolfram also has a writeup that notes that the Batman Curve is defined piecewise.)

The original formula uses the trick of undefined/imaginary values to truncate shapes to a specific range of x values. Since this trick breaks the formula, I wondered if it's possible to find a different gadget that could constrain x values without introducing undefined/imaginary values.

Here's what I came up with:

For a formula F, constrain its x values to the interval [L, U] with:

((F)^2 + min(1, ceil(abs(min(0, U-x)))) + min(1, ceil(abs(max(0, L-x))))) = 0

To fix the Batman Curve, I went segment-by-segment applying the gadget. First, I needed to resolve any undefined/imaginary results. Second, I needed to apply my gadget for the relevant x (and sometimes y) ranges.

Here's the crazy formula I ended up with:

(((2.25-y)^2+min(1, ceil(abs(min(0, 0.5-x))))+min(1, ceil(abs(max(0, -0.5-x))))) * ((abs(x/2)-((3*sqrt(33)-7)/112)*(x^2)-3+sqrt(abs(1-(abs(abs(x)-2)-1)^2))-y)^2 + min(1, ceil(abs(min(0, 4-x))))+min(1, ceil(abs(max(0, -4-x)))))) * (((min(1, ceil(abs(max(0, 3-x))))+min(1, ceil(abs(min(0, 7-x))))) + min(1, ceil(abs(max(0, 0-y))))+ (((x/7)^2)+((y/3)^2)-1)) * ((min(1, ceil(abs(max(0, 4-x))))+min(1, ceil(abs(min(0, 7-x))))) + min(1, ceil(abs(min(0, 0-y))))+ (((x/7)^2)+((y/3)^2)-1)) * ((min(1, ceil(abs(max(0, 3-(-x)))))+min(1, ceil(abs(min(0, 7-(-x)))))) + min(1, ceil(abs(max(0, 0-y))))+ (((-x/7)^2)+((y/3)^2)-1)) * ((min(1, ceil(abs(max(0, 4-(-x)))))+min(1, ceil(abs(min(0, 7-(-x)))))) + min(1, ceil(abs(min(0, 0-y))))+ (((-x/7)^2)+((y/3)^2)-1)) + min(1, ceil(abs(max(0, 1-abs(x)))))) * ((min(1, ceil(abs(min(0, 3-x))))+min(1, ceil(abs(max(0, 1-x))))) + ((6*sqrt(10)/7+(1.5-0.5*abs(x)) -6*sqrt(10)/14*sqrt(abs(4-(abs(x)-1)^2))-y))^2) * ((min(1, ceil(abs(min(0, 3+x))))+min(1, ceil(abs(max(0, 1+x))))) + ((6*sqrt(10)/7+(1.5-0.5*abs(-x)) -6*sqrt(10)/14*sqrt(abs(4-(abs(-x)-1)^2))-y))^2) * ((min(1, ceil(abs(max(0, 1-y))))+min(1, ceil(abs(min(0, 3-y))))) + (9-8*abs(x)-y)^2) * ((min(1, ceil(abs(max(0, 2.25-y))))+min(1, ceil(abs(min(0, 3-y))))) + (3*abs(x)+0.75-y)^2) = 0

FormulaGraph link

This curve is pictured at the top of this post!

(See my raw stream of consciousness notes as I went step-by-step)

There are a few more Batman Curves that I found on the pages linked above:

Here's a different and simpler formula (though I don't think it looks as good) from copper.hat's post on Math StackExchange:

0 = -1 +
(1/36)*x^2+(1/9)*y^2 +
max(0, 2-(1.5*(x+3)^2+1*(y+2.7)^2)) +
max(0, 2-(1.5*(x-3)^2+1*(y+2.7)^2)) +
max(0, 2 - (1.9*((5*(x+1)+(y+3.5))/sqrt(26))^2 + 1/1.7 * ((-(x+1)+5*(y+3.5))/sqrt(26)))^2)) -
max(0, 2 - (1.9*((5*(x-1)-(y+3.5))/sqrt(26))^2 + (1/1.7) * (((x-1)+5*(y+3.5))/sqrt(26)))^2) -
max(0,2-((1.1*(x-2))^4-(y-2.1))) -
max(0,2-((1.1*(x+2))^4-(y-2.1))) +
max(0,2-((1.5*x)^8-(y-3.5)))

FormulaGraph link

J. Matthew Register shared a newer formula on his Quora post:

(3*sqrt(4-(abs(x)-2)^2)+abs(x)-20-4*y)
*
(3*sqrt(4-(abs(x)-6)^2)+abs(x)-20-4*y)
*
(x^2+4*(y^2)-100*sqrt(abs((7-abs(2*y-1)))/(7-abs(2*y-1))))
*
(2*((abs(x)-3)^2)-9*y+18*sqrt(abs((2-abs((abs(x)-4))))/(2-abs((abs(x)-4)))))
*
(-68*abs((abs(x)-3/2))-9*y+54*sqrt(abs((43-abs((136*abs(x)-229))))/(43-abs((136*abs(x)-229)))))
*
(y-5*sqrt(abs((1-abs(x)))/(1-abs(x)))) = 0

FormulaGraph link

(I made one substantive change as I re-transcribed the formula so the top of head line would be long enough to touch the ears)

Compare his original and new Batman Curves here. ]]> FormulaGraph https://memalign.github.io/p/formulagraph.html 2021-08-04T00:00:00-08:00 2021-08-04T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 8/4/2021
Tags: Programming, Math

I'm excited to introduce FormulaGraph, a graphing calculator for general formulas (not just functions of x)!

Whereas many graphing calculators require an equation like y = sqrt(1 - x^2), FormulaGraph can handle formulas like y^2 + x^2 = 1. You don't have to solve for y to use FormulaGraph.

Here's what else it can do:

- Polar formulas in terms of r and theta, such as r = 2*sin(2*theta)
- Animate based on time t: y = x^(t % 4)
- Inequalities: x^100 + y^100 <= 2
- Handle panning and zooming using mouse and touch/pinch
- Share links

While FormulaGraph lacks features other graphing calculators have (such as precisely calculating y- and x-intercepts), it has some unique benefits:
(I introduced this list of calculators previously)

- TI-83 Plus
  - Features only in FormulaGraph: interactive graphs, animate with time, available in any web browser, graph formulas (not just functions)

- WolframAlpha
  - Features only in FormulaGraph: interactive graphs, animate with time
  - WolframAlpha won't graph some formulas, e.g. y^2+x^x=1 and x^y=x^x^x^x^x^x

- Meta-Calculator
  - Features only in FormulaGraph: interactive graphs, animate with time, graph formulas (not just functions), modulo operator

- FooPlot
  - Features only in FormulaGraph: animate with time, graph formulas (not just functions), graph inequalities

- GeoGebra Graphing Calculator
  - Features only in FormulaGraph: available in any web browser, graph polar formulas, modulo operator
  - GeoGebra Graphing Calculator won't graph some formulas, e.g. x*y*(x-y)*(x+y) < 1

- Desmos
  - Desmos is really great. It's the best graphing calculator in this list. It can handle formulas, animations, polar formulas, and more!
  - One thing FormulaGraph handles better: Desmos doesn't support polar equations which aren't linear in r. Example: r^2 = cos(theta)
  - Desmos has another quirky inconvenience: it's not possible to copy/paste formulas or easily edit their text. FormulaGraph's formula input boxes are super convenient in comparison. This feature is a must-have to make complex shapes like the Batman Curve.

- NumWorks Graphing Calculator
  - Features only in FormulaGraph: interactive graphs, convenient UI, animate with time, available in any web browser, graph formulas (not just functions), graph polar formulas, graph inequalities

- Relplot
  - Features only in FormulaGraph: interactive graphs, animate with time
  - Relplot has some graphing correctness bugs. Examples: y = x mod 2, y = x^x, y^y = x^x, r = 2*sin(4*theta), r = theta covers a small range of theta values
  - I'm reporting these bugs and I hope they get fixed!

- Graphtoy
  - Features only in FormulaGraph: graph formulas (not just functions), graph polar formulas, graph inequalities
  - Graphtoy has visual glitches (missing segments) when drawing circles and other similar shapes (e.g. y = sqrt(1-x^2) and y = -sqrt(1-x^2))

- Bonus: FormulaGraph has tons of test coverage, including checks that graphs render accurately. You can run the tests here. Beware: they take ~1 minute to run!

FormulaGraph's origins:

This is a hobby project I made by combining code and ideas from other peoples' cool projects.

It all started with Relplot, a project by Cornell's Andrew Myers. In Professor Myers' functional programming class, we implemented formula plotters using interval arithmetic.

Over a decade later, I stumbled upon Inigo Quilez's Graphtoy. I had fun making shapes and I thought it'd be even more fun to bring Relplot's general formula capabilities to Graphtoy's interactive UI.

So that's what I did: I ported Relplot's implementation of interval arithmetic from SML to JavaScript and spliced it into Graphtoy. I really appreciate all the work Professor Myers and Inigo did, especially publishing the source code for these projects.

There was one remaining difficulty: While Graphtoy uses JavaScript's built-in parser for inputted expressions, I needed to completely replace the implementations of operators like +, -, *, /, %. JavaScript doesn't have operator overloading so I needed my own expression parser.

That's where Lawrence Kesteloot's awesome web implementation of Turbo Pascal (my backup) comes in (see his interesting writeup about the project). I simply copied and reused his expression parser. Thank you Lawrence for building and sharing that passion project! I particularly like that this project has very few dependencies. And I was able to remove the few 3rd party dependencies it had in the portion of code I reused.

Key integration points where these projects are glued together:
- relplot.js - look for "MAIntervalMath" for a reimplementation of Relplot's interval arithmetic
- graphtoy.js - look for "Draw Relplot graphs" to see where Relplot was added to Graphtoy
- utilities.js - look for "_convertFormulaToFnSyntax" to see where the parser comes into play

Here are some miscellaneous things I've learned during this project:

- Some equations have solutions that are not clearly visible on most graphing calculators. For example, y = x^x has valid solutions for negative values of x which are single points (e.g. (-1, -1)).

- New shapes:
  - Square
  - Heart
  - Crazy lotus

- Modulo
  - Create concentric shapes using modulo
  - Create repeating animations using modulo
  - There are different definitions of modulo for negative numbers
    - Many programming languages implement modulo as "truncated division"
    - Desmos, Relplot, and Graphtoy use "floored division" so I use that in FormulaPlot too

- How to convert Cartesian coordinates to polar
  - Based on Relplot's implementation, I thought I just had to replace "r" with "sqrt(x^2+y^2)" and "theta" with "atan2(y, x)".
  - This turned out to be much harder than I expected in part because Relplot's polar coodinate support is incomplete (noted above in my comparison of FormulaGraph and Relplot).
  - After what I thought would be a 20 minute feature consumed several weekends, I'm reminded of the tongue-in-cheek Programmers' Credo: "We do these things not because they are easy, but because we thought they were going to be easy"
  - I solved this with 3 techniques: graph positive r and negative r (with theta shifted by pi), translate atan2's result range to [0, 2pi] (instead of [-pi, pi]), and iteratively render with theta += 2pi.

- Debugging an incorrect graph is similar to general debugging. Try to find the simplest case that reproduces the issue. I was relieved when a glitch in y = (mod(floor(x),2))*(x-floor(x))+(1-mod(floor(x),2))*(-x-floor(-x))+(1-mod(floor(x),2))*(1-ceil(x-floor(x))) reproduced in the far simpler y = ceil(x-floor(x)).

- When using interval arithmetic to graph formulas, it's ok to return wide intervals when the input is wide as long as the result intervals converge as the inputs get smaller. I use this technique to avoid the incorrect vertical line segments some graphing calculators (including Relplot and Graphtoy) show for y = floor(x).

To conclude, here's an improved version of the bouncing ball animation (original here).

Happy graphing :)
]]> Bouncing Ball https://memalign.github.io/p/bouncing-ball.html 2021-03-28T00:00:00-08:00 2021-03-28T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 3/28/2021
Tags: Math

I mentioned here that TI calculators can make some simple animations:
"An upperclassman graphed some functions together which made it look like this circle was a ball bouncing down stairs."

I also mentioned something special about Graphtoy:
"Graphtoy has a variable for elapsed time (t) which can be used to create animations"

In this post, I'll recreate the bouncing ball animation using mathematical formulas in Graphtoy.

Browsing our shape catalog gives us a few useful components:

Steps: y = floor(x)

Diagonal sine wave: y = x + 3 + sin(3*x)
- This looks similar to the path of a ball as it bounces down steps

Graphtoy link

Here's what those look like together:

One aesthetic tweak: have the stairs go down to the right.
Adjust the sine wave to match the direction and slope of the stairs.

Steps: y = -floor(x)+5
Ball's path: y = -x + 5 + sin(3*-x)
Graphtoy link

With a normal (non-diagonal) sine wave, every other hump is negative and below the x-axis. In our diagonal sine wave, every other hump is going under a step instead of bouncing off it.

Let's figure out how to have a normal sine wave bounce off the x-axis and then bring that same modification to our more complex diagonal sine wave.

To simply make all negative values positive, we can take the absolute value with the abs() function:

y = abs(sin(x))

Here's what that looks like:

Looks promising! Let's try using abs on the diagonal sine wave:

y = -x + 5 + abs(sin(3*-x))
Graphtoy link

Here's what that looks like:

There are a few problems still:

- The bounce should happen in the middle of the step (not in the corner)
- It looks like the width of each period of the sine wave is not the same as the length of each step so there's visible drift

We can fix both of these using techniques noted in the shape catalog.

Shift the bounce to happen farther right:

y = -(x-0.5) + 5 + abs(sin(3*-(x-0.5)))
Graphtoy link

Fix the sine wave's period:

y = -(x-0.5) + 5 + abs(sin(PI*-(x-0.5)))
Graphtoy link

Here's what that looks like:

Now let's add our bouncing ball. We want to draw a circle that's centered on the diagonal bouncing sine wave.

From the shape catalog, here is the equation for a circle centered at (-3, 2):

y = sqrt(1 - (x+3)^2) + 2
y = -sqrt(1 - (x+3)^2) + 2

To have the ball move to the right with time, we'll replace the -3 with t. t is the special parameter Graphtoy provides; its value is the number of seconds that have passed since the webpage refreshed.

y = sqrt(1 - (x-t)^2) + 2
y = -sqrt(1 - (x-t)^2) + 2
Graphtoy link

The y-value at time t is the value of our bouncing sine wave when x=t.

Bouncing sine wave: y = -(x-0.5) + 5 + abs(sin(PI*-(x-0.5)))

Value when x=t:
y = -(t-0.5) + 5 + abs(sin(PI*-(t-0.5)))

Now, we'll replace the 2 in our circle equations with this y expression:

y = sqrt(1 - (x-t)^2) + (-(t-0.5) + 5 + abs(sin(PI*-(t-0.5))))
y = -sqrt(1 - (x-t)^2) + (-(t-0.5) + 5 + abs(sin(PI*-(t-0.5))))
Graphtoy link

Wow! This is getting really close!

The ball is way too big. Let's shrink its radius:

y = sqrt(0.1 - (x-t)^2) + (-(t-0.5) + 5 + abs(sin(PI*-(t-0.5))))
y = -sqrt(0.1 - (x-t)^2) + (-(t-0.5) + 5 + abs(sin(PI*-(t-0.5))))
Graphtoy link

(Note: once the circle moves off-screen, don't forget to reset t (or refresh the page) to make it reappear)

More tweaks needed:

- The ball bounces through the step. Need to shift the bouncing curve up by the ball's radius.
- The ball is too close to the edge of the step. Need to shift the bouncing curve farther to the right.

Shifting up and to the right:

Sine wave:
y = -(x-0.7) + 5 + sqrt(.1) + abs(sin(PI*-(x-0.7)))

Circle:
y = sqrt(0.1 - (x-t)^2) + (-(t-0.7) + 5 + sqrt(.1) + abs(sin(PI*-(t-0.7))))
y = -sqrt(0.1 - (x-t)^2) + (-(t-0.7) + 5 + sqrt(.1) + abs(sin(PI*-(t-0.7))))

Graphtoy link

Looks perfect!

Bonus just for fun, here's the ball bouncing off a square wave, losing height with every bounce:

Graphtoy link

]]> Catalog of Math Shapes https://memalign.github.io/p/shape-catalog.html 2021-03-27T00:00:00-08:00 2021-03-27T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 3/27/2021
Tags: Math

I enjoy drawing shapes using math. Much of the fun is exploring what formulas look like and figuring out how to warp them to look different.

To be able to build more complex shapes and animations, in this post I'll explore some formulas and create a catalog of shapes.

Circles:

x^2 + y^2 = 1

Graphtoy requires that we solve for y to create a function of x: f(x)

y^2 = 1 - x^2
y = ± sqrt(1 - x^2)
f(x) = y = ± sqrt(1 - x^2)

Graphtoy doesn't understand ± so we need to write two separate formulas:
y = sqrt(1 - x^2)
y = -sqrt(1 - x^2)
Graphtoy link

Here's what that looks like:

In general, we can shift formulas up/down by adding/subtracting to/from the function. Here, we shift the circle up the y-axis by 2:
y = sqrt(1 - x^2) + 2
y = -sqrt(1 - x^2) + 2
Graphtoy link

And we can shift left/right similarly by adding/subtracting from every instance of "x". Here, we shift the circle left on the x-axis by 3:

y = sqrt(1 - (x+3)^2)
y = -sqrt(1 - (x+3)^2)
Graphtoy link

We can combine these two techniques to shift left and up at the same time:

y = sqrt(1 - (x+3)^2) + 2
y = -sqrt(1 - (x+3)^2) + 2
Graphtoy link

Lines:

y = mx + b
m is the slope (change in y divided by change in x)
b is the y-intercept (notice that adding b is the same technique we used to shift the circle up)

Here's a steep line that goes up 3 in the y direction for every increase of 1 in the x direction. I shifted it to intersect with the y-axis at y=1

y = 3*x + 1
Graphtoy link

Here's what that looks like:

In general, we can flip the shape over the x-axis by making it negative (notice this is similar to the way we draw the bottom half of a circle, by flipping the formula to the top half):

y = - (3*x + 1)
Graphtoy link

Similarly, we can flip a shape over the y-axis by replacing every instance of "x" with "-x":

y = 3*(-x) + 1
Graphtoy link

Sine wave:

y = sin(x)
Graphtoy link

Here's what that looks like:

Something special about the shape of sin(x): it's periodic, repeating infinitely.

Parabola:

y = x^2
Graphtoy link

Here's what that looks like:

If we want to turn a shape sideways (by swapping the axes), we can swap x and y.

Sideways parabola:

x = y^2

Solve for y to be able to graph using Graphtoy:

y = ± sqrt(x)

y = sqrt(x)
y = -sqrt(x)
Graphtoy link

Combining shapes:

We can combine formulas to combine their shapes. For example, we can make a sine wave follow the shape of a line by adding them together:

Diagonal line:
y = x + 3

Sine wave:
y = sin(3*x)

Diagonal sine wave:
y = x + 3 + sin(3*x)
Graphtoy link

Steps (floor):

We can do some neat things using functions like floor and ceil. Floor rounds down to the nearest integer. Ceil rounds up to the nearest integer.

y = floor(x)
Graphtoy link

This looks like steps!

We can make a spiky sawtooth wave by only giving y the decimal portion of x like this:
y = x - floor(x)
Graphtoy link

To get an intuitive understanding of a shape, sometimes it helps to write out some of the values in a table:

x floor(x) x-floor(x)
=============================
0 0 0
0.2 0 0.2
0.5 0 0.5
1 1 0
1.2 1 0.2
1.5 1 0.5
2 2 0
2.2 2 0.2
2.5 2 0.5

This hopefully makes it easier to see how this ends up looking like a sawtooth.

Triangle wave:

A sawtooth wave looks like this: /|/|/|/|
A flipped sawtooth wave looks like this: |\|\|\|\
A triangle wave looks like this: /\/\/\/\

I noticed that I might be able to construct a triangle wave by combining a sawtooth wave with a flipped sawtooth wave.

The naive approach of simply adding them together gives us this:
Sawtooth wave:
y = x - floor(x)
Flipped (across the y-axis) sawtooth wave:
y = -x - floor(-x)
(Note: when writing this, I accidentally flipped the formula over the x-axis: y = -(x-floor(x)). When I graphed it, I realized my mistake and played around with the -s to get it right. It's normal to play around and make mistakes! Make some terms negative and see what happens to the shape!)

Added together:
y = x - floor(x) + -x - floor(-x)
Graphtoy link

Ah woops! That looks like a straight line. Graphing the sawtooth waves on top of each other reveals why: the diagonal portions cross each other, summing up to a constant value for most values of x.
Graphtoy link

To get a triangle wave, I need to alternate taking a tooth from each sawtooth wave. I can take a tooth from one wave when floor(x) is even; a tooth from the other wave when floor(x) is odd.

That sounds pretty crazy! Fortunately, modular division is an easy way to test whether a number is even or odd.

floor(x) % 2
also written as:
x mod(floor(x), 2)
==============================
1 1 (odd)
1.9 1 (odd)
2 0 (even)
2.9 0 (even)
3 1 (odd)
4 0 (even)

Our gadget to determine when floor(x) is odd: mod(floor(x), 2)
We can use that to make a complementary gadget to determine when floor(x) is even: 1-mod(floor(x), 2)

Sawtooth wave:
y = x - floor(x)

Flipped (across the y-axis) sawtooth wave:
y = -x - floor(-x)

Using our gadgets to zero out every other tooth:

zero out even teeth zero out odd teeth
y = mod(floor(x), 2) * (x-floor(x)) + (1-mod(floor(x), 2)) * (-x-floor(-x)))

Graphtoy link

Here's what that looks like:

Notice that there are some visible glitches. Let's check the math:

y = mod(floor(x), 2) * (x-floor(x)) + (1-mod(floor(x), 2)) * (-x-floor(-x)))

Plug in x = 0:

y = mod(floor(0), 2) * (0-floor(0)) + (1-mod(floor(0), 2)) * (-0-floor(-0)))
y = 0 * (0-floor(0)) + (1-0) * (-0-floor(-0)))
y = 0

Ah but y is supposed to be 1. It looks like the equation has a bug.

Checking a few more x, y values to build intuition:

x y y is supposed to be
============================
0 0 1
1 0 0
2 0 1
3 0 0
4 0 1

In its current form, our formula is taking neither sawtooth's value when x is a perfect integer (looking at the formula, you can see that it's because (x-floor(x)) and (-x-floor(-x)) are always 0 when x is an integer.

One fix is to add a term to our formula that has the value 1 for even integers and 0 otherwise.

I played around and came up with this:
(1-mod(floor(x),2))*(1-ceil(x-floor(x)))

The first half of this is our even/odd gadget. The second half is an expression that is 1 for integers, 0 otherwise.

Checking its values:

(1-mod(floor(x),2)) *
x 1-mod(floor(x),2) 1-ceil(x-floor(x)) (1-ceil(x-floor(x)))
=================================================================
0 1 1 1*1 = 1
0.5 1 0 1*0 = 0
1 0 1 0*1 = 0
1.5 0 0 0*0 = 0
2 1 1 1*1 = 1

Fixed equation by adding this gadget:

y = (mod(floor(x),2))*(x-floor(x))+(1-mod(floor(x),2))*(-x-floor(-x)) + (1-mod(floor(x),2))*(1-ceil(x-floor(x)))
Graphtoy link

Here's what the fixed equation looks like:

Looks perfect! Our formula is pretty complex, though. It's possible we could come up with a simpler formula by reading this Wikipedia page.

Square wave:

Here's one way to make a square wave: take an already periodic formula and make it blocky.

An easy periodic formula is sin(x).

y = sin(x)

Instead of having the period of sin be 2*PI, I can change it to be 2:

y = sin(x*PI)

I can use the "sign" function to turn positive values into 1 and negative values into -1:

y = sign(sin(x*PI))

If I want it to be truly square (1 tall and 1 wide), I'll need to adjust the height and shift it up:

y = sign(sin(x*PI))/2 + 0.5
Graphtoy link

Here's what that looks like:

How did I come up with these formulas and techniques? I remember many of these from school and others I (re)discovered by playing around. You can expand your own catalog by trying out new formulas to see what they look like and taking notes!

Here's a list of interesting things to explore:
log(x)
exp(x)
abs(x)
pow(x, n)
This animation that is built into Graphtoy
Growing concentric circles
Bouncing ball animation
Inigo Quilez's Useful Little Functions (my backup)
]]> Draw Shapes Using Math https://memalign.github.io/p/draw-shapes.html 2021-03-21T00:00:00-08:00 2021-03-21T00:00:00-08:00 memalign https://memalign.github.io/index.html

Posted on 3/21/2021
Tags: Math

Computer graphics is a wonderful real-world use case for a lot of the math we learn in school. For example, take a look at Inigo Quilez's video tutorials. This one is particularly cool.

I don't have skills like Inigo but I still have fun making 2D shapes using math.

Here are a few fun tools for drawing 2D shapes using math:

- FormulaGraph
  - ** Added to this list in August 2021 **
  - After originally publishing this list, I built my own formula grapher by combining Relplot and Graphtoy (both mentioned below)
  - Features: interactive graphs, convenient UI, animate with time, available in any web browser, graph formulas (not just functions), graph polar formulas, graph inequalities
  - See the full details here

- TI calculators
  - You might have had one of these in high school
  - I had a TI-83 Plus which turned out to be a fun device. Here are some of its neat features:
    - BASIC programming
    - Play games in MirageOS (back in my day the most popular game was Phoenix and it looks like people kept innovating since then! They even made a version of Geometry Wars!)
    - Share programs and games via a cable (they spread through the whole high school this way)
    - Graph interesting equations and shapes
      - There's a graphing mode which traces a function's shape with an animating circle. An upperclassman graphed some functions together which made it look like this circle was a ball bouncing down stairs. This stuck with me and is part of the inspiration for this post!
  - Looking back, I'm glad we got to play with these! Thank you, TI-83 Plus, for my earliest programming and engineering experiences!

- Graphing calculator websites
  - WolframAlpha
    - Very powerful. For example: graphing x^y = y^x, including symbolically refactoring the equation to solve for y.
  - Meta-Calculator
    - OK in a pinch
  - FooPlot
    - Source code
    - Fairly full-featured!

- Graphing calculator apps
  - GeoGebra Graphing Calculator
    - This app is really good! Much like WolframAlpha and Relplot, this app can graph arbitrary equations and inequations like x^y = y^x, 1 = x^2 + y^2, y > x, etc.
  - Desmos Graphing Calculator
    - This app might be even better. It also supports polar equations (e.g. r = cos(4*theta)).
    - Also available as a website
  - NumWorks Graphing Calculator (simulates a physical calculator; hard to use)

- Relplot
  - Powerful graphing capabilities: arbitrary equations and inequations
  - Source code (my backup)
  - Relplot is written by one of my favorite CS professors, Andrew Myers!
  - In fact, it's a more sophisticated version of a programming assignment we completed in his Functional Programming course
  - Interesting implementation details:
    - Lexes and parses inputted formulas so they can be evaluated
    - Slightly refactors the formulas to be of the form "0 = formula" or "0 > formula":

Eqn : Expr EQUALS Expr (Plus(Expr1, neg(Expr2)))
      | Expr LT Expr (Ltz(Plus(Expr1, neg(Expr2))))
      | Expr LE Expr (Ltz(Plus(Expr1, neg(Expr2))))
      | Expr GE Expr (Ltz(Plus(Expr2, neg(Expr1))))
      | Expr GT Expr (Ltz(Plus(Expr2, neg(Expr1))))

      - For example, converts "1 = x^2 + y^2" into "0 = x^2 + y^2 + -(1)"
      - In this form, all solutions to the formula are "zeros"
    - Uses interval arithmetic (implemented here) to identify subsections of the graph that contain x, y values for which the formula evaluates to zero
    - Like a binary search, recursively searches smaller and smaller subsections of the graph for zeros until the interval size is too small to be visible. At this threshold, it can just draw a tiny line between the corners of the interval.

- Graphtoy (my backup)
  - This is another cool piece of work by Inigo Quilez
  - Something special: Graphtoy has a variable for elapsed time (t) which can be used to create animations
  - Source code
  - Interesting implementation details:
    - Instead of implementing its own parser, Graphtoy turns the formulas into JavaScript snippets
    - See the "iCompile" function which tweaks the inputted formula strings to be valid JavaScript and constructs Formula objects which can later be invoked
]]>