Made curve a dancer in HTML5 canvas.
- Loading
- Rope
- Siri-Wave
- Water
- Sprout
- Scale-To
- Points-To
- Rotate
- Word
- Perlin-Noise
- Simple
- Simple-ES5
- Lerp Color
- Curves
- Line
- Close
$ npm install curvejsimport 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()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 })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] }) }The group id is 179181560. Welcome to join the group.
Copyright (c) 2017-present, dntzhang & AlloyTeam