JavaScript p5.js：ReferenceError

Question

My code so far is supposed to be able to create a blank canvas with a snake and food, everytime my snake is on the food, the food should find a new location and the food is supposed to be aligned with the snake on a 'grid' but right now it is not. That is my first problem and also in the console I do get this error:

ReferenceError: floor is not defined

Note that floor is supposed to be defined by p5.js .

How to do this and how to fix the error?

Here is my code:

var snake;

var scl = 10;
var food;

var columns = floor(width/scl);
var rows = floor(height/scl);

function setup()
{
  //Sets the Canvas
  createCanvas(700, 700);

  //Creates a new object using the variable snake
  snake = new Snake();

  food = new Food();

  //Sets the frame rate
  frameRate(10);

}

function draw()
{
  //Sets the Background, number implies the colour
  background(45);

  //Adds all the values set within the function to the snake
  snake.updateSnake();
  snake.showSnake();
  snake.keyPressed();

  food.showFood();
  food.updateFood();

  if(snake.eatFood(food))
  {
    food.updateFood();
  }
}


function Food()
{
  this.x = random(0,700);
  this.y = random(0,700);

  this.updateFood = function()
  {
    this.pos = createVector(floor(random(columns)), floor(random(rows)));
    this.pos.mult(scl);
  }

  this.showFood = function()
  {
    fill(255, 0, 10);
    rect(food.x, food.y, scl, scl);
  }

}

function Snake()
{
  this.x = 0;
  this.y = 0;

  this.xspeed = 0;
  this.yspeed = 0;

  this.updateSnake = function()
  {
    this.x = this.x + this.xspeed * scl;
    this.y = this.y + this.yspeed * scl;

    this.x = constrain(this.x, 0, width - scl);
    this.y = constrain(this.y, 0, height - scl);
  }

  this.showSnake = function()
  {
    fill(255);
    rect(this.x, this.y, scl, scl);
  }

  this.direction = function(x, y)
  {
    this.xspeed = x;
    this.yspeed = y;
  }

  this.eatFood = function(pos)
  {
    var distance = dist(this.x, this.y, pos.x, pos.y);

    if(distance < 1)
    {
      return true;

      console.log("WITHIN RANGE");

    }else
    {
      return false;

      console.log("OUTSIDE RANGE");

    }
  }

  this.keyPressed = function()
  {
    if (keyCode === UP_ARROW)
    {
      snake.direction(0, -1);
    } else if (keyCode === DOWN_ARROW)
    {
      snake.direction(0, 1);
    } else if (keyCode === RIGHT_ARROW)
    {
      snake.direction(1, 0);
    } else if (keyCode === LEFT_ARROW)
    {
      snake.direction(-1, 0);
    }
  }
}

Answer 1

The other answer is using the JavaScript Math.floor() function. You're trying to use the P5.js floor() function.

You can't use P5.js functions until after the setup() function has been called. In other words, you want to do something like this:

var columns;
var rows;

function setup()
{
  //Sets the Canvas
  createCanvas(700, 700);

  //Creates a new object using the variable snake
  snake = new Snake();

  food = new Food();

  //Sets the frame rate
  frameRate(10);

  columns = floor(width/scl);
  rows = floor(height/scl);

}

More info can be found in the reference .

(Disclaimer: the P5.js floor() function is almost definitely using the Math.floor() function behind the scenes. But in general you should use P5.js functions whenever you can. That's why they're there.)

Also note that you need to do this in the setup() function for similar reasons related to the width and height variables: they just have default values until after createCanvas() is called.

See also: Why can't I assign variables using p5 functions and variables before setup() ?

If you have follow-up questions, please post them in their own questions posts. Please also try to narrow your problem down to a MCVE instead of posting your entire sketch. Good luck.