title: JavaScript p5.js: ReferenceError
body: <p>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:</p>
  
  <pre><code>ReferenceError: floor is not defined
  </code></pre>
  
  <p>Note that <code>floor</code> is supposed to be defined by <a href="https://p5js.org" rel="nofollow noreferrer">p5.js</a>.</p>
  
  <p>How to do this and how to fix the error?</p>
  
  <p>Here is my code:</p>
  
  <pre><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 &lt; 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);
      }
    }
  }
  </code></pre>