Trying to integrate confetti from codepen that uses coffeescript

So I've put the HTML code (canvas) into an html widget in hype. I attached the JS file, which is coffeescript it says? I've worked a bunch with js before but never heard of coffeescript. There doesn't seem to be an init function so trying to figure out how to call it and launch the particles.

Been referencing how Hype Snow was made from codepen, but this one has init function so seems to make more sense. Feeling a bit stuck. Is it possible to integrate this codepen into hype or is coffeescript not compatible? Thx!
(https://codepen.io/linrock/pen/nMadjQ)
confetti.hype.zip (19.5 KB)

confetti.hype.zip (16,2 KB)

coffeescript needs to be transpiled before usage in this scenario ...
you'll find some transpilers just by googling transpile coffeescript online ...

visit the homepage for further use usecases scenarios ...

2 Likes

You can view the compiled JS directly on CodePen:

2 Likes

Just be aware that because the coder has used single characters or var names and put them in the windows scope

i.e window.h the compiled code may abbreviate them to just the single character.

I,e h

Which will in this case at least break the code.

So you should go through the code and rename the vars

i.e window.canvasHeight

or make sure they have the full name.

Also don't use single characters for naming vars.
Its hard to read, remember what it is , follow the code logic and can clash with other named vars put into the scope ( probably by Minify , @MaxZieb can correct me on that one..)

2 Likes

@MarkHunte good mention/hint ... i only corrected the h, ... to get it running

@MaxZieb Thx :slight_smile:

1 Like

Thank you! Going to compare the two files and see if I can translate another one correctly.
Appreciate it!

Experimenting with the Hype Snow @MaxZieb posted last year. It's wonderful. So I'm trying to add an image of a snowflake to the ctx particle. I've got loading and displaying however it flickers. Any hints as to what I'm doing wrong? Thank you. (I'll remove the circle snow once I see the image is working properly)

Hype Snow With Image hosted
HypeSnow.hype.zip (150.2 KB)

Ah I figured it out. I had the loading inside the loop. Loaded the image outside the loop and then attached it to cxt inside loop. Fixed file attached if anyone else is interested.
HypeSnow-fix.hype.zip (150.5 KB)

1 Like