最近窓の外に十分な冷たい雨がない人のために、マレックブロジアックはjs + canvasで面白いデモを作成しました（ デモ＃1 、 デモ＃2-すべてのブラウザで機能しない可能性があることをすぐに警告します）。 。 開発者は、ドロップのアニメーションをよりスムーズにすることを目指しました。
最高のダイビング効果を得るには、最初に次のタブでraining.fmを開いてデモを視聴することをお勧めします。
絶望的なジョークのすべてのファンは間違いなくこの画像を好きになるはずです。
画像は複数のレイヤーで構成されています。元の背景画像は、ブラウザウィンドウのサイズに合わせて拡大縮小され、 Stack Blur Algorithm（Mario Klingemann）を使用してぼかしられます。 中央-不可視-滴の反射が描かれるレイヤー。 ドロップ自体を描画するために使用される最上層。 著者は、このようなアプローチによりスクリプトコードが読みやすくなり、生産性が大幅に向上したと書いています。
雨滴のレンダリングは、円を近似するために、滴の形状をランダム化することで構成されますアニメーションの「エンジン」は、「雨」、「重力」、「トレース」の3つのモジュールで構成されます。 最初はランダムな半径のドロップをキャンバスに配置し、2番目はドロップを垂直軸に沿って移動し、3番目は移動したドロップのトレースを描画します。
内部デバイスの詳細については、著者の説明付き記事をご覧ください 。 新しいバージョンでは、著者はドロップの衝突チェックを追加する予定です。
Github