3. Smoothing, Coordinates, and Modes

In these notes you will learn:

• How screen resolutions are specified.
• What the Processing smooth() function does.
• How to specify points on the Processing screen.
• How to change Processing‘s drawing modes.

3.1. Introduction

In animation and graphics programming, it’s important to know how to specify the location of objects on the screen. So in this note we’ll see how screen coordinates work in Processing.

3.2. Screen Resolution

Conceptually, most computer screens are a rectangular grid of pixels. A pixel is the smallest region of color on the screen that we can change. When we talk about a point on the screen, we usually mean a pixel.

The width and height of the screen in pixels is known as its resolution. For example, a desktop computer with a big monitor might have a resolution of 1920 x 1200 pixels, i.e. the screen has 1920 columns of pixels, and 1200 rows of pixels (for a total of \(1920 \times 1200 = 2,304,000\) ). In contrast, an iPhone 4 has a resolution of 640 x 1136 pixels, while the iPhone 3 has a lower resolution of 320 x 480.

Making programs work on screens with different resolutions is surprisingly tricky, and many professional graphic designers simply ignore the issue and work at a fixed resolution. In this course we will do the same, and assume that our programs will always be displayed on a monitor with at least 500 x 500 pixels.

3.3. The smooth() Function

As you’ve no doubt seen, computer images can have jagged-looking lines for edges that ought to be smooth. For example, drawing a perfectly horizontal or vertical lines is easy (each * represents a pixel):

**************     *
                   *
                   *
                   *
                   *

But slanted lines necessarily have some jagged edges, e.g.:

**
  **
    **
      **


          *****
     *****
*****

Processing has a function called smooth() that can help hide jagged edges by subtly changing the colors of the pixels around the jags (this technique is known as anti-aliasing). For instance, the circle on the left is smoothed, while the circle on the right is not:

The main downside of using smooth() is that it slows your program down: smoothing-out the pixels takes a little bit of extra time. For many small programs, though, this speed decrease is not noticeable. Thus we’ll often call smooth() in setup() as a simple way to make our output look a little nicer.

3.4. (x, y) Points on the Processing Screen

As in mathematics, Processing uses (x, y) coordinates to label every pixel on the screen: x is the row and y is the column.

Suppose the screen is 500 pixels wide and 500 pixels high. Then the pixel at the upper-left corner is (0, 0), and the pixel at the lower-right corner is (499, 499).

Why is the bottom-right corner has coordinates (499, 499) instead of (500, 500). The reason is that we start counting pixels at 0. For example, if the screen were 5 x 5 pixels, then the pixels would have these coordinates:

You can see that the lower-right corner is (4, 4) and not (5, 5). Again, that’s because we start counting from 0.

As the diagram above shows, the x-values increase from left to right, and the y-values increase from top to bottom. Unfortunately, that’s not quite how coordinates work in mathematics. In math class, the y-values increase from bottom to top. This can be confusing if you are using a mathematical equation to, say, draw a shape in processing.

3.5. Example: Drawing a Diagonal Line

Suppose you want to draw a diagonal line from the lower-left corner of the screen to the upper-right corner, e.g.:

        *
      *
    *
  *
*

For simplicity, assume the screen is 5 x 5 pixels.

Recall from math class that the equation for this line is y = x. But that doesn’t quite work here for two reasons:

• y-values in Processing coordinates increase from top to bottom, not bottom to top;
• The equation y = x makes the line go through the origin, i.e. the point (0, 0). But here our line does not go anywhere near (0, 0) (which is the top-left corner of the screen).

Lets look at the coordinates of the plotted points to see what is going on:

                               (4, 0)
                        (3, 1)
                (2, 2)
        (1, 3)
(0, 4)

How are the x and y values related in these points? Notice that they sum to 4, i.e. x + y = 4 for each point. Re-arranging that a bit gives us the equation y = -x + 4.

And that’s the line we want: y = -x + 4. The -x takes care of the flipped y-axis, and the 4 moves the line away from the origin.

We always need to make such adjustments when we convert mathematical equations to Processing.

3.6. Example: Mirror Drawing

Recall this program, which draws an ellipse wherever the mouse pointer goes:

void setup() {
  size(500, 500);
}

void draw() {
  ellipse(mouseX, mouseY, 10, 10);
}

With a bit of arithmetic, we can create a mirror effect:

void setup() {
  size(500, 500);
}

void draw() {
  ellipse(mouseX, mouseY, 10, 10);

  // reflected point
  ellipse(500 - mouseX, mouseY, 10, 10);
}

In this program, every time draw() is called two circles are drawn: one at the mouse position, and one at the mouse position reflected through the vertical center line of the screen. Note the coordinates of the second circle: it’s centered at (500 - mouseX, mouseY).

3.7. Plotting Points

We’ve seen that Processing has functions for plotting shapes (such as rectangles and ellipses), but sometimes we may want to plot individual points. There are a couple of ways of do this.

One way to plot a point in Processing is to use the point(x, y) function, e.g.:

void setup() {
  size(5, 5);
}

void draw() {
  point(4, 0);
  point(3, 1);
  point(2, 2);
  point(1, 3);
  point(0, 4);
}

Of course, a 5 x 5 window is pretty small, so you might have to look hard to see the line.

Another common way to plot points is to draw small shapes, such as circles or rectangles. This way you have control over the size, color, and shape of the point, which is useful when, say, plotting data on a graph. Lets plot a point in the middle of a 500 x 500 window:

void setup() {
  size(500, 500);
}

void draw() {
  ellipse(500 / 2, 500 / 2, 10, 10);
}

The call to ellipse in draw() plots a circle of size 10 in the middle of the screen, i.e. at coordinates (250, 250). The / is division, and we use it here to show that Processing can do arithmetic for you.

3.8. Drawing Modes

When you call ellipse(0, 0, 200, 200), it draws a circle centered at location (0, 0):

Since (0, 0) is the upper-left corner of the screen, only a quarter of the circle is visible: three-quarters of it are off-screen.

If you want to, you can change how Processing positions a circle using the ellipseMode function. For example, this code sets the upper-left corner of the ellipse at (0, 0):

ellipseMode(CORNER);
ellipse(0, 0, 200, 200);

Now the entire circle is visible:

The “corner” of the ellipse means the corner of the smallest rectangle that can be drawn around the ellipse (and whose edges are parallel to the sides of the screen). This surrounding rectangle is known as the bounding box for the ellipse, and it’s a common way to specify the size and position of a graphical object.

Rectangles drawn with rect(x, y, width, height) also have a mode that you can set with rectMode. By default, the (x, y) in a call to rect is the location of the rectangle’s upper-left corner. You can change it to be the center like this:

rectMode(CENTER);
rect(0, 0, 50, 50);

What drawing mode to use is up to you. You never need to change it, but sometimes it might be convenient. We will occasionally change the drawing mode when it is useful.

3.9. Questions

1. What is a pixel?
2. How many pixels are there on a screen with a resolution of 1920 x 1200? 640 x 400?
3. Explain why smooth lines sometimes look jagged when displayed on a computer monitor.
4. Describe the differences between the Processing screen coordinate system, and the coordinate system normally used in mathematics.
5. Suppose you are working with a Processing screen that is 640 pixels high and 400 pixels wide. What, exactly, are the coordinates of the point at:
   • The upper-left corner?
   • The upper-right corner?
   • The lower-right corner?
   • The lower-left corner?
   • The middle of the screen?
6. Describe two different techniques for plotting points in Processing.
7. The ellipseMode function has more modes than are mentioned in the text. What are all the modes for ellipseMode?

3.10. Programming Questions

1. Write a program that draws 5 circles on a 500 x 500 screen at these screen locations:

   • the upper-left corner
   • the upper-right corner
   • the lower-left corner
   • the lower-right corner
   • the middle

   Make sure the circles are entirely visible, i.e. don’t let any part of them go off the screen.

2. Write a program that draws a circle and its bounding box, both centered in the middle of the screen. The circle should just touch the middle of each of the four sides of the box.

   Make the size of the circle and box change with respect to the mouse pointer (i.e. use mouseX and mouseY to set their width and height) so that the shapes will get bigger or smaller when the mouse moves. They should always stay centered in the middle of the screen.

3. Using an image of your choice, write a program that draws three copies of that image on the screen, and all three images move in the same direction the mouse pointer moves.

4. Re-do the previous question except this time make the three images each move in different directions when you move the mouse pointer.

5. Modify the mirror-drawing program in the notes so that the circles drawn by the user are reflected through the horizontal center line.

6. Modify the mirror-drawing program so that three reflected circles are drawn (so there will be four circles drawn simultaneously). The three circles should reflect through:

   1. the horizontal center line
   2. the vertical center line
   3. both the horizontal and vertical center line