Ajax Loader
HTML 
<script src="//cdn.jsdelivr.net/physicsjs/0.6.0/physicsjs.full.min.js"></script>
1
<script src="//cdn.jsdelivr.net/physicsjs/0.6.0/physicsjs.full.min.js"></script>
2
 
3
<div class="container">
4
   <canvas id="viewport"></canvas>
5
</div>
 
CSS 
html, body {
1
html, body {
2
  margin: 0;
3
  background-color: #1d1f20;
4
}
5
 
6
.container {
7
  position: absolute;
8
  left: 0;
9
  top: 0;
10
  right: 0;
11
  bottom: 0;
12
  margin: auto;
13
  -webkit-filter: blur(20px) drop-shadow(0 0 80px #000) contrast(10);
14
}
 
JavaScript 
Physics(function(world) {
1
Physics(function(world) {
2
 
3
  var viewWidth = window.innerWidth,
4
    viewHeight = window.innerHeight,
5
    // center of the window
6
    center = Physics.vector(viewWidth, viewHeight).mult(0.5),
7
    // bounds of the window
8
    viewportBounds = Physics.aabb(0, 0, viewWidth, viewHeight),
9
    edgeBounce, renderer;
10
 
11
  // create a renderer
12
  renderer = Physics.renderer('canvas', {
13
    el: 'viewport',
14
    width: viewWidth,
15
    height: viewHeight
16
  });
17
 
18
  // add the renderer
19
  world.add(renderer);
20
  // render on each step
21
  world.on('step', function() {
22
    world.render();
23
  });
24
 
25
  renderer.el.addEventListener('mousedown', function(e) {
26
    world.clicked = true;
27
 
28
    world.add(spawnBlob({
29
      x: e.pageX,
30
      y: e.pageY
31
    }));
32
  });
33
 
34
  renderer.el.addEventListener('mousemove', function(e) {
35
    if (world.clicked) {
36
      world.add(spawnBlob({
37
        x: e.pageX,
38
        y: e.pageY
39
      }));
40
    }
41
  });
42
 
43
  renderer.el.addEventListener('mouseup', function(e) {
44
    world.clicked = false;
45
  });
46
 
47
  function spawnBlob(options) {
48
    options = options || {};
49
    return Physics.body('circle', {
50
      radius: 20,
51
      mass: 20,
52
      x: options.x || 0,
53
      y: options.y || 0,
54
      vx: options.vx || 0,
55
      vy: options.vy || 0,
56
      styles: {
57
        fillStyle: '#00ff00'
58
      }
59
    });
60
  }
61
 
62
  function spawnBlobs() {
63
    // create some bodies
64
    var l = 10;
65
    var bodies = [];
66
    var v = Physics.vector(0, 300);
67
    var b, r;
68
 
69
    while (l--) {
70
      r = 20;
71
      b = spawnBlob({
72
        x: v.x + center.x,
73
        y: v.y + center.y,
74
        vx: v.perp().mult(0.0001).x,
75
        vy: v.y
76
      });
77
      bodies.push(b);
78
    }
79
 
80
    world.add(bodies);
81
  }
82
 
83
  // constrain objects to these bounds
84
  edgeBounce = Physics.behavior('edge-collision-detection', {
85
    aabb: viewportBounds,
86
    restitution: 0.1,
87
    cof: 0.1
88
  });
89
 
90
  // add things to the world
91
  spawnBlobs();
92
  world.add([
93
    Physics.behavior('constant-acceleration', {
94
      acc: {
95
        x: 0,
96
        y: 0.001
97
      }
98
    }),
99
    Physics.behavior('body-impulse-response'),
100
    Physics.behavior('body-collision-detection', {
101
      restitution: 1,
102
      cof: 1
103
    }),
104
    Physics.behavior('sweep-prune'),
105
    edgeBounce
106
  ]);
107
 
108
  // subscribe to ticker to advance the simulation
109
  Physics.util.ticker.on(function(time) {
110
    world.step(time);
111
  });
112
 
113
  // start the ticker
114
  Physics.util.ticker.start();
115
 
116
  // resize events
117
  window.addEventListener('resize', function() {
118
 
119
    viewWidth = window.innerWidth;
120
    viewHeight = window.innerHeight;
121
 
122
    renderer.el.width = viewWidth;
123
    renderer.el.height = viewHeight;
124
 
125
    viewportBounds = Physics.aabb(0, 0, viewWidth, viewHeight);
126
    // update the boundaries
127
    edgeBounce.setAABB(viewportBounds);
128
 
129
  }, true);
130
});
 

JS Metaballs

CSSDeck G+