DEV Community

Make it Rain 🌧 in HTML Canvas

Sooraj (PS) on September 14, 2020

Hey guys, I am back with another fun experiment that I created sometime back when I was bored. It was a hot summer day and I hoped so much for it t...
Collapse
 
rutesouza profile image
Rute Souza

Loved it! Your code helped me with a project. Thx

Collapse
 
soorajsnblaze333 profile image
Sooraj (PS)

Thank you for the comment. I'm glad it helped you.

Collapse
 
darkain profile image
Vincent Milum Jr

Nice start!

An idea for some advancements: try testing this out on different refresh rate monitors. On my 165Hz display, it starts looking like just curved lines, not "rain" anymore.

I think adding some more random variation to velocities and starting positions can help address this.

Collapse
 
soorajsnblaze333 profile image
Sooraj (PS)

This is a great observation :) Thanks for the heads up. I never knew it would look like curved lines on higher refresh displays. Sure we can just change the environment variables to change the randomness

Collapse
 
mavisidoro profile image
Mateus Ávila 🧀

excelent! please post more canvas content

Collapse
 
soorajsnblaze333 profile image
Sooraj (PS)

Thanks Mateus 😃 . Definitely will try to make more :)

Collapse
 
shaijut profile image
Shaiju T

Nice, 😄, Can you do water spray effect ?

Collapse
 
soorajsnblaze333 profile image
Sooraj (PS)

Thanks shaijut 😄 I will sure try :)

Collapse
 
ahmedshaabanelbehary profile image
Ahmed-Shaaban-Elbehary

cool 😎

Collapse
 
triptych profile image
Andrew Wooldridge

You might find this library useful when you work on something like this in the future - it's perfect for creating lots of instances and recycling them ecsy.io/

Collapse
 
soorajsnblaze333 profile image
Sooraj (PS)

Oh this looks great. Thanks for the info :)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Impressive.

Collapse
 
skvprogrammer profile image
Satyam Kumar Verman

Great 😃😃