Hype Snow (for the upcoming christmas season)

Preview:
Snow.html

Download:
Snow.hype.zip


Based on https://codepen.io/wikyware-net/pen/rNmaqBz . Resize handler was removed but can be reimplemented from source, but then it would need to react to the Hype dimensions.
14 Likes

This is the most convincing artificially generated snow I've ever seen.

1 Like

And the best … if you observed it carefully the vector of each flake is a straight line (on an angle). Flakes "changing" direction is only an illusion… we don’t see crossing linear flakes, but project our expectation of snow falling in a wobbly line.

obj.x += obj.vx;
obj.y += obj.vy;
3 Likes

Thanks @MaxZieb for your kind help!!

http://dpa-webgrafik.s3.amazonaws.com/customers/client/aws/my/html/index.html?pathSrc=aktuell/2021_12_14/weisseWeihnacht/cont&nameCSS=style_1_2.css&versionScript=2.7

3 Likes

Hello,

It seem there is some errors, anyway to fix?

By the way, is is possible to enable flexible layout, so that it also work in mobile mode?

Merry Christmas

I actually removed the resize event as it was based on the window port and not the hype container dimensions. Just comment the line in code containing the variable mentioned in the screenshot.

If you need flexible scale based resizing you would need to implement it using layout request or some other method watching the container dimensions or use the original window port based re-initialization (resize event).

For simple fixed scene size responsiveness just stop the snow on scene uploads and start it on scene loads and use different container sizes.

You might need to tweak the code.

Hey Max!

Dumb question. How do I make the flakes bigger. And also how do I make them travel indefinently and not stop at a certain point. I used this template for a different purpose so I changed it to travel to the left in a panorama banner but the flakes "lands" after a certain distance.

The key is this.dia (diameter) in the point function. They should travel indefinitely, so I am not sure what you mean …