One of the essential components of computer based art is the possibility for interaction.
Interactive design gives the user the ability to change the design. Sometimes the changes are small, sometimes they are large -- the artist has the ability to control how much the user can change.
Drawing a line
We looked at the system variables
mouseY, which track the position of the mouse, as well as
pmouseY that tracks the previous position. We can use these simple values to create a drawing program.
Notice that the
background function appears in the
setup function. The reason the line segments persist in the program is that we are not continuously redrawing the background, which would cover the older line segments.
We can overwrite the drawing by introducing the
background with the
mousePressed is a function that is invoke by the p5 library but defined by us. The code we place inside the brackets after
mousePressed() is run whenever either mouse button is pressed.
mouseDragged & keyPressed
mouseDragged also detects a mouse button press, but continues exectuting until the mouse button is released.
keyPressed executes whenever any key is pressed.
Let's look at another example where we can add shapes to the screen and clear them with a key press.
We can extend the interactive drawing to apply to more shapes or combinations of shapes.
Using the self portrait drawing as a basis, if I want to move the whole thing, I need to add offsets to the shapes so they move relative to the same point.
So far we have made the shapes position interactive. Using the same principle, we can make the color interactive.
Notice in the previous example the canvas width and height are both
255. Remember the RGB color scale? All the values are
0 - 255.
If the canvas is made larger we end up with values that can't be used as color values, anything above 255 will just be read as 255.
We can use the
map function to take one range, mouse position, and map it to another range, color value.
Let's look at that example again, using
In the previous examples, the color is always changing, but what if we wanted to save a color?
Using global variables, we can save red, green and blue values.
Of course, we can also interact with the size of shapes. Position, size and color are the three attributes of shapes that we can change using interaction.
These techniques show how to make things move when you click or move the mouse, but they're kind of arbirtrary. Good interaction should be meaningful for the user. That can be a lot of different things, it can be informative, challenging, fun or any number of experiences.
The key to meaningful interaction is interacting with the drawing in a way that relates to a theme or action.
For a very simple example, I will make my self portrait talk.
In a previous class, I made a self portrait using variables. Now we'll see those variables come in handy.
Using a simple event, I will make the self portrait talk.