User Loops
We will next dip our toes back into interactivity through the
concept of user loops. This is an essential idea that originally
comes from game design that we can apply in order to structure our
users' interactions with our pieces. Note that there aren't any new
code constructs in this tutorial. Instead, we will look at
structural concepts in some code snippets I have for you to read
which demonstrate some common patterns used for interactivity. You
should recognize some pieces from earlier!
Contents
About Loops
To build up these ideas, we will create a simulation which
involves spinning three wheels of color to combine red, green,
and blue together. We will use the concept of gameplay loops
from video game design to create a three loop structure:
-
We start with the idea that there some repeated action a
user is doing moment to moment. This is called the core
loop. Our core loop will be spinning a wheel to get to a
desired color within that wheel (certain amount of red,
for example).
-
However, the core loop can be placed within larger
loops. For example, while our core loop is changing one
individual color component (how much red, green, blue),
our "secondary loop" is trying to achieve a specific
combined color across all three color components.
-
Finally, our "tertiary loop" may be comparing different
colors: the current color selected against the memory of
past colors.
Note that the loops sometimes exist as explicit pieces of the
code: specific functions supporting one loop or the other.
However, sometimes the loops emerge from the user's experience
of a piece.
Simulation
With that outline in mind, let's go ahead and build this
simulation without interactivity first. Try to read my
first static version of this code
given what you learned from the other skills labs. These colors
come from
ColorBrewer. Give that a run and see what you think. Before continuing,
try changing the radius.
Loops
Next, let's add in the interactivity! Take a look at my
second interactive version of this code. After reading it, give it a run. Try making the lightest and
darkest color you can. Can you feel the different loops? How
does the experience feel if you change the rotation speed?
Terminology
Finally, a quick note about terminology. Some game designers
would say that:
-
There are three loops: a core, secondary, and tertiary
loop.
-
There is one "verb" or one "action" which is "hover"
using the mouse.
Indeed, those designers would say there is only one verb by
which the user can interact with the simulation even if they can
use that action in diffrent contexts (different wheels) which
make it feel like three verbs.
Next
We've brought the idea of the user back into our sketches. Let's
finish up this Skills Lab in
Tutorial 11 to learn
about adding data.
Citations
-
A. Pottinger, "Sketchingpy." Sketchingpy Project,
2024. [Online]. Available:
https://sketchingpy.org/
-
C. Brewer, M Harrower, and The Pennsylvania State
University, "Colorbrewer 2.0," The Pennsylvania
State University, 2013. [Online]. Available:
https://colorbrewer2.org/
-
E. Guardiola, "The Gameplay Loop: a Player Activity
Model for Game Design and Analyis," ACE Conference,
2016. [Online]. Available:
https://dl.acm.org/doi/10.1145/3001773.3001791