I don't know what to change in this code for it to work

Question

This code. It suppose to create canvas, grass and animals there. It doesn't even draw canvas. Please help. I will be very grateful.

This two files (setup.js and classification.js) I have tied to my html. Also used this link " https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js ". Also there is this error

var gr = new Grass(x,y,1); Grass is not defined

setup.js

var side = 10;
var grassArr = [];
var matrix = [];
var grassEaterArr = [];
var found = []

function setup() {
  for (var y = 0; y < 49; y++) {
    matrix[y] = [];
    for (var x = 0; x < 49; x++) {
      let arr = [0, 1, 2]
      let r = random(arr)
      matrix[y][x] = r;
    }
  }

  for (var y = 0; y < matrix.length; ++y) {
    for (var x = 0; x < matrix[y].length; ++x) {
      if (matrix[y][x] == 1) {
        var gr = new Grass(x, y, 1);
        grassArr.push(gr);
      } else if (matrix[y][x] == 2) {
        var kendani = new GrassEater(x, y, 2);
        grassEaterArr.push(kendani);
      }
    }
  }

  frameRate(5)
  createCanvas(49 * side, 49 * side);
  background('#acacac');
}

function draw() {
  for (var y = 0; y < matrix.length; y++) {
    for (var x = 0; x < matrix[y].length; x++) {
      if (matrix[y][x] == 1) {
        fill("green");
        rect(x * side, y * side, side, side);
      } else if (matrix[y][x] == 0) {
        fill("#acacac");
        rect(x * side, y * side, side, side);
      } else if (matrix[y][x] == 2) {
        fill("yellow");
        rect(x * side, y * side, side, side);
      }
    }
  }

  for (var i in grassArr) {
    grassArr[i].mul();
  }
  for (var i in grassEaterArr) {
    grassEaterArr[i].move();
    grassEaterArr[i].eat();
    grassEaterArr[i].mul();
    grassEaterArr[i].die();
  }
}

classification.js

class Grass {
  constructor(x, y, index) {
    this.x = x;
    this.y = y;
    this.index = index;
    this.multiply = 0;
    this.directions = [
      [this.x - 1, this.y - 1],
      [this.x, this.y - 1],
      [this.x + 1, this.y - 1],
      [this.x - 1, this.y],
      [this.x + 1, this.y],
      [this.x - 1, this.y + 1],
      [this.x, this.y + 1],
      [this.x + 1, this.y + 1],
    ]
  }

  chooseCell(character) {
    var found = [];
    for (var i in this.directions) {
      var x = this.directions[i][0];
      var y = this.directions[i][1];
      if (x >= 0 && x < matrix[0].length && y >= 0 && y < matrix.length) {
        if (matrix[y][x] == character) {
          found.push(this.directions[i]);
        }
      }
    }
    return found;
  }

  mul() {
    this.multiply++;
    var newCell = random(this.chooseCell(0));
    console.log(newCell, this.multiply);
    if (this.multiply >= 8 && newCell) {
      var newGrass = new Grass(newCell[0], newCell[1], this.index);
      grassArr.push(newGrass);
      matrix[newCell[1]][newCell[0]] = 1;
      this.multiply = 0;
    }
  }
}

class GrassEater {
  constructor(x, y, index) {
    this.x = x;
    this.y = y;
    this.index = index;
    this.energy = 5;
    this.directions = [];
  }

  getNewCoordinates() {
    this.directions = [
      [this.x - 1, this.y - 1],
      [this.x, this.y - 1],
      [this.x + 1, this.y - 1],
      [this.x - 1, this.y],
      [this.x + 1, this.y],
      [this.x - 1, this.y + 1],
      [this.x, this.y + 1],
      [this.x + 1, this.y + 1]
    ];
  }

  chooseCell(character) {
    this.getNewCoordinates();
    var found = [];
    for (var i in this.directions) {
      var x = this.directions[i][0];
      var y = this.directions[i][1];
      if (x >= 0 && x < matrix[0].length && y >= 0 && y < matrix.length) {
        if (matrix[y][x] == character) {
          found.push(this.directions[i]);
        }
      }
    }
    return found;
  }
  move() {
    var newCell = random(this.chooseCell(0));

    if (newCell) {
      var newX = newCell[0];
      var newY = newCell[1];

      matrix[this.y][this.x] = 0;
      matrix[newY][newX] = this.index;
      this.y = newY;
      this.x = newX;
      this.energy--;
    }
  }

  mul() {
    var newCell = random(this.chooseCell(0));

    if (this.energy >= 8 && newCell) {
      var animalArr = new GrassEater(newCell[0], newCell[1], this.index);
      grassEaterArr.push(animalArr);
      matrix[newCell[1]][newCell[0]] = 2;
      this.energy = 5;
    }
  }


  eat() {
    var newCell = random(this.chooseCell(1));
    if (newCell) {
      var newX = newCell[0];
      var newY = newCell[1];

      matrix[this.y][this.x] = 0;
      matrix[newY][newX] = this.index;

      for (var i in grassArr) {
        if (newX == grassArr[i].x && newY == grassArr[i].y) {
          grassArr.splice(i, 1);
          break;
        }
      }

      this.y = newY;
      this.x = newX;
      this.energy += 2;
    }

    die() {
      if (this.energy == 0) {
        matrix[this.y][this.x] = 0;
      }
    }
  }

Answer 1

Export the Grass and GrassEater classes, and import them on your main file:

class Grass {...}
class GrassEater {...}
export { Grass, GrassEater }

On setup.js :

import { Grass, GrassEater } from "./classification.js";