为什么我对jQuery的引用在调用processingJS库的JS文件中不起作用？

我有以下代码：

var keys = [];
        function keyAction () {
    if (keys[38]) { //this checks if up arrow is pressed
        Player.yv = Player.yv - 1;
    }
    if (keys[40]) {
        Player.yv = Player.yv + 1;
    }
    if (keys[37]) {
        Player.xv = Player.xv - 1;
    }
    if (keys[39]) {
        Player.xv = Player.xv + 1;
    }
}

var Player = {
xv: 0,
yv: 0,
xpos: 200,
ypos: 200,
}

function movement () {
    Player.xpos = Player.xpos + Player.xv; //setting the positions to the positions + movement
    Player.ypos = Player.ypos + Player.yv;
    Player.xv = Player.xv * 0.9; //slowing it down
    Player.yv = Player.yv * 0.9;
}

function processingCode(processing) {

function drawPlayer () {
    processing.fill(255, 255, 255);
    processing.ellipse(Player.xpos, Player.ypos, 30, 30); //moves the circle
    keyAction();
    movement();

}

//Draw function--objects make it possible to add other players in the future
processing.draw = function() {
    processing.background(0, 0, 0); //Background
    drawPlayer();
}
}

$(document).ready(function() {
var canvas = document.getElementById("canvas");
var processingInstance = new Processing(canvas, processingCode);

$(document).keydown(function (e) {
    keys[e.which] = true;
    keyAction();
});

$(document).keyup(function (e) {
    delete keys[e.which];
    keyAction();
});
});

然而，当我运行它时，我得到一个错误，上面写着：“找不到变量：$”。这是为什么？我可以让我的画布在纯处理代码中工作，然后编译它，但我正在尝试转移到所有Javascript和jQuery，以便我可以调用事件，例如触摸事件。我使用以下内容加载jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

你是如何引用jQuery的？你到底是如何运行这段代码的？你到底是如何加载jQuery的？你能发布一个和/或链接到运行你的代码的页面吗？检查这行：非常感谢；我在我的JS代码下面链接了jQuery。