Params

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!

Usage

Modes

Last modified 4mo ago

Copy link

Contents