From 6dd5ec55bf45e37805b785f08000cbbaec0c4695 Mon Sep 17 00:00:00 2001
From: liabru <liabru@brm.io>
Date: Tue, 8 Dec 2020 23:57:14 +0000
Subject: [PATCH] update demo and example render styles
---
demo/index.html | 4 ++++
examples/avalanche.js | 8 ++++----
examples/ballPool.js | 2 +-
examples/bridge.js | 2 +-
examples/car.js | 6 +++---
examples/catapult.js | 6 +++---
examples/cloth.js | 4 ++--
examples/collisionFiltering.js | 21 ++++++++++-----------
examples/concave.js | 2 +-
examples/doublePendulum.js | 6 +-----
examples/friction.js | 6 +++---
examples/manipulation.js | 8 ++++----
examples/ragdoll.js | 9 +++++----
examples/sensors.js | 25 ++++++++++++-------------
examples/slingshot.js | 4 ++--
examples/sprites.js | 1 -
examples/staticFriction.js | 2 +-
examples/svg.js | 4 ++--
examples/terrain.js | 4 ++--
19 files changed, 61 insertions(+), 63 deletions(-)
diff --git a/demo/index.html b/demo/index.html
index 17d9eb3..cc910c8 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -61,6 +61,10 @@
opacity: 0.5;
background: transparent !important;
}
+
+ .matter-demo canvas {
+ border: 1px solid rgba(255, 255, 255, 0.07);
+ }
</style>
</head>
<body>
diff --git a/examples/avalanche.js b/examples/avalanche.js
index f22dfa4..b79b525 100644
--- a/examples/avalanche.js
+++ b/examples/avalanche.js
@@ -41,13 +41,13 @@ Example.avalanche = function() {
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 });
});
-
+
World.add(world, stack);
World.add(world, [
- Bodies.rectangle(200, 150, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
- Bodies.rectangle(500, 350, 700, 20, { isStatic: true, angle: -Math.PI * 0.06 }),
- Bodies.rectangle(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04 })
+ 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, render: { fillStyle: '#060a19' } }),
+ Bodies.rectangle(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04, render: { fillStyle: '#060a19' } })
]);
// add mouse control
diff --git a/examples/ballPool.js b/examples/ballPool.js
index 356bbaf..f6ac267 100644
--- a/examples/ballPool.js
+++ b/examples/ballPool.js
@@ -39,7 +39,7 @@ Example.ballPool = function() {
// add bodies
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) {
diff --git a/examples/bridge.js b/examples/bridge.js
index d15777f..e77f58a 100644
--- a/examples/bridge.js
+++ b/examples/bridge.js
@@ -44,7 +44,7 @@ Example.bridge = function() {
density: 0.005,
frictionAir: 0.05,
render: {
- fillStyle: '#575375'
+ fillStyle: '#060a19'
}
});
});
diff --git a/examples/car.js b/examples/car.js
index 597ae01..76fb5b6 100644
--- a/examples/car.js
+++ b/examples/car.js
@@ -48,9 +48,9 @@ Example.car = function() {
World.add(world, Composites.car(350, 300, 150 * scale, 30 * scale, 30 * scale));
World.add(world, [
- Bodies.rectangle(200, 150, 400, 20, { isStatic: true, angle: Math.PI * 0.06 }),
- Bodies.rectangle(500, 350, 650, 20, { isStatic: true, angle: -Math.PI * 0.06 }),
- Bodies.rectangle(300, 560, 600, 20, { isStatic: true, angle: Math.PI * 0.04 })
+ 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, render: { fillStyle: '#060a19' }}),
+ Bodies.rectangle(300, 560, 600, 20, { isStatic: true, angle: Math.PI * 0.04, render: { fillStyle: '#060a19' }})
]);
// add mouse control
diff --git a/examples/catapult.js b/examples/catapult.js
index e58edad..2ebfb55 100644
--- a/examples/catapult.js
+++ b/examples/catapult.js
@@ -48,9 +48,9 @@ Example.catapult = function() {
World.add(world, [
stack,
catapult,
- Bodies.rectangle(400, 600, 800, 50.5, { isStatic: true }),
- Bodies.rectangle(250, 555, 20, 50, { isStatic: true }),
- Bodies.rectangle(400, 535, 20, 80, { isStatic: true, collisionFilter: { group: group } }),
+ Bodies.rectangle(400, 600, 800, 50.5, { isStatic: true, render: { fillStyle: '#060a19' } }),
+ Bodies.rectangle(250, 555, 20, 50, { isStatic: true, render: { fillStyle: '#060a19' } }),
+ Bodies.rectangle(400, 535, 20, 80, { isStatic: true, collisionFilter: { group: group }, render: { fillStyle: '#060a19' } }),
Bodies.circle(560, 100, 50, { density: 0.005 }),
Constraint.create({
bodyA: catapult,
diff --git a/examples/cloth.js b/examples/cloth.js
index 10d4066..da6e163 100644
--- a/examples/cloth.js
+++ b/examples/cloth.js
@@ -43,8 +43,8 @@ Example.cloth = function() {
World.add(world, [
cloth,
- Bodies.circle(300, 500, 80, { isStatic: true }),
- Bodies.rectangle(500, 480, 80, 80, { isStatic: true }),
+ 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 })
]);
diff --git a/examples/collisionFiltering.js b/examples/collisionFiltering.js
index f1f2e2f..67e5bf1 100644
--- a/examples/collisionFiltering.js
+++ b/examples/collisionFiltering.js
@@ -23,8 +23,7 @@ Example.collisionFiltering = function() {
options: {
width: 800,
height: 600,
- wireframes: false,
- background: '#111'
+ wireframes: false
}
});
@@ -40,9 +39,9 @@ Example.collisionFiltering = function() {
greenCategory = 0x0004,
blueCategory = 0x0008;
- var redColor = '#C44D58',
- blueColor = '#4ECDC4',
- greenColor = '#C7F464';
+ var colorA = '#f55a3c',
+ colorB = '#063e7b',
+ colorC = '#f5d259';
// add floor
World.add(world, Bodies.rectangle(400, 600, 900, 50, {
@@ -57,14 +56,14 @@ Example.collisionFiltering = function() {
World.add(world,
Composites.stack(275, 100, 5, 9, 10, 10, function(x, y, column, row) {
var category = redCategory,
- color = redColor;
+ color = colorA;
if (row > 5) {
category = blueCategory;
- color = blueColor;
+ color = colorB;
} else if (row > 2) {
category = greenCategory;
- color = greenColor;
+ color = colorC;
}
return Bodies.circle(x, y, 20, {
@@ -87,7 +86,7 @@ Example.collisionFiltering = function() {
mask: defaultCategory | greenCategory
},
render: {
- fillStyle: greenColor
+ fillStyle: colorC
}
})
);
@@ -99,7 +98,7 @@ Example.collisionFiltering = function() {
mask: defaultCategory | redCategory
},
render: {
- fillStyle: redColor
+ fillStyle: colorA
}
})
);
@@ -111,7 +110,7 @@ Example.collisionFiltering = function() {
mask: defaultCategory | blueCategory
},
render: {
- fillStyle: blueColor
+ fillStyle: colorB
}
})
);
diff --git a/examples/concave.js b/examples/concave.js
index 0a25135..3289a49 100644
--- a/examples/concave.js
+++ b/examples/concave.js
@@ -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');
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]), {
render: {
fillStyle: color,
diff --git a/examples/doublePendulum.js b/examples/doublePendulum.js
index a847bdb..dd84a0f 100644
--- a/examples/doublePendulum.js
+++ b/examples/doublePendulum.js
@@ -26,8 +26,7 @@ Example.doublePendulum = function() {
options: {
width: 800,
height: 600,
- wireframes: false,
- background: '#0f0f13'
+ wireframes: false
}
});
@@ -54,9 +53,6 @@ Example.doublePendulum = function() {
});
});
- pendulum.bodies[0].render.strokeStyle = '#4a485b';
- pendulum.bodies[1].render.strokeStyle = '#4a485b';
-
world.gravity.scale = 0.002;
Composites.chain(pendulum, 0.45, 0, -0.45, 0, {
diff --git a/examples/friction.js b/examples/friction.js
index 1284b73..7502b73 100644
--- a/examples/friction.js
+++ b/examples/friction.js
@@ -40,17 +40,17 @@ Example.friction = function() {
]);
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 })
]);
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 })
]);
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 })
]);
diff --git a/examples/manipulation.js b/examples/manipulation.js
index f69eb81..8c407cb 100644
--- a/examples/manipulation.js
+++ b/examples/manipulation.js
@@ -35,15 +35,15 @@ Example.manipulation = function() {
Runner.run(runner, engine);
// 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),
bodyC = Bodies.rectangle(300, 200, 50, 50),
bodyD = Bodies.rectangle(400, 200, 50, 50),
bodyE = Bodies.rectangle(550, 200, 50, 50),
bodyF = Bodies.rectangle(700, 200, 50, 50),
- bodyG = Bodies.circle(400, 100, 25),
- partA = Bodies.rectangle(600, 200, 120, 50),
- partB = Bodies.rectangle(660, 200, 50, 190),
+ bodyG = Bodies.circle(400, 100, 25, { render: { fillStyle: '#060a19' } }),
+ partA = Bodies.rectangle(600, 200, 120, 50, { render: { fillStyle: '#060a19' } }),
+ partB = Bodies.rectangle(660, 200, 50, 190, { render: { fillStyle: '#060a19' } }),
compound = Body.create({
parts: [partA, partB],
isStatic: true
diff --git a/examples/ragdoll.js b/examples/ragdoll.js
index 1a717f8..a7ea8dd 100644
--- a/examples/ragdoll.js
+++ b/examples/ragdoll.js
@@ -27,8 +27,7 @@ Example.ragdoll = function() {
options: {
width: 800,
height: 600,
- showAngleIndicator: true,
- background: '#0f0f13'
+ showAngleIndicator: true
}
});
@@ -45,7 +44,9 @@ Example.ragdoll = function() {
return Bodies.rectangle(x - 50, y + column * 50, 100, 1000, {
isStatic: true,
render: {
- fillStyle: '#222'
+ fillStyle: '#060a19',
+ strokeStyle: '#ffffff',
+ lineWidth: 1
}
});
});
@@ -55,7 +56,7 @@ Example.ragdoll = function() {
var sides = Math.round(Common.random(1, 8)),
options = {
render: {
- fillStyle: Common.choose(['#006BA6', '#0496FF', '#D81159', '#8F2D56'])
+ fillStyle: Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1'])
}
};
diff --git a/examples/sensors.js b/examples/sensors.js
index ff92caa..a034b9b 100644
--- a/examples/sensors.js
+++ b/examples/sensors.js
@@ -21,8 +21,7 @@ Example.sensors = function() {
options: {
width: 800,
height: 600,
- wireframes: false,
- background: '#111'
+ wireframes: false
}
});
@@ -33,14 +32,14 @@ Example.sensors = function() {
Runner.run(runner, engine);
// add bodies
- var redColor = '#C44D58',
- greenColor = '#C7F464';
+ var colorA = '#f55a3c',
+ colorB = '#f5d259';
var collider = Bodies.rectangle(400, 300, 500, 50, {
isSensor: true,
isStatic: true,
render: {
- strokeStyle: redColor,
+ strokeStyle: colorA,
fillStyle: 'transparent',
lineWidth: 1
}
@@ -48,11 +47,11 @@ Example.sensors = function() {
World.add(world, [
collider,
- Bodies.rectangle(400, 620, 800, 50, {
+ Bodies.rectangle(400, 600, 800, 50, {
isStatic: true,
render: {
- fillStyle: 'transparent',
- lineWidth: 1
+ fillStyle: '#060a19',
+ lineWidth: 0
}
})
]);
@@ -60,7 +59,7 @@ Example.sensors = function() {
World.add(world,
Bodies.circle(400, 40, 30, {
render: {
- strokeStyle: greenColor,
+ strokeStyle: colorB,
fillStyle: 'transparent',
lineWidth: 1
}
@@ -74,9 +73,9 @@ Example.sensors = function() {
var pair = pairs[i];
if (pair.bodyA === collider) {
- pair.bodyB.render.strokeStyle = redColor;
+ pair.bodyB.render.strokeStyle = colorA;
} 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];
if (pair.bodyA === collider) {
- pair.bodyB.render.strokeStyle = greenColor;
+ pair.bodyB.render.strokeStyle = colorB;
} else if (pair.bodyB === collider) {
- pair.bodyA.render.strokeStyle = greenColor;
+ pair.bodyA.render.strokeStyle = colorB;
}
}
});
diff --git a/examples/slingshot.js b/examples/slingshot.js
index 49344e1..df2f6f3 100644
--- a/examples/slingshot.js
+++ b/examples/slingshot.js
@@ -34,7 +34,7 @@ Example.slingshot = function() {
Runner.run(runner, engine);
// 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 },
rock = Bodies.polygon(170, 450, 8, 20, rockOptions),
anchor = { x: 170, y: 450 },
@@ -48,7 +48,7 @@ Example.slingshot = function() {
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) {
return Bodies.rectangle(x, y, 25, 40);
diff --git a/examples/sprites.js b/examples/sprites.js
index 7c6bee8..1bdbba5 100644
--- a/examples/sprites.js
+++ b/examples/sprites.js
@@ -22,7 +22,6 @@ Example.sprites = function() {
options: {
width: 800,
height: 600,
- background: '#0f0f13',
showAngleIndicator: false,
wireframes: false
}
diff --git a/examples/staticFriction.js b/examples/staticFriction.js
index adc9d4d..3366c5d 100644
--- a/examples/staticFriction.js
+++ b/examples/staticFriction.js
@@ -34,7 +34,7 @@ Example.staticFriction = function() {
Runner.run(runner, engine);
// 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,
counter = -1;
diff --git a/examples/svg.js b/examples/svg.js
index 4569576..41b5764 100644
--- a/examples/svg.js
+++ b/examples/svg.js
@@ -45,7 +45,7 @@ Example.svg = function() {
(function(i) {
$.get('./svg/' + svgs[i] + '.svg').done(function(data) {
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) {
var points = Svg.pathToVertices(path, 30);
@@ -65,7 +65,7 @@ Example.svg = function() {
$.get('./svg/svg.svg').done(function(data) {
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) {
vertexSets.push(Svg.pathToVertices(path, 30));
diff --git a/examples/terrain.js b/examples/terrain.js
index d9ebfa2..f6f54af 100644
--- a/examples/terrain.js
+++ b/examples/terrain.js
@@ -47,8 +47,8 @@ Example.terrain = function() {
terrain = Bodies.fromVertices(400, 350, vertexSets, {
isStatic: true,
render: {
- fillStyle: '#2e2b44',
- strokeStyle: '#2e2b44',
+ fillStyle: '#060a19',
+ strokeStyle: '#060a19',
lineWidth: 1
}
}, true);