Saint Louis University |
Computer Science 1050
|
Dept. of Math & Computer Science |
Note: This document is intended only to be a very brief summary of basic drawing commands. 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.
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 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.
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. Processing includes built-in definitions for constants PI, TWO_PI, HALF_PI, QUARTER_PI. Note well that by their clockwise convention, the angle HALF_PI is downward. (Contrary to the typical mathematical conventions for angles, which measure counterclockwise.)
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.
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.
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 thickness of the stroke is 1 pixel, but this can be changed with the command:
strokeWeight(weight); // measured in pixelsThis effectively acts as if strokes are now drawn with a circular shaped pen that has diameter equal to the given weight 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