update demo and example render styles

liabru · Dec 8, 2020 · 6dd5ec5 · 6dd5ec5
1 parent d258411
commit 6dd5ec5
Show file tree

Hide file tree

Showing 19 changed files with 61 additions and 63 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -21,8 +21,7 @@ Example.sensors = function() {
         options: {
             width: 800,
             height: 600,
-            wireframes: false,
-            background: '#111'
+            wireframes: false
         }
     });
 
@@ -33,34 +32,34 @@ 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
         }
     });
 
     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
             }
         })
     ]);
 
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);