Is there a way to draw a matter.js composite with p5? - p5.js

Question

I recently saw the matter.js on the coding train channel from 2017, I've managed to replicate the examples shown on those videos but now I wanted to do something more advanced. There is a Composite module called stack in the documentation used to create a soft body in the matter.js demos but I wonder if there is a way to draw this using p5 instead.
This is what I've gotten so far, any help is appreciated

Answer 1

I think the main issue with your code was that you weren't adding the Composite to the world. Here's a working example with a few other tweaks:
const {
Bodies,
Common,
Composites,
Constraint,
Engine,
Runner,
World
} = Matter;
var engine;
var world;
var particles = [];
var boundaries = [];
var composi1;
var composi2;
function setup() {
createCanvas(400, 400);
engine = Engine.create();
world = engine.world;
// Use a runner to actually run the simulation
const runner = Runner.create();
Runner.run(runner, engine);
// Add two composites so we can see them interact
composi1 = new softbodi(100, 50, 4, 4, 0, 0, true, 20);
composi2 = new softbodi(50, 300, 4, 2, 0, 0, true, 20);
boundaries.push(new Boundary(200, height, width, 50, 0));
}
function draw() {
background(51);
for (var i = 0; i < boundaries.length; i++) {
boundaries[i].show();
}
composi1.show();
composi2.show();
}
function softbodi(
xx,
yy,
columns,
rows,
columnGap,
rowGap,
crossBrace,
particleRadius) {
this.r = particleRadius;
this.composite = Composites.stack(
xx,
yy,
columns,
rows,
columnGap,
rowGap,
function(x, y) {
return Bodies.circle(x, y, particleRadius);
}
);
this.mesh = Composites.mesh(this.composite, columns, rows, crossBrace);
// Dont forget to add you composite to the world
World.add(world, this.composite);
this.show = function() {
var parr = [];
parr = Matter.Composite.allBodies(this.composite);
for (var i = 0; i < parr.length; i++) {
var pos = parr[i].position;
var angle = parr[i].angle;
push();
translate(pos.x, pos.y);
rotate(angle);
rectMode(CENTER);
strokeWeight(1);
stroke(255);
fill(127);
ellipse(0, 0, this.r * 2);
pop();
}
};
}
function Boundary(x, y, w, h, a) {
var options = {
friction: 0,
restitution: 0.95,
angle: a,
isStatic: true
};
this.body = Bodies.rectangle(x, y, w, h, options);
this.w = w;
this.h = h;
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(1);
noStroke();
fill(0);
rect(0, 0, this.w, this.h);
pop();
};
}
<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>