JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
asset change order May 14, 2017
dist build 0.3.3 Apr 28, 2017
example loading demo Jun 12, 2017
pg curvejs 0.3.2 - support scaleTo method Apr 25, 2017
src Merge pull request #2 from pspgbhu/master Jun 1, 2017
tutorial update tutorial May 8, 2017
.babelrc curvejs Apr 17, 2017
.gitignore curvejs Apr 17, 2017
README-CN.md loading demo Jun 12, 2017
README.md Update README.md Jul 12, 2018
index.html update readme Apr 21, 2017
package.json Update package.json Mar 25, 2018
rollup.config.js curvejs Apr 17, 2017

README.md

curvejs

Made curve a dancer in HTML5 canvas.


中文README

Demos

Usage

$ npm install curvejs
import curvejs from 'curvejs'

Or get it by the cdn and link curve.min.js in your HTML:

<script src="https://unpkg.com/curvejs@0.3.3/dist/curve.min.js"></script>

Then start to dance:

var Stage = curvejs.Stage,
    Curve = curvejs.Curve,
    canvas = document.getElementById('myCanvas'),
    stage = new Stage(canvas),
    rd = function() {
        return -2 + Math.random() * 2
    }

var curve = new Curve({
    color: '#00FF00',
    points: [277, 327, 230, 314, 236, 326, 257, 326],
    data: [rd(), rd(), rd(), rd(), rd(), rd(), rd(), rd()],
    motion: function motion(points, data) {
      points.forEach(function (item, index) {
          points[index] += data[index]
      })
    }
})

stage.add(curve)

function tick(){
    stage.update()
    requestAnimationFrame(tick)
}

tick()

Using built-in motion

var curve = new Curve({
    points: [277, 327, 230, 314, 236, 326, 257, 326],
    data: {angle: 0, r:5 ,step:Math.PI / 50 },
    motion: curvejs.motion.dance
})

Submit your motion

In this motion directory, there are already some built-in motion. you can submit your motion and then create a pull request to the project.

Format and specification of your motion:

/**
 * move motion.
 *
 * @param {points}
 * @param {data}
 *      data rule example:
 *      [1, 0.2, -3, 0.7, 0.5, 0.3, -1, 1]
 */
export default function (points, data) {
    points.forEach(function (item, index) {
        points[index] += data[index]
    })
}

QQ Group

The group id is 179181560. Welcome to join the group.

License

MIT

Copyright (c) 2017-present, dntzhang & AlloyTeam