Particles.js loading problem


(office) #1

Hi everyone,

I want to use particles.js in my hype Project.
It is loading and showing up on Desktop with HTML Widget, but is not visible in mobile browsers.

There are also big perfomance drops when it is visible in the Hype App viewport.

This is my code to load it:

<div id="particles-js"></div> <script src="${resourcesFolderName}/particles.min.js"></script><script src="${resourcesFolderName}/app-p.js"></script>

Maybe theres a better way to implement this?

I am thankful for every answer.

best,
Max


#2

There are quite a few open issues on the Git repo for particle.js. And some of those point to “slowness” or performance issues. Also, the repo itself hasn’t been touched for a couple of years so I would expect to see perf issues on newer browser versions. I, personally, wouldn’t use it because of that.

That being said, you have mentioned you’ve got it loading so I don’t see setup being an issue. I would gather it’s something to do with the latest mobile browsers not liking the library.

If you tell us more on why you want to use this library there may be something else that can be done.


(office) #3

Thank you for your great answer.

I want to use it to enhance the visual presentation of the “App” I am making.
I have tested the library on codepen with my iphone/ipad ect. so no browser problems should be there.


(Jonathan Deutsch) #4

It may be useful to attach a zip of the .hype document along with any details on what specifically is slow or not showing up.


#5

or share the codepen so we can grab the code to test. Also, the library should probably work fine it’s just the combination of the library + hype that could be the issue. Hence why we need to see something as we can’t speculate with fine detail on what could be going wrong. :wink:


(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #6

I looked at particles.js for some of my game projects in Hype. Performance was a problem. Also, it was a bit overkill for my projects. So instead, I wrote my own particle system. You can see examples here…

With just some JavaScript and SVG, a lot can be done.