<div class="canvas"></div>
<button class="btn-rain">make it rain!</button>
<button class="btn-gravity">invert gravity</button> 
Tip: Drag with your cursor to interact
body {
  background: #1f2026;
  color: #D4D5D9;
  font-family: sans-serif;
}
const { Engine, Render, World, Bodies, Mouse, MouseConstraint } = Matter;

function rain() {
  const circles = [];
  for (i = 0; i < 40; i++) {
    const posX = 00 + Math.floor(Math.random() * Math.floor(200));
    const posY = -100 * i - 100;

    // alternate size and mass
    const radius = i % 2 === 0 ? 21 : 21.0 * 0.7;
    const bgScale = i % 2 === 0 ? 0.125 : 0.125 * 0.7;
    const mass = i % 2 === 0 ? 10 : 10 * 0.7;

    // create a circle
    const circle = Bodies.circle(posX, posY, radius, {
      force: { x: 0.1, y: 0 }, // slight posh to the right
      friction: 0.1, // looks cooler with less friction
      mass: 10,
      render: {
        sprite: {
          texture:
            "https://bitspeicher.blog/content/images/2017/11/bitspeicher-logo-1.png", // bitspeicher-Logo
          xScale: bgScale, // adjust background image size to circle size
          yScale: bgScale
        }
      }
    });
    circles.push(circle);
  }

  // add circles into the world
  World.add(engine.world, [...circles]);
}

function invertGravity(){
  engine.world.gravity.y = -engine.world.gravity.y;
}

// create an engine
const engine = Engine.create();

// create a renderer
const render = Render.create({
  element: document.querySelector(".canvas"),
  engine: engine,
  options: {
    width: 600,
    height: 600,
    wireframes: false,
    background: "#1e1e1e"
  }
});

// add mouse control
const mouse = Mouse.create(render.canvas),
  mouseConstraint = MouseConstraint.create(engine, {
    mouse: mouse,
    constraint: {
      stiffness: 0.5,
      render: {
        visible: false
      }
    }
  });

// create obstacles
const box1 = Bodies.rectangle(0, 500, 810, 60, {
  isStatic: true,
  angle: Math.PI * 0.06,
  friction: 0.01,
  render: { fillStyle: "#f6a477" }
});
const box2 = Bodies.rectangle(600, 300, 810, 60, {
  isStatic: true,
  angle: Math.PI * -0.06,
  friction: 0.01,
  render: { fillStyle: "#f6a477" }
});

// add all of the bodies to the world
World.add(engine.world, [box1, box2, mouseConstraint]);

// run the engine
Engine.run(engine);

// run the renderer
Render.run(render);

// make it rain initially
rain();

// add button click event listeners
document.querySelector(".btn-rain").addEventListener("click", rain);
document.querySelector(".btn-gravity").addEventListener("click", invertGravity);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.15.0/matter.min.js