I'm developing a Javascript animation using matter.js. Here is the link:
https://codepen.io/Sergio-Escalona/pen/VwNrwbw
document.addEventListener("DOMContentLoaded", function () {
// Basic setup
let Engine = Matter.Engine,
World = Matter.World,
Bodies = Matter.Bodies,
Body = Matter.Body;
let engine = Engine.create();
engine.world.gravity.y = 0; // No gravity for a space-like effect
let render = Matter.Render.create({
element: document.body,
engine: engine,
options: {
width: window.innerWidth,
height: window.innerHeight,
background: 'transparent',
wireframes: false // for sprite rendering
}
});
// Create static walls
let thickness = 50; // Ensures ducks don't escape through fast movements
let wallOptions = { isStatic: true, restitution: 1.0 }; // Perfectly elastic collisions
let ground = Bodies.rectangle(window.innerWidth / 2, window.innerHeight + thickness / 2, window.innerWidth, thickness, wallOptions);
let leftWall = Bodies.rectangle(-thickness / 2, window.innerHeight / 2, thickness, window.innerHeight, wallOptions);
let rightWall = Bodies.rectangle(window.innerWidth + thickness / 2, window.innerHeight / 2, thickness, window.innerHeight, wallOptions);
let topWall = Bodies.rectangle(window.innerWidth / 2, -thickness / 2, window.innerWidth, thickness, wallOptions);
World.add(engine.world, [ground, leftWall, rightWall, topWall]);
// Function to add a new duck with random selection for black duck
function addDuck() {
let safeMargin = 100; // A margin to avoid spawning too close to the edge
let radius = 25;
// Randomly choose the texture for the duck
let textureUrl = Math.random() < 0.9 ?
'https://assets.codepen.io/12210161/duckling-svgrepo-com.svg' :
'https://assets.codepen.io/12210161/duckling-svgrepo-com-bk.svg';
let duck = Bodies.circle(Math.random() * (window.innerWidth - 2 * safeMargin) + safeMargin, Math.random() * (window.innerHeight - 2 * safeMargin) + safeMargin, radius, {
restitution: 0.9,
friction: 0.0,
frictionAir: 0.0,
density: 0.001,
render: {
sprite: {
texture: textureUrl,
xScale: 0.1,
yScale: 0.1
}
}
});
// Apply an initial force to ensure movement
Body.applyForce(duck, {x: duck.position.x, y: duck.position.y}, {x: (Math.random() - 0.5) * 0.05, y: (Math.random() - 0.5) * 0.05});
World.add(engine.world, duck);
}
document.getElementById("oneMoreBtn").addEventListener("click", addDuck);
// Start the engine and renderer
Engine.run(engine);
Matter.Render.run(render);
// Initially add a duck to start with
addDuck();
});
I don't know why black ducks are smaller than the regular ones. The svg files dimensions (px) are exactly the same and I can't find where is the problem.
Can anyone help me to solve it?
Thanks in advance!!!
I've checked the svg files and both are exactly the same size. About the Javascript code I can't find anything beyond the render scale but I think it shouldn't be the problem.
If you open the SVG files in your browser tabs, you will notice that they are not the same. I'm not talking about the size or the colour, but the coordinates - the black duck is centered, unlike the yellow / orange duck, and this is causing the problems with the black duck display.
What you need to do is the following:
duckling-svgrepo-com-bk.svginto a separate fileduckling-svgrepo-com-bk.svgwith the contents ofduckling-svgrepo-com.svg, so that the black duck is now identical to the yellow / orange duckpathandcircleelements of yourduckling-svgrepo-com-bk.svg, and instead apply thestclasses you copied to an empty file in step 2duckling-svgrepo-com-bk.svgfileWhat this achieves is that the black duck svg is now exactly the same (sans the colour) as the yellow / orange duck, and your code will work now.
This should be the end result for your black duck's SVG:
Of course, you could also adjust your Javascript code to cover the cases when a SVG file is not centered, but this was the easier route to take.