particles.widget/test.html at master · nepthar/particles.widget · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
<head>
  <meta charset="ascii">
    <style type="text/css">
      html, body {
        overflow: hidden;
        margin:0;
        padding:0;
        height: 100%;
        width: 100%;
        background-color: black;
      }

      #container {
        position: relative;
        border: 1px solid;
        height: 100%;
        width: 100%;
      }

      #debug-info {
        position: absolute;
        color: white;
        margin-top: 10px;
        left: 0;
        right: 0;
        z-index: 10;
      }

      #particle-canvas {
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 0;
      }

    </style>
    <title>test</title>
</head>
<body>
<div id="container">
  <div id="debug-info">

  </div>
  <div id="particle-canvas" onmouseup="OnClick(event)"></div>
</div>
<script src="src/particles.js"></script>
<script>
  const opts = {
    // Particle colors
    colors:  ["#fffb96", "#f47cd4", "#01cdfe"], // a e s t h e t i c
    //colors: ['']

    speed: 200,

    windSpeed: [0,0],
    windFlicker: 0.1,
    windDirection: [0, 260],

    // How often the particles change direction. (0.0 - 1.0)
    wander: 0.4, //0.005,

    // How flickery the particles appear. (0.0 -> anything really)
    flicker: 0.3,

    // Number of particles per each block of 500x500 pixels
    density: 50,

    // Distance at which particles are close enough to glow
    range: 5000,

    // Minimum particle size
    sizeMin: 3,

    // Max particle size
    sizeMax: 7,

    // Skip frames to save CPU cycles. If this number is zero, the animation will
    // run at around 60 FPS
    frameSkip: 4,

    debug: false
  };

  var pn = new ParticleNetwork("particle-canvas", opts);
  pn.start();

  function OnClick(event) {
    pn.click();
  }
</script>

</body>
</html>