mouseMoved() never seemed like a particularly useful tool in Processing until I started experimenting with different timeline set-ups. Turns out, it’s marvelous.
Let’s start up with a simple timeline. This is what I want to see when I initially run the sketch—a vertical line marking every 25 years starting at 0.
The for loop actually runs from year 0 to 2018, but you’ll only see years inside your window. You can chance up the size to see more or less.
Next we’ll add the interactivity. That’s where mouseMoved() comes in. Essentially, that block will run anytime you move your mouse. But I don’t want the window changing up constantly. Ideally, it’ll move earlier in time when the mouse is at the top of the screen and later in time when it’s at the bottom. We can do that by plugging our mouseY coordinates into two if statements.
In order to limit the amount of time we’re looking at, we want to keep the year between 5000 BC and 2000ish. To stop the timeline from going further back or further forward, the logical AND, expressed by &&, can be plugged into the if statements using the year variable.
Now, within each if statement, we should start off by pushing the start year variable earlier or later by 25 years. The background will need to be reset to wipe out all the timelines that came before. And then you can use the same for loop that’s used in the SetUp block, but with another if statement that appends BC when you go into years before 0.
And that’s about it.
The full sketch is available here.
gifGuide2Code 