It all started when aseprite put pixels in a sorcerer’s shelf for me in winter:
An observant reader will notice that each bottle has a shadow running along the bottom edge and on the right side about a third of the bottle. Horizontal elements additionally cast a shadow on the layer below.
Such drawing can be perfectly algorithmized using a set of not very complex rules.
This idea was spinning somewhere in the background until it resulted in the development of a full-fledged editor!
How it works:
The basic shape of the flask is determined by the draggable guides:
The dynamics of the form protrude with such modifiers as narrowing, widening, bifurcation, horizontal displacement and curb:
The lighting is adjusted by moving the Sun, although in this case the calculation of illumination is carried out not as for directional light, but closer to the point light source. There was a temptation to honestly count the rays passing through the glass/liquid, but I resisted it and did everything on magic crutches!
✨Effects✨:
In almost all potion references, people added additional elements to add special magic. The editor supports two types of effects: bubbles at the bottom and stars! In the future, chemical bulbs will definitely be added above the cork.
Technical details:
Rendering is done on canvas 2d. Code in vanilla.js using FRP (functional reactive programming) principles.
Adaptive:
Over the past 10 years, everyone has acquired mobile devices, and a separate challenge was to adapt the editor to these devices. Canvas, and especially my pixel art library lying on top of it, doesn’t really like it when the dimensions of an element change, but you can’t do anything for the sake of art. The scale gradually decreases depending on the screen size until the right panel with modifiers no longer fits and then it jumps to the left.
Demonstration of the mobile interface (yes, this is also a possible potion):
Color space:
The colors of all elements can be randomized, the algorithm uses the color space OKLCH
which takes into account the peculiarities of the human eye and gives a result that is visually similar in brightness.
Saving and Loading:
The result can be saved locally as a PNG with the desired scale. I wanted to load the result back into the editor, but I didn’t want to make separate saves, which meant that I needed to find a place for this data directly in png. The first thought was steganography and encoding data into one or two bits carrying the least color load, but this would still change the image. The second idea was to use pixels with alpha = 100% – their RGB can be filled with any rubbish – no one will see it anyway, but there might not be enough such pixels. I took the third path – I read the PNG specification and found that there is a block similar to EXIF in JPG. I took the file into pieces directly on the client and added a tEXt block to it (yes, the naming also seemed moronic to me, but that’s the specification) with all the information there. When loading, the reverse operation occurs – the image is parsed again, metadata is mined and all parameters are updated.
Attention, telegram, twitter and other chats happily devour this data, so if you decide to send a save potion to a friend, make sure you do it without compression (as a file).
Seeded random:
The effects (stars and bubbles) use randomness during generation, which made the loaded potion different from the one saved in png. I coated everything with mulberry32 pseudo-random. Here is the article in my blog about this beast if anyone is interested.
Publication of potions:
The potion can be published, but then any magician will be forced to fill out a detailed standard declaration about its properties. If you can’t come up with a name, no problem, leave it blank and the ability to use the name randomizer will be activated. Potion Effects: This is a cliffhanger for now, choose any available.
The potion appears on the general shelf and a separate unique page is created. Just in case, I integrated it with Twitter, in case someone uses it and decides to post it.
Thanks to those who have finished reading, enjoy!
Acknowledgement and Usage Notice
The editorial team at TechBurst Magazine acknowledges the invaluable contribution of the author of the original article that forms the foundation of our publication. We sincerely appreciate the author’s work. All images in this publication are sourced directly from the original article, where a reference to the author’s profile is provided as well. This publication respects the author’s rights and enhances the visibility of their original work. If there are any concerns or the author wishes to discuss this matter further, we welcome an open dialogue to address potential issues and find an amicable resolution. Feel free to contact us through the ‘Contact Us’ section; the link is available in the website footer.