Your Window and its Screen Coordinates

We want to draw something to the screen, but how do we draw? First, we need to know about processing (and many other environments) draw to a screen.

Cartesian Coordinates

You will have learned about cartesian coordinates in school. This is where you have two axis that are perpendicular to each other.

Screen Coordinates

Computers use a very similar thing, but for some reason, the Y-Axis goes down instead of up. Also, the origin of the coordinate system is in the upper left corner of your screen. So if you know "I need to draw something six units over to the side and four units down", you can tell this to your computer. In processing, these units will be pixels.

In our programs, we get to set the size of our canvas with this command: size(__, __);! Her is what this could look like:

Window Size in Processing

size(600, 400);

When you run this piece of code in processing, it should open a window with a width of 600 pixels and a height of 400 pixels.

Drawing anywhere

size(600, 400);
point(100, 100);

This code will draw a single lonely black pixel at coordinates x=100 and y=100. It will be very easy to miss, since a single pixel is pretty tiny on a canvas of 240,000 pixels..

Relevant excerpt from Learning Processing

(the section starts at 18:15 and runs through 29:05, the video should start and stop on these automatically.)