Particles.js: Control Particle Count and Shape
source link: https://code.tutsplus.com/tutorials/particles-js-control-particle-count-and-shape--cms-26290
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
The previous Particles.js tutorial briefly discussed various features that the library offers and how to get started with the library. In this tutorial, I will cover in detail all the aspects of Particles.js that deal with the physical appearance of particles.
Number, Color, and Opacity
The first thing that we will deal with is the number and density of particles. Density determines the number of particles that will be packed together in a given area. It is enabled by default with the value_area
set to 800. Here is the JSON that lets you control the number of particles:
"number"
: {
"value"
: 50,
"density"
: {
"enable"
:
true
,
"value_area"
: 500
}
}
If you set enable
under density to false
, then the number of particles displayed will be exactly 50. Doubling the value of value_area
will reduce the number of particles approximately by half.
There are three ways to set the colors of particles. You can set colors in HEX format, RGB format, or HSL format. Due to a bug in the library, the RGB and HSL formats work only when you remove the default color value from the library.
If you want to randomly set the particle color, you can do so with the value "random". Finally, to set color randomly from a list of colors, you will have to provide the colors in HEX format as an array. Here is the JSON to set colors for particles:
"color"
: {
"value"
:
"#fff"
//set white in HEX (We are using this version)
"value"
: {r:255, g:255, b:255}
//set white in RGB
"value"
: {h:0, s:100%, l:100%}
//set white in HSL
"value"
: [
"#f00"
,
"#0f0"
,
"#00f"
]
//set red, green and blue randomly
"value"
:
"random"
//set colors randomly
}
The opacity property gives you a lot of control. You can set it to an exact value or use random values by setting "random"
to true
. Not only that but you can also animate the opacity of particles. Here is the JSON code for the opacity property:
"opacity"
: {
"value"
: 1,
"random"
:
true
,
// Set to false in our case
"anim"
: {
"enable"
:
true
,
"speed"
: 8,
"opacity_min"
: 0.4,
"sync"
:
false
}
}
Setting "sync"
to true
will animate the opacity of all particles at the same time. Using a value of 0.4 for "opacity_min"
makes sure that the opacity never goes below 0.4 for any particle during animation. Here is a demo with stars moving across space. Try changing the number, color, or opacity of particles to see their effect.
Shape and Size
Particles.js has five different values to create basic shapes. A simple shape like circle
generates a circular particle, triangle
generates triangular particles, and edge
generates squares. You can use the value polygon
to create an nb_sides
sided polygon, where you provide the value nb_sides
. To create actual star shapes, you can set the shape type to star
. The stroke
parameter adds an outline of a given color and width around all particles. The JSON code below will create hexagons.
"shape"
: {
"type"
:
"polygon"
,
"stroke"
: {
"width"
: 4,
"color"
:
"#fff"
},
"polygon"
: {
"nb_sides"
: 6
}
}
It is also possible to display images instead of basic shapes. First, you will have to specify the shape type as image
. After that, you can set the image source and its desired height and width. It is worth keeping in mind that width and height will not determine the size of image particles but their aspect ratio. Here is some JSON to create particles with football images:
"shape"
: {
"type"
:
"image"
,
"image"
: {
"src"
:
"img/football.png"
,
// Set image path.
"width"
: 1,
// Width and height don't decide size.
"height"
: 1
// They just decide aspect ratio.
}
}
The library also allows you to mix multiple shapes together. For instance, you may decide to create circles, squares, and hexagons simultaneously. In that case, all you have to do is pass an array with all these shapes.
"type"
: [
"circle"
,
"edge"
,
"polygon"
]
The size property has all the options of the opacity property. You can set the size at random as well as animate the size of individual particles. Take a close look at the following JSON code.
"size"
: {
"value"
: 25,
"random"
:
true
,
"anim"
: {
"enable"
:
true
,
"speed"
: 20,
"size_min"
: 10,
"sync"
:
false
}
}
If you set random
to false
, all particles will be of size 25. When random
is set to true
, size serves as the maximum size limit for particles. Setting sync
to true
inside animation will change the size of all elements simultaneously. You should open the demo and try out different values for the number of polygon sides, animation, and other properties to see how they affect the final result.
Linking Particles Together
When particles are close enough, you can draw connecting lines between them by enabling the line_linked
property.
This property has four additional values. The distance
property specifies the maximum distance up to which lines will be drawn. You can also set the color
as a HEX string. The opacity of the lines varies based on the distance between particles. The value that you specify as opacity
is the opacity of lines when particles are really close together. Finally, width
determines how wide your lines are going to be. Here is the JSON snippet for the accompanying demo.
"line_linked"
: {
"enable"
:
true
,
"distance"
: 200,
"color"
:
"#fff"
,
"opacity"
: 1,
"width"
: 4
}
You can see that the lines disappear as soon as the distance between particles becomes more than 200 px.
Final Thoughts
I have tried to cover everything that you need to know to change the shape, size, color, and almost every other physical property of particles. The examples in this tutorial clearly illustrate how easy it is to use this library. If you ever need a basic particle library, you should definitely give Particles.js a try.
The next tutorial will teach you how to control the motion of particles and their interaction among themselves as well as with you.
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.
Recommend
-
168
wasm-particles Demo This is a visual benchmark, each particle is updated from WebAssembly and then drawn to the screen with WebGL. Normally you would...
-
52
README.md Particle Effects for Buttons Bursting particles effects for buttons. By Luis Manuel.
-
53
README.md ParticlesDrawable Draws random flying particles in space forming constellations. Min API level 9. Contains: ParticlesDrawable, which is an
-
75
react-native-particles Declarative particle system for react native. Works on iOS and Android. It uses Animated api and useNativeDriver:true to archieve 60 FPS particles animation
-
57
Subatomic particles and big data: Google joins CERN openlab 2018...
-
41
README.md React Particles WebGL A 2D/3D particle library built with React, Three.js and WebGL react-particles...
-
7
-
9
SERIESHidden StructureA New Map of All the Particles and ForcesWe’ve created a new way to explore the fundamental constituents o...
-
2
ESP8266 and Plantower Particle Sensor 2019-09-03 @ 08:20 Since forest fires have started to become a norma...
-
5
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 pa...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK