Rails: How do I install particles.js?

Question

I want to implement this on my app but I have no clue how I could install this? Can you post a step by step so that I may understand what files to put where as I've tried to follow the instructions on the github page and got not success.

http://vincentgarreau.com/particles.js/#default

index.html --> I put code it in views/layouts/application.html

<div id="particles-js"></div>

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

---

app.js --> I put it in assets/javascript/application.js

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
});

---

particles.json --> I put it in assets/javascript/application.js

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 10,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 80,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 300,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 12,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 800,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 800,
        "size": 80,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

Answer 1

I couldn't set this with the gem, but i made it work with the next steps:

1. Download the Particle.js file, this will give you the JS file and also, the json file which, will be better if you save inside the public folder or better, if you store it inside an a service as Amazon S3. So, the first step, is store a copy to the particles.js file inside the vendor folder.

       your_project/vendor/assets/javascripts/particles.js 
   

2. After that, you need to modify the assets.rb file, which is store inside the config/initializers/ folder.

     your_project/config/initializers/assets.rb
     
       Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'javascripts') 
       Rails.application.config.assets.precompile += %w( .js .es6 )
     
   

3. Insert the JSON file inside the public folder or if you can, it's better store it as i told you, in an Amazon S3 service. This will give you a route that will work for us.

4. Go to the main folder and inside the application javascript assets, open the application.js file and insert the next changes. This probably can be different in regard to your configuration:

     //= require jquery
     //= require jquery_ujs
     //= require tether
     //= require bootstrap-sprockets
     //= require turbolinks
     //= require particles
   

Remember that you don't need to point to the vendor folder when you are using assets on it because we tell to Rails, inside the assets.rb file we will also upload some file to this folder.

5. Now, put the running code inside your main layout. I did it inside my footer.html.erb file, you can paste it wherever you want.

     <script type="text/javascript">
       particlesJS.load('particles-js', 'https://s3-##-west-#.amazonaws.com/your_project/particles.json', function() {
       console.log('callback - particles.js config loaded');
    });
     </script>
   

Change the second parameter for which you will use to store the JSON file, and we are almost ready. And also remember, you have to fill it with the configurations you want to display in screen

6. Add the id to the element you want to display, for example:

     <div class="jumbotron jumbotron-fluid" id="particles-js">
   

And everything its ready.

Remember run the command in terminal:

      rails assets:precompile #in development environment if you want to test it. 
    

And run the:

      RAILS_ENV=production rails assets:precompile #if you want to run as a production environment.
    

Answer 2

You need to copy the particles.js file you downloaded into app/assets/javascripts and make sure you have something like require_tree . in your application.js.

You can then safely remove <script src="particles.js"></script> from your layout as the script will be loaded by the asset pipeline.