Fireworks? In every sense of the word


(nemens) #1

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.


(sa1) #2

Maybe you should search for particle generator JS library


(Jonathan Deutsch) #3

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”).


(sa1) #4

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 )


(Loves Hype) #5

Here is the :ghost: :writing_hand:
Found this article / tutorial

with corresponding Code Pen


How to extend the Score function to show a custom msg?
#6

Just wondering, does this ‘JavaScript Fireworks using HTML5 canvas’ work within Hype, anyone being successful with the implementation ?


(Loves Hype) #7

Here you go:
HypeFireWorkBasedOnGabeCodePen.hype.zip (21,8 KB)


#8

Holy moly, Max, you made it!


(nemens) #9

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?


(Loves Hype) #10

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


#11

@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?


(Mark Hunte) #12

It will likely be that because the Hype element is not a canvas but a div. <DIV>
The canvase is embedded in it.


(Loves Hype) #13

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.


(Vishwas Gagrani) #14

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. :slight_smile:


(Loves Hype) #15