Realization of free movement of particles on ReactJS

Greetings I want to show you one of the ways how to realize the free movement of particles in the specified range. To accomplish this task I will use ReactJS. But the algorithm itself will still be common, and you can use it anywhere.



At the end of the article, we will create such a thing with you.

Wrong way

The first thing that comes to mind to solve this problem is simply random X and Y. Let's see what happens.


Here we just randomly shift every second between -50 to 50 in X and Y:

Math.random() * 100 - 50 

A smooth transition is carried out using the transition properties of css:

 transition: transform 1s linear; 

As you can see - it turned out not quite what we wanted. Of course, you can configure it so that the shift is added to an existing position, then it will be more like the truth. But still we need to go a little bit on the other side.

The right way

The previous method seems so curved for several reasons:

1. In reality, a particle cannot change its direction so drastically.
2. A particle for each period of time must pass a certain distance

And this suggests that randomization requires exactly the direction in which the particle will move, and in a certain range of degrees, so that there are no sharp turns. So we will solve the first problem.

And to solve the second problem, we will indicate in advance the step to which the particle should be moved during the time interval.

Now we have to remember the basic course of trigonometry. We know the length l and the angle deg . Need to find X and Y

sin is the ratio of the opposite side to the hypotenuse.
cos is the ratio of the adjacent side to the hypotenuse.

We get the following formulas for calculation:

 x = cos(deg) * l y = sin(deg) * l 

But there is one thing. In javaScript Math.sin takes an angle in radians (a value from -1 to 1 ). Therefore, before forwarding an angle, you must first convert it to radians.

 deg(рад) = deg(гр) * Pi / 180 

We write a function that will receive an angle at the input, and the distance to which the particle should be moved. And the function will return the object { x, y } with our values ​​for the shift.

 function getShift(deg, step) { return { x: +(Math.cos(deg * Math.PI / 180) * step).toFixed(), y: +(Math.sin(deg * Math.PI / 180) * step).toFixed(), }; }; 

Let's test what our function will output. Suppose we move a particle by 10px each time. Let's see what getShift returns for different angles.

 getShift(30, 10); // {x: 9, y: 5} getShift(90, 10); // {x: 0, y: 10} getShift(135, 10); // {x: -7, y: 7} getShift(210, 10); // {x: -9, y: -5} getShift(-30, 10); // {x: 9, y: -5} 

Well, it seems to be true, do you agree?

Now let's try to fix our first written application.


Already not bad! It remains to implement the framework for which the particle can not fly. Since now most likely after some time the blue circle will fly off the screen.

In order to make the framework, you will need to add a new constant. And also add one condition. Here we have a while loop. If there is a limit on the way, then we will turn the corner until we turn it away from the frame.

For clarity, add a yellow square, beyond which the circle can not fly. Here's what happened:


Our algorithm is completely ready to use. The next step is the implementation of this algorithm on ReactJS using its capabilities.

We transfer the algorithm to ReactJS

When transferring our application to ReactJS, we will set the following tasks:

1. Create a MovingPart wrapper MovingPart in which you can throw anything.
2. In the state we will store the values ​​X and Y, since only they are needed to redraw the component.
3. Outside, in a component we will prokidyvat interval, the border for which it is impossible to go and the step to which the element will move in one time interval.
4. Let's draw a little beautiful with several components of MovingPart , in order to roughly imagine where this can be applied in real life.

As a result, we get the following example:


Initial data will be taken from the data array.

After that we describe the component MovingPart :

• The interval (interval), distance (distance) and shift in one step (step) are obtained from outside of props;
• The maximum rotation during movement (maxRotate) and the current angle of displacement (deg) are determined inside the element;
• The x and y values ​​are moved to the component state;
• The getShift method is defined as the internal method of the component.

After that, using the cycle of the map render all the elements, wrapping them with our created component MovingPart .

Thanks for attention! This was my first article on Habré, I hope it will be useful. Try, experiment.