Do you guys know if there is a template with fireworks display? New Year Eve is coming and I wanted to create a simple fireworks card, I’ve looked around but couldn’t find anything - or maybe I’m not looking hard enough.
Thanks in advance.
Maybe you should search for particle generator JS library
I’ve definitely seen people use particles.js in conjunction with Hype (like @sa1 suggested, there should be some documents on the forums if you search “particles”).
Yes I used particules.js, thought, as I know, it can’t produce that kind of effect (that’s why I haven’t suggested it )
Here is the 
Found this article / tutorial
with corresponding Code Pen
Just wondering, does this ‘JavaScript Fireworks using HTML5 canvas’ work within Hype, anyone being successful with the implementation ?
Here you go:
HypeFireWorkBasedOnGabeCodePen.hype.zip (21,8 KB)
5 Likes
Holy moly, Max, you made it!
Ok wow I step out for a few and this is what happens! So my question now is why is it that I can’t see that in my project file? Do I need to download additional libraries or?
If you copy it over you need to copy the following over …
- the Firework Canvas layer.
- The init function (link it on scene load)
- The CSS in head
No
@MaxZieb
HALLO MAX
To replicate your project I followed the before-mentioned steps.
Everything went straightforward and self-explanatory, except of one:
I tried to assign the ‘canvas’-id using
Unique Element ID -tab in Identity-panel. No fireworks. Then I found that you assigned it into inner HTML of the Firework Canvas -element. Could you please explain, why my approach didn’t work?
It will likely be that because the Hype element is not a canvas but a div. <DIV>
The canvas is embedded in it.
2 Likes
Mark is right. Hype doesn’t offer a canvas element . It’s a html specific element that offers a pixel based canvas. There is a difference between html elements (like canvas and DIV) and attributes (like class or ID). This is why we have to stick it into a DIV.
2 Likes
Hi MaxZieb,
I downloaded the hype file. However I am not able to understand how the element on the layer “Firework Canvas” is linked with the javascript. I looked all the tabs of inspector, but I cannot find anything like name or class that is mentioned in the javascript file. I am scratching my head as how come javascript knows to use that element?
Also what element did you select in the insert menu, to get the element on “Firework Canvas” on the stage ?
Thanks. 
Here is a New Years graphic I did in Hype - the actual firework is a photograph of a real firework that has been photoshopped. I didn’t include the launch effect, but the firework blossom worked real well using a combination of manipulating height, width, top and left.
Yes, the scene is the inner harbor in Baltimore - this was done for a gaming group I run.Jan2018.zip (1.8 MB)
2 Likes
Seek and you shall find.
I love this place!
Thank you Max!
2 Likes