Adding Feature/emoji#82

[hexonthebeach]

This change allows to add an emoji to the shapes array like

shapes: ['emoji:💸']

It doesn't look like it's harder to render than circles or squares to me.

No shape-changing yet, but it could be a good first step perhaps? What do you think ?

[catdad]

I have mixed feelings about this. I already implemented emoji once (see #82) complete with rotation and whatnot. However, it had really bad performance. I tried it without rotation at the time, and it just didn't look good. It just doesn't feel as exciting as little rotating bits.

So here is my dilemma. I don't want to keep the community from having features they find useful. However, I would also hate to introduce a feature that does not work well and I know I cannot make it work well in the future. Every feature adds maintenance costs, and when it doesn't work well, it makes users disappointed.

Do you plan on using emoji? And if so, what do you plan on using them for? Are you disappointed that they do not rotate or is that in fact what you wanted?

[hexonthebeach]

Thanks for the full response @catdad , I get what you're saying and it is eventually all up to you obviously. All I wanted to do is show that there is still a "need" for poopfetti out there, at least everybody who sees it smiles or even laughs in my field-tests.

The use-case for me is around button-clicks or toaster-appearances, with one pop of emojis you can convey a pretty clear message thanks to their recognizability / 💖 / ⚠ / 💲 / where confetti is always 'yeah!'

I did not get the performance for rotating unicorns good yet as well, but they are floating around which is already a little bit exciting (to me anyway). Getting them to rotate at acceptable rate took me too long, and I think weighing the efforts we both already put in to it, it's maybe better to have floating emojis than no emojis at all, and see if there is a need for rotating donuts afterwards. But I can also really understand that you want them to behave like real-life 2d confetti to stick with the original idea. So I opted for this PR with low impact on the codebase and high ease of use, to see where it would go.

[josephm28]

I want to throw this out there: it's great! Thanks @hexonthebeach for the work to include emojis. Even without rotation. It works great for throwing 🎃 🎃 🎃 all over the screen.

[gjaekel]

+1! I just got the feature request to change animation to a Xmas-Version. For this, the emoji extension will be great because there will be a fitting emoji for sure, e.g. ❄️ (https://emojipedia.org/christmas/).

[septatrix]

I have not looked into this but based on experience I would assume that the fillText operation is relatively slow. Instead you might try to cache the result (by drawing it to an offscreen canvas). This way it is only rendered once and you can copy the bitmap from the offscreen canvas. However I am not sure whether this approach allows for rotation nor do I know how rotation is currently implemented...

[gjaekel]

We use this during XMas time in last December: It is integrated into OFMeet, a spinoff of JitsiMeet. The feedback on integration of the Confetti tool was already warm and well, this "XMas-Edititon" was topping it! And there are already questions about Eastern.

Performance don't seems to be a matter, yet. The "Confetti" event is broadcasted from one member to all participants and create a local processing there.

        if (interfaceConfig.OFMEET_ENABLE_CONFETTI)
        {
            APP.conference.commands.addCommandListener("CONFETTI", function()
            {
                var options = {particleCount: 100, spread: 70, origin: {y: .6}};
                const today = new Date();
                if ( today.getMonth() == 11 )
                {
                    options = Object.assign({shapes: [
                        "text:\u2744", "text:\u2744", "text:\u2744", "text:\u2744", "text:\u2744", "text:\u2744", "text:\u2744", // snow flake
                        "text:"+String.fromCodePoint(0x1F381), // :gift:
                        "text:"+String.fromCodePoint(0x1F384), // :christmas_tree:
                        "text:"+String.fromCodePoint(0x1F385), // :santa:
                        "text:"+String.fromCodePoint(0x1F31F), // :star2:
                        "text:"+String.fromCodePoint(0x1F56F), // :candle:
                        "text:"+String.fromCodePoint(0x1F98C), // :deer:
                        "text:"+String.fromCodePoint(0x1F514)  // :bell:
                    ]});
                }
                window.confetti(options);
           });

[coranos]

I'd love to see this integrated. We are using it to do "banana confetti" in our web game. yellow, green, and 🍌

[loonywizard]

Hi everyone! I have a small personal project - js-confetti, and recently I've added emoji support 🦄

I will be happy if this will be useful for anybody!

Feel free to add Issues for feature-requests / bugs

[dthomason]

Have you thought about making this fully extensible? It would probably gain more traction if that was its main purpose. Looks like you've done all the heavy lifting on figuring out what works and doesn't for performance and such. If you packaged your knowledge making it to where any junior dev could make their own confetti type. That would be pretty cool. Just a thought.

[catdad]

I know it's been a long time now, but confetti are finally shipped. Fully supported, rotating or flat, with performance that is on par with all the other shapes. See #82 and #206. This was shipped in version 1.9.0. I am closing this PR in favor of the new shipped functionality.