关于#p5.js#的问题,如何解决?

问题遇到的现象和发生背景

想做一个跟随鼠标移动转身的人物,为什么运行出来是一片空白呀?

问题相关代码

var girl,vgirl,speed=2;
var forest;
var walk;
var turn;

function preload(){
bg=loadImage('forest.jpg');
imageMode(CENTER);
}
function setup() {
createCanvas(forest.width,forest.height);
girl=createVector(width/4,height/2,50,50);

walk=girl.addAnimation('walk','animation/girl1.psd',6);
turn=girl.addAnimation('turn','animation/girl7.psd',6);
walk.frameDelay=5;
turn.frameDelay=5;
girl.changeAnimation('walk');
turn.stop();
}

function draw() {
if(mouseX > girl.x){
vgirl.set(mouseX-girl.x,mouseY-girl.y);
vgirl.normalize();
vgirl.mult(speed);
girl.add(vgirl);
walk.play();}
if(mouseX < girl.x){
vgirl.set(girl.x-mouseX,mouseY-girl.y);
vgirl.normalize();
vgirl.mult(speed);
girl.add(vgirl);
walk.stop();
turn.play();}
}

建议你看下这篇博客用p5.js编写简单的动态图形——波纹扩散