The Sinclair QL Forum

So this isn't an exact transcription of the SuperBasic but should give you the idea of how the animation system works in Javascript (I added how to sleep for a time too).

https://pastebin.com/uW0xWQD5

Add it as zip too.

Hi Xora,

BINGO ! Many thanks for your help..... Your unzipped file works fine on my PC (and smartphone).

I had indeed read of the sleep() function, but understood it was only for php.... (the tutorial doc must have been out of date).

Now I can get back to work on the main job, after a few more experiments with other apparently awkward sections !

All the Best,

Steve.

stevepoole wrote:Hi Xora,
I had indeed read of the sleep() function, but understood it was only for php.... (the tutorial doc must have been out of date).

You'll note the sleep() function is defined in the file to, I took it from the tutorial I linked earlier.

https://www.w3schools.com/graphics/canvas_clock.asp

Has another solution if you want to update the screen at a certain cadence (would require a redesign of the mainloop)

The basic take away is JS is single threaded so you need to be not executing for a bit for the screen to update!

Hi again Xora,

Yes I am back on track with the sleep() solution, and am experimenting with it and modifying the program's ouput successfully.

I hope I will have digested the new notions over the next few days, especially the 'asynch' requirements.

Thanks again for your help...

Steve.
_____________________________

Hi,

Thanks to Xora's help, I have now got the epicycles program output acceptable in JavaScript.

His sleep() function was the key to outputting graphics in sequence, but I still needed waits() and cls() for intermediate pausing.

I had not forseen that code should be asynchronous to work in the case of a simple PAUSE....

The final zipped version for PCs, tablets & smartphones is below, (although not identical to the Basic version, which is much slower).

The program demonstrates many epicycle configurations of orders 1 thru 6.

Steve.

nice