Pixelgraph
10 February 2024
An early Pixelgraph of myself
One of the reasons I wanted to start this blog was to have a place I felt comfortable sharing the various smaller projects I like to bash out over a weekend or two. So, it feels only fitting that the first post I make should be about one of those projects!
The Pixelgraph is a webapp, designed to be run on a mobile device that will take low-resolution dithered photos. Originally, I had intended it to take accurate Gameboy Camera style photographs, but my early attempts felt lacking, and so pivoted to making something inspired by instead. Better something original than a bad facsimile!
So, the Pixelgraph. It’s the webapp that takes Pixelgraphs, 128x128 ordered-dithered photos, in either colour or black and white.
If you would like to try it yourself, you can find the Pixelgraph webapp here. For future ease of use, try adding the webpage to your homescreen!
Pixelgraph UI:
- Viewfinder
- Zoom Slider
- Toggle Front/Back Facing Camera
- Toggle Gridlines
- Toggle Colour
- New Pixelgraph
- Save Pixelgraph
- Capture Pixelgraph
Taking a Pixelgraph:
- Get your subject in frame.
- Once you're ready, you can press the 'Capture Pixelgraph' button, which will snap the pic, and freeze it in the viewfinder.
- Take a look at the photo, and if you're happy with it, press the 'Save Pixelgraph' button. This will save it to your phones download folder.
- If you would like to take another photo, you can clear the viewfinder by pressing the 'New Pixelgraph' button.
A beach side walk at sunset
Notes:
- Gridlines won't be present in the captured Pixelgraph, so feel free to leave them on!
- You can zoom by adjusting the zoom slider, or by touching the viewfinder and sliding left or right.
- Downloaded images follow the naming format of 'Pixelgraph - Date - Time'
- The numbers in the bottom left are the date the build was made, as you can see the one I'm using was made months ago!
- Once an Pixelgraph is downloaded, you can scale it however you want. Though remember that it was originally a 128x128 image, so int scaling in powers of 2 is recommended! All the Pixelgraphs in this post are 512x512.
- As a webapp, you can add it to your home screen on your mobile phone. Great for quickly taking photos while out and about.
A town reflecting in the water
Future Versions:
- A memory/gallery feature. Would be nice to be able to snap away, and then be able to review them for downloads afterwards. Another benefit would be cleaning up the rather awkward, New > Capture > Save > Repeat process you have to go through each time.
- The internal resolution of the webapp was chosen to scale perfectly with 16:9 displays. In hindsight, this was a bit silly as it's seemingly impossible to find phones that aren't 21:9 or some other super wide aspect. This means that on every device I’ve used the Pixelgraph on, there are borders on the top and bottom of the screen. Still, I consider this better than having borders on the sides! Would be nice to automatically support any aspect ratio and keep the pixel perfect integer scaling.
- While internally the image is 128x128, when I capture the canvas it will be whatever the actual pixel size was on your phone screen. So, on my phone, they are saved at 768x768. Easy enough to scale, but it would be nice to have an option of export size to avoid the additional step I take resizing on my PC.
My keyboard