Question 298356 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – p5.js rect() function throwing an unexpected error

I am having an error with the p5.js rect() function. I have read their documentation for the function, and I believe I have used the function correctly. The error I am getting is:

[sketch.js, line 63] rect() was expecting Number for the second parameter, received NaN instead.

This is the code I am having the error with:

//game control
let level = 0;
//gravity
let minHeight = 375;
let direction = 1;
let vel = 2;
let jumpPower = 10;
let gravity1 = 5;
let onPlatform = false; 
//player setup
let playerX = 400;
let playerY = 370;

let playerWidth = 30;
let playerHeight = 70;

//platform
let platX = 200;
let platY = 300;
let platWidth = 200;
let platHeight = 40;

function setup() {
  createCanvas(800, 500);
  rectMode(CENTER);
  textAlign(CENTER);
}

function gravityControl() {
  if (keyIsDown(32)) {
    jump = true;
  } else {
    jump = false;
  }
}
function draw() {
  background(220);
  movement();
  gravityControl();
  gravity();

  if (level == 0) {
    game();
  }
}

function game() {
  background(150, 230, 240);
  //floor
  noStroke();
  fill(0, 255, 0);
  rect(width / 2, 450, width, 100);

  //platform
  stroke(0);
  strokeWeight(4);
  fill(218, 218, 138);
  rect(platX, platY, platWidth, platHeight);

  //player
  noStroke();
  fill(255, 0, 0);
  rect(playerX, playerY, playerWidth, playerHeight);

  onPlatform = false;
  if (playerX >= platX - platWidth / 2 && playerX <= platX + platWidth / 2) {
    if (playerY - playerHeight / 2 >= platY - platHeight / 2) {
      playerY = constrain(
        playerY,
        platY + platHeight / 2 + playerHeight / 2,
        height
      );
    }
    else if (playerY + playerHeight / 2 <= platY + platHeight / 2) {
      playerY = constrain(
        playerY,
        0,
        platY - platHeight / 2 - playerHeight / 2
      );
      if (playerY + playerHeight / 2 >= platY - platHeight / 2) {
        onPlatform = true;
      }
    }
  }
}

function movement() {
  if (keyIsDown(LEFT_ARROW)) {
    playerX -= 5;
  }
  if (keyIsDown(RIGHT_ARROW)) {
    playerX += 5;
  }
}
function gravity() {
  if (playerY >= minHeight && jump == false) {
    if (playerY > minHeight) {
      playerY = minHeight;
    } 
  } else {
    playerY = playerY + direction * vel;
  }
  if (jump == true) {
    vel = -jumpPower;
  } else if (!onPlatform) {
    vel = gravity;
  } else {
    vel = 0;
  }
}

function gravityControl() {
  if (keyIsDown(32)) {
    jump = true;
  } else {
    jump = false;
  }
}
function mousePressed() {
  fullscreen(true);
}

I don’t know what could be going on, It was working for me at one point, but then, suddenly, it gives me this error. If you answer, please keep in mind I’m new to p5.js and the JavaScript programming language in general.

Tags:

2

Answers


  1. 0

    In the gravity function, you do vel = gravity (line 107 or thereabouts), i.e. you assign the function itself to the variable vel (which should be a number), which means when you do

    playerY = playerY + direction * vel;

    on the next frame, you’ll assign a NaN into playerY:

    console.log(5 + 3 * function() {});

    That in turn breaks the rest.

    Presumably you wanted vel = gravity1.

    I would recommend naming your functions with verbs, e.g. computeGravity(), handleMovement(), and your variables with nouns.

    Login or Signup to reply.
  2. 0

    As @AKX said, you are assigning the velocity to gravity, a function. You have not made the gravity function return anything, so you are assigning undefined to the vel variable, which when using that value to draw a rectangle, will not be compatible because rect(x, y, w, h) takes in a number datatype, so it tells you that the value given was NaN (not a number).

    I also noticed you defined gravityControl twice. There is no need to define it twice, especially when both definitions contain the same code. I also do not recommend having both a gravity and gravityControl function, because those could both be combined into the same function, say handleGravity.

    Also, the name of gravityControl is misleading, because instead of controlling the gravity, it takes in key input that toggles the jump boolean. That can be put into the keyPressed function instead of being a separate function that runs every frame.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search