Show HN: A particle-animation Christmas greeting card
2018.9elements.com
2018.9elements.com
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)
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
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?
Great job, though!
> 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?