# 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

- ---
date=2020-12-17
layout=post
title="Rain animation"
tags[]=Technology
tags[]=Simulation
tags[]=Showcase
tags[]=Project
tags[]=JavaScript
tags[]=Web_Development
tags[]=Rain
sharingimage=media/images/rain.webp
sharingvideo=media/videos/rain.webm
description="I created a stylized animation of rain using JavaScript with cool sliders"
css[]=rain.css
css[]=grid.css
- ---

<div id="rain" class="rain">
    <div class="rain-nojs">Browser simulation that requires JavaScript.</div>
</div>
[<?= $site['fullscreen_icon']; ?>Open in large mode ](<?= $URL; ?>/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](<?= $URL; ?>/media/images/rain-red-white.webp)](<?= $URL; ?>/media/images/big/rain-red-white.webp)
[![Screenshot of rain animation. Background is black and rain is a rainbow](<?= $URL; ?>/media/images/rain-rainbow.webp)](<?= $URL; ?>/media/images/big/rain-rainbow.webp)
</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/jMQY6R5QFAmHoUIwACgkQ64/jMQY6
R5QAqBAAmm2XsszXEVCSTQH9dMoHs912XWUjHl9mP0fh5su8dWHKxzRctX2p10ZT
VwYBpXbXL1CkQRbmgBmY69HsF4Ubf11FLjqPxMHqv4/Rz937Qt4jf+K4UTVZHxhW
bGzFnwCsfUylNH5+0CLiw4y7nD2jw4lA/vpwyPt0c7biVvAykee6G4gtNj+7pZT8
4iw5x4gvtDfTOYr9YQ4IDPP46h4KWxSUSZhZaoNTI66NVNcJ/HmXMzSL3rnx3WBE
+bkRwUJTZeqKx7rS1YZ4uWzyHpnjpoBMSEYOIKKwG829YU9eiKyrkr8hazzxHaUS
lyH8Ins+zJjybwjNXZEJn1txk4h6yfH8kD4PpO+Fcg7QqbMcVXANxmM6LC3daCgY
0WoRPAqSgZAmcLK5kT5AaBCi7KGeZ4EvB93GBwtKPfnuAbLQWxibNSY/BLEm9djm
HH38mlnWrARMvPdmHuEbUYOll4p647Sr/RJs4MnuarO0fSCBzKL3buzDQ4uf1/5L
KTCswhNMR46jp728vlumbpZTMoMcHYRBaGnBccMvQ6usNoQizYXI0tFEfbc9A3MR
AVRKGp0L19MRWt4Y1EcfyGFpJTvx8vAbTg7pc2WGDfJZO1YKTAQwPARTaOBqtb67
JHyzucjuybEti+FRNkPB+Z7g2tU+Y5sb836x0zZTlDsBNb4yEdQ=
=b0xU
-----END PGP SIGNATURE-----