Симуляция физики объектов

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script>
const { Engine, Events, Body, Render, Bodies, World, MouseConstraint, Composites, Query, Common, Mouse } = Matter;

var sectionTag = document.querySelector(".shapes");

// Width and height of the area
let w = sectionTag.offsetWidth;
let h = sectionTag.offsetHeight;

const engine = Engine.create();
engine.world.gravity.x = 0;
engine.world.gravity.y = 0.001;
engine.world.gravity.scale = 0.1;

var renderer = Render.create({
element: sectionTag,
engine: engine,
options: {
width: w,
height: h,
background: "#fff",
wireframes: false,
pixelRatio: window.devicePixelRatio,
},
});

// Create walls
const wallOptions = {
isStatic: true,
render: {
visible: true,
fillStyle: "#000000",
},
friction: 0,
restitution: 0.1,
};

const ceiling = Bodies.rectangle(w / 2, -25, w, 50, wallOptions);
const ground = Bodies.rectangle(w / 2, h + 10, w, 50, wallOptions);
const leftWall = Bodies.rectangle(-25, h / 2, 50, h, wallOptions);
const rightWall = Bodies.rectangle(w + 25, h / 2, 50, h, wallOptions);

const mouseControl = MouseConstraint.create(engine, {
element: sectionTag,
constraint: {
render: {
visible: false,
},
},
});

World.add(engine.world, [ground, ceiling, leftWall, rightWall, mouseControl]);

var color = "#9bc459";

// Calculate number of circles based on window size
var peasize = 40000; // 35 * 35, gives some space around the largest pea
var width = window.innerWidth;
var height = window.innerHeight;
var area = width * height;

// We want to cover 85% of the screen in peas
var areatocover = area * 0.75;
var numberofpeas = areatocover / peasize;

// Define texture links
const textures = [
"https://static.tildacdn.com/tild3431-3863-4435-b734-326635663761/Frame_21751.svg",
"https://static.tildacdn.com/tild6664-3161-4565-b839-356537666366/Frame_21753.svg",
"https://static.tildacdn.com/tild3832-3331-4135-b333-303565613639/Group_21860.svg",
"https://static.tildacdn.com/tild3937-3330-4261-b538-656532366138/Frame_21750.svg",
"https://static.tildacdn.com/tild3062-3366-4562-b062-373462653765/Frame_21755.svg",
"https://static.tildacdn.com/tild6439-3964-4832-b265-633238323232/Frame_21756.svg",
];

// Add peas in random positions
for (let i = 0; i < numberofpeas; i++) {
var radius = gsap.utils.random(80, 80);
var radius2 = radius * 0.5;
var posx = gsap.utils.random(radius2, w - radius2, radius2, true);
var posy = gsap.utils.random(radius2, h - radius2, radius2, true);
var scaleFactor = radius / 1300;

// Randomly select a texture
var texture = textures[Math.floor(Math.random() * textures.length)];

World.add(
engine.world,
Bodies.circle(posx(), posy(), radius, {
frictionAir: 0,
frictionStatic: 0,
friction: 0,
restitution: 0.01,
mass: 1,
slop: 0,
render: {
fillStyle: color,
sprite: {
texture: texture,
xScale: scaleFactor,
yScale: scaleFactor,
},
},
})
);
}

Matter.Runner.run(engine);
Matter.Render.run(renderer);

// Resize the area on window resize
window.addEventListener("resize", () => {
renderer.bounds.max.x = sectionTag.clientWidth;
renderer.bounds.max.y = sectionTag.clientHeight;
renderer.options.width = sectionTag.clientWidth;
renderer.options.height = sectionTag.clientHeight;
renderer.canvas.width = sectionTag.clientWidth;
renderer.canvas.height = sectionTag.clientHeight;
Matter.Render.setPixelRatio(renderer, "auto");

Matter.Body.setPosition(
ground,
Matter.Vector.create(sectionTag.clientWidth / 2, sectionTag.clientHeight + 50)
);

Matter.Body.setPosition(
rightWall,
Matter.Vector.create(sectionTag.clientWidth + 25, sectionTag.clientHeight / 2)
);
});
</script>