Lowering CPU consumption of animated particles inside the canvas

Question

I'm using this library zepto.min.js to add some particles over a canvas.

Here is the result on Codepen:

https://codepen.io/pixy-dixy/pen/JjGXQOo?editors=1111

I wonder if there is an option to:

• control the number of particles inside the page
• slow down the movements of the particles (velocity seems to not work properly here)

I want these especially for lowering CPU consumption. Any recommendations will be greatly appreciated.

Here is the code:

(function ($, window) {
 var $window = $(window);

 function Constellation (canvas, options) {
  var $canvas = $(canvas),
   context = canvas.getContext('2d'),
   defaults = {
    star: {
     color: 'rgba(255, 255, 255, .5)',
     width: 1,
     randomWidth: true
    },
    position: {
     x: 0,
     y: 0
    },
    width: window.innerWidth,
    height: window.innerHeight,
    velocity: 0.1,
    length: 100,
    distance: 120,
    radius: 150,
    stars: []
   },
   config = $.extend(true, {}, defaults, options);

  function Star () {
   this.x = Math.random() * canvas.width;
   this.y = Math.random() * canvas.height;

   this.vx = (config.velocity - (Math.random() * 0.5));
   this.vy = (config.velocity - (Math.random() * 0.5));

   this.radius = config.star.randomWidth ? (Math.random() * config.star.width) : config.star.width;
  }

  Star.prototype = {
   create: function(){
    context.beginPath();
    context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    context.fill();
   },

   animate: function(){
    var i;
    for (i = 0; i < config.length; i++) {

     var star = config.stars[i];

     if (star.y < 0 || star.y > canvas.height) {
      star.vx = star.vx;
      star.vy = - star.vy;
     } else if (star.x < 0 || star.x > canvas.width) {
      star.vx = - star.vx;
      star.vy = star.vy;
     }

     star.x += star.vx;
     star.y += star.vy;
    }
   },


  };

  this.createStars = function () {
   var length = config.length,
    star,
    i;

   context.clearRect(0, 0, canvas.width, canvas.height);

   for (i = 0; i < length; i++) {
    config.stars.push(new Star());
    star = config.stars[i];

    star.create();
   }


   star.animate();
  };

  this.setCanvas = function () {
   canvas.width = config.width;
   canvas.height = config.height;
  };

  this.setContext = function () {
   context.fillStyle = config.star.color;
   context.strokeStyle = config.line.color;
   context.lineWidth = config.line.width;
  };

  this.setInitialPosition = function () {
   if (!options || !options.hasOwnProperty('position')) {
    config.position = {
     x: canvas.width * 0.5,
     y: canvas.height * 0.5
    };
   }
  };

  this.loop = function (callback) {
   callback();

   this.rAF = window.requestAnimationFrame(function () {
 
    this.loop(callback);
  
   }.bind(this));
  };

  this.handlers = {
   window: {
    mousemove: function(e){
     config.position.x = e.pageX - $canvas.offset().left;
     config.position.y = e.pageY - $canvas.offset().top;
    },
    resize: function () {
     window.cancelAnimationFrame(this.rAF);
    }
   }
  };

  this.bind = function () {
   $window
  
    .on('resize', this.handlers.window.resize.bind(this));
  };

  this.unbind = function () {
   $window
   
    .off('resize', this.handlers.window.resize);
  }

  this.init = function () {
   this.setCanvas();
   this.setContext();
   this.setInitialPosition();
   this.loop(this.createStars);
   this.bind();
  };
 }

 function instantiate(element, options) {
  var c = new Constellation(element, options);
  c.init();
 }

 $.fn.constellation = function (options) {
  return this.each(function () {
   $window.on('resize', () => {
    instantiate(this, options);
   });

   instantiate(this, options);
  });
 };
})($, window);

// Init plugin
$('.constellation').constellation({
 star: {
  width: 1
 },
 line: {
  color: 'rgba(255, 255, 255, .5)'
 },
 length: (window.innerWidth / 6),
 radius: (window.innerWidth / 5)
});

body {
  overflow: hidden;
  background: #111;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
  <canvas class="constellation" data-radius="10" width="1000" height="500"></canvas>