PhysicsJS 物理引擎一些基本操作

增加图形界面示例操作:

一个html页面做多个功能示例展示时，进行切换和单独的操作界面控制 .例如上面的控制界面是采用dat.gui库,examples有很N个,每个切换的时候会有自己的操作界面.这里不细说了推荐大家自己去看一下dat.gui.js。

 <script src="https://cdn.jsdelivr.net/npm/physicsjs@0.7.0/dist/physicsjs-full.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"
        integrity="sha256-B2A44YCanY9zaHL5nwcihGM3GiWpOE4md3COMTdAggM=" crossorigin="anonymous"></script>
    <script
        src="https://rawcdn.githack.com/fanyonglong/DxFrameworks/526f72d6673b25b1a3da245cac2284a89fec342c/utility/exampleTool.js"></script>


 var exmapleInstance = ExampleFactory(function (exmaple) {
            exmaple.addOperation('暂停', function () {
                Physics.util.ticker.stop();
            });
            exmaple.addOperation('恢复', function () {
                Physics.util.ticker.start()
            });
            return function (page) {
                page.onChange('init', function () {

                });
                page.onChange('show', function () {
                    world.unpause()
                });
                page.onChange('hide', function () {
                    world.pause()
                });
                page.onChange('refresh', function () {

                });

                // 添加公共操作属性
                page.addColor('color', '#ff0');

                var world = Physics({
                    // default timestep
                    timestep: 6,
                    // maximum number of iterations per step
                    maxIPF: 4,

                    // default integrator
                    integrator: 'verlet',

                    // is sleeping disabled?
                    sleepDisabled: false,
                    // speed at which bodies wake up
                    sleepSpeedLimit: 0.1,
                    // variance in position below which bodies fall asleep
                    sleepVarianceLimit: 2,
                    // time (ms) before sleepy bodies fall asleep
                    sleepTimeLimit: 500
                });
                var _renderer = addRenderer(world, function (el) {
                    page.el.appendChild(el);
                });
                page.callback({ renderer: _renderer, world: world }, page)
                // world.render();

                world.on('step', function (time) {
                    //  ball.state.pos.add(0.1,0)
                    world.render();
                    //  _renderer.draw(thing);
                })

                Physics.util.ticker.on(function (time) {
                    world.step(time);
                });
                Physics.util.ticker.start();
            }


        });

//`var ${Object.keys(Physics).map(d=>`${d}=Physics.${d}`).join(',\n')};`
        var util = Physics.util,
            aabb = Physics.aabb,
            gjk = Physics.gjk,
            statistics = Physics.statistics,
            transform = Physics.transform,
            vector = Physics.vector,
            noConflict = Physics.noConflict,
            scratchpad = Physics.scratchpad,
            query = Physics.query,
            behavior = Physics.behavior,
            body = Physics.body,
            geometry = Physics.geometry,
            integrator = Physics.integrator,
            renderer = Physics.renderer,
            world = Physics.world;
        function addRenderer(world, appendChild) {

            var colors = {
                white: '#fff'
                , violet: '#542437'
                , blue: '#53777A'
            }
            var width = 800, height = 600;
            var container = document.createElement('div');
            container.className = 'exmaple';
            container.style.cssText = 'display:inline-block;  position: relative;;width:' + width + 'px;height:' + height + 'px';
            if (appendChild) {
                appendChild(container);
            } else {
                document.body.appendChild(container);
            }
            var renderer = Physics.renderer('canvas', {
                //metaEl: document.getElementById('mate'),
                // default styles of drawn objects
                el: container,
                width: width,
                height: height,
                autoResize: false,
                meta: false,
                styles: {

                    'point': colors.blue,

                    'circle': {
                        strokeStyle: colors.blue,
                        lineWidth: 1,
                        fillStyle: colors.blue,
                        angleIndicator: colors.white
                    },

                    'rectangle': {
                        strokeStyle: colors.violet,
                        lineWidth: 1,
                        fillStyle: colors.violet,
                        angleIndicator: colors.white
                    },

                    'convex-polygon': {
                        strokeStyle: colors.violet,
                        lineWidth: 1,
                        fillStyle: colors.violet,
                        angleIndicator: colors.white
                    }
                },
                offset: { x: 0, y: 0 }
            });
            world.add(renderer);
            renderer.options.onChange(function () {
                console.log(arguments)
            })
            return renderer;
        }


        exmapleInstance.addExample('引力', function ({ world, renderer }, page) {
            var width = 900, height = 900, centerVec = vector(width / 2, height / 2);
            renderer.resize(width, height);
            renderer.el.style.background = '#000';
            
            var subVec = centerVec.clone();
            var sun = Physics.body('circle', {
                /*
                dynamic:动态的身体被“正常”对待。它们是集成的，碰撞的，以及所有这些。
                kinematic:运动物体是以指定速度移动的物体。其他身体与它们相撞，但它们不会从其他身体反弹。
                static:静止的身体只是停滞不前。他们就像障碍。
                */
                treatment: "kinematic", is the body `dynamic`, `kinematic` or `static`?
                vx: 0,
                vy: 0,
                radius: 20,
                mass: 20.0,
                // body restitution. How "bouncy" is it?
                restitution: 1,
                // what is its coefficient of friction with another surface with COF = 1?
                cof: 1,
                styles: {
                    fillStyle: '#f80'
                }
            });
            // 添加轨迹
            function addTrajectory(n) {
                var bodies = [];
                for (var i = 1; i <= n; i++) {
                    var v = centerVec.clone();
                    var radius = 20 + i * 30;
                    var l = Physics.body('circle', {
                        treatment: 'static',
                        x: v.x,
                        y: v.y,
                        radius: radius,
                        styles: {
                            fillStyle: 'transparent',
                            strokeStyle: '#fff',
                            lineWidth: 1
                        }
                    })
                    bodies.push(l);
                }
                var p = Physics.body('compound', {
                    uid:'gj',
                    x: centerVec.x,
                    y: centerVec.y,
                    children: bodies,
                    treatment: 'static',
                    styles: {
                        fillStyle: 'transparent',
                        strokeStyle: '#fff',
                        lineWidth: 1
                    }
                })
                p.sleep()

                world.add(p)
            }
            function addGjq(p,angle,r,c){
                angle=angle/180*Math.PI;
                var v = centerVec.clone();
                    var radius = 20 + p * 30;
                    var x=Math.cos(angle)*radius;
                    var y=Math.sin(angle)*radius;
                    v.add(x,y)
                    var l = Physics.body('circle', {
                     //   treatment: 'static',
                        mass:1,
                        x: v.x,
                        y: v.y,
                        vx:0.1,
                        vy:0,
                        radius: r,
                        angle: 0,
                        angularVelocity: 0,
                        styles: {
                            fillStyle:c
                        }
                    })
                    verletConstraint.distanceConstraint(sun, l,0.1);
                    world.add(l);
            }
            
            sun.state.pos = subVec.clone();

            world.on({
                'interact:poke': function (pos) {

                },
                'interact:grab': function (d) {

                },
                'interact:release': function (d) {

                }
            });
            // 添加交互
            addInteractiveBehavior(world, {
                el: renderer.container
            });
        
            // 添加约束
            var verletConstraint = addVerletConstraintsBehavior(world);

            //添加引力点
             var attractor = addAttractorBehavior(world, {
                 pos: subVec.clone(),
                order: 0,
                 strength: 0.002
             })
            
            world.add(sun);
            addTrajectory(5);
       

            addGjq(1,110,8,'#ff0');
            addGjq(2,110,6,'#fa0');
            addGjq(3,110,4,'#0af');
            addGjq(4,110,6,'#fa0');
            addGjq(5,110,6,'#a0a')
            function random(min,max){
                return min+Math.round(Math.random()*(max-min));
            }
            page.addOperation('添加球',function(){
                addGjq(random(1,5),random(0,360),random(3,8),'#0af');
            })
        })