How do I run particle.js json file in hype project?

Using JavaScript with Hype
1

Hi All,

Looking for way to run particle.js json file that I just generated and saved from particle.js website

Thx

2


… and then look for usage :slight_smile:

if you do not want the provided load-method just pasting your jsons contents should be ok too:

particlesJS('particles-js',//element that should contain the particles ...
  
  {
//paste the json here
  }
3

Basic steps:

  1. On the particles.js site, click Download current config (json)
  2. Drag the resulting particlesjs-config.json file into your Hype document’s resources library
  3. On that same site, hit download to get the particles.js master.zip file
  4. Unzip, and drag the particles.min.js file into your Hype document’s resources library
  5. Create a Rectangle element and give it a Unique Element ID of particles-js
  6. Add an On Scene Load handler to Run Javascript… and use this code:
	particlesJS.load('particles-js', '${resourcesFolderName}/particlesjs-config.json', function() {
	  console.log('callback - particles.js config loaded');
	});

Particles.hype.zip (21.6 KB)

4 Likes
4

This Is Great! Thank you both. :+1:

1 Like
5

I've got this set up correctly and working, but I'm trying to change the "image" in the particlesjs-config file and I'm not pulling the image correctly.

I'm using this syntax below. Shouldn't this work?

"src": "${resourcesFolderName}/snow-shape-1.png",

6

It looks correct, though your snippet is too small to really tell.

There's a good chance the problem may be that that image has the default "Automatically optimize when exporting" setting checked in the Resources Library. If so, it might be getting converted to a different filetype/name, in which case a code reference won't work.

If it is already unchecked or unchecking doesn't work, feel free to attach a zip of your .hype document.