使用（也许）processing.js使一些对象改变或移动的悬停效果？

Question

我花了整整一夜的时间来弄清楚悬停对此网站http://goo.gl/WXlGT的影响是如何起作用的。但我仍然无法得到它。起初我认为它是用flash制作的，而不是我认为它的html5，但最后我发现它使用 processing.js （我可能是错的）。我检查了他们的网站，但我不知道该怎么做。

所有我想知道的是如何使一个对象（例如菜单）的悬停效果，使其他对象（例如徽标）更改或移动。我正在寻找的完美例子是：http://goo.gl/I777F。

对网上某些手册的任何帮助或提示都将非常感激。谢谢！

Answer 1

这是一个面向对象的通用编程问题，具有面向对象的通用答案。在通用处理代码中：

ArrayList<Drawable> things;

...

void somePlacementFunction() {
  ...
  things.add(new Drawable(<some parameters>));
  ... 
}

...

void draw() {
  for(Drawable things: things) {
    thing.draw();
  }
}

...

void mouseMoved() {
  for(Drawable thing: things) {
    if(thing.over(mouseX, mouseY)) {
      Drawable differentThing = getOtherThing(...);
      differentThing.changeSomePropertyThatAffectsHowItGetsDrawn();
    }
  }
}

在这种特定情况下，处理代码为http://labfiftyfive.com/res/mathsbaby2.pde，并且页面上的JS将其触发为http://labfiftyfive.com/js/main.js第162行，然后启用。