[SOLVED] Where should my gravity code go in p5.js?

Where should my gravity code go in p5.js?

I'm trying to add gravity to my p5.js sketch, but I don't understand how to do so. This is the code I have so far:

//Jumping facing forwards
stroke(100);
noFill();
rect(220, 60, 50, 80);
noStroke();
fill(0);
text("2. jumping facing forwards", 220, 160);

gameChar_x = 245;
gameChar_y = 137;
//Add your code here ...

fill(255,102,179)
rect(gameChar_x-10,gameChar_y-55, 20,20)
fill(153,77,0)
ellipse(gameChar_x,gameChar_y-62,20,20)
fill(255,255,255)
ellipse(gameChar_x- 5,gameChar_y-62, 5,5)
fill(64,25,255)
ellipse(gameChar_x,gameChar_y-62, 5,5)

Solution

Ok, first I'm going to make your code look a little nicer. Here's my baseline:

let gameChar_x, gameChar_y;

function setup() {
  createCanvas(400, 400);

  gameChar_x = 245;
  gameChar_y = 137;
}

function draw() {
  clear();
  drawBox();

  drawGameChar(gameChar_x, gameChar_y);
}

function drawBox() {
  //Jumping facing forwards
  stroke(100);
  noFill();
  rect(220, 60, 50, 80);
  noStroke();
  fill(0);
  text("2. jumping facing forwards", 220, 160);
}

function drawGameChar(x, y) {
  fill(255, 102, 179);
  rect(x - 10, y - 55, 20, 20);
  fill(153, 77, 0);
  ellipse(x, y - 62, 20, 20);
  fill(255, 255, 255);
  ellipse(x - 5, y - 62, 5, 5);
  fill(64, 25, 255);
  ellipse(x, y - 62, 5, 5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

Nothing too crazy, just putting stuff into functions.

Now, here's the gravity part: in the real world people accelerate as they fall, so we want to keep track of the character's velocity. In every frame, we will increase the velocity if the character is above the ground. If the character is on the ground, then velocity should be zero. I'll keep track of velocity in the variable gravity_vel.

In addition to increasing velocity, we also need to change the character's position by the velocity. In this case, we need to increase gameChar_x.

Here's the code I came up with:

let gameChar_x, gameChar_y;
let gravity_vel;

function setup() {
  createCanvas(400, 400);

  gameChar_x = 245;
  gameChar_y = 137;
  gravity_vel = 0;
}

function draw() {
  clear();
  drawBox();

  if (gameChar_y < height) gravity_vel++;
  else gravity_vel = 0;
  gameChar_y += gravity_vel;

  drawGameChar(gameChar_x, gameChar_y);
}

function drawBox() {
  //Jumping facing forwards
  stroke(100);
  noFill();
  rect(220, 60, 50, 80);
  noStroke();
  fill(0);
  text("2. jumping facing forwards", 220, 160);
}

function drawGameChar(x, y) {
  fill(255, 102, 179)
  rect(x - 10, y - 55, 20, 20)
  fill(153, 77, 0)
  ellipse(x, y - 62, 20, 20)
  fill(255, 255, 255)
  ellipse(x - 5, y - 62, 5, 5)
  fill(64, 25, 255)
  ellipse(x, y - 62, 5, 5)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

Note: you may need to scroll down in the snippet to see the bottom of the page. If you copy-paste this code into the p5.js editor, it should work perfectly.