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

Read more about modes here
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 4mo ago