Drawing basic 2D graphics

Before exploring more advanced properties of the window, we start working on 2D graphics. The GEM library comes with a number of 2D primitives such as circle, curve, polygon, rectangle, square, and triangle.

Create a new Pd patch. Save it to your folder with name gem002.pd. Clear the console window by choosing Edit | Clear. Create a default graphics window with the gemwin object, create message, destroy message, and the toggle render box as shown in the last section.

We will first create a 2D square in this exercise. Put an object named square onto the patch window. If you switch to the Run mode and create the window to start rendering, nothing happens. In order to render the square object, we need one more GEM object, gemhead:

The gemhead object defines the path that GEM library uses to produce the graphics. When the GEM window starts to render any graphics, it searches all the gemhead objects in the patch. Starting from each gemhead object, it goes down the connection from gemhead to the object that defines the graphics, in this case, a square object:

You will see that the square object has two inlets. The first one is connected to the outlet of the gemhead object that defines the rendering path. The second one defines the size of the square. We can put a number box to it to try it out:

In the Run mode, try changing the value of the number box. Remember that you can click on a number box to type a new number value or click-and-drag it up or down to increase or decrease the value of the number:

You will see that the size of the white square changes according to the value of the number box. The default size is 1. When you change the number value to around 4, it occupies the whole GEM window.

The normal rendering is the white solid fill color. You can also use outline and corner point to render them. By attaching messages with the text draw fill, draw line, and draw point to the square object, in real time we can alter the rendering method. In the Run mode, clicking on the messages will change the rendering method. The default one is draw fill:

Here is the draw line image (shown in the following screenshot):

And here is the draw point image (shown in the following screenshot):

The square object has only one parameter, its size. For other shapes, there will be more parameters to control the dimension. Next, we take a look at the rectangle object. It has two parameters, width and height. We use two number boxes to control them:

The triangle object will draw an equilateral triangle. It has only one parameter to control its size:

The circle object is also straightforward. It has only one parameter for its size:

The next shape, polygon, is a bit complicated. It has one parameter inside the object box, that is, the number of edges. The following example is a polygon of five edges. Besides the left-most hot inlet, it has five other inlets. Each of them defines one corner of the polygon. A corner is a message of three numbers, representing the x, y, and z co-ordinates of the point. The center of the window is the origin of the coordinates system (0, 0, 0). We are going to cover the coordinates system in the next section in more detail.

Note that the coordinates are in three-dimensional space, even though we are preparing 2D graphics. All the points here have z values equal to zero. The polygon shape it generates is shown in the following screenshot:

Similar to the polygon object, the next object (curve) also requires us to put in the points to define the curve line. With just two control points, it draws a straight line:

The drawing is a straight line from the endpoint (-2, 1, 0) to (2, 1, 0):

The curve object defines bezier curve. If we have three points, the first and third points are the endpoints of the curve. The second one is the anchor point that defines the curvature of the line:

Note the use of the message draw linestrip here. The messages draw line and draw fill will produce a closed shape. If you want an open curve line, draw linestrip will do:

When you add more anchor points to the curve object, you can come up with a more complicated curve. It is an example of a curve with five points, two endpoints, and three anchor points:

The first and the last messages are the two endpoints. The middle three points trace the curvature of the overall curve: