Performance improvement what will be done

[vipertechofficial]

Introduction

CanvasPixels was a react component which was featuring in its state many variables which interacted when event were triggered, there were two heavy function one which is force_update that will only be used to move the canvas that is following a css transform property (yet all position were virtualized to improve performances and avoid glitches) and the other one which was responsible to update the canvas from its javascript reference in its context2d object's element...

RequestAnimationFrame was used and enhanced with a system that can skip the frame and/or cancel them while computing average fps very lightly... Also tests are performed to not render every pixels again.

The issue: Every function worked at the same level, the component level and they first also needs to copy whole state's variables because they change between two data transformation and also they can't be compiled with efficience into smart browser internal pre-compiled language because they performs all at the same level and also are again made heavier by react surcharging of methods wherever I don't know, but the main issue is that it is "poor" object oriented object programming architecture, it doesn't benefits from library having their state outside react and working upon prototyping and private variables and methods inside their "objective functionalities" so within their "class" we will say...

Solution

Utilities function inside an object with 1+ state which is not shared outside the object, divided into chucks of invisible functionalities like:

SmartRequestAnimationFrame (OK), SuperCanvas (OK), ReduceColorPalette (needs bulk conversion to uint8array with rgba from uint32array passing by the buffer (a fantastic tactic), ColorConversion (OK), CanvasRendering (needs to be done with a locking boolean to not mess with half changes), CanvasPainting (must do; which is every function that performs transformation on the color array (uint32) and the pixel color index array (traditional array) which is managed by CanvasState (must to be done, it will store the history for undo/redo for example) with the only one final CanvasMasterState which manage them libs and utils all!

Meanwhile for selection so because it needs to ditch a grid of selected pixel into higher luminosity or lower luminosity once in a while and that we will prefer to cache the computation without freezing the UI, we will use webworker that will recieive the layers rendered like a sandwich into one pixel matrix and it will compute two layers : one of higher and another one of lower luminosity so they can be replaced without writing state change for any pixel of selection upon condition inside rendering only (if only it has been computed quickly enough, yet what's below selection should not changes too much, so we blend colors for two "frames" based on the one we can see in another thread under the form of a service worker just like we do for filters preview actually)

Also some UI changes and minor yet annoying bug fixes are listed in some neurones but they don't know they exist, only my brain think his head is inside it but that only reveal many things about javascript here, let's say for those utils, function better should be prototype, like head.prototype = brain()... is better than publicly accessible brain without head XD XD XD Yolo, let's to it stepped.

[vipertechofficial]

https://github.com/pixa-pics/pixa-pics.github.io/tree/main/src/js/components/canvaspixels/utils