It's like the gravel pattern in Japanese gardens but with pixels.
15 February 2021
Over the course of a two evenings, an idea crossed my mind and had to be built. A mobile pixel editor to doodle and relax. The only originality about it are it’s constraint: black and white only, 21 by 21, and an uneditable pattern of pixel. I introduce to you : Graxel.
The UI is very minimalist: the canvas and 3 actions.
The ‘canvas’ is a SVG, very similar to triangulart. Using SVG makes it easier to edit and get input events from the user. In order to make the editor looks perfect, it scales to the closest ratio where the pixels are a rounded number (not a float). Otherwise some black lines would appear between pixels.
The actions are very basic too:
reset: clears the canvas
random: fills the canvas randomly
share: opens share UI
However let’s have a closer look to the last two actions.
First, the random action. In the original version, it was filling the canvas with random values. It wasn’t groundbreaking. So before releasing the project, this feature needed some work. I wanted to generate something pleasant at every hit. The idea was to fill only a 1/8 of the canvas with random values and repeat it by symmetry to the entire surface. This changes everything. It looks beautiful at every attempts. But why?
From my experience, I think I can explain why on two points:
Empty > Fill 1/8 randomly > Clone on all axis
share button is tapped on Chrome Android, the canvas is shared as picture so users can post their canvas directly on social medias or share it on messaging apps. The future is bright.
Also, the canavas data is stored in the URL hash, making it easy to share without the Share API.
Last note, if you poke the
random button too much, it might come alive.
‘‘For the first time, I managed to transform randomness into beauty, at every attempts.’’