http://www.kamikyokumatsuri.jp/parade/assets/a.js

1
2$(function() {
3  var area = $('#popper-parade');
4  var balls = [];
5
6  var watch = function() {
7    var Body = Matter.Body,
8        Common = Matter.Common;
9    for (var i = 0; i < balls.length; i++) {
10      var b = balls[i];
11
12      // restart when the ball is out
13       if (b.position.x < - 200) {
14         Body.setPosition(b, {x: $(window).width() + 200, y: Common.random(800, 950)});
15         Body.setVelocity(b, {x: Common.random(0.05, 0.08), y: 0});
16       }
17
18      // add force if the ball is stopped
19      if (b.angularSpeed < 0.001) {
20        Body.applyForce(b, {x: b.position.x + 1, y: b.position.y - 1}, {
21         x: -Common.random(0.004, 0.010) * b.mass,
22         y: -Common.random(0.011, 0.0115) * b.mass
23        });
24      }
25
26    }
27    setTimeout(watch, 100);
28  };
29
30  var init = function() {
31    var Engine = Matter.Engine,
32        World = Matter.World,
33        Bodies = Matter.Bodies,
34        Common = Matter.Common;
35
36    var engine = Engine.create(area.get(0));
37    engine.render.options.wireframes = false;
38    engine.render.options.background = 'transparent';
39    var svgs = Common.shuffle($('img', area).map(function() {
40      return $(this).attr('src');
41    }));
42    for (var i = 0; i < svgs.length * 2.5; i++) {
43      var large = i < svgs.length;
44      var radius = (large ? 1.5 : 1) * 40;
45      var scale = radius / (450 / 2);
46      var b = Bodies.circle(Common.random(-200, $(window).width() + 200), Common.random(900, 950), radius, {
47        restitution: 1,
48        friction: 0,
49        frictionAir: 0,
50        collisionFilter: { category: 2 + i * 2, mask: 1 },
51        render: {
52          sprite: {
53            texture: svgs[i % svgs.length], xScale: scale, yScale: scale
54          }
55        }
56      });
57      balls.push(b);
58    }
59    World.add(engine.world, balls);
60
61    var ground = Bodies.rectangle($(window).width() / 2, area.height() + 50, 3000, 100, {
62      isStatic: true,
63      collisionFilter: { category: 1 },
64      render: { strokeStyle: 'transparent', fillStyle: 'transparent' }
65    });
66    World.add(engine.world, ground);
67    Engine.run(engine);
68    setTimeout(watch, 100);
69
70    var resize = function() {
71      $('canvas', area).get(0).width = area.width();
72      $('canvas', area).get(0).height = area.height();
73      engine.world.bounds.max.x = window.width;
74      engine.world.bounds.max.y = window.height;
75    };
76    resize();
77    $(window).resize(resize);
78  };
79  init();
80});