wufe / react-particles-js

Particles.js for React
https://rpj.bembi.dev/
MIT License
1.15k stars 108 forks source link

Line color change doesn't take effect #111

Closed elmaxe closed 4 years ago

elmaxe commented 4 years ago

The color of the lines are always white, no matter what settings I set in the json file. I can change other stuff like particle colors and so on. My friend has the same problem in his react project.

I used create-react-app to create my project.

Running Ubuntu 18.04 LTS

"parameters" json:

export default {
    "particles": {
      "number": {
        "value": 80,
        "density": {
          "enable": true,
          "value_area": 800
        },
      },
      "color": {
        "value": "#ffd700"
      },
      "shape": {
        "type": "circle",
        "stroke": {
          "width": 0,
          "color": "#000000"
        },
        "polygon": {
          "nb_sides": 5
        },
        "image": {
          "src": "img/github.svg",
          "width": 100,
          "height": 100
        }
      },
      "opacity": {
        "value": 0.5,
        "random": false,
        "anim": {
          "enable": false,
          "speed": 1,
          "opacity_min": 0.1,
          "sync": false
        }
      },
      "size": {
        "value": 3,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 40,
          "size_min": 0.1,
          "sync": false
        }
      },
      "line_linked": {
        "enable": true,
        "distance": 150,
        "color": "#000000",
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 1,
        "direction": "none",
        "random": false,
        "straight": false,
        "out_mode": "out",
        "bounce": false,
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 1200
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": false,
          "mode": "repulse"
        },
        "onclick": {
          "enable": true,
          "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
        }
      }
    },
    "retina_detect": true
  }
matteobruni commented 4 years ago

Ok I'll check this asap

matteobruni commented 4 years ago

I opened a bug for this, for fixing this you can use the config like this:

"line_linked": {
      "enable": true,
      "distance": 150,
      "color": {
        "value": "#000000"
      },
      "opacity": 0.4,
      "width": 1
    },

There's a bug in loading older option properties

matteobruni commented 4 years ago

The 1.12.7 version of tsParticles will fix that, it'll be released soon. The PR is here: https://github.com/matteobruni/tsparticles/pull/218

elmaxe commented 4 years ago

Nice! Thank you! 💯

wufe commented 4 years ago

Fixed in v3.0.3