如何将物理学应用于复杂的形状？ (matter.js + p5.js)
How to apply physics to complex shapes? (matter.js + p5.js)
我一直在尝试使用 matter.js + p5.js 制作一个球坑模拟游戏，用作交互式网站背景。
在 Mr Shiffman's video I've managed to get it working well with circle shapes 的一些帮助下，但我想将其提升到一个新的水平并使用自定义 blob 形状（取自客户的徽标）并对它们应用相同的物理原理。
我已经能够使用 p5 的 Beginshape() 和 matter 的 bodies.fromVertices[=46 的组合来渲染自定义形状=].如您所见，它可以正常工作，但物理原理非常奇怪，即使我对两者使用相同的顶点，碰撞似乎也不匹配。
我认为这可能与 p5 文档中的这句话有关
Transformations such as translate(), rotate(), and scale() do not work within beginShape().
但我不知道我能做些什么来解决这个问题，因为我需要它们能够平移/旋转以使物理学起作用...
有什么想法吗？帮助非常感谢！
Codepen
var fric = .6;
var rest = .7
//blob creation function
function Blob(x, y) {
var options = {
friction: fric,
restitution: rest
}
this.body = Bodies.fromVertices(x,y, blob, options);;
World.add(world, this.body);
this.show = function() {
var pos = this.body.position;
var angle = this.body.angle;
push();
translate(pos.x, pos.y);
rotate(angle);
rectMode(CENTER);
strokeWeight(0);
fill('#546B2E')
beginShape();
curveVertex(10.4235750010825,77.51573373392407);
curveVertex(3.142478233002126,70.89274677890447);
curveVertex(0.09197006398718799,61.45980047762196);
curveVertex(1.1915720013184474,51.59196924554452);
curveVertex(4.497757286928595,42.162760563619436);
curveVertex(5.252622102311041,32.216346235505895);
curveVertex(4.731619980811491,22.230638463608106);
curveVertex(4.748780859149178,12.256964518539956);
curveVertex(8.728313738681376,3.3252404103204602);
curveVertex(17.998080279150148,0.07532797415084502);
curveVertex(27.955564903146588,0.6294681264134124);
curveVertex(37.68448491855515,2.8865688476481735);
curveVertex(46.899804284802386,6.733477319787068);
curveVertex(55.386932458422265,12.031766230704845);
curveVertex(62.886098235421045,18.623827217916812);
curveVertex(69.13243582467831,26.40824364010799);
curveVertex(73.70136375533966,35.2754654128657);
curveVertex(75.90839243871912,44.99927633563314);
curveVertex(74.84120838749334,54.8784706257129);
curveVertex(70.09272040861401,63.61579878615303);
curveVertex(62.590342401896606,70.15080526550207);
curveVertex(53.62552650480876,74.54988781923045);
curveVertex(44.08788115809841,77.55817639102708);
curveVertex(34.30859814694884,79.58860716640554);
curveVertex(24.334764892578125,80.23994384765624);
curveVertex(14.444775242328642,78.88621691226959);
endShape(CLOSE);
pop();
}
}
var clientHeight = document.getElementById('physBox').clientHeight;
var clientWidth = document.getElementById('physBox').clientWidth;
var Engine = Matter.Engine,
World = Matter.World,
Bodies = Matter.Bodies,
Common = Matter.Common,
Composite = Matter.Composite,
Mouse = Matter.Mouse,
MouseConstraint = Matter.MouseConstraint,
Vertices = Matter.Vertices;
var blob = Vertices.fromPath('10.4235750010825 77.51573373392407 3.142478233002126 70.89274677890447 0.09197006398718799 61.45980047762196 1.1915720013184474 51.59196924554452 4.497757286928595 42.162760563619436 5.252622102311041 32.216346235505895 4.731619980811491 22.230638463608106 4.748780859149178 12.256964518539956 8.728313738681376 3.3252404103204602 17.998080279150148 0.07532797415084502 27.955564903146588 0.6294681264134124 37.68448491855515 2.8865688476481735 46.899804284802386 6.733477319787068 55.386932458422265 12.031766230704845 62.886098235421045 18.623827217916812 69.13243582467831 26.40824364010799 73.70136375533966 35.2754654128657 75.90839243871912 44.99927633563314 74.84120838749334 54.8784706257129 70.09272040861401 63.61579878615303 62.590342401896606 70.15080526550207 53.62552650480876 74.54988781923045 44.08788115809841 77.55817639102708 34.30859814694884 79.58860716640554 24.334764892578125 80.23994384765624 14.444775242328642 78.88621691226959');
var engine;
var world;
var blobs =[];
var ground;
var ceiling;
var wallLeft;
var wallRight;
var mConstraint;
//start sim after x time
setTimeout(function setup() {
var cnv = createCanvas(clientWidth, clientHeight);
cnv.parent("physBox");
engine = Engine.create();
world = engine.world;
Engine.run(engine);
//add ground
ground = Bodies.rectangle(clientWidth/2, clientHeight+500, clientWidth, 1000, { isStatic: true });
World.add(world, ground);
//add ceiling
ceiling = Bodies.rectangle(clientWidth/2, -clientHeight-500, clientWidth, 1000, { isStatic: true });
World.add(world, ceiling);
//add left wall
wallLeft = Bodies.rectangle(-500, clientHeight/2, 1000, clientHeight*2, { isStatic: true });
World.add(world, wallLeft);
//add right wall
wallRight = Bodies.rectangle(clientWidth+500, clientHeight/2, 1000, clientHeight*2, { isStatic: true });
World.add(world, wallRight);
//create x bodies
for (var i = 0; i < 4; i++) {
blobs.push(new Blob(clientWidth/2, 100));
}
//mouse controls
var options = {
mouse: canvasmouse
}
var canvasmouse = Mouse.create(cnv.elt);
mConstraint = MouseConstraint.create(engine);
World.add(world,mConstraint);
}, 2000);
function draw() {
background('#EEF2FD');
//show all bodies
for (var i = 0; i < blobs.length; i++) {
blobs[i].show();
}
}
body, html {
overflow: hidden;
padding:0;
margin:0;
}
h1 {
font-family: sans-serif;
font-size: 4vw;
background: none;
position: absolute;
margin-top:10%;
margin-left: 10%;
user-select: none;
}
#physBox {
width: 100%;
height: 100vh;
padding: 0;
left: 0;
z-index: -1;
box-sizing: border-box;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
<script src="https://cdn.jsdelivr.net/npm/poly-decomp@0.2.1/build/decomp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js"></script>
<section id="physBox">
<h1> Welcome to my website</h1>
</section>
注意：我最初尝试使用 SVG 而不是自定义形状来完成这一切，但很难理解如何让它工作所以我放弃了，如果有人能帮我解决这个问题使用 SVG 而不是我会很高兴！另外，为我糟糕的代码格式道歉 - 我正在学习 ;)
这里的根本问题是 matter.js 根据对象的质心而不是顶点所在坐标系的原点来定位对象，很明显坐标系的原点你的斑点顶点不是它的质心，因为你所有的顶点都是正的。您可以计算 blob 的质心，然后在绘制之前使用该偏移量：
const fric = 0.6;
const rest = 0.7;
const {
Engine,
Runner,
World,
Bodies,
Body,
Common,
Composite,
Mouse,
MouseConstraint,
Vertices
} = Matter;
const blob = Vertices.fromPath('10.4235750010825 77.51573373392407 3.142478233002126 70.89274677890447 0.09197006398718799 61.45980047762196 1.1915720013184474 51.59196924554452 4.497757286928595 42.162760563619436 5.252622102311041 32.216346235505895 4.731619980811491 22.230638463608106 4.748780859149178 12.256964518539956 8.728313738681376 3.3252404103204602 17.998080279150148 0.07532797415084502 27.955564903146588 0.6294681264134124 37.68448491855515 2.8865688476481735 46.899804284802386 6.733477319787068 55.386932458422265 12.031766230704845 62.886098235421045 18.623827217916812 69.13243582467831 26.40824364010799 73.70136375533966 35.2754654128657 75.90839243871912 44.99927633563314 74.84120838749334 54.8784706257129 70.09272040861401 63.61579878615303 62.590342401896606 70.15080526550207 53.62552650480876 74.54988781923045 44.08788115809841 77.55817639102708 34.30859814694884 79.58860716640554 24.334764892578125 80.23994384765624 14.444775242328642 78.88621691226959');
// from http://paulbourke.net/geometry/polygonmesh/
function computeArea(vertices) {
let area = 0;
for (let i = 0; i < vertices.length - 1; i++) {
let v = vertices[i];
let vn = vertices[i + 1];
area += (v.x * vn.y - vn.x * v.y) / 2;
}
return area;
}
function computeCenter(vertices) {
let area = computeArea(vertices);
let cx = 0,
cy = 0;
for (let i = 0; i < vertices.length - 1; i++) {
let v = vertices[i];
let vn = vertices[i + 1];
cx += (v.x + vn.x) * (v.x * vn.y - vn.x * v.y) / (6 * area);
cy += (v.y + vn.y) * (v.x * vn.y - vn.x * v.y) / (6 * area);
}
return {
x: cx,
y: cy
};
}
const center = computeCenter(blob);
let engine;
let world;
let blobs = [];
let ground;
let ceiling;
let wallLeft;
let wallRight;
let mConstraint;
//blob creation function
function Blob(x, y) {
let options = {
friction: fric,
restitution: rest
}
this.body = Bodies.fromVertices(x, y, blob, options);
World.add(world, this.body);
// Scales the body around the center
Body.scale(this.body, 0.5, 0.5);
this.show = function() {
var pos = this.body.position;
var angle = this.body.angle;
push();
translate(pos.x, pos.y);
rotate(angle);
scale(0.5, 0.5);
translate(-center.x, -center.y);
strokeWeight(0);
fill('#546B2E')
beginShape();
for (const {
x,
y
} of blob) {
curveVertex(x, y);
}
endShape(CLOSE);
pop();
// Alternately, when drawing your blobs you could use
// the bodies vertices, but it looks like these are
// converted into a convex polygon.
push();
stroke('red');
strokeWeight(1);
noFill();
beginShape();
for (const {
x,
y
} of this.body.vertices) {
curveVertex(x, y);
}
endShape(CLOSE);
pop();
}
}
//start sim after x time
function setup() {
const cnv = createCanvas(windowWidth, Math.max(windowHeight, 300));
engine = Engine.create();
world = engine.world;
const runner = Runner.create();
Runner.run(runner, engine);
//add ground
ground = Bodies.rectangle(width / 2, height, width, 50, {
isStatic: true
});
World.add(world, ground);
//add ceiling
ceiling = Bodies.rectangle(width / 2, 0, width, 50, {
isStatic: true
});
World.add(world, ceiling);
//add left wall
wallLeft = Bodies.rectangle(0, height / 2, 50, height, {
isStatic: true
});
World.add(world, wallLeft);
//add right wall
wallRight = Bodies.rectangle(width, height / 2, 50, height, {
isStatic: true
});
World.add(world, wallRight);
//create x bodies
for (let i = 0; i < 4; i++) {
blobs.push(new Blob(random(50, width - 100), random(50, height - 100)));
}
}
function draw() {
background('#EEF2FD');
//show all bodies
for (var i = 0; i < blobs.length; i++) {
blobs[i].show();
}
}
function mouseClicked() {
blobs.push(new Blob(mouseX, mouseY));
}
html,
body {
margin: 0;
overflow-x: hidden;
}
<script src="https://cdn.jsdelivr.net/npm/poly-decomp@0.2.1/build/decomp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
我一直在尝试使用 matter.js + p5.js 制作一个球坑模拟游戏，用作交互式网站背景。
在 Mr Shiffman's video I've managed to get it working well with circle shapes 的一些帮助下，但我想将其提升到一个新的水平并使用自定义 blob 形状（取自客户的徽标）并对它们应用相同的物理原理。
我已经能够使用 p5 的 Beginshape() 和 matter 的 bodies.fromVertices[=46 的组合来渲染自定义形状=].如您所见，它可以正常工作，但物理原理非常奇怪，即使我对两者使用相同的顶点，碰撞似乎也不匹配。
我认为这可能与 p5 文档中的这句话有关
Transformations such as translate(), rotate(), and scale() do not work within beginShape().
但我不知道我能做些什么来解决这个问题，因为我需要它们能够平移/旋转以使物理学起作用...
有什么想法吗？帮助非常感谢！
Codepen
var fric = .6;
var rest = .7
//blob creation function
function Blob(x, y) {
var options = {
friction: fric,
restitution: rest
}
this.body = Bodies.fromVertices(x,y, blob, options);;
World.add(world, this.body);
this.show = function() {
var pos = this.body.position;
var angle = this.body.angle;
push();
translate(pos.x, pos.y);
rotate(angle);
rectMode(CENTER);
strokeWeight(0);
fill('#546B2E')
beginShape();
curveVertex(10.4235750010825,77.51573373392407);
curveVertex(3.142478233002126,70.89274677890447);
curveVertex(0.09197006398718799,61.45980047762196);
curveVertex(1.1915720013184474,51.59196924554452);
curveVertex(4.497757286928595,42.162760563619436);
curveVertex(5.252622102311041,32.216346235505895);
curveVertex(4.731619980811491,22.230638463608106);
curveVertex(4.748780859149178,12.256964518539956);
curveVertex(8.728313738681376,3.3252404103204602);
curveVertex(17.998080279150148,0.07532797415084502);
curveVertex(27.955564903146588,0.6294681264134124);
curveVertex(37.68448491855515,2.8865688476481735);
curveVertex(46.899804284802386,6.733477319787068);
curveVertex(55.386932458422265,12.031766230704845);
curveVertex(62.886098235421045,18.623827217916812);
curveVertex(69.13243582467831,26.40824364010799);
curveVertex(73.70136375533966,35.2754654128657);
curveVertex(75.90839243871912,44.99927633563314);
curveVertex(74.84120838749334,54.8784706257129);
curveVertex(70.09272040861401,63.61579878615303);
curveVertex(62.590342401896606,70.15080526550207);
curveVertex(53.62552650480876,74.54988781923045);
curveVertex(44.08788115809841,77.55817639102708);
curveVertex(34.30859814694884,79.58860716640554);
curveVertex(24.334764892578125,80.23994384765624);
curveVertex(14.444775242328642,78.88621691226959);
endShape(CLOSE);
pop();
}
}
var clientHeight = document.getElementById('physBox').clientHeight;
var clientWidth = document.getElementById('physBox').clientWidth;
var Engine = Matter.Engine,
World = Matter.World,
Bodies = Matter.Bodies,
Common = Matter.Common,
Composite = Matter.Composite,
Mouse = Matter.Mouse,
MouseConstraint = Matter.MouseConstraint,
Vertices = Matter.Vertices;
var blob = Vertices.fromPath('10.4235750010825 77.51573373392407 3.142478233002126 70.89274677890447 0.09197006398718799 61.45980047762196 1.1915720013184474 51.59196924554452 4.497757286928595 42.162760563619436 5.252622102311041 32.216346235505895 4.731619980811491 22.230638463608106 4.748780859149178 12.256964518539956 8.728313738681376 3.3252404103204602 17.998080279150148 0.07532797415084502 27.955564903146588 0.6294681264134124 37.68448491855515 2.8865688476481735 46.899804284802386 6.733477319787068 55.386932458422265 12.031766230704845 62.886098235421045 18.623827217916812 69.13243582467831 26.40824364010799 73.70136375533966 35.2754654128657 75.90839243871912 44.99927633563314 74.84120838749334 54.8784706257129 70.09272040861401 63.61579878615303 62.590342401896606 70.15080526550207 53.62552650480876 74.54988781923045 44.08788115809841 77.55817639102708 34.30859814694884 79.58860716640554 24.334764892578125 80.23994384765624 14.444775242328642 78.88621691226959');
var engine;
var world;
var blobs =[];
var ground;
var ceiling;
var wallLeft;
var wallRight;
var mConstraint;
//start sim after x time
setTimeout(function setup() {
var cnv = createCanvas(clientWidth, clientHeight);
cnv.parent("physBox");
engine = Engine.create();
world = engine.world;
Engine.run(engine);
//add ground
ground = Bodies.rectangle(clientWidth/2, clientHeight+500, clientWidth, 1000, { isStatic: true });
World.add(world, ground);
//add ceiling
ceiling = Bodies.rectangle(clientWidth/2, -clientHeight-500, clientWidth, 1000, { isStatic: true });
World.add(world, ceiling);
//add left wall
wallLeft = Bodies.rectangle(-500, clientHeight/2, 1000, clientHeight*2, { isStatic: true });
World.add(world, wallLeft);
//add right wall
wallRight = Bodies.rectangle(clientWidth+500, clientHeight/2, 1000, clientHeight*2, { isStatic: true });
World.add(world, wallRight);
//create x bodies
for (var i = 0; i < 4; i++) {
blobs.push(new Blob(clientWidth/2, 100));
}
//mouse controls
var options = {
mouse: canvasmouse
}
var canvasmouse = Mouse.create(cnv.elt);
mConstraint = MouseConstraint.create(engine);
World.add(world,mConstraint);
}, 2000);
function draw() {
background('#EEF2FD');
//show all bodies
for (var i = 0; i < blobs.length; i++) {
blobs[i].show();
}
}
body, html {
overflow: hidden;
padding:0;
margin:0;
}
h1 {
font-family: sans-serif;
font-size: 4vw;
background: none;
position: absolute;
margin-top:10%;
margin-left: 10%;
user-select: none;
}
#physBox {
width: 100%;
height: 100vh;
padding: 0;
left: 0;
z-index: -1;
box-sizing: border-box;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
<script src="https://cdn.jsdelivr.net/npm/poly-decomp@0.2.1/build/decomp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js"></script>
<section id="physBox">
<h1> Welcome to my website</h1>
</section>
注意：我最初尝试使用 SVG 而不是自定义形状来完成这一切，但很难理解如何让它工作所以我放弃了，如果有人能帮我解决这个问题使用 SVG 而不是我会很高兴！另外，为我糟糕的代码格式道歉 - 我正在学习 ;)
这里的根本问题是 matter.js 根据对象的质心而不是顶点所在坐标系的原点来定位对象，很明显坐标系的原点你的斑点顶点不是它的质心，因为你所有的顶点都是正的。您可以计算 blob 的质心，然后在绘制之前使用该偏移量：
const fric = 0.6;
const rest = 0.7;
const {
Engine,
Runner,
World,
Bodies,
Body,
Common,
Composite,
Mouse,
MouseConstraint,
Vertices
} = Matter;
const blob = Vertices.fromPath('10.4235750010825 77.51573373392407 3.142478233002126 70.89274677890447 0.09197006398718799 61.45980047762196 1.1915720013184474 51.59196924554452 4.497757286928595 42.162760563619436 5.252622102311041 32.216346235505895 4.731619980811491 22.230638463608106 4.748780859149178 12.256964518539956 8.728313738681376 3.3252404103204602 17.998080279150148 0.07532797415084502 27.955564903146588 0.6294681264134124 37.68448491855515 2.8865688476481735 46.899804284802386 6.733477319787068 55.386932458422265 12.031766230704845 62.886098235421045 18.623827217916812 69.13243582467831 26.40824364010799 73.70136375533966 35.2754654128657 75.90839243871912 44.99927633563314 74.84120838749334 54.8784706257129 70.09272040861401 63.61579878615303 62.590342401896606 70.15080526550207 53.62552650480876 74.54988781923045 44.08788115809841 77.55817639102708 34.30859814694884 79.58860716640554 24.334764892578125 80.23994384765624 14.444775242328642 78.88621691226959');
// from http://paulbourke.net/geometry/polygonmesh/
function computeArea(vertices) {
let area = 0;
for (let i = 0; i < vertices.length - 1; i++) {
let v = vertices[i];
let vn = vertices[i + 1];
area += (v.x * vn.y - vn.x * v.y) / 2;
}
return area;
}
function computeCenter(vertices) {
let area = computeArea(vertices);
let cx = 0,
cy = 0;
for (let i = 0; i < vertices.length - 1; i++) {
let v = vertices[i];
let vn = vertices[i + 1];
cx += (v.x + vn.x) * (v.x * vn.y - vn.x * v.y) / (6 * area);
cy += (v.y + vn.y) * (v.x * vn.y - vn.x * v.y) / (6 * area);
}
return {
x: cx,
y: cy
};
}
const center = computeCenter(blob);
let engine;
let world;
let blobs = [];
let ground;
let ceiling;
let wallLeft;
let wallRight;
let mConstraint;
//blob creation function
function Blob(x, y) {
let options = {
friction: fric,
restitution: rest
}
this.body = Bodies.fromVertices(x, y, blob, options);
World.add(world, this.body);
// Scales the body around the center
Body.scale(this.body, 0.5, 0.5);
this.show = function() {
var pos = this.body.position;
var angle = this.body.angle;
push();
translate(pos.x, pos.y);
rotate(angle);
scale(0.5, 0.5);
translate(-center.x, -center.y);
strokeWeight(0);
fill('#546B2E')
beginShape();
for (const {
x,
y
} of blob) {
curveVertex(x, y);
}
endShape(CLOSE);
pop();
// Alternately, when drawing your blobs you could use
// the bodies vertices, but it looks like these are
// converted into a convex polygon.
push();
stroke('red');
strokeWeight(1);
noFill();
beginShape();
for (const {
x,
y
} of this.body.vertices) {
curveVertex(x, y);
}
endShape(CLOSE);
pop();
}
}
//start sim after x time
function setup() {
const cnv = createCanvas(windowWidth, Math.max(windowHeight, 300));
engine = Engine.create();
world = engine.world;
const runner = Runner.create();
Runner.run(runner, engine);
//add ground
ground = Bodies.rectangle(width / 2, height, width, 50, {
isStatic: true
});
World.add(world, ground);
//add ceiling
ceiling = Bodies.rectangle(width / 2, 0, width, 50, {
isStatic: true
});
World.add(world, ceiling);
//add left wall
wallLeft = Bodies.rectangle(0, height / 2, 50, height, {
isStatic: true
});
World.add(world, wallLeft);
//add right wall
wallRight = Bodies.rectangle(width, height / 2, 50, height, {
isStatic: true
});
World.add(world, wallRight);
//create x bodies
for (let i = 0; i < 4; i++) {
blobs.push(new Blob(random(50, width - 100), random(50, height - 100)));
}
}
function draw() {
background('#EEF2FD');
//show all bodies
for (var i = 0; i < blobs.length; i++) {
blobs[i].show();
}
}
function mouseClicked() {
blobs.push(new Blob(mouseX, mouseY));
}
html,
body {
margin: 0;
overflow-x: hidden;
}
<script src="https://cdn.jsdelivr.net/npm/poly-decomp@0.2.1/build/decomp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>