Interactive scenes

Now that we know how to make sweet animated scenes, let’s make sure we can handle the other sort of non-static scene: scenes that respond to user interaction.

For example, we want to draw a scene where Winston has babies (after his rock star phase, of course) — but we also want to let the user click to give Winston MORE babies. Because we can always use more little Winstonitos in the world, right?Here’s what that scene would look like as a standalone program.The program draws the static part of the scene, and then in mouseClicked, it draws Winston baby images at the clicked mouse location, layering them on top of whatever was already drawn.

mouseClicked = function() {
    image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
};

background(173, 239, 255);
fill(7, 14, 145);
textSize(25);
text("Winston has babies!", 10, 47);
textSize(17);
text("Click to make more babies", 10, 78);

image(getImage("creatures/Winston"), 21, 183);
fill(71, 71, 71);
rect(32, 185, 108, 15);
rect(46, 126, 82, 60);

image(getImage("creatures/BabyWinston"), 150, 250);