Confetti library in a Hype document (particles)

Tips & Tricks
1

I am doing my head in, as I am not a programmer. But I think it could work.
This min.js file from confetti does a window.innerWidth/Height calc. and then injects a canvas into the body tag. I would like it to fit the size of a banner eg: 300x600 and not get injected outside of the HYPE_document container. As then the click true events get ignored.

Anyone want to try?
confetti.js-master.zip (7.7 KB)

2

Do you want to post your hype project example…??

1 Like
3

Never mind…

confetti.hype.zip (12.5 KB)

I simply added a rect and put a canvas inside it with the correct id.
And it looks like confetti will not create its own if it exists.

4 Likes
4

Jesus, so simple afterwards.

5

Wish I show you, but NDA.

6

no problem.

1 Like
7

So it seems I found a bug inside the export of OAM files inside Hype.
@MarkHunte build a hype file to make the confetti.min.js library work. Inside the function build inside the Hype
document you can set 3 number parameters between these brackets:
confetti.start(time in milliseconds, min confetti, max confetti);

I’ve added different ones and in preview and normal export they tend to hold. As soon as I export these inside an OAM file (Adobes workaround for a 1 file iframe) and load them in Adobe MUSE these parameters get ignored. I find these settings inside the file when inspecting the sources.

Here is a preview link and here are the files.zip (317.1 KB) (.hype, .oam and .muse)

But it could also be I am doing it wrong.

8

I am not going to be able to test this but the same as you I see the code in the examined hype file re generated.

So I would not think the bug lays in the hype oam.
The call works. The function runs.
And I would think arguments passed by many other hype apis work without issue.
The only thing that is not being picked up it appears is the arguments to and from confetti.

you could try

confetti.maxCount = 1000;     //set max confetti count
confetti.start()

Also just realised.

You have the timeouts set to 0. which means the animation should not even start.
Timeout here means STOP animation in number of milliseconds.

So somewhere in the confetti api there must be a min default on that option.

When I test with anything above zero the timeout kicks in as expected but with zero the animation just works from default as if there is no timeout.

This could be part of the problem although it does not explain why the number of particles change as expected but not in an oam export setup.

The min timeout should not be anything less than 300 from what I can see and that is in an extreme case.

2 Likes
9

Thanks for the update Mark.