How do can i apply different forces using vectors?

I am trying to make a simple side-scroller game in p5.js. As far as I understood I need to have vectors to imitate real-world physics. All I really need is a force that pushed the player down and a force that makes it jump when a key is pressed. I watched a video from youtube on the topic and I am pretty sure I followed it exactly as it was described but I get a different result. My keys don't always get detected and also they are all with different amount of force. Thank you in advance.

// This is a part of a player class that I have

update(){

  this.pos.add(this.vel)

  this.vel.add(this.acc)

}



applyForce(force){

  this.vel.add(force)

}



earth(){

  if (this.pos.y > height - 100){

    this.pos.y = height - 100

    this.acc.y *= 0

  }

}



// This is where I detect the pressed key

function keyPressed(){

  let jump = createVector(0,-10)

  player.applyForce(jump)

}



// And then in the draw function i have this

player.applyForce(gravity)

player.earth()

edited yesterday

meowgoesthedog

9,00631126

asked yesterday

Elarcis Kostadinov

New contributor

add a comment |

// This is a part of a player class that I have

update(){

  this.pos.add(this.vel)

  this.vel.add(this.acc)

}



applyForce(force){

  this.vel.add(force)

}



earth(){

  if (this.pos.y > height - 100){

    this.pos.y = height - 100

    this.acc.y *= 0

  }

}



// This is where I detect the pressed key

function keyPressed(){

  let jump = createVector(0,-10)

  player.applyForce(jump)

}



// And then in the draw function i have this

player.applyForce(gravity)

player.earth()

edited yesterday

meowgoesthedog

9,00631126

asked yesterday

Elarcis Kostadinov

New contributor

add a comment |

// This is a part of a player class that I have

update(){

  this.pos.add(this.vel)

  this.vel.add(this.acc)

}



applyForce(force){

  this.vel.add(force)

}



earth(){

  if (this.pos.y > height - 100){

    this.pos.y = height - 100

    this.acc.y *= 0

  }

}



// This is where I detect the pressed key

function keyPressed(){

  let jump = createVector(0,-10)

  player.applyForce(jump)

}



// And then in the draw function i have this

player.applyForce(gravity)

player.earth()

edited yesterday

meowgoesthedog

9,00631126

asked yesterday

Elarcis Kostadinov

New contributor

// This is a part of a player class that I have

update(){

  this.pos.add(this.vel)

  this.vel.add(this.acc)

}



applyForce(force){

  this.vel.add(force)

}



earth(){

  if (this.pos.y > height - 100){

    this.pos.y = height - 100

    this.acc.y *= 0

  }

}



// This is where I detect the pressed key

function keyPressed(){

  let jump = createVector(0,-10)

  player.applyForce(jump)

}



// And then in the draw function i have this

player.applyForce(gravity)

player.earth()

javascript physics p5.js

edited yesterday

meowgoesthedog

9,00631126

asked yesterday

Elarcis Kostadinov

New contributor

edited yesterday

meowgoesthedog

9,00631126

asked yesterday

Elarcis Kostadinov

New contributor

edited yesterday

meowgoesthedog

9,00631126

edited yesterday

meowgoesthedog

9,00631126

edited yesterday

meowgoesthedog

9,00631126

asked yesterday

Elarcis Kostadinov

New contributor

asked yesterday

Elarcis Kostadinov

asked yesterday

Elarcis Kostadinov

New contributor

Elarcis Kostadinov is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment |

1 Answer
1

active

oldest

votes

Basic problems:

applyForce should add the force vector to the acceleration, not the velocity.

You should not update the physics in the draw function, but in update.

In games the jumping mechanic is typically implemented as an impulse (i.e. velocity change) instead of a force. You could add an applyImpulse function for this.

You should always reset the acceleration after updating, so that forces don't accumulate.

Amended code:

// move all updates to here

update(){

  this.acc.add(gravity)

  this.pos.add(this.vel)

  this.vel.add(this.acc)



  this.earth()



  this.acc = createVector(0, 0)

}



// add to acceleration, not velocity

applyForce(force){

  this.acc.add(force)

}



// impulse for jumping

applyImpulse(imp){

  this.vel.add(imp)

}



// set vertical *velocity* to zero, not acceleration

earth(){

  if (this.pos.y > height - 100){

    this.pos.y = height - 100

    this.vel.y = 0

  }

}



// apply the impulse to jump

function keyPressed(){

  let jump = createVector(0,-10)

  player.applyImpulse(jump)

}



// no updating in the draw function

edited yesterday

answered yesterday

meowgoesthedog

9,00631126

So I implemented what you have written and my character jumps but there is no longer gravity and I think that is because i reset the value of the acceleration 2 lines after i apply the gravity force in the update function.I am not really sure how to fix that.
– Elarcis Kostadinov
yesterday

@ElarcisKostadinov I've made an amendment which might fix the issue, but I don't think resetting the acceleration in the update method is the reason. Can you link an interactive demo with your current code?
– meowgoesthedog
yesterday

editor.p5js.org/Muffie/sketches/B1c4eXGbN if you have any questions contact me because I don't think my code is very readable .
– Elarcis Kostadinov
yesterday

@ElarcisKonstadinov you didn't implement my suggestions correctly. 1) you initialize gravity in draw not setup. 2) you don't add gravity to this.acc in update. 3) you've set the jump speed to 1 which is too low: it is exactly equal and opposite to the gravity, and since the effective time step is 1, they cancel each other out; therefore jump must be larger than gravity. See my amended version of the demo which works as intended. Going further, you may want to implement explicit timesteps.
– meowgoesthedog
yesterday

1

I made the changed that you initially told me to but I had missed the last line in earth() where I had to change the acceleration to velocity and so I started experimenting by changing some thing in the code and the when I send you the link I forgot to change it back to how you had told me to. Thank you anyway it worked.
– Elarcis Kostadinov
yesterday

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

Elarcis Kostadinov is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53943506%2fhow-do-can-i-apply-different-forces-using-vectors%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Basic problems:

applyForce should add the force vector to the acceleration, not the velocity.

You should not update the physics in the draw function, but in update.

In games the jumping mechanic is typically implemented as an impulse (i.e. velocity change) instead of a force. You could add an applyImpulse function for this.

You should always reset the acceleration after updating, so that forces don't accumulate.

Amended code:

// move all updates to here

update(){

  this.acc.add(gravity)

  this.pos.add(this.vel)

  this.vel.add(this.acc)



  this.earth()



  this.acc = createVector(0, 0)

}



// add to acceleration, not velocity

applyForce(force){

  this.acc.add(force)

}



// impulse for jumping

applyImpulse(imp){

  this.vel.add(imp)

}



// set vertical *velocity* to zero, not acceleration

earth(){

  if (this.pos.y > height - 100){

    this.pos.y = height - 100

    this.vel.y = 0

  }

}



// apply the impulse to jump

function keyPressed(){

  let jump = createVector(0,-10)

  player.applyImpulse(jump)

}



// no updating in the draw function

edited yesterday

answered yesterday

meowgoesthedog

9,00631126

So I implemented what you have written and my character jumps but there is no longer gravity and I think that is because i reset the value of the acceleration 2 lines after i apply the gravity force in the update function.I am not really sure how to fix that.
– Elarcis Kostadinov
yesterday

@ElarcisKostadinov I've made an amendment which might fix the issue, but I don't think resetting the acceleration in the update method is the reason. Can you link an interactive demo with your current code?
– meowgoesthedog
yesterday

editor.p5js.org/Muffie/sketches/B1c4eXGbN if you have any questions contact me because I don't think my code is very readable .
– Elarcis Kostadinov
yesterday

@ElarcisKonstadinov you didn't implement my suggestions correctly. 1) you initialize gravity in draw not setup. 2) you don't add gravity to this.acc in update. 3) you've set the jump speed to 1 which is too low: it is exactly equal and opposite to the gravity, and since the effective time step is 1, they cancel each other out; therefore jump must be larger than gravity. See my amended version of the demo which works as intended. Going further, you may want to implement explicit timesteps.
– meowgoesthedog
yesterday

1

I made the changed that you initially told me to but I had missed the last line in earth() where I had to change the acceleration to velocity and so I started experimenting by changing some thing in the code and the when I send you the link I forgot to change it back to how you had told me to. Thank you anyway it worked.
– Elarcis Kostadinov
yesterday

add a comment |

Basic problems:

applyForce should add the force vector to the acceleration, not the velocity.

You should not update the physics in the draw function, but in update.

In games the jumping mechanic is typically implemented as an impulse (i.e. velocity change) instead of a force. You could add an applyImpulse function for this.

You should always reset the acceleration after updating, so that forces don't accumulate.

Amended code:

// move all updates to here

update(){

  this.acc.add(gravity)

  this.pos.add(this.vel)

  this.vel.add(this.acc)



  this.earth()



  this.acc = createVector(0, 0)

}



// add to acceleration, not velocity

applyForce(force){

  this.acc.add(force)

}



// impulse for jumping

applyImpulse(imp){

  this.vel.add(imp)

}



// set vertical *velocity* to zero, not acceleration

earth(){

  if (this.pos.y > height - 100){

    this.pos.y = height - 100

    this.vel.y = 0

  }

}



// apply the impulse to jump

function keyPressed(){

  let jump = createVector(0,-10)

  player.applyImpulse(jump)

}



// no updating in the draw function

edited yesterday

answered yesterday

meowgoesthedog

9,00631126

So I implemented what you have written and my character jumps but there is no longer gravity and I think that is because i reset the value of the acceleration 2 lines after i apply the gravity force in the update function.I am not really sure how to fix that.
– Elarcis Kostadinov
yesterday

@ElarcisKostadinov I've made an amendment which might fix the issue, but I don't think resetting the acceleration in the update method is the reason. Can you link an interactive demo with your current code?
– meowgoesthedog
yesterday

editor.p5js.org/Muffie/sketches/B1c4eXGbN if you have any questions contact me because I don't think my code is very readable .
– Elarcis Kostadinov
yesterday

@ElarcisKonstadinov you didn't implement my suggestions correctly. 1) you initialize gravity in draw not setup. 2) you don't add gravity to this.acc in update. 3) you've set the jump speed to 1 which is too low: it is exactly equal and opposite to the gravity, and since the effective time step is 1, they cancel each other out; therefore jump must be larger than gravity. See my amended version of the demo which works as intended. Going further, you may want to implement explicit timesteps.
– meowgoesthedog
yesterday

1

I made the changed that you initially told me to but I had missed the last line in earth() where I had to change the acceleration to velocity and so I started experimenting by changing some thing in the code and the when I send you the link I forgot to change it back to how you had told me to. Thank you anyway it worked.
– Elarcis Kostadinov
yesterday

add a comment |

Basic problems:

applyForce should add the force vector to the acceleration, not the velocity.

You should not update the physics in the draw function, but in update.

In games the jumping mechanic is typically implemented as an impulse (i.e. velocity change) instead of a force. You could add an applyImpulse function for this.

You should always reset the acceleration after updating, so that forces don't accumulate.

Amended code:

// move all updates to here

update(){

  this.acc.add(gravity)

  this.pos.add(this.vel)

  this.vel.add(this.acc)



  this.earth()



  this.acc = createVector(0, 0)

}



// add to acceleration, not velocity

applyForce(force){

  this.acc.add(force)

}



// impulse for jumping

applyImpulse(imp){

  this.vel.add(imp)

}



// set vertical *velocity* to zero, not acceleration

earth(){

  if (this.pos.y > height - 100){

    this.pos.y = height - 100

    this.vel.y = 0

  }

}



// apply the impulse to jump

function keyPressed(){

  let jump = createVector(0,-10)

  player.applyImpulse(jump)

}



// no updating in the draw function

edited yesterday

answered yesterday

meowgoesthedog

9,00631126

Basic problems:

applyForce should add the force vector to the acceleration, not the velocity.

You should not update the physics in the draw function, but in update.

In games the jumping mechanic is typically implemented as an impulse (i.e. velocity change) instead of a force. You could add an applyImpulse function for this.

You should always reset the acceleration after updating, so that forces don't accumulate.

Amended code:

// move all updates to here

update(){

  this.acc.add(gravity)

  this.pos.add(this.vel)

  this.vel.add(this.acc)



  this.earth()



  this.acc = createVector(0, 0)

}



// add to acceleration, not velocity

applyForce(force){

  this.acc.add(force)

}



// impulse for jumping

applyImpulse(imp){

  this.vel.add(imp)

}



// set vertical *velocity* to zero, not acceleration

earth(){

  if (this.pos.y > height - 100){

    this.pos.y = height - 100

    this.vel.y = 0

  }

}



// apply the impulse to jump

function keyPressed(){

  let jump = createVector(0,-10)

  player.applyImpulse(jump)

}



// no updating in the draw function

edited yesterday

answered yesterday

meowgoesthedog

9,00631126

edited yesterday

answered yesterday

meowgoesthedog

9,00631126

answered yesterday

meowgoesthedog

9,00631126

answered yesterday

meowgoesthedog

9,00631126

So I implemented what you have written and my character jumps but there is no longer gravity and I think that is because i reset the value of the acceleration 2 lines after i apply the gravity force in the update function.I am not really sure how to fix that.
– Elarcis Kostadinov
yesterday

@ElarcisKostadinov I've made an amendment which might fix the issue, but I don't think resetting the acceleration in the update method is the reason. Can you link an interactive demo with your current code?
– meowgoesthedog
yesterday

editor.p5js.org/Muffie/sketches/B1c4eXGbN if you have any questions contact me because I don't think my code is very readable .
– Elarcis Kostadinov
yesterday

@ElarcisKonstadinov you didn't implement my suggestions correctly. 1) you initialize gravity in draw not setup. 2) you don't add gravity to this.acc in update. 3) you've set the jump speed to 1 which is too low: it is exactly equal and opposite to the gravity, and since the effective time step is 1, they cancel each other out; therefore jump must be larger than gravity. See my amended version of the demo which works as intended. Going further, you may want to implement explicit timesteps.
– meowgoesthedog
yesterday

1

I made the changed that you initially told me to but I had missed the last line in earth() where I had to change the acceleration to velocity and so I started experimenting by changing some thing in the code and the when I send you the link I forgot to change it back to how you had told me to. Thank you anyway it worked.
– Elarcis Kostadinov
yesterday

add a comment |

So I implemented what you have written and my character jumps but there is no longer gravity and I think that is because i reset the value of the acceleration 2 lines after i apply the gravity force in the update function.I am not really sure how to fix that.
– Elarcis Kostadinov
yesterday

@ElarcisKostadinov I've made an amendment which might fix the issue, but I don't think resetting the acceleration in the update method is the reason. Can you link an interactive demo with your current code?
– meowgoesthedog
yesterday

editor.p5js.org/Muffie/sketches/B1c4eXGbN if you have any questions contact me because I don't think my code is very readable .
– Elarcis Kostadinov
yesterday

@ElarcisKonstadinov you didn't implement my suggestions correctly. 1) you initialize gravity in draw not setup. 2) you don't add gravity to this.acc in update. 3) you've set the jump speed to 1 which is too low: it is exactly equal and opposite to the gravity, and since the effective time step is 1, they cancel each other out; therefore jump must be larger than gravity. See my amended version of the demo which works as intended. Going further, you may want to implement explicit timesteps.
– meowgoesthedog
yesterday

1

I made the changed that you initially told me to but I had missed the last line in earth() where I had to change the acceleration to velocity and so I started experimenting by changing some thing in the code and the when I send you the link I forgot to change it back to how you had told me to. Thank you anyway it worked.
– Elarcis Kostadinov
yesterday

So I implemented what you have written and my character jumps but there is no longer gravity and I think that is because i reset the value of the acceleration 2 lines after i apply the gravity force in the update function.I am not really sure how to fix that.
– Elarcis Kostadinov
yesterday

@ElarcisKostadinov I've made an amendment which might fix the issue, but I don't think resetting the acceleration in the update method is the reason. Can you link an interactive demo with your current code?
– meowgoesthedog
yesterday

editor.p5js.org/Muffie/sketches/B1c4eXGbN if you have any questions contact me because I don't think my code is very readable .
– Elarcis Kostadinov
yesterday

@ElarcisKonstadinov you didn't implement my suggestions correctly. 1) you initialize gravity in draw not setup. 2) you don't add gravity to this.acc in update. 3) you've set the jump speed to 1 which is too low: it is exactly equal and opposite to the gravity, and since the effective time step is 1, they cancel each other out; therefore jump must be larger than gravity. See my amended version of the demo which works as intended. Going further, you may want to implement explicit timesteps.
– meowgoesthedog
yesterday

I made the changed that you initially told me to but I had missed the last line in earth() where I had to change the acceleration to velocity and so I started experimenting by changing some thing in the code and the when I send you the link I forgot to change it back to how you had told me to. Thank you anyway it worked.
– Elarcis Kostadinov
yesterday

add a comment |

Elarcis Kostadinov is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Elarcis Kostadinov is a new contributor. Be nice, and check out our Code of Conduct.

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk