README.md

particles.rs

A lightweight wasm + javascript library for creating particles.

This library has been ported from particles.js. particles.rs is simply a learning excercise for me to familiarise myself with wasm and rust. This was not created for any performance reasons. Both packages perform more or less the same.

This project uses the exact same configuration format as the original particles.js

---

Demo / Generator

Configure, export, and share your particles.js configuration on CodePen:
TODO get url

---

Usage

Load particles.rs and configure the particles:

index.html

<div id="particles-rs"></div>

<script src="particles-rs.js"></script>

app.js TODO example loading

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */

particles.json

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "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": 10,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 80,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 300,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 12,
      "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": 800,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 800,
        "size": 80,
        "duration": 2,
        "opacity": 0.8,
        "speed": 3
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

---

Options

key	option type / notes	example
particles.number.value	number	40
particles.number.density.enable	boolean	true / false
particles.number.density.value_area	number	800
particles.color.value	HEX (string) RGB (object) HSL (object) array selection (HEX) random (string)	"#b61924" {r:182, g:25, b:36} {h:356, s:76, l:41} ["#b61924", "#333333", "999999"] "random"
particles.shape.type	string array selection	"circle" "edge" "triangle" "polygon" "star" "image" ["circle", "triangle", "image"]
particles.shape.stroke.width	number	2
particles.shape.stroke.color	HEX (string)	"#222222"
particles.shape.polygon.nb_slides	number	5
particles.shape.image.src	path link svg / png / gif / jpg	"assets/img/yop.svg" "http://mywebsite.com/assets/img/yop.png"
particles.shape.image.width	number (for aspect ratio)	100
particles.shape.image.height	number (for aspect ratio)	100
particles.opacity.value	number (0 to 1)	0.75
particles.opacity.random	boolean	true / false
particles.opacity.anim.enable	boolean	true / false
particles.opacity.anim.speed	number	3
particles.opacity.anim.opacity_min	number (0 to 1)	0.25
particles.opacity.anim.sync	boolean	true / false
particles.size.value	number	20
particles.size.random	boolean	true / false
particles.size.anim.enable	boolean	true / false
particles.size.anim.speed	number	3
particles.size.anim.size_min	number	0.25
particles.size.anim.sync	boolean	true / false
particles.line_linked.enable	boolean	true / false
particles.line_linked.distance	number	150
particles.line_linked.color	HEX (string)	#ffffff
particles.line_linked.opacity	number (0 to 1)	0.5
particles.line_linked.width	number	1.5
particles.move.enable	boolean	true / false
particles.move.speed	number	4
particles.move.direction	string	"none" "top" "top-right" "right" "bottom-right" "bottom" "bottom-left" "left" "top-left"
particles.move.random	boolean	true / false
particles.move.straight	boolean	true / false
particles.move.out_mode	string (out of canvas)	"out" "bounce"
particles.move.bounce	boolean (between particles)	true / false
particles.move.attract.enable	boolean	true / false
particles.move.attract.rotateX	number	3000
particles.move.attract.rotateY	number	1500
interactivity.detect_on	string	"canvas", "window"
interactivity.events.onhover.enable	boolean	true / false
interactivity.events.onhover.mode	string array selection	"grab" "bubble" "repulse" ["grab", "bubble"]
interactivity.events.onclick.enable	boolean	true / false
interactivity.events.onclick.mode	string array selection	"push" "remove" "bubble" "repulse" ["push", "repulse"]
interactivity.events.resize	boolean	true / false
interactivity.events.modes.grab.distance	number	100
interactivity.events.modes.grab.line_linked.opacity	number (0 to 1)	0.75
interactivity.events.modes.bubble.distance	number	100
interactivity.events.modes.bubble.size	number	40
interactivity.events.modes.bubble.duration	number (second)	0.4
interactivity.events.modes.repulse.distance	number	200
interactivity.events.modes.repulse.duration	number (second)	1.2
interactivity.events.modes.push.particles_nb	number	4
interactivity.events.modes.push.particles_nb	number	4
retina_detect	boolean	true / false

---

Packages install

npm

TODO npm package

npm install particles.rs

---