Timing & Active Drawing

Kinetic Forms

Artists explore software as a medium for pushing drawing in new directions. Drawing with software provides the ability to integrate time, response, and behavior with drawn marks.

Information from the mouse can be combined with techniques of motion to produce animated drawings that capture the kinetic gestures of the hand and reinterpret them as intricate motion.

Other unique inputs, such as voice captured through a microphone and body gestures captured through a camera, can be used to control drawings.

Active Tools

Software drawing instruments can change their form in response to gestures made by the hand. Comparison of mouseX and mouseY variables with previous mouse values can determine the direction and speed of motion.

In the following example, the change in the mouse position between the last frame and current frame sets the size of the ellipse drawn to the screen. If the ellipse does not move, the size reverts to a single pixel.

In the following example, we've drawn a single line that moves around randomly. Try making this line into an object, then initializing an array of them.

In the following example we extend this to an array of MovingLine objects. Notice that we're not using the push() method here to extend the array to an arbitrary length. Instead, we want to constrain the array to 500 lines. What if, instead of simply stopping after 500 lines, you wanted to loop back and begin overwriting the array from the beginning?

The Blade example creates a new object every frame, each of which is extended by adding a new point each frame, creating the illusion of drawing a line.

Timing

second()
minute()
hour()
millis()
day()
month()
year()

We should learn how to use p5's syntax for standard timing. We can use the functions second(), minute(), and hour() as demonstrated below. Try modifying the code to only print when the second changes.

We can use these functions to make graphical representations of time.

The millis() function returns the number of milliseconds since the sketch began. That can be used to create sequences or timed events.

The following example shows a way to store images as arrays for animations.