Jelly.js

A library to draw and animate "jelly" shapes in a canvas element. It's inspired in this pen by Thom Chiovoloni, inspired as well in the game The Floor is Jelly.

DEMO 1 - Simple example

DEMO 2 - Jelly slider

TUTORIAL 1 - Simple example

TUTORIAL 2 - Jelly slider

Install

You can install it using npm or just downloading it manually.

NPM

npm install jelly.js

Basic usage

1. Include jelly.js or jelly.min.js somewhere in HTML.

<script src="js/jelly.js"></script>

2. Add the SVG paths you'd like to draw, and a canvas to draw them.

<!-- Circle path -->
<svg class="jelly-circle-svg" width="1000" height="600" style="display: none">
    <path d="m500 250c27.614 0 50 22.386 50 50s-22.386 50-50 50-50-22.386-50-50 22.386-50 50-50z"/>
    <!-- You can have multiple paths -->
</svg>

<!-- Canvas to draw the shape -->
<!-- Note that the `svg` and `canvas` elements have the same dimensions -->
<canvas class="jelly-circle-canvas" width="1000" height="600"></canvas>

3. Initialize it in JavaScript.

// The `Jelly` constructor receive a `canvas` element (or `string` selector) and an array of objects as `options` (see details below).
// You need to pass as many options as shapes you want to draw in the `canvas`
// This time we are providing an array with a single element, as we want to draw a single shape
var myJellyCircle = new Jelly('.jelly-circle-canvas', [{paths: '.jelly-circle-svg path'}]);

Options

Here is the complete list of options you can provide to customize the jelly shapes as needed:

| Name | Type | Default | Description | |-------------------------|-------------------------|----------------------------------------------------------------------|-------------| |paths | Element or String | undefined | Path elements (or selector) to draw the shapes. This options is required. | |svg | String | undefined | URL to an .svg file containing the paths. You can also insert the SVG code directly in the HTML. | |pointsNumber | Integer | 10 | Number of points to use to draw the shapes. | |maxDistance | Float | 70 | Max distance (in pixels) among points to start pulling. | |mouseIncidence | Float | 40 | Incidence of the mouse. More incidence means more reaction, and it increases proportionately to mouse speed. | |maxIncidence | Float | 40 | Max incidence of the mouse. No matter the speed, incidence will never be greater than this value. | |color | String | '#666' | Solid color to fill the shape. | |border | String | undefined | Solid color to draw a border around the shape. | |borderWidth | Int | 4 | Width for border around the shape. | |image | String | undefined | Image URL to fill the shape. | |imageCentroid | Boolean | true | If true, the image will be moved accordingly to the centroid point. | |centroid | Element or String | undefined | Element (or selector) to move accordingly to the centroid point. | |debug | Boolean | false | Set it true to see the points. | |intensity | Float | 0.95 | Jelly effect intensity. Should be a value < 1. | |fastness | Float | 1 / 40 | Jelly effect fastness. Should be a value near zero. |

Available functions to animate the jelly shapes

| Name | Default options | Description | |-------------------------|--------------------------------------------------------|-------------| |hide | {i: 0, maxDelay: 0, animate: true} | Hide the shape selected by the index (i). If animate is true, all the points of the shape will be animated, with a random delay <= maxDelay. | |show | {i: 0, maxDelay: 0, animate: true} | Show the shape selected by the index (i). If animate is true, all the points of the shape will be animated, with a random delay <= maxDelay. To show a shape, it should have been hidden previously. | |morph | {i: 0, maxDelay: 0, animate: true} | Morph the shape selected by the index (i) to another shape. You need to pass a new paths option (at least) with the same pointsNumber. If animate is true, all the points of the shape will be animated, with a random delay <= maxDelay. | |shake | {i: 0, x: 0, y: 0} | Shake the shape selected by the index (i), moving the points (alternately) the distance defined by x and y.