foster/liabru-matter-js
0
0
Fork 0
mirror of https://github.com/liabru/matter-js.git synced 2025-01-11 16:00:48 -05:00
Code Issues Wiki Activity

update demo and example render styles

Browse source
This commit is contained in:
liabru 2020-12-08 23:57:14 +00:00
parent d258411faa
commit 6dd5ec55bf
19 changed files with 61 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
demo/index.html
View file

@ -61,6 +61,10 @@
opacity: 0.5; opacity: 0.5;
background: transparent !important; background: transparent !important;
} }
.matter-demo canvas {
border: 1px solid rgba(255, 255, 255, 0.07);
}
</style> </style>
</head> </head>
<body> <body>

8
examples/avalanche.js
View file

@ -41,13 +41,13 @@ Example.avalanche = function() {
var stack = Composites.stack(20, 20, 20, 5, 0, 0, function(x, y) { var stack = Composites.stack(20, 20, 20, 5, 0, 0, function(x, y) {
return Bodies.circle(x, y, Common.random(10, 20), { friction: 0.00001, restitution: 0.5, density: 0.001 }); return Bodies.circle(x, y, Common.random(10, 20), { friction: 0.00001, restitution: 0.5, density: 0.001 });
}); });
World.add(world, stack); World.add(world, stack);
World.add(world, [ World.add(world, [
Bodies.rectangle(200, 150, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }), Bodies.rectangle(200, 150, 700, 20, { isStatic: true, angle: Math.PI * 0.06, render: { fillStyle: '#060a19' } }),
Bodies.rectangle(500, 350, 700, 20, { isStatic: true, angle: -Math.PI * 0.06 }), Bodies.rectangle(500, 350, 700, 20, { isStatic: true, angle: -Math.PI * 0.06, render: { fillStyle: '#060a19' } }),
Bodies.rectangle(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04 }) Bodies.rectangle(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04, render: { fillStyle: '#060a19' } })
]); ]);
// add mouse control // add mouse control

2
examples/ballPool.js
View file

@ -39,7 +39,7 @@ Example.ballPool = function() {
// add bodies // add bodies
World.add(world, [ World.add(world, [
Bodies.rectangle(400, 600, 1200, 50.5, { isStatic: true }) Bodies.rectangle(400, 600, 1200, 50.5, { isStatic: true, render: { fillStyle: '#060a19' } })
]); ]);
var stack = Composites.stack(100, 0, 10, 8, 10, 10, function(x, y) { var stack = Composites.stack(100, 0, 10, 8, 10, 10, function(x, y) {

2
examples/bridge.js
View file

@ -44,7 +44,7 @@ Example.bridge = function() {
density: 0.005, density: 0.005,
frictionAir: 0.05, frictionAir: 0.05,
render: { render: {
fillStyle: '#575375' fillStyle: '#060a19'
} }
}); });
}); });

6
examples/car.js
View file

@ -48,9 +48,9 @@ Example.car = function() {
World.add(world, Composites.car(350, 300, 150 * scale, 30 * scale, 30 * scale)); World.add(world, Composites.car(350, 300, 150 * scale, 30 * scale, 30 * scale));
World.add(world, [ World.add(world, [
Bodies.rectangle(200, 150, 400, 20, { isStatic: true, angle: Math.PI * 0.06 }), Bodies.rectangle(200, 150, 400, 20, { isStatic: true, angle: Math.PI * 0.06, render: { fillStyle: '#060a19' }}),
Bodies.rectangle(500, 350, 650, 20, { isStatic: true, angle: -Math.PI * 0.06 }), Bodies.rectangle(500, 350, 650, 20, { isStatic: true, angle: -Math.PI * 0.06, render: { fillStyle: '#060a19' }}),
Bodies.rectangle(300, 560, 600, 20, { isStatic: true, angle: Math.PI * 0.04 }) Bodies.rectangle(300, 560, 600, 20, { isStatic: true, angle: Math.PI * 0.04, render: { fillStyle: '#060a19' }})
]); ]);
// add mouse control // add mouse control

6
examples/catapult.js
View file

@ -48,9 +48,9 @@ Example.catapult = function() {
World.add(world, [ World.add(world, [
stack, stack,
catapult, catapult,
Bodies.rectangle(400, 600, 800, 50.5, { isStatic: true }), Bodies.rectangle(400, 600, 800, 50.5, { isStatic: true, render: { fillStyle: '#060a19' } }),
Bodies.rectangle(250, 555, 20, 50, { isStatic: true }), Bodies.rectangle(250, 555, 20, 50, { isStatic: true, render: { fillStyle: '#060a19' } }),
Bodies.rectangle(400, 535, 20, 80, { isStatic: true, collisionFilter: { group: group } }), Bodies.rectangle(400, 535, 20, 80, { isStatic: true, collisionFilter: { group: group }, render: { fillStyle: '#060a19' } }),
Bodies.circle(560, 100, 50, { density: 0.005 }), Bodies.circle(560, 100, 50, { density: 0.005 }),
Constraint.create({ Constraint.create({
bodyA: catapult, bodyA: catapult,

4
examples/cloth.js
View file

@ -43,8 +43,8 @@ Example.cloth = function() {
World.add(world, [ World.add(world, [
cloth, cloth,
Bodies.circle(300, 500, 80, { isStatic: true }), Bodies.circle(300, 500, 80, { isStatic: true, render: { fillStyle: '#060a19' }}),
Bodies.rectangle(500, 480, 80, 80, { isStatic: true }), Bodies.rectangle(500, 480, 80, 80, { isStatic: true, render: { fillStyle: '#060a19' }}),
Bodies.rectangle(400, 609, 800, 50, { isStatic: true }) Bodies.rectangle(400, 609, 800, 50, { isStatic: true })
]); ]);

21
examples/collisionFiltering.js
View file

@ -23,8 +23,7 @@ Example.collisionFiltering = function() {
options: { options: {
width: 800, width: 800,
height: 600, height: 600,
wireframes: false, wireframes: false
background: '#111'
} }
}); });
@ -40,9 +39,9 @@ Example.collisionFiltering = function() {
greenCategory = 0x0004, greenCategory = 0x0004,
blueCategory = 0x0008; blueCategory = 0x0008;
var redColor = '#C44D58', var colorA = '#f55a3c',
blueColor = '#4ECDC4', colorB = '#063e7b',
greenColor = '#C7F464'; colorC = '#f5d259';
// add floor // add floor
World.add(world, Bodies.rectangle(400, 600, 900, 50, { World.add(world, Bodies.rectangle(400, 600, 900, 50, {
@ -57,14 +56,14 @@ Example.collisionFiltering = function() {
World.add(world, World.add(world,
Composites.stack(275, 100, 5, 9, 10, 10, function(x, y, column, row) { Composites.stack(275, 100, 5, 9, 10, 10, function(x, y, column, row) {
var category = redCategory, var category = redCategory,
color = redColor; color = colorA;
if (row > 5) { if (row > 5) {
category = blueCategory; category = blueCategory;
color = blueColor; color = colorB;
} else if (row > 2) { } else if (row > 2) {
category = greenCategory; category = greenCategory;
color = greenColor; color = colorC;
} }
return Bodies.circle(x, y, 20, { return Bodies.circle(x, y, 20, {
@ -87,7 +86,7 @@ Example.collisionFiltering = function() {
mask: defaultCategory | greenCategory mask: defaultCategory | greenCategory
}, },
render: { render: {
fillStyle: greenColor fillStyle: colorC
} }
}) })
); );
@ -99,7 +98,7 @@ Example.collisionFiltering = function() {
mask: defaultCategory | redCategory mask: defaultCategory | redCategory
}, },
render: { render: {
fillStyle: redColor fillStyle: colorA
} }
}) })
); );
@ -111,7 +110,7 @@ Example.collisionFiltering = function() {
mask: defaultCategory | blueCategory mask: defaultCategory | blueCategory
}, },
render: { render: {
fillStyle: blueColor fillStyle: colorB
} }
}) })
); );

2
examples/concave.js
View file

@ -47,7 +47,7 @@ Example.concave = function() {
horseShoe = Vertices.fromPath('35 7 19 17 14 38 14 58 25 79 45 85 65 84 65 66 46 67 34 59 30 44 33 29 45 23 66 23 66 7 53 7'); horseShoe = Vertices.fromPath('35 7 19 17 14 38 14 58 25 79 45 85 65 84 65 66 46 67 34 59 30 44 33 29 45 23 66 23 66 7 53 7');
var stack = Composites.stack(50, 50, 6, 4, 10, 10, function(x, y) { var stack = Composites.stack(50, 50, 6, 4, 10, 10, function(x, y) {
var color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']); var color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
return Bodies.fromVertices(x, y, Common.choose([arrow, chevron, star, horseShoe]), { return Bodies.fromVertices(x, y, Common.choose([arrow, chevron, star, horseShoe]), {
render: { render: {
fillStyle: color, fillStyle: color,

6
examples/doublePendulum.js
View file

@ -26,8 +26,7 @@ Example.doublePendulum = function() {
options: { options: {
width: 800, width: 800,
height: 600, height: 600,
wireframes: false, wireframes: false
background: '#0f0f13'
} }
}); });
@ -54,9 +53,6 @@ Example.doublePendulum = function() {
}); });
}); });
pendulum.bodies[0].render.strokeStyle = '#4a485b';
pendulum.bodies[1].render.strokeStyle = '#4a485b';
world.gravity.scale = 0.002; world.gravity.scale = 0.002;
Composites.chain(pendulum, 0.45, 0, -0.45, 0, { Composites.chain(pendulum, 0.45, 0, -0.45, 0, {

6
examples/friction.js
View file

@ -40,17 +40,17 @@ Example.friction = function() {
]); ]);
World.add(world, [ World.add(world, [
Bodies.rectangle(300, 180, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }), Bodies.rectangle(300, 180, 700, 20, { isStatic: true, angle: Math.PI * 0.06, render: { fillStyle: '#060a19' } }),
Bodies.rectangle(300, 70, 40, 40, { friction: 0.001 }) Bodies.rectangle(300, 70, 40, 40, { friction: 0.001 })
]); ]);
World.add(world, [ World.add(world, [
Bodies.rectangle(300, 350, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }), Bodies.rectangle(300, 350, 700, 20, { isStatic: true, angle: Math.PI * 0.06, render: { fillStyle: '#060a19' } }),
Bodies.rectangle(300, 250, 40, 40, { friction: 0.0005 }) Bodies.rectangle(300, 250, 40, 40, { friction: 0.0005 })
]); ]);
World.add(world, [ World.add(world, [
Bodies.rectangle(300, 520, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }), Bodies.rectangle(300, 520, 700, 20, { isStatic: true, angle: Math.PI * 0.06, render: { fillStyle: '#060a19' } }),
Bodies.rectangle(300, 430, 40, 40, { friction: 0 }) Bodies.rectangle(300, 430, 40, 40, { friction: 0 })
]); ]);

8
examples/manipulation.js
View file

@ -35,15 +35,15 @@ Example.manipulation = function() {
Runner.run(runner, engine); Runner.run(runner, engine);
// add bodies // add bodies
var bodyA = Bodies.rectangle(100, 200, 50, 50, { isStatic: true }), var bodyA = Bodies.rectangle(100, 200, 50, 50, { isStatic: true, render: { fillStyle: '#060a19' } }),
bodyB = Bodies.rectangle(200, 200, 50, 50), bodyB = Bodies.rectangle(200, 200, 50, 50),
bodyC = Bodies.rectangle(300, 200, 50, 50), bodyC = Bodies.rectangle(300, 200, 50, 50),
bodyD = Bodies.rectangle(400, 200, 50, 50), bodyD = Bodies.rectangle(400, 200, 50, 50),
bodyE = Bodies.rectangle(550, 200, 50, 50), bodyE = Bodies.rectangle(550, 200, 50, 50),
bodyF = Bodies.rectangle(700, 200, 50, 50), bodyF = Bodies.rectangle(700, 200, 50, 50),
bodyG = Bodies.circle(400, 100, 25), bodyG = Bodies.circle(400, 100, 25, { render: { fillStyle: '#060a19' } }),
partA = Bodies.rectangle(600, 200, 120, 50), partA = Bodies.rectangle(600, 200, 120, 50, { render: { fillStyle: '#060a19' } }),
partB = Bodies.rectangle(660, 200, 50, 190), partB = Bodies.rectangle(660, 200, 50, 190, { render: { fillStyle: '#060a19' } }),
compound = Body.create({ compound = Body.create({
parts: [partA, partB], parts: [partA, partB],
isStatic: true isStatic: true

9
examples/ragdoll.js
View file

@ -27,8 +27,7 @@ Example.ragdoll = function() {
options: { options: {
width: 800, width: 800,
height: 600, height: 600,
showAngleIndicator: true, showAngleIndicator: true
background: '#0f0f13'
} }
}); });
@ -45,7 +44,9 @@ Example.ragdoll = function() {
return Bodies.rectangle(x - 50, y + column * 50, 100, 1000, { return Bodies.rectangle(x - 50, y + column * 50, 100, 1000, {
isStatic: true, isStatic: true,
render: { render: {
fillStyle: '#222' fillStyle: '#060a19',
strokeStyle: '#ffffff',
lineWidth: 1
} }
}); });
}); });
@ -55,7 +56,7 @@ Example.ragdoll = function() {
var sides = Math.round(Common.random(1, 8)), var sides = Math.round(Common.random(1, 8)),
options = { options = {
render: { render: {
fillStyle: Common.choose(['#006BA6', '#0496FF', '#D81159', '#8F2D56']) fillStyle: Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1'])
} }
}; };

25
examples/sensors.js
View file

@ -21,8 +21,7 @@ Example.sensors = function() {
options: { options: {
width: 800, width: 800,
height: 600, height: 600,
wireframes: false, wireframes: false
background: '#111'
} }
}); });
@ -33,14 +32,14 @@ Example.sensors = function() {
Runner.run(runner, engine); Runner.run(runner, engine);
// add bodies // add bodies
var redColor = '#C44D58', var colorA = '#f55a3c',
greenColor = '#C7F464'; colorB = '#f5d259';
var collider = Bodies.rectangle(400, 300, 500, 50, { var collider = Bodies.rectangle(400, 300, 500, 50, {
isSensor: true, isSensor: true,
isStatic: true, isStatic: true,
render: { render: {
strokeStyle: redColor, strokeStyle: colorA,
fillStyle: 'transparent', fillStyle: 'transparent',
lineWidth: 1 lineWidth: 1
} }
@ -48,11 +47,11 @@ Example.sensors = function() {
World.add(world, [ World.add(world, [
collider, collider,
Bodies.rectangle(400, 620, 800, 50, { Bodies.rectangle(400, 600, 800, 50, {
isStatic: true, isStatic: true,
render: { render: {
fillStyle: 'transparent', fillStyle: '#060a19',
lineWidth: 1 lineWidth: 0
} }
}) })
]); ]);
@ -60,7 +59,7 @@ Example.sensors = function() {
World.add(world, World.add(world,
Bodies.circle(400, 40, 30, { Bodies.circle(400, 40, 30, {
render: { render: {
strokeStyle: greenColor, strokeStyle: colorB,
fillStyle: 'transparent', fillStyle: 'transparent',
lineWidth: 1 lineWidth: 1
} }
@ -74,9 +73,9 @@ Example.sensors = function() {
var pair = pairs[i]; var pair = pairs[i];
if (pair.bodyA === collider) { if (pair.bodyA === collider) {
pair.bodyB.render.strokeStyle = redColor; pair.bodyB.render.strokeStyle = colorA;
} else if (pair.bodyB === collider) { } else if (pair.bodyB === collider) {
pair.bodyA.render.strokeStyle = redColor; pair.bodyA.render.strokeStyle = colorA;
} }
} }
}); });
@ -88,9 +87,9 @@ Example.sensors = function() {
var pair = pairs[i]; var pair = pairs[i];
if (pair.bodyA === collider) { if (pair.bodyA === collider) {
pair.bodyB.render.strokeStyle = greenColor; pair.bodyB.render.strokeStyle = colorB;
} else if (pair.bodyB === collider) { } else if (pair.bodyB === collider) {
pair.bodyA.render.strokeStyle = greenColor; pair.bodyA.render.strokeStyle = colorB;
} }
} }
}); });

4
examples/slingshot.js
View file

@ -34,7 +34,7 @@ Example.slingshot = function() {
Runner.run(runner, engine); Runner.run(runner, engine);
// add bodies // add bodies
var ground = Bodies.rectangle(395, 600, 815, 50, { isStatic: true }), var ground = Bodies.rectangle(395, 600, 815, 50, { isStatic: true, render: { fillStyle: '#060a19' } }),
rockOptions = { density: 0.004 }, rockOptions = { density: 0.004 },
rock = Bodies.polygon(170, 450, 8, 20, rockOptions), rock = Bodies.polygon(170, 450, 8, 20, rockOptions),
anchor = { x: 170, y: 450 }, anchor = { x: 170, y: 450 },
@ -48,7 +48,7 @@ Example.slingshot = function() {
return Bodies.rectangle(x, y, 25, 40); return Bodies.rectangle(x, y, 25, 40);
}); });
var ground2 = Bodies.rectangle(610, 250, 200, 20, { isStatic: true }); var ground2 = Bodies.rectangle(610, 250, 200, 20, { isStatic: true, render: { fillStyle: '#060a19' } });
var pyramid2 = Composites.pyramid(550, 0, 5, 10, 0, 0, function(x, y) { var pyramid2 = Composites.pyramid(550, 0, 5, 10, 0, 0, function(x, y) {
return Bodies.rectangle(x, y, 25, 40); return Bodies.rectangle(x, y, 25, 40);

1
examples/sprites.js
View file

@ -22,7 +22,6 @@ Example.sprites = function() {
options: { options: {
width: 800, width: 800,
height: 600, height: 600,
background: '#0f0f13',
showAngleIndicator: false, showAngleIndicator: false,
wireframes: false wireframes: false
} }

2
examples/staticFriction.js
View file

@ -34,7 +34,7 @@ Example.staticFriction = function() {
Runner.run(runner, engine); Runner.run(runner, engine);
// add bodies // add bodies
var body = Bodies.rectangle(400, 500, 200, 60, { isStatic: true, chamfer: 10 }), var body = Bodies.rectangle(400, 500, 200, 60, { isStatic: true, chamfer: 10, render: { fillStyle: '#060a19' } }),
size = 50, size = 50,
counter = -1; counter = -1;

4
examples/svg.js
View file

@ -45,7 +45,7 @@ Example.svg = function() {
(function(i) { (function(i) {
$.get('./svg/' + svgs[i] + '.svg').done(function(data) { $.get('./svg/' + svgs[i] + '.svg').done(function(data) {
var vertexSets = [], var vertexSets = [],
color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']); color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
$(data).find('path').each(function(i, path) { $(data).find('path').each(function(i, path) {
var points = Svg.pathToVertices(path, 30); var points = Svg.pathToVertices(path, 30);
@ -65,7 +65,7 @@ Example.svg = function() {
$.get('./svg/svg.svg').done(function(data) { $.get('./svg/svg.svg').done(function(data) {
var vertexSets = [], var vertexSets = [],
color = Common.choose(['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']); color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
$(data).find('path').each(function(i, path) { $(data).find('path').each(function(i, path) {
vertexSets.push(Svg.pathToVertices(path, 30)); vertexSets.push(Svg.pathToVertices(path, 30));

4
examples/terrain.js
View file

@ -47,8 +47,8 @@ Example.terrain = function() {
terrain = Bodies.fromVertices(400, 350, vertexSets, { terrain = Bodies.fromVertices(400, 350, vertexSets, {
isStatic: true, isStatic: true,
render: { render: {
fillStyle: '#2e2b44', fillStyle: '#060a19',
strokeStyle: '#2e2b44', strokeStyle: '#060a19',
lineWidth: 1 lineWidth: 1
} }
}, true); }, true);