Saint Louis University |
Computer Science 1050
|
Dept. of Math & Computer Science |
pp. 49-56 of Ch. 5 of the Reas/Fry book
Watch Daniel Shiffman Video 3.0, Flow (16 minutes)
(available at
learningprocessing.com
and
YouTube)
Watch Daniel Shiffman Video 3.1, Built-in variables
mouseX, mouseY (13 minutes)
(available at
learningprocessing.com
and
YouTube)
Read the introduction of the processing.org tutorial on interactivity and the first section on "Mouse Data" (but ignore, for now, their use of "if" statements to achieve conditional behaviors).
If you are interested in reviewing, the following are some (interactive) examples from the Reas/Fry reading.
Reas/Fry Example 5-4
This program repeatedly draws a circle at the mouse position, using a
partially transparent black so that the background shows through, but
that additional circles cause convergence to black.
For convenience, our demo below allows you to clear the screen by
clicking on the canvas (even though that functionality is not
reflected in the given source code).
Implementation: code
Reas/Fry Example 5-5
The only difference between the previous sketch and this one is that
the background command is issued within draw(),
thereby clearing the screen for each frame just before the ellipse is
drawn.
Implementation: code
Reas/Fry Example 5-6
This demonstrate use of the pmouseX and pmouseY
variables, to draw lines between the current and previous mouse
positions.
You might notice that the first time that you enter the mouse into the
canvas, the previous location is considered to be (0,0).
For convenience, our demo below allows you to clear the screen by
clicking on the canvas (even though that functionality is not
reflected in the given source code).
Implementation: code
Reas/Fry Example 5-7
This is similar to the previous demo, except that the weight of the
line is set to be proportional to the distance that the mouse traveled
between its previous and current location.
For convenience, our demo below allows you to clear the screen by
clicking on the canvas (even though that functionality is not
reflected in the given source code).
Implementation: code
Reas/Fry Example 5-8
... easing demo, but with constant of 0.05 for faster convergence ...
For convenience, our demo below allows you to clear the screen by
clicking on the canvas (even though that functionality is not
reflected in the given source code).
Implementation: code
Try to recreate any of the following interactive sketches on your own.
Moving Line
This continually displays a single line between the center of the
canvas and the mouse.
Implementation: spoiler
Painting Line
This draws many lines between the center of the
canvas to the current mouse location.
For convenience, our demo below allows you to clear the screen by
clicking on the canvas (even though that functionality is not
reflected in the given source code).
Implementation: spoiler
Lowering a Curtain
This sketch gives a rudimentary view of lowering and raising a curtain
over the canvas window, with the extend of the curtain aligned with
the mouse pointer.
Implementation: spoiler
Closing Curtains
In this adapatation of the previous sketch, a pair of curtains can
open and close from the left and right of the screen. The mouse
controls the extent of the right curtain, with the extent of the left
curtain set accordingly.
Implementation: spoiler
Outlining a Rectangle
In this sketch, we draw a rectangle that has one corner
at the center of the screen and the other at the mouse location.
This can be done
either by switching to rectMode(CORNERS), or by putting the
"top-left" at the center of the screen and then computing the width
and height based on the difference between that
center and the mouse. Conveniently, Processing interprets a negative
width as rectangle that goes left of the "top-left", and a negative
height as one that geos above the "top-left".
Implementation: spoiler
Outlining an Ellipse
Similar to the previous, but draws an ellipse that is centered at the center of
the screen and using a width and height that is based on the absolute
value of the difference between the mouse location and the center in
terms of both x-component and y-component. Note that Python has a
builtin in function abs for computing an absolute value.
Implementation: spoiler
Outlining an Ellipse
Extending the previous sketch to visibly show the bounding rectangle
for the ellipse. (But note that this is not the same rectangle as
given two sketches ago.)
Implementation: spoiler
Two-Dimensional Easing
In this sketch, we adapt the Reas-Fry Example 5.8 to two-dimensions,
easing both an x and y coordinate.
For convenience, our demo below allows you to clear the screen by
clicking on the canvas (even though that functionality is not
reflected in the given source code).
Implementation: spoiler
Sunset
This sketch is quite similar to the moving circle of the Reas/Fry
Example 5-5, however we play a bit with the color choice of the
sun and the sky depending in some way on the y-coordinate of the
mouse, and also in increasing the size of the sun near the bottom.
We use the lerpColor function for convenience in
interpolating colors, but with a non-linear function so that changes
are more extreme near the horizon.
Implementation: spoiler
Color Intensity
In this sketch, we set the intensity of the color based upon the mouse
motion. Specifically, we compute the square of the distance between
the current and previous mouse locations, and then we set the color to
(255, 255-k, 255-k) where k is that value.
Implementation: spoiler
Color Intensity with easing
The previous sketch is somewhat unpleasant with the dramatic changes
of colors. In this version we apply easing. Rather than switch
directly to the indicated color intensity right away, we compute the
target intensity as before but then adjust the actual intensity with
an easing constant times the difference between the current intensity
and the target intensity.
Implementation: spoiler
Random Rectangles
We can take advantage of Processing's draw cycle to create animations,
in this case drawing one new random rectangle during each call to
draw. In our example, top-left corner is chosen uniformly at random,
and both width and height are chosen between 10 and 40.
(For convenience, the sketch below clears if you click the mouse,
although that behavior is not shown in our source code).
Implementation: spoiler
Random Walk
For this sketch, we maintain global variables x and
y that represent the center of a circle. During each draw
cycle, we draw a gray circle to cover the previous red, then adjust
the position by a small random amount, and then redraw a red circle.
(For convenience, the sketch below clears if you click the mouse,
although that behavior is not shown in our source code).
Implementation:
spoiler
(Kudos if you can explain why some redish color is left behind in the
trail).
Wrap-around Motion
For this sketch, we demonstrate basic motion with "wrap-around"
behavior in which the ball, once it reaches the right side of the
canvas, reappears at the left side. In a coming lesson, we will
introduce conditional statements, that allow you to test when a
condition has been met (such as the ball reaching the right side). But
for now, we rely on a common trick for wrap-around behavior by using
the
modulo operator % which returns the
remainder produced by a division operation. For example, if you
consider the division of 502/500, the remainder is 2. In Processing,
the expression
Implementation: spoiler
String Art
The animation in the following sketch is based on use of a global
variable that is updated during each call to draw.
(For convenience, the sketch below clears if you click the mouse,
although that behavior is not shown in our source code).
Implementation: spoiler
While we don't offer an explicit sample, we expect a quesiton might have a difficulty level somewhat on par with the "Closing Curtains" example.