DEV Community

Cover image for I am speed, I can be Javascript
ViperT
ViperT

Posted on • Updated on

I am speed, I can be Javascript

Hello,

We will see what we have (at https://pixa.pics) found in order to have a suitable user experience, fluid enough, and best designed to enable anyone to create pixel arts that scales which can be NFTs or paintings...

Computing thumbnails or filter previews

Thumbnails are small part of the image which are computed for each layer as they change... Web Worker enable us to let the main thread be available to respond to critical task while workers being off-thread do the work in parallel!

But wait!? Why was it so slow to work with url being encoded in base64... because they need to be encoded! Bitmap are much "dumb" they work very very fast yet you better render it on a canvas which can be a bit annoying.

Image description

Knowing what has changed when drawing/undo/redo

When we change the state of the painting the algorithm named below (very lightweight, blazing fast) know how to and execute a very fast mathematical operation which sum up the whole state of every pixel. (Here in my chosen baseWTF text string of about 5 char. it can be a-z also A-Z also 0-9 and has 5 of length) Very cool for filename and not saving twice the same history state in any present or past timeline.

Color Computing (Low-Level JavaScript and our module)

It is simply for blending layer of our canvas which are virtualized and not having the need to sum-up canvas naturally which can be very messy, good challenge thought.

We first need to call the function of our module which is update in order to create an array which is defined in terms of entity in it and in terms of length, an array buffer that we can convert from 32 bits colors (Just like html colors but inside an integer) to 4x8bits colors (red, green, blue, alpha) very fast! See fast color conversion

Image description https://github.com/pixa-pics/pixa-pics.github.io/blob/main/src/js/components/canvaspixels/utils/SuperBlend.js

And then we also used more precise instruction which can speed up to 175% by luck the algorithms as all variables are scoped intelligently and also typed using "| 0" for integer (entire) and so on... LLJS

Enjoy those speed hacks!

Top comments (0)