Documentation for custom image emittion

[ANF-Studios]

I found out that party.js could emit custom images and data, however, I didn't find much from the documentation. Documenting it (including examples) would do a lot.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jwbats]

I agree that more and better examples would be useful. I've tried to add a golden coin emitter myself, using the existing documentation, but I couldn't hack it in less than 5 minutes, which means I had to pass on the idea.

The 'hearts' demo defines a heartShape svg on the page, and it creates an emitter.

It uses the following line to define its source:

sourceSampler: party.sources.dynamicSource(runButton),

This sets the effect to be fired on clicking CodeMirror's (your inline code editor / runner) run button. But it does not become clear how a hearts() function can added to the party lib, so you can pass in your own source element, so it can be called like:

party.hearts(sourceElement, {
	count: party.variation.range(1000, 1000),
});

An example of this would be greatly appreciated.

[jwbats]

Also, deleting the above 'sourceSampler' line from the hearts script, makes it run immediately on page load, without the user having taken any action whatsoever.

Why would it do that when you're merely creating an emitter, but not explicitly calling it anywhere?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[titusdecali]

It would be really nice just to pass a local svg (or png for that matter) path to it and have it do the rest. I currently see support for passing a simplistic svg "d" path, but the documentation is sparse on details for more advanced shapes, or whether svg images from local folder can be used. Otherwise, very interesting library.

[KiwiKilian]

Here is a quickly hacked example for using confetti with probably any kind of node:

const cookie = document.createElement('span');
cookie.innerText = '🍪';
cookie.style.fontSize = '24px';

document.querySelector('.js-cookies').addEventListener('click', function (e) {
  party.confetti(this, {
    count: party.variation.range(20, 40),
    shapes: cookie,
  });
});

In your HTML:

<button class="js-cookies">Give 🍪</button>

[yiliansource]

@titusdecali I'll have to improve the documentation on this. You can emit more advanced shapes like @KiwiKilian showed above, since shapes is a variation on a string or HTMLElement. Either query your SVG through the DOM and specify it, or create it on the fly (you could even make a factory method and pass it to the shapes field, see https://party.js.org/docs/ref/variations for more info on variations.

Do note that complex SVGs may cause a performance hit, and coloring support may not be great.