Name: curvejs
Owner: ?? AlloyTeam
Description: Made curve a dancer in HTML5 canvas - ????
Created: 2017-04-17 01:24:18.0
Updated: 2018-05-22 07:24:18.0
Pushed: 2018-03-25 02:56:10.0
Homepage: https://alloyteam.github.io/curvejs/
Size: 579
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
?
Made curve a dancer in HTML5 canvas.
m install curvejs
avascript
rt curvejs from 'curvejs'
Or get it by the cdn and link curve.min.js in your HTML:
ipt src="https://unpkg.com/curvejs@0.3.3/dist/curve.min.js"></script>
Then start to dance:
Stage = curvejs.Stage,
Curve = curvejs.Curve,
canvas = document.getElementById('myCanvas'),
stage = new Stage(canvas),
rd = function() {
return -2 + Math.random() * 2
}
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]
})
}
e.add(curve)
tion tick(){
stage.update()
requestAnimationFrame(tick)
()
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:
ove motion.
param {points}
param {data}
data rule example:
[1, 0.2, -3, 0.7, 0.5, 0.3, -1, 1]
rt 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