# 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
- ---
Browser simulation that requires JavaScript.
[= $site['fullscreen_icon']; ?>Open in large mode ](= $URL; ?>/rain/)
Click the gear icon for some cool sliders.
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.
[](= $URL; ?>/media/images/big/rain-red-white.webp)
[](= $URL; ?>/media/images/big/rain-rainbow.webp)
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.
= loop('rain-pride.webm'); ?>
= loop('rain-trans.webm'); ?>
= loop('rain-bi.webm'); ?>
= loop('rain-demisexual.webm'); ?>
-----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-----