Amirali Amirifar Amirali Amirifar - 5 months ago 15
HTML Question

How to make this Gorgeous canvas

I was viewing this website and something in it's slider caught my attention.
It's some dots moving around the canvas and if you move your mouse on them they connect together with lines and its awesome.

Do you know whats the plugin or how to make something like that? [Because I saw something like this on another website]

Its the image I captured from http://hostiran.net/

I Captured this image from http://hostiran.net/. I will appreciate you for your help.

Answer

The idea of this canvas is to plot some random particles that float around the screen, and whenever they intercept a certain radiance, they get connected with each other. This code is to give you an idea on how the particles are drawn:

function() {
  var pos = [round(this.position[0]), round(this.position[1])]
    , connections = 0;
  context.globalAlpha = 0.1;
  for (var i = 0; i < maxPoolSize; i++) {
    var boid = pool[i]
      , distance = this.distanceTo(boid)
      , opacity = 1-( distance/distanceThreshold )
    ;
    if(distance <= distanceThreshold) {
      connections++;
      if(!this.isConnectedTo( boid )){
        this.connectTo(boid);
        context.beginPath();
        context.moveTo( pos[0], pos[1]);
        context.lineTo(round( boid.position[0] ), round( boid.position[1] ));
        context.stroke();
      }
    }
  };
  context.globalAlpha = 0.5;

You can use a library called particles.js or else look for some examples on codepen, like the following one.

I hope that my answer helps you.