
Show HN: A particle-animation Christmas greeting card - Dahfab
https://2018.9elements.com/
======
Kagerjay
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?

~~~
SonOfLilit
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...](https://2018.9elements.com/packs/particle_effect-d4e93bdb7760cc54dfac.js)
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)

~~~
Kagerjay
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-...](https://stackoverflow.com/questions/6735470/get-pixel-color-from-
canvas-on-mouseover).

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

~~~
goldenkey
You could just render to a blank hidden canvas to grab the mask. Canvases dont
need to actually be displayed to be used for computational stuff.

~~~
Kagerjay
ahhh right just get `fillStyle` or `strokeStyle` or `fill` or `stroke` to
nothing.

What about making the mask though? Is it kind of like in photoshop where you
write some text → create outline / curves off of it? Or do you keep it as
text?

~~~
goldenkey
Depends what you want to do. If you want the mask as a bunch of pixel
locations you can loop through the image and make a JS Set of x,y coords which
arent blank. I am not sure what representations the above app used for their
masks. It's all isomorphic. Important step is just to generate the masks using
either fillText or strokeText.

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

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

Great job, though!

------
Angostura
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
I mean, how else do you expect them to do it? If anything, at least they're
(oddly) up front about it.

~~~
Angostura
I expect them to answer the questions I just posed.

