Saint Louis University |
Computer Science 1050
|
Dept. of Math & Computer Science |
Try to recreate any of the following sketches.
Mapping Colors v1
Interactively set the background color of the canvas to vary according
to the mouseY location, such that the canvas is black when the mouse
is at the top edge, and blue when the mouse is at the bottom edge.
Implementation: code
Mapping Colors v2
Interactively set the background color of the canvas to vary according
to the mouseX location, such that the canvas is white when the mouse
is at the left edge, and red when the mouse is at the right edge.
Implementation: code
Mapping Colors v3
In this version, we set the background color so that the mouseX value
controls the green component of the color (ranging from 255 at left
and 0 at right), and the mouseY value controls the blue component of
the color (ranging from 0 at the top to 255 at the bottom). The red
component is fixed at 255.
Implementation: code
Vanishing at the Horizon
The following sketch demonstrates the basic principle of perspective with a (simple) landscape in which there is a 600x500 canvas having a horizon line at height y=300. There is a cirlce drawn that has diameter 100 when at either the top or bottom of the screen, but with in linearly interpolating toward 0 when approaching the horizon.
Implementation: code
Plotting Data
The map function can be very useful when plotting data that comes form
some natural range, to the scale of screen coordinates on a displayed
graph. In this example, we rely on the following three arrays to
provide the raw data regarding average temperatures at Saint Louis
University:
float[] high = { // average high temperatures by month
39.8, 45.1, 55.4, 67.0, 76.8, 85.3,
89.1, 88.1, 80.8, 68.9, 55.9, 42.9
};
float[] low = { // average low temperatures by month
23.8, 27.8, 37.0, 47.3, 57.4, 66.7,
71.0, 69.7, 61.1, 49.5, 39.3, 28.1
};
String[] month = { // month abbreviations
"Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
};
Implementations:
version1 (without map)
version2 (with map)
Stop Sign
Use trigonometry to define the vertices of this octagon shape. Better
yet, make a function that creates a regular polygon with any number of
sides, and then use that function to create the eight-sided figure.
We offer two different implementations. In one, we use the following function design:
/** * Draws a regularly polygon having sideCount sides and * indicated radius, centered at (cx,cy) and with a vertex * positioned at angle theta from the center. */ void regularPolygon(int sideCount, float radius, float cx, float cy, float theta)
In a second version, we offer a simpler signature that design a regular polygon centered at the origin (which can then be placed elsewhere by using the translate() and rotate() functions before creating the polygon.
/** * Draws a regularly polygon having sideCount sides and * indicated radius, centered around the origin and with * first vertex aligned right of center. */ void regularPolygon(int sideCount, float radius)
Implementation: version1, version2
Star
Similar to a regular polygon, a star shape can be created by defining
the number of points, as well as both the radius from the center to
the outside point of a star and the radius from the center to an
inner vertex.
Implementation: code
Star Solid
If you design a star function, you can create an apparent
three-dimensional solid by repeatedly drawing stars with the same
center, but changing the rotation, size, and brightness as you go.
In fact, if you would like an animation of how this figure is formed, I offer this really cool animation of its creation. (It is linked as a separate web page because it may be a bit taxing on the cpu when it runs.)
Implementation: code
Spiral
This particular graph is of the parametric function defined by
x = t * cos(t);
y = t * sin(t);
as t ranges from 0 to width by a small increment. We display it in
Processing using a single beginShape/endShape
construct with many individual vertices based on increasing values of t.
For more fun, try
x = t * cos(k*t);
y = t * sin(k*t);
for various choice of constant k.
Implementation: code
Spinning Spiral
Vertigo aside, we add an additional offset to the angle and allow that
offset to vary over time, with the amount of change dependant on the
mouseX location.
Implementation: code
Hex Bricks
If you can master the trigonometry, you're ready to layout the bricks
for your new patio.
Implementation: code
Cycloid
The following animation shows the creation of a cycloid,
which is the curve that is traced by a point in a circle as it rolls
along a line. To model the mathematics, notice that if you know what
distance has been traveled along the baseline, that determines the
total angle of rotation of the circle thus far (so that the
circumference that has been traced matches the baseline
distance). Then, you would know at any given x-coordinate, how much
the ball has rotated and thus where the key red point would be
relative to the circle center.
Implementation: code
Spirograph
Similar to the previous animation, for a classic spirograph, the
distance traveled along a circumfrance of the outer circle must match the
distance traced along the circumfrance of the inner circle.
Implementation: code
Today's quiz question will be made available here