Image rendering bug or demo UX problem

[josephrocca]

Hi, cool little library! While playing with the demo at sparticlesjs.dev it took me a while to realise that when adding an image as the shape I had to add a color and then type "transparent" in place of the hex code in order to get the images to show. Removing all the colors didn't help. I'm not sure if this is a bug, or if it's just a UX thing that perhaps needs some work.

A couple of other smaller notes that I'll tack onto this issue because I'm not sure if they deserve their own:

• It seems counter-intuitive that "image" is in the "shape" menu. I'd have thought that it would be part of the rendering of the shape. I.e. as an alternative to filling the shape with color, you can fill it with an image. That said, since images can have transparency, it does make sense that you'd want to be able to choose a color for the background, or specify that the background should be transparent.
• It would be neat if you could (via the demo/config page) add multiple images (like you can do with colors), and ideally adjust the weightings of these images so that some images are more common than others. I know this is possible with the library, but the demo/config thing you've built is quite handy so I'd be nice to have that ability!
• Edit: It looks like there's also a bug with the demo where the shape doesn't change when you try one of the presets. Here's a screen recording after opening an incognito window (since the demo seems to remember stuff via localStorage) and changing the preset to the galaxy.

Cheers!

[simeydotme]

Hi @josephrocca !

Thanks for the clear and detailed feedback, and extra kudos for the nice gif recording!

---

I actually recently stumbled on this same thing (transparency) myself. I hadn't experienced it before as I generally use a codepen/test page for making configs (more power). I'll look in to either making the demo page UI more clear, or see if the color can default to transparent when changing to image. I do need to document transparent as an option though, as it's definitely unclear.

• document transparency

---

• image is in the shape menu because that's where it is in the options config ... the demo UI is basically just a rendered version of the options object
• I purposefully avoided making the shape/shapes options over-complicated in the demo, as it's really just supposed to be a simple starter and to give a basic idea of what's possible. I could consider a free text box option (advanced) but it's possible to crash the browser if it has garbage in it. I'll consider.
• it's not really a bug, just an edge-case which cannot be handled; for Galaxy if you select it and look in the settings output you'll see that it's ['star', 'diamond'] which cannot be reflected in the dropdown... so it simply shows whatever you last had selected.