Как сделать это Великолепный холст

Question

Я просматривал этот сайт, и что-то в нем слайдер привлек мое внимание. Это несколько точек, движущихся вокруг холста, и, если вы двигаете мышью на них, они соединяются вместе с линиями и его удивительным.

Знаете ли вы, что плагин или как сделать что-то подобное? [Потому что я увидел что-то вроде этого на другом сайте]

Я Захваченные это изображение от http://hostiran.net/. Буду признателен вам за вашу помощь.

Answer 1

Идея этого canvas состоит в том, чтобы нарисовать некоторые случайные частицы, которые плавают вокруг экрана, и всякий раз, когда они перехватывают определенное сияние, они соединяются друг с другом. Этот код, чтобы дать вам представление о том, как частицы втягиваются:

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; 

Вы можете использовать библиотеку под названием particles.js либо искать какие-то примеры на codepen, как показано на следующем one.

Надеюсь, что мой ответ вам поможет.