# 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.png
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.png)](<?= $URL; ?>/media/images/big/rain-red-white.png)
[![Screenshot of rain animation. Background is black and rain is a rainbow](<?= $URL; ?>/media/images/rain-rainbow.png)](<?= $URL; ?>/media/images/big/rain-rainbow.png)
</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/jMQY6R5QFAmEUMMQACgkQ64/jMQY6
R5QTUQ//e7Oj6bCb1MD2swskdsFfz5QPfNAeCsqYmlYJDYSmf7/KZYHDFQnpHVuu
boxoXJYsWt071C0wH0FehDeK9BDWNoyc2Dx62n9jXBly7y5t8oBfm7X73NonbA0F
g0FK31FYFcoCE8hPkkUdhNGrHgPJ9mkGP+/NmhIr7+IVkkh+ycERnlPLvqFCMSoK
N0gvueoutgFLs0jnHSCXT3D0WqNwjU45WpjxtMHJQOkN0qYwzg31zo3OkzYI4aNy
ofdVJsz4dQiho3K/xc4vBySWxdQyqhMr1B1Vzcz3MH+NFjIE8gFXlTumc4qKlp0O
4CINFT1b1pEZKDrv+kJ91doWDN/blXXllnVoUUsI4GmoR7/ntaleGHTFDpd7YWj+
by/r42T88F39KhMhfYUHZ3eJ6pqHFQgJKzwOOnM+ChVt9OhudsfZgws+cqP+QUSS
3Y7binUCujJNBmAWuKEO54I48tZXjM61XpqkUQjCa9DYWuJ0Tx/CjJcVU14NK+LK
Y6z/fSXj7t6S+oAUhwUh7H79FAUEEQ85KA+WmfaDH9+pSsPFmGDkkOcXKE+3Syi0
Tu2rTYdjunTp2mHBPX5rO+WI/1FAFIYSW5Kc2Lp1jkj8vk0wlPHOwI6ujYGtnGi8
NM0mSzvOQJPnXzJshWefL8fVQT86YUyTtysul70IKKBpFdPNqWk=
=UdRK
-----END PGP SIGNATURE-----