Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

184
Vistas
Matter.js Apply Force Onto Body Using Angle and Power Level

I am currently trying to apply force to a body using a degree (a float between -90 and 90), and a forceLevel (a float between 0 and 1). Body.applyForce() only allows me to provide x and y power levels.

What I am trying to achieve:

I want to be able to drag back from a position, and have my body launch towards the other directions with the power of the launch based on how much the user dragged back.

Here is my code for getting the angle and the power level.

var cachedPosition = {
    x: 0,
    y: 0
};
document.addEventListener("mousedown", (e) => {
    cachedPosition.x = e.clientX
    cachedPosition.y = e.clientY
})

document.addEventListener("mouseup", (e) => {
    var degree = "INVALID";
    var difX = cachedPosition.x - e.clientX
    var difY = cachedPosition.y - e.clientY
    if (difX > 0 && difY < 0) {
        var degree = getDegree(difX, difY)
    } if (difX < 0 && difY < 0) {
        var degree = -getDegree(Math.abs(difX), difY); // Negative degree if drag is towards bottom right.
    }

    var power = Math.sqrt(Math.pow(difX, 2)+Math.pow(difY, 2))/1000
})
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

I came up with a very inelegant, but working solution.

if (degree > 0) {
    if (degree < 25) {
        Body.applyForce(character, character.position, {
            x: power * (degree / 45),
            y: -0.4,
        })
    } else if (degree > 45) {
        Body.applyForce(character, character.position, {
            x: power / (degree / 45),
            y: -power * (degree / 45)
        })
    } else if (degree < 45) {
        Body.applyForce(character, character.position, {
            x: power * (degree / 45),
            y: -power / (degree / 45)
        })
    } else if (degree == 45) {
        Body.applyForce(character, character.position, {
            x: power,
            y: -power
        })
    }
} else {
    if (-degree < 25) {
        Body.applyForce(character, character.position, {
            x: power * (degree / 45),
            y: -0.4
        })
    } else if (-degree > 45) {
        Body.applyForce(character, character.position, {
            x: power / (degree / 45),
            y: power * (degree / 45)
        })
    } else if (-degree < 45) {
        Body.applyForce(character, character.position, {
            x: power * (degree / 45),
            y: power / (degree / 45)
        })
    } else if (-degree == 45) {
        Body.applyForce(character, character.position, {
            x: power,
            y: -power
        })
    }
}

The power for the x and y value is multiplied or divided depending on whether degree is leaning towards 0 or 90 degree using the percentage difference between degree and 45 degrees, which is the "middle". I have added exceptions for any degree smaller than 25, incase power is too high and causes the body to just fly way too high. In that case, I have just set a cap y value of -0.4

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda