This content originally appeared on DEV Community and was authored by Prathamesh Deshmukh
Hello DEV community! I’m Prathamesh Deshmukh, and I’m excited to finally share a project I’ve been meaning to build for years.
Back in 2018, I wrote a preprint titled “Transformation of the pixels in Tupper’s self-referential formula.” It’s based on the famous formula by Tupper that plots a bitmap of itself.
But as I noted in my preprint, the self-plotting isn’t the only amazing part. The formula can actually plot every possible $$106 \times 17$$ pixel combination. This led me to my core research question:
“If there is some graphical formation at a particular value of k, then what can be done to change the graphical formation or to change its position?”
My preprint (which you can find in the repo) was my answer to that question. I showed that you can perform all sorts of transformations—and even create animations—just by doing simple arithmetic on the giant k-value.
I finally had some free time, so I built the interactive demo I always imagined for it.
The Live Demo
Experience the algorithm in action! The interface is built with vanilla JS (BigInt is a lifesaver) and Tailwind CSS.
Click here to open the live demo
What My Research Can Do
My preprint showed two main ideas:
- How to change any graphical formation into another by applying simple operations to
k. - How these transformations can be used as “frames” to create a film or motion picture.
This means you can represent all possible $$106 \times 17$$ graphical formations and all their possible variations. In short, it’s a mathematical form of the “Library of Babel” but for bitmap films.
About the New Demo
The demo is designed to let you explore all the concepts from my paper.
1. Transform & Load (The Main Panel)
This is the main editor. You can load static examples like the UFO (Center) or Tupper’s self-plot and then directly apply the transformation formulas from the paper.
The best part is the “hold-to-animate” feature. If you click and hold a “Move” button, it will create a live animation. If you hold it for one second, the animation “latches” and will keep playing, creating the continuous “film” I described.
2. Draw
This panel demonstrates the reverse of the formula. You can draw freely on the canvas by clicking and dragging. As you draw, the K-Value in the text box updates in real-time. This is the live calculation of your formula:
$$k^{\prime}=k\pm17(2^{i-1})$$
3. Demos & Examples
This tab showcases the two major examples from the preprint:
- Animation Demo (Eg3.1): This plays the “Top-Left UFO” animation. It’s a simple loop that repeatedly applies the “move right” formula, $$k^{n}= k\times2^{n\times17}$$.
-
Interactive Tetris (Eg3.2): This is the most complex concept. It loads a scene with “resting” pieces (
kr) and a single “L-piece” (ks). The controls in this demo only transformks, leavingkruntouched. This demonstrates the “Different transformation on the individual Pixar” (Equation B/C) concept from the preprint.
Thanks for checking it out! This was a real passion project for me, and it was a lot of fun to finally build a proper interface for my research.
You can find the full preprint and all the source code on GitHub:
https://github.com/prathameshnium/TupperTransformer
This content originally appeared on DEV Community and was authored by Prathamesh Deshmukh