Show HN: A particle-animation Christmas greeting card

https://2018.9elements.com/

by Dahfab • 8 years ago

29 13 8 years ago

2018.9elements.com

Angostura2• 8 years ago

Don;t much like this:

If you create a greeting card we'll send an email to the recipient containing a link to a page with your greeting. In order to to do so we'll store all of the above information in our database.

For how long? For what other purposes may it be used?

gkoberger• 8 years ago

I mean, how else do you expect them to do it? If anything, at least they're (oddly) up front about it.

bastijn• 8 years ago

Give you a unique link you can email around?

Angostura2• 8 years ago

I expect them to answer the questions I just posed.

maximp• 8 years ago

Really cool, until I hit "create" and got a "something went wrong" Heroku error.

Great job, though!

swaggyBoatswain3• 8 years ago

How does the canvas circles become letters and shapes? Is their source code for this? I've been wanting to know how this is done for some time. Does it use the `fillText` method?

SonOfLilit2• 8 years ago

Yes.

    t.fillText(a[d], i, s + d * h - a.length * h / 2 + h / 2)

Chrome kindly formats https://2018.9elements.com/packs/particle_effect-d4e93bdb776... in Developer Mode/Network/Preview, for easier reading.

How I'd do it is create a mask (a hidden black-on-white image of the text), then sample a lot of random or uniform points on that mask (e.g. by walking the image and keeping x% of the black points at random), then display circles at those points (or, as they did, display a circle at (x + a * sin(time), y + a) where (x, y) is the point and a is a parameter that starts high, quickly drops down to zero, and when your mouse moves near a circle, grows back up - and color the circle blue when a is high and yellow when a is low (also, make opacity higher when a is low)

SonOfLilit2• 8 years ago

Inigo Quilez has some really good tutorials about this kind of stuff.

swaggyBoatswain3• 8 years ago

Oh I totally forgot you could just use get the direct link to the .js file, was always just previewing in console. But reading the minified file is always difficult to read due to shortened variable names, was hoping for a un-minified source version.

There's a method called `measureText` as well too

The mask though, you can check for differences in color in canvas? That's new to me, I had to look it up and you can https://stackoverflow.com/questions/6735470/get-pixel-color-....

How would you measure the mask if you have a background image as well though (the starry tree background)?

Everything else I can figure out with the display circles, its just the mask that gets me

soneca• 8 years ago

Nice, but I would like to create a card and get the URL to share through WhatsApp, not through email

Show HN: A particle-animation Christmas greeting card

Related Stories