Изображения как узлы на эффекте сети частиц на основе javascript?

Question

Я пытаюсь создать сеть частиц на основе javascript с моими 20 круговыми изображениями в качестве своих 20 разных узлов.

Я пробовал использовать различные доступные библиотеки и модифицировать их в процессе, но пока не добился успеха - http://vincentgarreau.com/particles.js/ Эта библиотека является ближайшей, которую я могу найти и подходит для настройки моего решения.

Любые указатели наверняка помогут.

Спасибо!

Answer 1

См. Ниже отредактированный файл particle.js для моей реализации.

particlesJS('particles-js', 
    { 
    "particles": { 
    "number": { 
     "value": 80, 
     "density": { 
     "enable": true, 
     "value_area": 800 
     } 
    }, 
    "color": { 
     "value": "#90a3ad" 
    }, 
    "shape": { 
     "type": ["image", "image2", "image3", "image4", "image5", "image6", "image7", "image8", "image9", "image10", "image11", "image12"], 
     "stroke": { 
     "width": 7, 
     "color": "#094d8d" 
     }, 
     "polygon": { 
     "nb_sides": 5 
     }, 
     "image": { 
     "src": "./img/4.png", 
     "width": 270, 
     "height": 270 
     } 
    }, 
    "size": { 
     "value": 30, 
     "random": true, 
     "anim": { 
     "enable": false, 
     "speed": 40, 
     "size_min": 25, 
     "sync": true 
     } 
    }, 
    "line_linked": { 
     "enable": true, 
     "distance": 170, 
     "color": "#90a3ad", 
     "width": 3 
    }, 
    "move": { 
     "enable": true, 
     "speed": 4.810236182596568, 
     "direction": "none", 
     "random": true, 
     "straight": false, 
     "out_mode": "bounce", 
     "bounce": false, 
     "attract": { 
     "enable": true, 
     "rotateX": 3768.0183430339785, 
     "rotateY": 3768.0183430339785 
     } 
    } 
    }, 
    "interactivity": { 
    "detect_on": "canvas", 
    "events": { 
     "onhover": { 
     "enable": false, 
     "mode": "repulse" 
     }, 
     "onclick": { 
     "enable": false, 
     "mode": "push" 
     }, 
     "resize": true 
    }, 
    "modes": { 
     "grab": { 
     "distance": 400, 
     "line_linked": { 
      "opacity": 1 
     } 
     }, 
     "bubble": { 
     "distance": 400, 
     "size": 40, 
     "duration": 2, 
     "opacity": 8, 
     "speed": 3 
     }, 
     "repulse": { 
     "distance": 200, 
     "duration": 0.4 
     }, 
     "push": { 
     "particles_nb": 4 
     }, 
     "remove": { 
     "particles_nb": 2 
     } 
    } 
    } 
    } 
);