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
 
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
 
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
 
andrewbaisden profile image
Andrew Baisden •

Impressive.

Collapse
 
skvprogrammer profile image
Satyam Kumar Verman •

Great 😃😃

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
 
ahmedshaabanelbehary profile image
Ahmed-Shaaban-Elbehary •

cool 😎