I am not able to create a colth example in matter.js

Question

please help me out as i am not able to run the example code from matter. can someone help me please as i am new.When i use this code with it shows a blank screen nad there is no tutorial for cloth simulation in google or youtube.It would be appreciated if you would help.I use sublime text for editing

var Example = Example || {};

Example.cloth = function() {
    var Engine = Matter.Engine,
        Render = Matter.Render,
        Runner = Matter.Runner,
        Body = Matter.Body,
        Composites = Matter.Composites,
        MouseConstraint = Matter.MouseConstraint,
        Mouse = Matter.Mouse,
        Composite = Matter.Composite,
        Bodies = Matter.Bodies;

    // create engine
    var engine = Engine.create(),
        world = engine.world;

    // create renderer
    var render = Render.create({
        element: document.body,
        engine: engine,
        options: {
            width: 800,
            height: 600
        }
    });

    Render.run(render);

    // create runner
    var runner = Runner.create();
    Runner.run(runner, engine);

    // see cloth function defined later in this file
    var cloth = Example.cloth.cloth(200, 200, 20, 12, 5, 5, false, 8);

    for (var i = 0; i < 20; i++) {
        cloth.bodies[i].isStatic = true;
    }

    Composite.add(world, [
        cloth,
        Bodies.circle(300, 500, 80, { isStatic: true, render: { fillStyle: '#060a19' }}),
        Bodies.rectangle(500, 480, 80, 80, { isStatic: true, render: { fillStyle: '#060a19' }}),
        Bodies.rectangle(400, 609, 800, 50, { isStatic: true })
    ]);

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

    Composite.add(world, mouseConstraint);

    // keep the mouse in sync with rendering
    render.mouse = mouse;

    // fit the render viewport to the scene
    Render.lookAt(render, {
        min: { x: 0, y: 0 },
        max: { x: 800, y: 600 }
    });

    // context for MatterTools.Demo
    return {
        engine: engine,
        runner: runner,
        render: render,
        canvas: render.canvas,
        stop: function() {
            Matter.Render.stop(render);
            Matter.Runner.stop(runner);
        }
    };
};

Example.cloth.title = 'Cloth';
Example.cloth.for = '>=0.14.2';

/**
* Creates a simple cloth like object.
* @method cloth
* @param {number} xx
* @param {number} yy
* @param {number} columns
* @param {number} rows
* @param {number} columnGap
* @param {number} rowGap
* @param {boolean} crossBrace
* @param {number} particleRadius
* @param {} particleOptions
* @param {} constraintOptions
* @return {composite} A new composite cloth
*/
Example.cloth.cloth = function(xx, yy, columns, rows, columnGap, rowGap, crossBrace, particleRadius, particleOptions, constraintOptions) {
    var Body = Matter.Body,
        Bodies = Matter.Bodies,
        Common = Matter.Common,
        Composites = Matter.Composites;

    var group = Body.nextGroup(true);
    particleOptions = Common.extend({ inertia: Infinity, friction: 0.00001, collisionFilter: { group: group }, render: { visible: false }}, particleOptions);
    constraintOptions = Common.extend({ stiffness: 0.06, render: { type: 'line', anchors: false } }, constraintOptions);

    var cloth = Composites.stack(xx, yy, columns, rows, columnGap, rowGap, function(x, y) {
        return Bodies.circle(x, y, particleRadius, particleOptions);
    });

    Composites.mesh(cloth, columns, rows, crossBrace, constraintOptions);

    cloth.label = 'Cloth Body';

    return cloth;
};

if (typeof module !== 'undefined') {
    module.exports = Example.cloth;
}

juicy-g · Answer

If you are looking to just get something on the screen, the fastest way is to use matter.js from a CDN.

You are seeing a blank screen because the example is meant to be bundled using a tool like Webpack or Parcel with other javascript files which would call the cloth() function. So all you need to do is to add Example.cloth(); at the bottom of the example code and it will execute upon loading the page.

The snippet below goes in the body tag of your HTML page which you can then open in your browser.

I am not able to create a colth example in matter.js

1 Answers