2. Drawing

Shapes | Fills and Strokes | Color | Transparency | Programming notes

I can't reiterate enough that the best way to learn this stuff is by doing. Don't just passively skim over these notes. Try each new construct yourself, and see what happens when you change things. Likewise, load the examples in, modify them, see what you get, and come up with new stuff. (And send cool things my way.) We'll do some of that in class, too -- just yell if you want to try a variation on the theme.

Sol LeWitt "Wall Drawing #33"

Shapes

To draw something, we have to tell the computer what we want to draw and where we want to draw it (among other things). In a drawing program, one typically specifies these things by selecting from menus and pointing-and-clicking. However, in order to be able to do some of that work computationally, we'll have to look under the hood. A recurring theme in this course will be how can we specify and represent, within a computer, things that are visual.

Where is specified with respect to a coordinate system, like in math classes, but oriented somewhat differently:

Thus we specify where in terms of an x coordinate and a y coordinate. The x axis runs left-to-right (0 at the left) and the y axis top-to-bottom (0 at the top). In Processing, by default the maximum possible x and y coordinates are both 100. However, the very first line of a sketch can use the createCanvas() function to specify a different size for the window, e.g., 400 (x) by 400 (y):

createCanvas(400,400);

This is an example of a function call; the function is named size, and its parameters are the width (here, 400) and height (here, 400). See the Programming notes section below for a discussion of how to read and write function calls. In general, when I introduce a new function (previous paragraph), I will provide a hyperlink to the Processing reference manual describing it.

What to draw is specified by calling an appropriate function. We saw last time the ellipse() function, e.g.,

ellipse(200,120,120,120);

The function takes four parameters, in order: the x (here 200) and y (here 120) coordinates of the center, along with the width (here 120), and the height (here also 120). An ellipse with width equal to height is a circle, but we can get something that's oblong by making them unequal (try it).

The rect() function is similar; its parameters are the x and y coordinates of the upper left corner (rather than the center, like for ellipse), along with the width and height. E.g., a 40x200 rectangle at (200,200):

rect(200,200,40,200);

If we'd rather specify an ellipse like a rectangle (upper-left corner) or a rectangle like an ellipse (center), use the ellipseMode() or rectMode() function. E.g., try putting ellipseMode(CORNER); and rectMode(CENTER); in front of the above examples.

Plotting a single point is done with the point() function, specifying the x and y coordinates. E.g., at (200, 190):

point(200,190);

A single point is pretty much invisible, unless we change the strokeWeight(), giving a parameter for the thickness (default 1). E.g., try the above with strokeWeight(5);. Note that this affects all points and lines drawn from this point on. So to go back drawing thinner lines, we need to isse a strokeWeight(1); command.

We can draw a line() by giving the coordinates for its two endpoints, in the order x₁, y₁, x₂, y₂:

line(180,300,180,320);

I'll let you look over on your own the documentation for triangle() and quad(), which work much the same way; let me know if anything's confusing.

We saw above that the weight of a stroke can be controlled. Likewise, the strokeCap() function modifies the cap on a line, and the strokeJoin() function modifies how lines are joined together in rects, triangles, and quads. One more function that modifies appearances of things being drawn is smooth() (and its opposite, noSmooth()), which does what its name suggests. Smoothing (anti-aliasing, technically) makes shapes look better, but can slow things down a bit (this is only potentially a problem for intensive sketches).

Finally we can "draw" text.

Setting the font only has to be done once in the file, and then we can draw the text. The function is text(), and its parameters are the text (in double quotes) and the coordinates. By default the coordinates specify the lower-left corner, but we can change that behaviour by aligning the text with the command textAlign().

textAlign(CENTER);
text("take me to your leader",200,40);

Multiple shapes, sizes, and colors


function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  noFill();
  strokeWeight(5);
  stroke(255, 0, 0);
  rect(50, 50, 200, 200);
  stroke(0, 0, 255);
  rect(150, 150, 200, 200);
}

function setup() {
  createCanvas(400, 400);
textSize(24);
textFont('Georgia');
}

function draw() {
  background(220);
  noFill();
  strokeWeight(3);
  stroke(255, 0, 0);
  ellipse(200, 200, 200, 200);
  stroke(0, 255, 0);
  ellipse(200, 200, 150, 150);
  stroke(0, 0, 255);
  ellipse(200, 200, 100, 100);
  fill(0);
  text('Hello World', 12, 30);
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  noStroke();
  fill(255, 0, 0);
  rect(0, 0, 200, 200);
  fill(0, 255, 0);
  rect(200, 0, 200, 200);
  fill(0, 0, 255);
  rect(0, 200, 200, 200);
  fill(255, 255, 0);
  rect(200, 200, 200, 200);
  strokeWeight(5);
  stroke(255, 0, 255);
  noFill();
  triangle(0, 0, 200, 100, 0, 200);
  triangle(400, 0, 200, 100, 400, 200);
  triangle(0, 400, 200, 300, 0, 200);
  triangle(400, 400, 200, 300, 400, 200);
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220,110,220);
  
  // draw red rectangles
  fill(255, 0, 0);
  rect(50, 50, 100, 100);
  rect(250, 250, 100, 100);
  
  // draw blue triangles
  fill(0, 0, 255);
  triangle(200, 50, 350, 200, 50, 200);
  triangle(200, 250, 350, 400, 50, 400);
  
  // draw yellow lines
  stroke(255, 255, 0);
  strokeWeight(5);
  line(0, 0, 400, 400);
  line(400, 0, 0, 400);
}

Create Your Own Sketches. Use the following artists for inspiration

Bridget Riley
Sol Lewitt
Chuck Close
Piet Mondrian
Kazimir Malevich
Hilma Af Klimt
Frank Stella

Programming notes

Sketch: So far, a sketch is just a sequence of function calls and comments. The sketch is "performed" (executed) top to bottom, so the results of later ones can obscure the results of earlier ones.
Function call, parameters: Processing provides many built-in functions (e.g., we've seen some for drawing things and setting colors), and we can also specify our own (we'll cover that later). A function is essentially just a command to perform some action. The name of the function (e.g., ellipse) says what action to perform; it is case sensitive (so Ellipse is not the same thing as ellipse). A function may need some more information in order to perform the action; we use parameters to give such information. For the ellipse function, we need to give its position and size. If a function name is analogous to a menu option, then parameters are analogous to various parts of a dialog that have to be filled in (e.g., "save as" needs the filename). The order of the parameters is fixed, and specified in the documentation for the function (I hyperlink to the Processing reference when I introduce a function). The parameters are separated by commas, and enclosed in parentheses after the function name.
Comment: A comment is just a note for the reader, and is ignored by Processing. A single-line comment starts with a double slash (//); we can write anything we want after that, up to the end of the line. A multi-line comment starts with slash-star (/*) and runs until star-slash (*/).
Syntax: Processing (along with all other programming languages) is like a very picky English teacher -- you have to put commas, parentheses, and semicolons in the right places, give the right number of parameters, etc. If (rather, when) you make a mistake, Processing will do its best to help you figure out where and what, but its advice can sometimes be a bit cryptic. In addition to the syntax for function calls and comments, the other piece of syntax we've seen is the semicolon. Generally speaking, each command (so far, each function call) is followed by a semicolon. That is, semicolons aren't separators, like in English, but terminators.
Style: One thing that Processing doesn't care about is spacing. However, the reader does. We can add as many spaces and blank lines as we want, between things, but not in the middle of a name or a value. (Give it a try.) Use spacing carefully, to make the code easy to read. This will become more of an issue as we expand our set of Processing constructs.