Skip to main content

Shapes

Introduction#

Shapes define the way that particles are rendered in the DOM. They essentially consist of an HTML string, that can be converted to a valid element and attached to a particle.

The library provides various shapes out-of-the-box:

IdentifierElement
square
rectangle
circle
roundedSquare
roundedRectangle
star

These are contained in the lookup party.resolvableShapes, where you can easily add new ones yourself, for example:

party.resolvableShapes["myImage"] = `<img src="myImage.png"/>`;

Shapes are used by the renderer to determine which kind of HTMLElement to spawn for a particular particle. Templates usually expose this to the user in the form of a shapes field. Note that this usually is a variation, in this case of a resolvable string or a HTMLElement, so you can use a constant string or element, an array of either, or a function that returns either.

party.confetti(mouseEvent, {
shapes: ["star", "roundedSquare"],
});
You can use the following objects in your code: party, mouseEvent, codeblock, runButton.