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.

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.

Conceptually, most computer screens are a rectangular grid of
*pixel*s. 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.

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.

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.

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.

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)`.

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.

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.

- What is a pixel?
- How many pixels are there on a screen with a resolution of 1920 x 1200? 640 x 400?
- Explain why smooth lines sometimes look jagged when displayed on a computer monitor.
- Describe the differences between the Processing screen coordinate system, and the coordinate system normally used in mathematics.
- 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?

- Describe two different techniques for plotting points in Processing.
- The
`ellipseMode`function has more modes than are mentioned in the text. What are all the modes for`ellipseMode`?

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.

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.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.Re-do the previous question except this time make the three images each move in different directions when you move the mouse pointer.

Modify the mirror-drawing program in the notes so that the circles drawn by the user are reflected through the

*horizontal*center line.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:- the horizontal center line
- the vertical center line
- both the horizontal and vertical center line