I am trying to make a simulation of bouncing object with set borders and angles. I used the JS library P5.js.
My problem is, when the object touches the wall, it does bounce, but it also moves it to wrong position (mainly more to the bottom right).
I created object “Wall”, which is made of two point (A, B) and those points are used to create a linear function, and I use it to determine, whether a point is “behind it”.
f1: y = tg * x + Ax – Ay * tg; tg = (By – Ay) / (Bx – Ax)
f2: y = tn * x + Ox – Ay * tn; tn = Vy / Vx
Then I created an “Object”:
class Obj {
constructor(x, y) {
this.pos = createVector(x, y); // Reference position of object
this.vel = createVector(0, 0); // Velocity of object
this.acc = createVector(0, 0); // Acceleration
this.ang = PI / 3; // Angle
this.mass = 10; // *
this.bouncyness = 0.8; // *
this.friction = 0.01; // *
// Position of points relative to main position (this.pos)
this.points = [
{ x: -25, y: -25 },
{ x: 0, y: -25 },
{ x: 25, y: -25 },
{ x: 25, y: 0 },
{ x: 25, y: 25 },
{ x: 0, y: 25 },
{ x: -25, y: 25 },
{ x: -25, y: 0 },
];
}
// ***
// Updating object properties
update() {
for (let point of this.points) {
const dx = point.x * cos(this.ang) - point.y * sin(this.ang); // X distance between point and center on screen (counting with angle)
const dy = point.y * cos(this.ang) + point.x * sin(this.ang); // Y distance between point and center on screen (counting with angle)
for (let wall of walls) { // Looping through walls
// Checking if the point is behind the wall
if (wall.isPointBehind(this.pos.x + dx, this.pos.y + dy)) {
// Checking, if the walls are diagonal or vertical
if (wall.getDX() == 0) {
this.pos.x = wall.A.x - dx;
} else if (wall.getDY() == 0) {
this.pos.y = wall.A.y - dy;
} else {
const { x: Ox, y: Oy } = this.pos; // Position of object
const { x: Vx, y: Vy } = this.pos; // Velocity of object
const { x: Ax, y: Ay } = wall.A; // Position of the first point of the wall
const tg = wall.getTG(); // Tan of the angle of the wall: (By - Ay) / (Bx - Ax)
const tn = Vy / Vx; // Tan of angle of speed
// I found the intersection of these 2 linear function by setting f1 = f2 and I got this equasion for x (XX)
const XX = (Oy - Ox * tn - Ay + Ax * tg) / (tg - tn); // Value of x, where the linear functions intersect
const YY = XX * tg + Ay - Ax * tg; // Y ...
// In the end I tried almost everything- calculating it through the point, by difference in positions and many others but it usually works the same, and this seems to be the closest.
const RX = XX - dx; [enter image description here][1]
const RY = YY - dy;
this.pos = createVector(RX, RY);
}
}
}
}
// ***
}
}
In the end I tried almost everything- calculating it through the point, by difference in positions and many others but it usually works the same, and this seems to be the closest.
(Sorry if I made some grammatical errors)
Object almost touching the wall
After it touched the wall, it moved more to the right bottomň
Geometrical representation (not very good)
Simpler geometrical representation of ball (circle) object without speed, using just a line perpendicular to the wall
