Color Cycling Desktop App running on Scenic
The incredible pixel art of Mark Ferrari
He's a master of color cycling, a technique used to animate sprites by just chaning
their palette.
I still remember the first time I saw it at work, I couldn't believe it.
The GUI was heavily influenced by HTML5 Color Cycling Art Gallery
if you still don't think that color cycling is awesome, take a look at this other demo,
where different times of the day are recreated by shifting colors in the palette
The code to implement the cyclcing is a porting from jtsiomb/colcycle
I've only ported the NORMAL
and REVERSE
mode, the only two used here
I've converted the original LBM files to PNG with XNviewMP
Follow the instruction and install the scenic_driver_glfw
git clone https://gitlab.com/wstucco/scenic-color-cycling.git
cd scenic-color-ciclyng
mix deps.get
mix scenic.run
This is an implementantion of the color cycling technique in Elixir and Scenic
Scenic works in retained mode, it doesn't allow you to write pixels on screen directly.
However, among Scenic's primitives there is the rectangle
that can be filled
with an image, loaded from disk.
What if we change the pixels of the image in memory and draw it back on screen?
That's exactly what I did here.
Pngs are loaded into memory, parsed with the parse
function of the PNG
module,
their palette is transformed using the Palette
module, the PNG
is re-written as a
bitstring using the write
function and then loaded back into Scenic's cache.
If the color blending
checkbox is checked, the colors between two palette states
are linearly faded one into the other.
The interval between two states is 6 frames long and gives a much smoother animation,
especially at lower frame rates (try tho move the slider to 0.25 and activate/deactivate
the color blending to see the difference)
As soon as this process is completed, the :fill
attribute for the rectangle containing
the image is updated and when Scenic refresh the screen, the new image appears.
This process is repeated for each frame.
When another animation is selected, the images cached in memory for the previous
one are released, to avoid trashing memory.