Saint Louis University |
Computer Science 144
|
Dept. of Math & Computer Science |
Note: This document is intended only to be a very brief outline of the content we covered. Far more thorough discussion and documentation can be found in the Processing reference guide, various tutorials, cheat sheets, and our text book
The size function can be used to change the size of our drawing canvas. The typical syntax we will use is
size(w,h);where w and h define the width and height, respectively.
By default, the canvas is 100x100.
The background function can be used to change the appearance of the canvas background. By default the background is a light gray color. Colors for the background (and most other shapes and lines) can be controlled using a variety of models:
background(grayLevel);
This is used to set the background to a shade of gray, where the
parameter is designated between 0=black and 255=white.
background(r, g, b);
This is used to set the background to an arbitrary color using
RGB mode, where r defines the red intensity
(from 0=none to 255=full), and similarly
b and
g define the respective intensity for blue and green.
background(img);
This can be used to set the background to an arbitrary image
object, which can be previously loaded from a file using the
loadImage command. We'll revisit this use another time.
To assist in color selection, see menu item
Note as well that Processing technially allows two different modes for designating a color. The RGB mode is the default. There is a separate mode known as HSB (hue-saturation-brightness). The colorMode function can be used to change the mode, if desired.
There are also a few other ways to define colors (e.g., using hexadecimal notation, which is common in computer science), but we'll ignore those for now.
Processing supports many primitive shapes (and more advanced techniques to define other shapes). We begin by using a line and a rectangle as representative shapes. We then discuss ways in which various attributes of these shapes can be controlled. Then we provide a summary of several other primitive shapes.
The syntax for drawing a line has the form:
line(x1, y1, x2, y2);where x1 and y1 define the coordinates of one endpoint, and x2 and y2 define the other endpoint.
A rectangle can be drawn with the rect function. By default, it is described using the following syntax:
rect(tlx, tly, w, h);where parameters tlx and tly define the top-left x and y coordinates, and w and h define the width and height, respectively. There is a rectMode function that can be used to define other modes for describing rectangles in a program (e.g., describing it relative to its center rather than top-left, or by specifying two opposite corners). Most important is that you understand which mode is currently in use.
By default, the corners of the rectangle are "squared off". But you can define rounded rectangles by specifying an optional fifth parameter that is the radius of the circle used to define a rounded corner, as in
rect(20, 40, 50, 30, 5); // corners rounded with radius 5If you want even more fine-tune control, you can define the radius for each of the four corners separately (see documentation for the order of these parameters).
The stroke that is used for drawing a line, and for drawing the border of a shape such as a rectangle, can be customized in several ways.
By default, the color of such lines is black. But this color can be set with the command:
stroke(color);with color being specified as with a background color, as either a single greyscale value, or an RGB triple. It is also possible to have the lack of a line by using the command
noStroke();While that is not very interesting for a line, it can be used to draw a rectangle without any visible border.
By default, the thickness of the stroke is 1 pixel, but this can be changed with the command:
strokeWeight(weight); // measured in pixels
For lines that have a thickness greater than 1, there is an option regarding the appearance of the end of the line.
strokeCap(ROUND); // end looks like a half-circle
strokeCap(SQUARE); // end stops crisply without any overhang
strokeCap(PROJECT); // squared by projecting beyond end by additional stroke weight
When two lines with thickness greater than 1 meet at a joint, there are three options as to the appearance of how those lines come together. The choice is made as:
strokeJoin(MITER); // a sharp corner
strokeJoin(BEVEL); // angular but less sharp
strokeJoin(ROUND); // rounded joint
For shapes such as rectangles that have an interior, you may control how that interior is rendered. You may switch back and forth between settings as your script progresses.
noFill();is used to say that subsequent shapes that are drawn be unfilled. This is the initial default.
fill(color);is used to indicate that subsequent shapes are drawn filled with the given color. The color can either be a single value, for grayscale, or an RGB triple, or any other valid color specification.
By default, if the geometry of two shapes overlaps, whatever is drawn later will obscure the first. But it is possible to define colors with an additional optional transparency, known as its "alpha" value, that defines a level of opacity ranging from 0=transparent to 255=opqaue. This allows for various forms of blending of a new color with whatever it obscures.
point(x, y);draws a point at the given coordinate, using the current stroke color and weight.
triangle(x1, y1, x2, y2, x3, y3);
An arbitrary quadrilateral can be rendered using the command
quad(x1, y1, x2, y2, x3, y3, x4, y4);
There is a way to draw polygons with more than four vertices, but it is not quite as straightforward. We'll revisit this another time, but for those who wish to read ahead, see the documentation for the beginShape() command.
An ellipse (and thus a circle, as a special case), can be drawn as
ellipse(cx, cy, w, h);which defines an ellipse. By default, the meaning is that the ellipse is centered at (cx,cy) and has width w and height h. However, an ellipseMode method can be used to select a different convention for indicating the geometry of the ellipse.
An arc, which is a portion of an ellipse shape, can be drawn using a syntax such as:
arc(cx, cy, w, h, start, stop);The first four parameters define the underlying ellipse shape, as with the ellipse command. The next two parameters define a start angle and stop angle for the arc, with angles measured in radians, going clockwise from 0=right returning to 2π, which is also to the right. Note that Processing includes built-in definitions for constants PI, TWO_PI, HALF_PI, QUARTER_PI.
There are several additional options that further define precisely how the boundary of the arc is rendered, and if filled, what portion is filled. It would be best to refer back to the formal documentation, which includes nice figures, but in short:
arc(cx, cy, w, h, start, stop, PIE);it is rendered similar to the default but with the two radii also stroked.
arc(cx, cy, w, h, start, stop, CHORD);a straight line is drawn between the two endpoints of the arc, and the entire interior bounded by that chord and the arc is filled (if in fill mode).
arc(cx, cy, w, h, start, stop, OPEN);similar interior to CHORD, but the actual chord between the two endpoints is not stroked when OPEN is designated.