Programming

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!