У меня есть ReferenceError, мой объект не определен

Question

Я создал объект "Трава".Я получаю эту ошибку: Uncaught ReferenceError: Grass не определен.Setup.js иification.js - это 2 разных файла.Я привязан к моему HTML.

Setup.js

var matrix = [
    [0, 0, 1, 0, 0],
    [1, 0, 0, 0, 0],
    [0, 1, 0, 2, 0],
    [0, 2, 1, 0, 0],
    [1, 1, 0, 0, 0],
    [1, 1, 0, 2, 0],
    [1, 1, 0, 0, 0]
];

var grassArr = [];

var side = 100;
function setup() {
  frameRate(5);
 createCanvas(matrix[0].length * side, matrix.length * side);
  background('#acacac');
}

    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);
            }
        }
    }

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

ification.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],
    ]

    }
}

Не могли бы вы объяснить, что случилось?Буду очень признателен за помощь.Спасибо.