Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design and consultancy

blog

  1. Home
  2. blog
  3. read
  4. Particles.js: Motion and Interaction
  • like 1 05

    Particles.js: Motion and Interaction

    1. April 2016
    2. Daily
    3. read 0

    In the last Particles.js tutorial, you learnt how to create particles with shapes and sizes that you desired. While it felt good to see all the particles move around, there is still room for improvement. At present, there is no interaction between various particles whatsoever. They just pass through each other as if the other particles don't exist.

    This tutorial will teach you how to move particles around the way you want by controlling their direction, speed, and much more. You will also learn about various interaction modes and events.

    Controlling Particle Motion

    Not all particles in every particle system move around in random directions. Even when they do, there are some other forces in action. For instance, they may speed up when approaching each other or bounce back after collisions. All these options can be controlled by various properties available under move.

    If you don't want the particles to move at all, you can do so by setting enable to false. You can specify the speed of particles using the parameter speed. To move each particle with some random speed, set random to true. On the other hand, to move them in random directions, specify direction as none.

    Sooner or later, at least one of the particles will move to the boundary of our system. Whether that particle bounces back or comes out from another direction is decided by the value of the out_mode parameter. When it's set to out, the particles move out of the canvas. When it's set to bounce, the particles bounce back after hitting the boundary.

    It seems a bit unnatural when particles pass through each other without any change in velocity. To change the particle velocity at each collision, you can set bounce to true. Interestingly, this will work only if either the line_linked or the attraction property is enabled. Particles will reverse their direction every time they collide, even if the collision is not head-on.

    Finally, I would like to discuss attraction. Once you enable attraction, the particles will change their speed whenever they are in the close vicinity of other particles. The change can be positive or negative, depending on the value of other parameters. The attraction in each direction is inversely proportional to the value of the respective parameters, rotateX and rotateY. The default values are very high to observe some noticeable attraction. On the other hand, if you make their values too low, the particles will gain very high speeds after some time.

    The JSON responsible for the motion of the particles above is:

    "move": {
  "enable": true,
  "speed": 20,
  "random": true,
  "direction": "none",
  "bounce": true,
  "out_mode": "bounce",
  "attract": {
    "enable": true,
    "rotateX": 10,
    "rotateY": 10
  }
}

    You should keep in mind that when you set straight to true and direction to none at the same time, the particles won't move at all.

    Interaction Events and Modes

    So far so good, but you might be wondering if the user can also interact with the particles, and if they can, how they would interact.

    To answer your first question, the user can interact with the particles. Particles.js can respond to three events: hover, click, and resize. However, first you should know that the events can be detected on the canvas or on the window itself by setting the value of the detect_on parameter. Now all these events will be triggered whenever you hover, click, or resize the canvas/window.

    When you set resize to true, the particles adjust themselves in the remaining space without any distortion. When resize is set to false, the particles will change their shape to accommodate any changes in canvas size.

    "detect_on": "canvas",
"events": {
  "onhover": {
    "enable": true,
    "mode": "repulse"
  },
  "onclick": {
    "enable": true,
    "mode": "push"
  },
    "resize": true
}

    You are probably wondering what the mode parameter does in the code snippet above. This parameter defines how the user can interact with the particles. The library has defined five interaction modes. They are grab, bubble, repulse, push, and remove.

    The grab mode creates connecting lines between your point of hover or click and nearby particles within a specific distance that you set yourself. This mode only works with the hover event. The JSON below draws a line with an opacity of 1 to connect all particles within 800 px.

    "grab": {
  "distance": 800,
  "line_linked": {
    "opacity": 1
  }
}

    The bubble mode changes the size and opacity of all particles which are inside a specific distance for a duration that you decide. The repulse mode makes the particle go away from the location of the click. Both these modes can be added to either hover or click. The duration is applicable only on the click events in both cases.

    "bubble": {
  "distance": 600,
  "size": 60,
  "duration": 0.1,
  "opacity": 1
},
"repulse": {
  "distance": 500,
  "duration": 0.5
}

    You should try to change various parameters to make the demo even better.

    The push mode adds a certain number of particles on each mouse click. The particles will be added at the location of the click. Similarly, the remove mode removes particles from the canvas. The particles to be removed are decided randomly.

    "push": {
  "particles_nb": 3
},
"remove": {
  "particles_nb": 1
}

    Final Thoughts

    The three tutorials in this series covered everything that Particles.js has to offer. I have also mentioned a few things every now and then so that you don't have to scratch your head later over issues like particles not bouncing off each other.

    If you need to know more about all the parameters that we discussed, please go over the documentation of this library. Moreover, if you get stuck at some point while using the library or something is not behaving as it should, I would like to suggest that you read the source code to see what's going on under the hood.

    This post has been updated with contributions from Kingsley Ubah. Kingsley is passionate about creating content that educates and inspires readers. Hobbies include reading, football and cycling.

    Photo

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245
    1
    Add a comment...
    4elements
    Comments

By - category

    By - date

      Copyright © 1999 - 2024 Shineyrock web design and consultancy, All Rights Reserved / Terms of Conditions / Sitemap: XML, HTML, Images, Mobile, News