Use JavaScript and canvas to create realistic raindrop effects

Create realistic Raindrop effects with JavaScript and canvas• 1 years ago

I recently made an interesting project--rainyday.js. I don't think the project is very good, and, in fact, this is the first time I've tried to touch some JavaScript that is more complicated than the pop-up window. Fortunately, you think it has a little meaning.
Rainyday.js wants to create a lightweight JavaScript library that uses HTML5 's canvas to make raindrops slide on the glass. It's easy, but sometimes it's challenging, especially if we try to avoid animations that are different from the usual JavaScript animations and keep the animations running smoothly.
In this article, I will introduce the whole scheme, but also introduce some details, please forgive me. But first you might want to take a look at the examples I've prepared for you to have a real idea of what I'm saying (click on the picture, open the example on Jsbin, and two).

Canvas Layers

To achieve a layered effect, the animation uses three canvases, as shown in.

The bottom layer places the original picture, using the API to scale it to the desired size. The picture was drawn directly onto the canvas and then blurred, looking like a lost-focus effect, currently using Mario Klingemann's stack Blur algorithm.
This layer in the middle is essentially invisible. It is not in the DOM tree, but we can use it to help draw the reflection of raindrops. The image is transpose accordingly, which simplifies the subsequent drawing process.
Finally, the top layer (glass), directly above the first layer, we draw the falling raindrops on this layer.
The whole idea is simple and easy to understand. Compared to a canvas, dividing into three layers makes the script simpler and improves the readability and performance of the code.

Take a closer look at how raindrops are drawn

The rendering of raindrops is the most important part of Rainday.js. Small raindrops want to be relatively simple, but for large raindrops there are several factors to consider, must ensure that the shape of the raindrops is completely random.
To achieve this goal, Rainday.js uses an algorithm that uses a polyline to simulate a circle (see Dan Gries's article imperfect Circles ). As a result, the script renders a raindrop shape like this:
The algorithm output is a series of points of the linked list, the trajectory of these points is a circle. Draw a raindrop is very simple, connect these points on the line, when painting, the radius of a little bit random on the line. Then the final shape is formed by shearing on our chosen reflection.

Run animations

The final challenge is the animation "engine". The animation engine consists of three modules. The latter module relies on the previous one. The output is the effect you see in the demo at the beginning of this article. Each of the three modules is:
1. Rain module-When the Rain () method is called, the time timer for JavaScript is turned on. This module randomly places raindrops on the canvas, depending on the user's time interval setting. The size of the raindrops is determined with the preset values, so the user can control the size and number of raindrops in the animation. Using one of the demos as an example, call Rain () like this, and put a new drop in the canvas every 100ms. The size of these droplets is distributed as follows: 88% of the water droplets are between 3 and 6 (the minimum is a random value between 0 to 3), 2% (0.9-0.88) is 5, and the remaining 10% (1-0.9) is 6 to 8.

engine. Rain ([engine. Preset (33), engine. Preset (55), engine. Preset (62 1100       

2. Gravity module--Whenever the water droplets are added to the animation, a new timer comes out to control the movement of the raindrops on the canvas, by modifying the y-coordinate of its position (when it is necessary to simulate the drop of raindrops at a certain angle, using the same method to modify its x-coordinate). At present, Rainday.js implements two kinds of gravity functions that are not used: gravity_linear (simple gravity of acceleration) and gravity_non_linear (the movement of raindrops looks a little more random). Setting the gravity function requires only running the following simple code:

3. Trail module-This function is run every time a raindrop lands, to draw the tail behind the raindrops. The Trail_drops function implements a tail composed of small raindrops, while Trail_none cancels the tail. The following call selects the effect of the Raindrop tail:

engine.trail = engine.TRAIL_DROPS;

Next

Can find the source of Rainday.js on GitHubmaroslaw/rainyday.js , if you like, you can go to see. The next version (this article is written according to 0.1.1) I will implement collision detection between raindrops, and also include some small improvements that I think of. Welcome comments, suggestions and any form of feedback.

Original: Creating a realistic Rain Effect with Canvas and JavaScript

Use JavaScript and canvas to create realistic raindrop effects