Convert Image Into Interactive Particles – particle-image

particle-image is a JavaScript library for converting images into customizable particles that interact with mouse and touch events.

How to use it:

1. Download and load the minified version of the particle-image library in the document.

<script src="particle-image.min.js"></script>

2. Specify the image path and override the default parameters for the particles as follows:

// params.json
{
  "particles": {
    "density": 200,
    "color": "#fff",
    "size": {
      "value": 1,
      "random": false
    },
    "movement": {
      "speed": 1,
      "restless": {
        "enabled": false,
        "value": 10
      }
    },
    "interactivity": {
      "on_hover": {
        "enabled": true,
        "action": "repulse"
      },
      "on_click": {
        "enabled": false,
        "action": "big_repulse"
      },
      "on_touch": {
        "enabled": true,
        "action": "repulse"
      }
    }
  },
  "image": {
    "src": {
      "path": "./image.png", // your image here
      "is_external": true
    },
    "size": {
      "canvas_pct": 60,
      "min_px": 150,
      "max_px": 800
    }
  },
  "interactions": {
    "repulse": {
      "distance": 100,
      "strength": 200
    },
    "big_repulse": {
      "distance": 100,
      "strength": 500
    },
    "grab": {
      "distance": 100,
      "line_width": 1
    }
  },
  "disabled": false
}

3. Assign a unique ID to the particle-image container and specify the path to the params.json. That’s it.

<div id="particle-image" data-params-src="./params.json"></div>

4. All default parameters.

• density: density of the comprising the image
• color: color of the comprising the image
• size.value: size of each particle (expressed as its radius)
• size.random: if true, are randomly drawn with radii between 50% and 100% of size.value
• movement.speed: movement speed of the are randomly assigned initial x- and y-velocities between -0.5 and 0.5 times this value
• movement.restless.enabled: if true, will randomly “jitter” when undisturbed after reaching their destination
• movement.restless.value: maximum distance (in pixels) restless will move from their assigned location
• interactivity.on_hover.enabled: if true, will respond to mouse hovering with the given action
• interactivity.on_hover.action: string: {“repulse”, “big_repulse”, “grab”} the reaction in response to mouse hovering
• interactivity.on_click.enabled: if true, will respond to mouse presses with the given action
• interactivity.on_click.action: string: {“repulse”, “big_repulse”, “grab”} the reaction in response to mouse presses
• interactivity.on_touch.enabled: if true, will respond to screen touches (on mobile) with the given action
• interactivity.on_touch.action: {“repulse”, “big_repulse”, “grab”} the reaction in response to screen touches
• image.src.path: path or URL to the image to be “particlized” (may be local or external)
• image.src.is_external: set to true when loading an external image to set the image object’s crossorigin attribute to “anonymous”
• image.size.canvas_pct: percentage of the smallest canvas dimension (height or width) that the image will fill
• image.size.max_px: maximum size of the image (overrides canvas_pct for very large canvases), in pixels
• image.size.min_px: minimum size of the image (overrides canvas_pct for very small canvases), in pixels
• interactions.repulse.distance: maximum distance for the repulsion interaction
• interactions.repulse.strength : “force” of the repulsion interaction
• interactions.big_repulse.distance: maximum distance for the “big repulsion” interaction
• interactions.big_repulse.strength: “force” of the “big repulsion” interaction
• interactions.grab.distance: maximum distance for the “grab” interaction
• interactions.grab.line_width: with of lines formed by the “grab” interaction. Constrained to be at most the particle’s diameter
• disabled: if true, don’t create the particle animation. Useful when debugging locally

this.pImageConfig = {
  particles: {
    array: [],
    density: 100,
    color: '#fff',
    size: {
      value: 2,
      random: false,
    },
    movement: {
      speed: 1,
      restless: {
        enabled: false,
        value: 10,
      }
    },
    interactivity: {
      on_hover: {
        enabled: true,
        action: 'repulse'
      },
      on_click: {
        enabled: false,
        action: 'big_repulse'
      },
      on_touch: {
        enabled: true,
        action: 'repulse'
      },
      fn_array: []
    }
  },
  image: {
    src: {
      path: null,
      is_external: false
    },
    size: {
      canvas_pct: 60,
      min_px: 50,
      max_px: 800
    }
  },
  interactions: {
    repulse: {
      distance: 100,
      strength: 200
    },
    big_repulse: {
      distance: 100,
      strength: 500
    },
    grab: {
      distance: 100,
      line_width: 1,
    }
  },
  canvas: {
    el: canvas_el,
    w: canvas_el.offsetWidth,
    h: canvas_el.offsetHeight
  },
  functions: {
    particles: {},
    image: {},
    canvas: {},
    interactivity: {},
    utils: {}
  },
  mouse: {
    x: null,
    y: null,
    click_x: null,
    click_y: null
  },
};