Search…
⌃K

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

"debug": false

Spring

"spring": {
"tension": 8,
"friction": 10,
"randomTension": 50,
"randomFriction": -4,
"extendedRestDelay": 10
}

Canvas

"canvas": {
"handlePosition": true
}

Particles

Sides

"sides": {"min": 3, "max": 8}

Sizes

"sizes": {"min": 3, "max": 150}

Rotate

"rotate": {"speed": .3, "direction": null}

Mode

Read more about modes here
"mode": {
"type": "linear",
"speed": 5,
"boundery": "endless"
}

Parallex

"parallex": {
"layers": 3,
"speed": 0.15
}

Attract

"attract": {
"chance": 0.75,
"force": 1,
"grow": 2,
"size": null,
"type": "static",
"speed": 1.5,
"direction": -1,
"radius": 1
}

Fill

"fill": {
"colors": ["#ffffff"],
"toColors": ["#ffffff"],
"opacity": 0
}

Stroke

"stroke": {
"colors": ["#ffffff"],
"toColors": [],
"width":[1],
"opacity": 1
}

All Params

A full set of params could look like this.
const params = {
"debug": false,
"spring": {
"tension": 8,
"friction": 10,
"randomTension": 50,
"randomFriction": -4,
"extendedRestDelay": 10
},
"canvas": {
"handlePosition": true
},
"particles": {
"count": 10,
"sides": {"min": 3, "max": 8},
"sizes": {"min": 3, "max": 150},
"rotate": {"speed": .3, "direction": null},
"mode": {
"type": "linear",
"speed": 5,
"boundery": "endless"
},
"parallex": {
"layers": 3,
"speed": 0.15
},
"attract": {
"chance": 0.75,
"force": 1,
"grow": 2,
"size": null,
"type": "static",
"speed": 1.5,
"direction": -1,
"radius": 1
},
"fill": {
"colors": ["#ffffff"],
"toColors": ["#ffffff"],
"opacity": 0
},
"stroke": {
"colors": ["#ffffff"],
"toColors": [],
"width":[1],
"opacity": 1
}
}
};
Last modified 1yr ago