4

Please, I need help...

I have to create a particles JS canvas. It's not really difficult but I have to change the background color between each lines like this :

EXAMPLE enter image description here

I browsed all setting provide by particles JS but nothing did something like I need... If Someone could help me and provide me some code, that will be really kind.

Thank's you very much

Kévin HURON
  • 60
  • 1
  • 10

3 Answers3

3

Kevin, i've found the solution. You can specify the color using 'color' attribute from 'particles' param. Here's an example from my applicaiton. (I'm using angular with typescript):

 <particles [style]="style" [width]="width" [height]="height" [params]="params"></particles>

On the view side specify params and then add actual params object inside the component. In my case it's:

this.params = {
      particles: {
        number: {
          value: 100,
        },
        color: {
          value: ['#858585']
        },
        line_linked: {
          color: '#f44242',
          opacity: 1
        }
      }
    };

So you'll have particles of color: #858585 And all of your connections between nodes will be colored in: #f44242

Hope it helps! =)

the_kaba
  • 1,457
  • 2
  • 14
  • 31
2

I don't know exactly how you can create this effect with particleJS but you can try Trianglify.js which pretty much creates the same effect you want. You can look up tessellation effect with js and you might find some effects similar to this. If you want some code I pulled this off the quickstart code from Trianglify.js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script>
<script>
var pattern = Trianglify({
    width: window.innerWidth,
    height: window.innerHeight
});
document.body.appendChild(pattern.canvas())

Cap Lee
  • 43
  • 2
  • 10
1

You can add a custom css file with the following and it should work.

#particles-js {
  background-color: #f5f5f5;
}
Dhiresh Jain
  • 464
  • 5
  • 15