자바 스크립트 기반 입자 네트워크 효과에 노드로 이미지?

Question

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