This repository was originally meant to be a "laboratory" for me to try out TypeScript and the Vue framework. At the moment, there's really only one thing here which is a re-implementation of this app (https://gregorypropf.com/pixreact) located at my old portfolio site. One small improvement is that this implementation of the search-and-replace algorithm does not have the subtle bug I mentioned in the original docs. I actually created this bug as a result of over-aggressive optimization for speed. To put it simply, if a pattern is invariant under rotation (rotation angle doesn't matter) or partially degenerate (i.e. 0 and 180 degree rotations look the same) the correct behavior is to say that each occurrence of the pattern can be said to match at all the rotations that look identical. So a pattern like a simple horizontal line, which looks the same rotated by 0 or 180 degrees but not 90 or 270 degrees, should be flagged as matching both the 0 and 180 degree rotated form or both the 90 and 270 degree form. Why does this matter? It matters if the successor pattern does not have the same rotational symmetry. Imagine a simple cross pattern (looks the same at all rotations) that has a thing that looks like the letter "L" as successor. The correct match and replace operation will superimpose 4 of the L patterns rotated at 0,90,180, and 270 degrees. The original app doesn't handle this correctly and just uses the successor rotation corresponding to the first orientation that matched in the precursor. This one places as many successor rotations as could have matched the precursor pattern.
I believe I originally came up with this idea while thinking about regex patterns, commonly seen in Unix shell tools such as grep and sed and now included in most computer languages as part of their text manipulation libraries. I started to ask what regexes really are deep down. Well, among other things, they're string rewriting systems. This reminded me of a section in one of my favorite books, Gödel, Escher, Bach by Douglas Hofstadter. In it Hofstadter introduces a simple string rewriting system called MU. MU contains a few simple rewrite rules and we are asked to determine if, using those rules, we can transform the string MI into MU. In the system Hofstadter describes it turns out we can't. I then thought about cellular automata. Can they be regarded as 2 dimensional rewrite systems? Well of course they can!
The saved-patterns directory contains many rulesets that you can play with. The problem is that most of the older ones won't load because I've changed the format. I know that pinwheels.json and pinwheels-2.json will load and run. The latter will run if you do "refresh pixels" but it runs very slow. A quick way to get the pattern files into the clipboard for pasting in the textarea in the upper right is cat saved-patterns/your-pattern-here.json | xclip -selection clipboard. Any patterns you make with the current app should load back in just fine as well.
Somewhat related to the rotation issues above, this app really needs a way for the user to change the priority weights applied to the successors of different rotations of predecessor patterns. There's a static map at line 82 in PixelReactor.ts called transformToPriorityOffsetMap that defines these weights. They should be user definable instead.
This template should help get you started developing with Vue 3 in Vite.
VSCode + Volar (and disable Vetur).
TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.
See Vite Configuration Reference.
Update Jan 18, 2026 - The latest versions of node break this project. I've tested it with v19.8.1 so to guarantee you can run it do nvm use 19.8.1 before anything else.
npm installnpm run devnpx serve distnpm run buildRun Unit Tests with Vitest
npm run test:unitRun End-to-End Tests with Playwright
# Install browsers for the first run
npx playwright install
# When testing on CI, must build the project first
npm run build
# Runs the end-to-end tests
npm run test:e2e
# Runs the tests only on Chromium
npm run test:e2e -- --project=chromium
# Runs the tests of a specific file
npm run test:e2e -- tests/example.spec.ts
# Runs the tests in debug mode
npm run test:e2e -- --debugLint with ESLint
npm run lintThis regex string finds TS functions in VScode "[a-z0-9_]+(.[a-z0-9_ :]+)". At the command line you can use grep "[A-Za-z0-9_]\+([A-Za-z0-9_ ,:]*):\?.*\s*{" PixelReactor.ts. This allows you to count functions and methods. I use this to locate functions to make sure I've commented them all or get a handle on which ones I haven't documented properly.