Before you can draw things to the screen, you need to know how the coordinate system works. Design applications might use a different point for the origin of their drawing surface. For instance, Photoshop uses the upper-left corner as (0,0), while Illustrator uses the bottom-left corner as (0,0).
Type this line of code in the Processing editor and press the run button. You can also use Ctrl + R (Windows, Linux) or Cmd + R (Mac OS X) to run your sketch.
size( 400, 300 );
Processing uses the upper-left corner for the origin of the window. The size() function sets the dimensions of your sketch window. The first parameter is used to set the value of the system variable width, the second parameter is used to set the value of the system variable height.
Imagine that you want to draw a point at the bottom-right corner of the window. If you were to draw that point at (400, 300), you won't see anything on your screen. You need to draw your point at (width-1, height-1) to make it visible on screen. This may look a little strange, but it's actually very logical. If you want to draw a point at the origin, you'll use: point(0, 0);. This line of code will fill the first pixel on the first row. As we start counting at 0, the last pixel on that row would be 399, or width-1. The same is true for the height. The following screenshot shows our window of 400 by 300 pixels, divided into squares of 50 x 50 pixels.
