diff --git a/examples/index.js b/examples/index.js index bee420f..940f47b 100644 --- a/examples/index.js +++ b/examples/index.js @@ -28,6 +28,7 @@ module.exports = { restitution: require('./restitution.js'), rounded: require('./rounded.js'), remove: require('./remove.js'), + renderResize: require('./renderResize.js'), sensors: require('./sensors.js'), sleeping: require('./sleeping.js'), slingshot: require('./slingshot.js'), diff --git a/examples/renderResize.js b/examples/renderResize.js new file mode 100644 index 0000000..0b54346 --- /dev/null +++ b/examples/renderResize.js @@ -0,0 +1,131 @@ +var Example = Example || {}; + +Example.renderResize = function() { + var Engine = Matter.Engine, + Render = Matter.Render, + Runner = Matter.Runner, + Composite = Matter.Composite, + Composites = Matter.Composites, + Common = Matter.Common, + 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, + showAngleIndicator: true, + pixelRatio: 2 + } + }); + + Render.run(render); + + // create runner + var runner = Runner.create(); + Runner.run(runner, engine); + + // add bodies + var stack = Composites.stack(20, 20, 10, 5, 0, 0, function(x, y) { + var sides = Math.round(Common.random(1, 8)); + + // round the edges of some bodies + var chamfer = null; + if (sides > 2 && Common.random() > 0.7) { + chamfer = { + radius: 10 + }; + } + + switch (Math.round(Common.random(0, 1))) { + case 0: + if (Common.random() < 0.8) { + return Bodies.rectangle(x, y, Common.random(25, 50), Common.random(25, 50), { chamfer: chamfer }); + } else { + return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(25, 30), { chamfer: chamfer }); + } + case 1: + return Bodies.polygon(x, y, sides, Common.random(25, 50), { chamfer: chamfer }); + } + }); + + Composite.add(world, stack); + + Composite.add(world, [ + // walls + Bodies.rectangle(400, 0, 800, 50, { isStatic: true }), + Bodies.rectangle(400, 600, 800, 50, { isStatic: true }), + Bodies.rectangle(800, 300, 50, 600, { isStatic: true }), + Bodies.rectangle(0, 300, 50, 600, { isStatic: true }) + ]); + + // add mouse control + var mouse = Mouse.create(render.canvas), + mouseConstraint = MouseConstraint.create(engine, { + mouse: mouse, + constraint: { + stiffness: 0.2, + render: { + visible: false + } + } + }); + + Composite.add(world, mouseConstraint); + + // keep the mouse in sync with rendering + render.mouse = mouse; + + // set canvas position to screen top left + render.canvas.style.position = 'fixed'; + + // resize event handler + var handleWindowResize = function() { + // get the current window size + var width = window.innerWidth, + height = window.innerHeight; + + // set the render size to equal window size + Render.setSize(render, width, height); + + // update the render bounds to fit the scene + Render.lookAt(render, Composite.allBodies(engine.world), { + x: 50, + y: 50 + }); + } + + // add window resize handler + window.addEventListener('resize', handleWindowResize); + + // update canvas size to initial window size + handleWindowResize(); + + // 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.renderResize.title = 'Render Resize'; +Example.renderResize.for = '>=0.20.0'; + +if (typeof module !== 'undefined') { + module.exports = Example.renderResize; +}