How to Make Active Beehive with JavaScript & HTML? | Particles.js
Beehive Background image

How to Make Active Beehive with JavaScript & HTML? | Particles.js

Active Beehive with JS Library. In this lesson you will learn how to create active Beehive with particles.js library. The image links and all the resources will be linked in this post.

We will explain the following:

  • Downloading Particles.js library.
  • Downloading bee and beehive image.
  • Create Custom JavaScript file.
  • Add our custom code.
  • Link HTML file with JavaScript files.

Lesson 04

This is a Video for More about Particles.js Active Beehive:

https://youtu.be/llplHdRpOhs

Downloading Particles.js library:

First of all we need to download Particles.js library from the following link https://github.com/VincentGarreau/particles.js.git. After downloading this package we will need to extract it and copy the “particles.js” file into our coding place.

Downloading bee and beehive image.

We will need to have a bee image which we could get from the following url Bee Image and then we could cut one bee as this image:

Bee image
Bee image

And we could get a background image from this link Background BeeHive or any image we have. Then we will cut the image like this:

beehive background image
beehive background image

Create Custom JavaScript file:

Now it is time for creating the custom JavaScript file. We will create a JS file and name it Custom.js.

Add our custom code:

In this step we will add our custom code and features to the file we have created which is ” custom.js “. The Code will be like this:

The Code:

particlesJS("beehiveID",

{
    "particles": {
        "number": {
            "value": 50
        },
        "shape": {
            "type": "image",
            "image": {
                "src": "bee.png",
                "width": 1,
                "height": 1
            }
        },
        "size": {
            "value": 30,
            "random": true
        },
        "line_linked": {
            "enable": false
        },
        "move": {
            "enable": true,
            "speed": 7,
            "direction": "top-left",
            "straight": false
        }
    },
    "interactivity": {
        "detect_on": "canvas",
        "events": {
            "onhover": {
                "enable": false
            }
        },
        "modes": {
            "push": {
                "particles_nb": 12
            }
        }
    }
}


    );

This code means we have function with name “particlesJS”. This function have tow parameters the first is the id which is “beehiveID” which we should create it in the HTML file. And the second is the array which is holding the values we need to change.

These values are like the following:

Number of particles is 50 pieces

"number": {"value": 50 },

The type is image not shape like previous lessons such as Snow Fall Background so we should add the image path which is src: image path. Then we could control the width and the height of the image.

 "shape": {
            "type": "image",
            "image": {
                "src": "bee.png",
                "width": 1,
                "height": 1
            }
        },

After that we added the size value and the randomness of the particles size to look like they are not near to the screen.

 "size": {
            "value": 30,
            "random": true
        },

Then the particles linked is false means that the water drops will not be like they are linked with each other with lines.

  "line_linked": {
            "enable": false
        },

And then we controlled the movement of bees to be moving with speed equal 7 and the direction of the movement is from top to left. And in the same direction from the bottom right to the top left straight ahead.

 "move": {
            "enable": true,
            "speed": 7,
            "direction": "top-left",
            "straight": false
        }

Finally we canceled the “onhover” event with false value. And the mode of on click is push means add particles when click, and add 12 particles when click “particles_nb”:12.

 "events": {
            "onhover": {
                "enable": false
            }
        },
        "modes": {
            "push": {
                "particles_nb": 12
            }
        }

Link HTML file with JavaScript files:

Now we need to link our JavaScript files with the HTML file with this code:

<body>
<div id="beehiveID"></div>

<script src="particles.js"></script>
<script src="custom.js"></script>
</body>

Notice that we have created the beehiveID there.

Finally the HTML file code is like the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
body{
padding:0;
margin:0;}
    #beehiveID{
	
        background-image: url("background.png");
        background-size: 100% 100%;
    }
</style>
<body>
<div id="beehiveID"></div>
<script src="particles.js"></script>
<script src="custom.js"></script>
</body>
</html>

Your Could Download the code from this button:



Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681

Leave a Reply