主要内容
动画场景
我们已经知道了如何制作多个简单场景——但我们的场景是”静态的“——它们不是动画, 也没有跟用户有交互。之后我们会发现，处理更精彩的场景需要更多的技巧。来吧，做点酷炫的事情！
首先是动画。如果我们想展示小文在当摇滚明星时，努力敲鼓的样子，该怎么做呢？我们通常会定义
draw 函数，在其中写入让图形在每一帧稍微移动位置的代码。下面是一个示例，其中击鼓手的位置基于 millis() 值，即当前的毫秒数：如果我们要将其作为场景4加入到之前的例子中，那么我们把代码放进
drawScene4() 函数中，并修改 mouseClicked 。var drawScene4 = function() {
currentScene = 4;
background(194, 255, 222);
var x = cos(millis()*1);
var y = cos(millis()+98);
...
};
mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene4();
} else if (currentScene === 4) {
drawScene1();
}
};示例如下——试着点击几次：
注意到了吗？我们只成功了一部分。我们可以看到小文和他的鼓，但鼓锤并没有动。很悲惨，时间停止的话可没办法做音乐。也许你已经发现了这个问题：我们没在
draw() 内调用绘制鼓锤的程序，所以绘制部分只运行了一次——而不是重复运行——只在第一次运行的时候绘制了鼓锤。也许你也已经猜到了解决方案：定义一个draw() 函数，并在合适的时候调用 drawScene4()。draw = function() {
if (currentScene === 4) {
drawScene4();
}
};我们仔细想想：每当我们在代码中定义一个
draw() 函数，它就会被反复调用（默认为 60 FPS），而当它被调用，并且当前场景值为4，它就会调用函数来绘制场景4。如果当前场景值为其他值，它就不会绘制任何东西——它会保留屏幕上已经存在的东西。我们仍然需要在 mouseClicked 中进行场景绘制，它负责场景之间的切换。也许你会想：为什么不用
draw() 来绘制 每一个 场景呢？当然可以，这意味着如果你在其他场景中添加动画，动画会马上动起来。但如果你没有在其他场景中添加动画，这意味着你正在 毫无理由的 反复绘制这些场景。从性能的角度看这并不好，我们应该尽可能的避免电脑做不必要的工作。这将使我们的程序更快，用户更满意。好吧，现在我们已经讨论过这一切了，下面就是我们可点击的、带动画的故事书。你几乎可以从场景 4 中听到节拍！