Images en tant que nœuds sur un effet de réseau de particules basé sur javascript?

Question

J'essaie de créer un réseau de particules basé sur javascript avec mes 20 images circulaires comme 20 nœuds différents.

J'ai essayé d'utiliser diverses librairies disponibles et de les modifier dans le processus mais je n'ai pas encore réussi - http://vincentgarreau.com/particles.js/ Cette librairie est la plus proche que j'ai pu trouver et je suis arrivé à personnaliser ma solution.

Tout pointeur serait certainement utile.

Merci!

Answer 1

Veuillez lire ci-dessous le fichier particle.js édité pour mon implémentation.

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 
     } 
    } 
    } 
    } 
);