D3 Examples - Matter.js Doodle

xxxxxxxxxx
 
<!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>
​
    