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.
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. |