Hi all,

I’m working on my personal website, my first forway into javascript and web development.

I wanted to create a flip dot style display which has since morphed into more of a CRT look.

You can take a look here if you like:  https://343f-66-113-2-158.ngrok-free.app/main.html

However, I’ve recently, when sending it to a friend, we found it only seems to work with any performance on Safari, sometimes in fact failing entirely on Chrome and Firefox.

I’m wondering if anyone has any ideas on how I might change my design to migigate this or whether there is some way to give myself more resources on firefox and chrome.

A cursary look into fixing this seems to suggest I should use RequestAnimationFrame, however, this drawing of all elements smoothly at once, while efficent, destroyes the organic effect that the timeouts gave both on the individual dot level and when refreshing line by line.

My general design is outlined here:

I’m using HTML5 canvas; each dot is a class which redraws its section of the canvas with a 50-300 ms delay to emulate the per dot lag of a given hinge on a flip dot display. The display class again using setTimeOut(), schedules each line of the display, consisting of dots, to update at a slight offset so that you can see the display refresh from left to right. Then the rest of the program modifies the “next frame” array with text or images which I wish to be displayed.

Thank you!

  • TheMightyCat@lemm.eeEnglish
    1·
    3 days ago

    A random suggestion would be to draw to multiple canvases, and use a CSS animation for the delay.

    Also not sure if you are already doing this but it might be more peformant to use the raw buffer instead of draw functions.

    Alternatively you could look into webgpu, it is ment for these kind of things.

    • bleistift2@sopuli.xyzEnglish
      1·
      3 days ago

      I’ve thought about setting whole ‘images’ inside the canvas at once, but that would probably ruin the pixel-by-pixel style OP was going for. Do you have a suggestion how that could be maintained while not drawing every pixel individually?

      • TheMightyCat@lemm.ee
        2·
        3 days ago

        All the calculations could be done before hand and stored and then the only thing left in the delayed draw is to set the buffer.

        I haven’t looked at the code yet so not sure how much if any it will save though.

        Could also group pixels that are far away from eachother into a single call, while a compromise i think it will maintain the effect.