lmgonzalves / jelly Goto Github PK

Drawing and Animating Jelly Shapes with Canvas

License: MIT License

CSS 8.70% JavaScript 85.75% HTML 5.54%

jelly's Introduction

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 `path`s 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`.

jelly's People

Contributors

Stargazers

Watchers

jelly's Issues

Cannot preventDefault() onDragStart with react-alice-carousel

My component is use as an item in a react-alice-carousel. When dragging my carousel, I'm trying to prevent Link to be clicked. It seems that using Jelly makes onDragStart event not fired or fired when dragging very quickly. Using a canvas with stroke() makes onDragStart event fired no matter what

import React from 'react';
import Tilt from 'react-tilt';
import { Link } from 'react-router-dom';
import Jelly from 'jelly.js';
import { canvasOptions } from '../../../utils/utils';

class NightySvg extends React.Component {
  componentDidMount() {
    new Jelly(this.canvas.current, canvasOptions('#nightyPath'));
    // const ctx = this.canvas.current.getContext("2d");
    // ctx.beginPath();
    // ctx.moveTo(20,20);
    // ctx.lineTo(20,100);
    // ctx.lineTo(70,100);
    // ctx.stroke();
  }

  canvas = React.createRef();

  handleDrag(e) {
    e.preventDefault();
  }

  render() {
    return (
      <div onDragStart={this.handleDrag}>
        <svg width="289px" height="306px" version="1.1" xmlns="http://www.w3.org/2000/svg" display="none">
          <path id="nightyPath" d="M90.652..." />
        </svg>
        <Link className="menuNav-item" to="/nighty">
          <Tilt className="Tilt" options={{ max: 25 }}>
            <div className="tiltContent">
              <div>
                <span className="menuNumber">01</span>
                <div>nighty</div>
                <canvas draggable="true" ref={this.canvas}
                className="nightyCanvas Tilt-inner" width="289px" height="306px" />
              </div>
            </div>
          </Tilt>
        </Link>
      </div>
    );
  }
}

export default NightySvg;

Increase mouse detection size

Hi there,

Do you think it would be possible to detect a wider radius of mouse movement? At the moment, i often find that my mouse goes between the points and no animation occurs. I've tried combatting this with adding more points, but that seems to have odd results.

Any ideas if this is possible?

Jelly doesn't respond to window size

If a jelly is rendered at a desktop size and the window is scaled down, the canvas scales down okay with CSS, but if the page is reloaded, it seems to ignore it's bounding container and renders it at full size.

Larger screen:

Smaller screen:

This is my SVG code:

<svg width="2622px" height="640px" viewBox="0 0 2622 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none">
            <path d="M2024.35398,639.019917 L2024.35398,639.033416 C1680.6382,639.726285 1508.97788,639.352862 1509.37302,637.913146 C1404.97615,646.944218 1301.86397,600.073111 1216.24958,544.142572 C1195.09767,530.324423 1177.14613,512.71603 1155.35897,499.691946 C1122.14862,479.840319 1086.50928,463.245778 1049.52286,451.964382 C1006.83903,438.944552 962.110479,428.145267 917.396109,426.61102 C878.759173,425.285215 841.802535,431.956779 803.61226,436.345406 C740.723727,443.56998 665.167019,452.684713 607.129372,421.204288 C560.238413,395.770101 532.222097,345.901398 490.951984,312.09975 C405.645293,242.227698 291.148203,272.831816 191.169742,250.822034 C163.55613,244.741765 134.225352,232.619511 115.457058,210.59555 C99.1971579,191.513883 98.9532665,161.827194 74.0182061,149.875097 C54.9819146,140.751857 30.4297069,146.595325 13.967037,132.309244 C4.72185108,124.284933 4.62968281,113.896861 0,104.334049 L0,0.351165471 L1980,0.351165471 L1980,0 L2622,0 L2622,639.019917 L2024.35398,639.019917 Z" id="WAVE" fill="#DAF4EE"></path>
    </svg>

Is there any way it can get the size of it's bounding container and resize the contents inside the <canvas> accordingly? I feel like the fix is easy but I could be wrong. Thanks!

Hello, friend. Give me an answer, please. How can I make an animation with window load?

es6 import use

I'm trying to utilize the plugin by

import $ from 'jquery';
import 'Jelly';

$(function(){
     var options = {
        paths: '#circle-path',     // Shape we want to draw
        pointsNumber: 25,            // Number of points
        maxDistance: 4,             // Max distance among points
        color: '#ff0019',
        opacity: 0.27,
        // centroid: '.centroid-text'   // Element to move accordingly with the centroid of the shape
        // debug: true               // Uncomment this to see the points
     };

    var jelly =Jelly('.jelly-canvas', options);

});

but i get this error instead

Uncaught ReferenceError: Jelly is not defined

any help, ideas please?

Image Resizing/Repositioning within the options variable

Hi @lmgonzalves,

Thankyou for creating this library, we've been looking for something like this and its amazing.

I'm relatively new to learning how canvas works and was just wondering about whether jelly.js supports image resizing or am I missing something. I've created a codepen showing the kind of thing I've been doing, but as you can see the images are larger than the clipped area. https://codepen.io/ben-holness/pen/RwWrdxN?editors=0100

Is image resizing/repositioning functionality built into the library or should I be using the canvas or call other Javascript methods to accomplish this?

How to clip a div element instead of an image?

Hi,
Is there a way to clip a <div> element instead of image?