EARTH 801
Computation and Visualization in the Earth Sciences

Lesson 1: Primitive Shape Attributes

PrintPrint
 

Syntax introduced: size(), background(), stroke(), strokeWeight(), fill(), noStroke(), noFill()

0. Modify Primitive Shapes

Now let's explore ways to change the look of the various primitive shapes introduced on the previous page. The size() function changes the size of the display window. It takes two integer arguments which are the width and height you want, in pixels. Use the background() function to change the color of the display window. It takes one integer argument, a number ranging from 0 (black) to 255 (white). You can also make the background an actual color, but let's save the discussion of color for the next lesson.

For dealing with the primitive shapes, stroke() works to change the color of the outline of the shape, and fill() does the same for the inside. The command strokeWeight() controls the thickness of the outlines of the shapes, in pixels.

Check out the program below and its associated screenshots similar to the one on the previous page except that I've used stroke(), fill() and strokeWeight() to change the look of the drawing.

size(200,200);
background(200);
stroke(255);
strokeWeight(3);
point(50, 50);
line(10,20,10,70);
fill(0);
ellipse(70,20,40,20);
strokeWeight(1);
fill(100);
rect(60,65,10,30);
display window containing a filled ellipse, filled rectangle, a line, and a point.
Output from the program above.

1. Stuff that matters: Command Order, Punctuation, Case

Now is a good time to take a short digression regarding syntax when writing code. First let's talk about command order. In the program above, each line is a command, telling Processing to do something, such as to draw a shape to the display window at a certain position. Processing reads each command in order and then moves to the next one. If you specify something like the fill value or the stroke value, Processing keeps that value in its memory and continues to use it until you specify a different value and then Processing will start using the new value instead. The fill and stroke values are in greyscale that ranges from 0 (black) to 255 (white). White is different from having no value at all. If you want a shape with no fill or no stroke, you need to use the commands noFill() and noStroke().

Notice the section of the program above that goes like this:

fill(0);
ellipse(70,20,40,20);
strokeWeight(1);
fill(100);
rect(60,65,10,30);

The first fill() command tells Processing to make the inside of any subsequent shape black. So when it draws the ellipse, that ellipse is filled with black. Then later on we change the fill color to 100, a nice medium grey, and so the rectangle we plot after that gets that nice grey for its insides.

Now let's talk about another important issue. You have noticed by now that I end all my commands with a semicolon. This is approximately equivalent to ending a sentence with a period when you write in English. The period at the end of the sentence tells the reader that this thought is over and now we are moving to the next thought. That's what the semicolon does for you in Processing. Try removing one of the semicolons and running the program again. Here's what you get:

A screenshot of a program, in Processing, where the semicolon on the first line is missing. See text description in link below

A program with a missing semicolon and the error output. Click for text.

Code Displayed

I took the semicolon away from the first line.

size(200, 200)
background(200);
stroke(255);
strokeWeight(3);
point(50,50);
line(10,20,10,70);
fill(0);
ellipse(70,20,40,20);
strokeWeight(1);
fill(100);
rect(60, 65, 10, 30);

Error Displayed

Syntax error, maybe a missing semicolon?

processing.mode.java.JavaMode.handleRun(JavaMode.java:176) 
at
processing.mode.java.JavaEditor$20.run(JavaEditor.java:481) 
at java.lang.Thread.run(Thread.java:680)
 

You don't get a display window, bummer! Processing got confused, but the editor smartly guesses that maybe a missing semicolon is the problem, tells you so, and then highlights where it thinks the problem is. A missing semicolon is one of the most common mistakes. I do it all the time. Luckily it's a really simple problem to correct.

Case matters, too. What if you wrote strokeweight instead of strokeWeight? Does it matter? Yes, it does. Try going back to your code and write that command with a lowercase "w" and see what happens.

A screenshot of a program in Processing using a lowercase w instead of an uppercase W in the strokeWeight() command. If you need a transcription, click the caption.

A program with a incorrect case in strokeWeight() and the error output. Click for text.

Code Displayed

The 4th line uses strokeweight() instead of strokeWeight(). The W in the command should be capitalized, but is incorrectly coded with a lowercase w.

size(200,200);
background(200);
stroke(255);
strokeweight(3);
point(50,50);
line(10,20,10,70);
fill(0);
ellipse(70,20,40,20);
strokeWeight(1);
fill(100);
rect(60,65,10,30);

Error Displayed

The function strokeweight(int) does not exist.

This time, the program does not run, and an error message tells you that there is no such thing as "strokeweight." Case matters. A person reading your code would have probably said, "Oh, you meant strokeWeight, not strokeweight, fine, okay, I get it." But Processing can't do that. Human beings can understand the ambiguity inherent in human languages and that's why jokes with double entendres are funny. For example, during the runup to the 2008 presidential election, many pundits commented on Michelle Obama and her fashionable outfits. One journalist wrote, "Why are Mrs Obama's sleeveless shirts such a big topic of conversation? After all, the second amendment gives her the right to bare arms." Ha ha ha. But even if you thought this was corny, you got it right? You understand that "bear" and "bare" are homophones and that "arms" can be interpreted two different ways. But the Processing compiler would not be able to explain this joke because it can only interpret each command exactly one way. This is true in general when you write programs in any language for a computer to execute.

2. Formatting that Doesn't Matter: Whitespace, Carriage returns

Now, having said that, there are some things that Processing does not care about. Whitespace is chief among these. Try doing something to the program above such as writing fill( 100 ) instead of fill(100). Processing doesn't care. Same if you hit return a bunch of times in between commands.

I think it's a good idea to keep in mind that first of all, you have to follow rules for punctuation and case or else Processing can't understand what you want it to do. Also, at some point you are going to want to share your program with another person and it is helpful if that person can read it easily. So if you monkey around by putting spurious spaces in various places, it may be true that Processing doesn't care, but it also might make it hard to read your code. This will make more difference later on when you start writing more complicated blocks of code.

3. Your turn!

Time to extend what you've learned so far. Note that I am only asking you to submit two of the exercises below for me to look at. I still recommend working through all of them because that is the best way to learn to program and also they build on each other. In fact, one way to approach this set of exercises is to write the program in Exercise 1.1, then modify that same program and turn it into Exercise 1.2, and so forth.

Exercises

1.1 Write a program that makes a dark grey display window that is 200 x 400 pixels.

1.2 Tangent ellipses: Write a program that draws a display window, draws an ellipse in each corner whose outline is tangent to the edges of the window.

1.3 Tangent ellipses 2: Modify the above program to change the stroke (thickness) of the outlines of the ellipses.

1.4 Tangent ellipses 3: Modify the above program to change the fill (grey value) of each ellipse.

1.5 Write your name: Write a program that draws a display window and uses primitive shapes (points, lines, rectangles, ellipses) to write your name to the display window.

Turning in your work:

Upload the .pde files for Exercises 1.4 and 1.5 to their appropriate assignment dropboxes in Canvas by the date indicate on this lesson's overview page. Name them like this: lastname1_4.pde and lastname1_5.pde, so for example my program for Exercise 1.4 would be called: richardson1_4.pde. Note that the default file extension is already ".pde" so you don't have to add that part yourself when you are saving your file with a name.