Matter.js Doodle

<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<script src="matter.min.js"></script>
<script>
    var cfg = {
        w: 960,
        h: 500,
        frameSize: 12,
        grid: 7
    };

cfg.fw = cfg.fh = Math.sqrt(Math.pow(Math.min(cfg.w, cfg.h) / 2, 2) * 2) * 0.9;

var engine = Matter.Engine.create(document.body, {
        render: {
            options: {
                width: cfg.w,
                height: cfg.h,
                wireframes: false,
                background: '#fff'
            }
        }
    });

engine.metrics.extended = true;

Matter.World.add(engine.world, Matter.MouseConstraint.create(engine));

var parts = [
        Matter.Bodies.rectangle(cfg.w / 2, (cfg.h - cfg.fw) / 2 + cfg.frameSize / 2, cfg.fw - cfg.frameSize * 2, cfg.frameSize, {
            render: {lineWidth: 1e-6, fillStyle: '#f42'},
            mass: 0
        }),
        Matter.Bodies.rectangle(cfg.w / 2, (cfg.h - cfg.fw) / 2 + cfg.fh - cfg.frameSize / 2, cfg.fw - cfg.frameSize * 2, cfg.frameSize, {
            render: {lineWidth: 1e-6, fillStyle: '#f42'},
            mass: 0
        }),
        Matter.Bodies.rectangle((cfg.w - cfg.fw) / 2 + cfg.frameSize / 2, cfg.h / 2, cfg.frameSize, cfg.fw, {
            render: {lineWidth: 1e-6, fillStyle: '#f42'},
            mass: 0
        }),
        Matter.Bodies.rectangle((cfg.w - cfg.fw) / 2 + cfg.fw - cfg.frameSize / 2, cfg.h / 2, cfg.frameSize, cfg.fw, {
            render: {lineWidth: 1e-6, fillStyle: '#f42'},
            mass: 0
        })
    ];

var frame = Matter.Body.create({
        parts: parts
    });

for (var x = 0; x < cfg.grid; x++) {
        for (var y = 0; y < cfg.grid; y++) {
            var px = (cfg.fw / (cfg.grid)) * (0.5 + x - cfg.grid / 2);
            var py = (cfg.fw / (cfg.grid)) * (0.5 + y - cfg.grid / 2);

var o = Matter.Bodies.circle(px + cfg.w / 2, py + cfg.h / 2, cfg.frameSize / 2, {
                friction: 0,
                mass: 0.01,
                render: {lineWidth: 1e-6, fillStyle: '#f42'}
            });

parts.push(o);
        }
    }

var frameConstraint = Matter.Constraint.create({
        bodyA: frame,
        pointA: {x: 0, y: 0},
        pointB: {x: cfg.w / 2, y: cfg.h / 2},
        stiffness: 0.02,
        render: {
            visible: false
        }
    });

Matter.World.add(engine.world, [frame, frameConstraint]);

var ball = Matter.Bodies.circle(cfg.w / 2, cfg.h / 2, cfg.frameSize * 1.25, {
        mass: 0.25,
        friction: 0,
        frictionAir: 0,
        render: {
            fillStyle: '#000',
            strokeStyle: '#000',
            lineWidth: 1e-6
        }
    });

Matter.World.add(engine.world, ball);

Matter.Events.on(engine, 'collisionStart', function (event) {
        var pairs = event.pairs;

for (var i = 0; i < pairs.length; i++) {
            var pair = pairs[i];

pair.bodyA.render.fillStyle = '#000';
            pair.bodyA.render.strokeStyle = '#000';

(function (pair) {
                setTimeout(function () {
                    var ind = parts.indexOf(pair.bodyA);

if (ind > 4) {
                        parts.splice(ind, 1);

if (parts.length === 4) {
                            runner.enabled = false;
                        }
                    }
                }, 300);
            })(pair);
        }
    });

var runner = Matter.Engine.run(engine);

setInterval(function () {
        frame.angle += -0.05 * (Math.random() - 0.5);
    }, 400);
</script>
</body>