Search…
Params
You can init Kinetics with a set of params to change the behaviour and design of the particles.
Kinetics is WIP, so some parameters might change over time.
Debug
1
"debug": false
Copied!
Spring
1
"spring": {
2
"tension": 8,
3
"friction": 10,
4
"randomTension": 50,
5
"randomFriction": -4,
6
"extendedRestDelay": 10
7
}
Copied!
Canvas
1
"canvas": {
2
"handlePosition": true
3
}
Copied!
Particles
Sides
1
"sides": {"min": 3, "max": 8}
Copied!
Sizes
1
"sizes": {"min": 3, "max": 150}
Copied!
Rotate
1
"rotate": {"speed": .3, "direction": null}
Copied!
Mode
1
"mode": {
2
"type": "linear",
3
"speed": 5,
4
"boundery": "endless"
5
}
Copied!
Parallex
1
"parallex": {
2
"layers": 3,
3
"speed": 0.15
4
}
Copied!
Attract
1
"attract": {
2
"chance": 0.75,
3
"force": 1,
4
"grow": 2,
5
"size": null,
6
"type": "static",
7
"speed": 1.5,
8
"direction": -1,
9
"radius": 1
10
}
Copied!
Fill
1
"fill": {
2
"colors": ["#ffffff"],
3
"toColors": ["#ffffff"],
4
"opacity": 0
5
}
Copied!
Stroke
1
"stroke": {
2
"colors": ["#ffffff"],
3
"toColors": [],
4
"width":[1],
5
"opacity": 1
6
}
Copied!
All Params
A full set of params could look like this.
1
const params = {
2
"debug": false,
3
"spring": {
4
"tension": 8,
5
"friction": 10,
6
"randomTension": 50,
7
"randomFriction": -4,
8
"extendedRestDelay": 10
9
},
10
"canvas": {
11
"handlePosition": true
12
},
13
"particles": {
14
"count": 10,
15
"sides": {"min": 3, "max": 8},
16
"sizes": {"min": 3, "max": 150},
17
"rotate": {"speed": .3, "direction": null},
18
"mode": {
19
"type": "linear",
20
"speed": 5,
21
"boundery": "endless"
22
},
23
"parallex": {
24
"layers": 3,
25
"speed": 0.15
26
},
27
"attract": {
28
"chance": 0.75,
29
"force": 1,
30
"grow": 2,
31
"size": null,
32
"type": "static",
33
"speed": 1.5,
34
"direction": -1,
35
"radius": 1
36
},
37
"fill": {
38
"colors": ["#ffffff"],
39
"toColors": ["#ffffff"],
40
"opacity": 0
41
},
42
"stroke": {
43
"colors": ["#ffffff"],
44
"toColors": [],
45
"width":[1],
46
"opacity": 1
47
}
48
49
}
50
};
Copied!
Last modified 11mo ago