Starry sky in Hype with JS

The direct question is: Making a starry sky with Hype and JS consumes a lot of computer resources and a warning appears in Safari. Can it be done in another way? For example CSS?

Here is the link to my test: StartJam-Test2.html

I anticipate that I am not a programmer, but I like to investigate and try things. Now I'm investigating how to make a randomly animated starry sky that changes every time you enter the web.

I found this code that fits perfectly with what I'm looking for https://codepen.io/dm-stanislav/pen/PoKzrKe and I tried it but it gives several problems:

  1. It consumes a lot of resources (I deduce that it is for the mathematical calculations that it must make to generate the 500 stars because if I put more, the apple of the MAC comes out roasted).

  2. It only works with a single scene. If I add a second scene, only the background color appears but not the JS stars.

Here is the Hype file.
StarJam-Test2.hype.zip (176,3 KB)

I appreciate any help, if only to understand these problems.

:rotating_light: Please note that we can only address JavaScript questions and issues in the context of Tumult Hype, so please attach a Hype document so others can dig into what you have so far.

You can just use canvas (one bitmap) to reduce DOM complexity when generating a lot of stars:

or

2 Likes

Thank you Max