# 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.
[Open in large mode ](/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.
[![Screenshot of rain animation. Background is white and rain is red](/media/images/rain-red-white.webp)](/media/images/big/rain-red-white.webp) [![Screenshot of rain animation. Background is black and rain is a rainbow](/media/images/rain-rainbow.webp)](/media/images/big/rain-rainbow.webp)
This is how it should look, so if it doesn't look like that it's broken. ## 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.
-----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-----