# Owner: glow
# KeyID: E65A8520F36AEE13CFE4F56BEB8FE331063A4794
# Key: https://glow.li/pgp
# Verify: curl "https://glow.li/posts/rain/index.html.asc" | gpg
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA512

+++
{
    "css": ["rain.css", "grid.css"],
    "date": "2020-12-17",
    "description": "I created a stylized animation of rain using JavaScript with cool sliders",
    "layout": "post",
    "sharingimage": "media/images/rain",
    "sharingvideo": "media/videos/rain.webm",
    "tags": [
        "Technology",
        "Simulation",
        "Showcase",
        "Project",
        "JavaScript",
        "Web_Development",
        "Rain"
    ],
    "title": "Rain animation"
}
+++
<div id="rain" class="rain">
    <div class="rain-nojs">Browser simulation that requires JavaScript.</div>
</div>
[<?= $site['fullscreen_icon']; ?>Open in large mode ](rain/)

Click the gear icon for some cool sliders.

<!--more-->

I created a stylized animation of rain using JavaScript. The wind and intensity change randomly.

Repository: https://github.com/Neo-Oli/rain

In the beginning it looked quite bad, but when I added the parallax effect it all came together. I am now pretty happy with it.

After I was done I added a small menu to pause the animation and enable the debug output. Then I, just to make it cooler, I added a bunch of sliders. I especially enjoy the color options. How cool is this blood rain and that rainbow rain.

<div class="grid2" markdown="1">
[![Screenshot of rain animation. Background is white and rain is red](media/images/rain-red-white)](media/images/big/rain-red-white)
[![Screenshot of rain animation. Background is black and rain is a rainbow](media/images/rain-rainbow)](media/images/big/rain-rainbow)
</div>

This is how it should look, so if it doesn't look like that it's broken.

<?= loop('rain.webm'); ?>

## Update

For no particular reasons I added a bunch more color modes. Most notably a bunch of pride flag patterns. You can check them out in the menu.

<div class="grid2" markdown="1">
<?= loop('rain-pride.webm'); ?>
<?= loop('rain-trans.webm'); ?>
<?= loop('rain-bi.webm'); ?>
<?= loop('rain-demisexual.webm'); ?>
</div>
-----BEGIN PGP SIGNATURE-----

iQIzBAEBCgAdFiEE5lqFIPNq7hPP5PVr64/jMQY6R5QFAmRuqFwACgkQ64/jMQY6
R5QPcw//Wwv6UpgT1VxFEG5kqp7hqd57fSl8q9QfiN7mrKU6fRNqVOgO9vo3wOl/
s3XyakNX/+i5ShQ5ikA2rphYUG9Zh096O/qdC8uXDQkHMQII0tLSatrGawJhp3hV
1uEOk5tduqnew7eGBm1PG69BCKHp7xz+CGXeglcN7MMO8h2rGWNveXKFinVfZYGz
12Z3bK7KAHueoBtuUh2nB77prLyvlWWuWkhNHZRT2dXfpWhvoUbUNTCNLk7p3oKK
KaInkE3A1KC+KHc8w7u1AmJOoaNPVdPHzeFAOYcOMV52rlnRhg6Xnp40lYGM60ZZ
cZRQYmB05fCBFuJXqFuGliHTGYe9WTh0mN00O0A5ZKUM7CMghjzGNHaEtNX3v9hX
uwwiSEHmzkM/nT+fm6IvDxn42upiGTh+Ct6EhenBhIWaNrC7UQfMWToncfSbBBeZ
Pnc0Iw8PLFWC4HocHBP5W+DjUtfT16Zns5BR6GYnfI6VKVSf8sIVTsZZIo9i0HrF
hHREWwu9CyqnG7zmIoXPYYUPsb622naqpl/zUTtsY2JqIxGoxLN20qCWCKZdLaQb
xivJ9ez4TuCT/Pgsc5LlsdOvPw/sw6Bo7FILVJTvagxZMZZQ/Cc2VN+A/5jhFdNk
GzbT4Si7fDukdTMOmbO3Z0CwyAgCh4jlFuVrDQUjWs6mZ0x8ilE=
=5lrM
-----END PGP SIGNATURE-----