There are many examples of a program designed for drawing or painting other than Paint. There is the new version, Paint3D. There is Artweaver, Microsoft Fresh Paint, MyPaint, or Krita for the PC, or Paintbrush for the Mac, and Ink- scape or GIMP for Linux. The visual presence of each of these can be quite different, but all offer similar basic feature sets and each usually has some things at which they excel. Things these programs tend to have in common are as follows:
Drawing lines, circles, ellipses, and rectangles
Selecting a color, usually a foreground and a background color
Selecting a line thickness
Loading and displaying an image.
Cutting and pasting
These features are selected using the mouse. Drawing options are chosen by clicking the mouse in a box, which places the program in the specific mode. Thus, clicking the mouse in the draw line box allows lines to be drawn with mouse clicks. Other options, such as color, are also selected by clicking in a box and setting a global parameter.
When designing the interface, simplicity is key. We need a drawing area within which all painting/drawing is done and an area of the screen where the options can be selected. Keeping the design simple, the drawing area will be on the top portion of the window that the program creates as the interface. It will have a fixed size of 800 x 600 pixels. Beneath the drawing area, which we’ll call the canvas, in the same window, will be a set of boxes or buttons that will implement the options. Figure 15.1 shows a draft of this visual design.
The program is named Mondrean after the artist Piet Mondrean.
The x,y coordinate system of the window starts in the upper left at (0,0). At the lower right of the drawing area are the coordinates (799, 599). The parameter selection area starts at (0,600) and in this design covers the area to (650, 699).
Someone drawing using a mouse needs to know where, within the drawing area, the mouse cursor is. The X,Y coordinates of the mouse are drawn immediately below the canvas, and there is a set of calibration marks, one the right and bottom of the canvas, to help the artist determine exactly where they are. If the mouse is outside of the canvas, the X,Y position will not be given.
To draw something, the user depresses a mouse button and, possibly, moves the mouse elsewhere before releasing it. We can determine the location of the press and release easily through Pygame, and the action that will be taken depends on the current mode of the program. Is it drawing a line? A circle? And so on.
The Mondrean program interface
This kind of analysis of how the program will be used allows us to decide what information we need from Pygame. We’ll need to know is the location of the mouse and whether the mouse button has been pressed or released. For drawing text we’ll need to accept text from the keyboard. That’s really all that we need.
Drawing is done by noting the coordinates at which the mouse was pressed and released within the drawing area. A press starts the drawing, and a release ends it. For example, press the mouse button down for the start of a line, drag the mouse to the position that is desired to be the end of the line, and then release the button. An exception is text, where a click of the mouse indicates the beginning of the text.
Not only do we need access to the location of the mouse, but we need it frequently, often many times each second. Imagine that we’re drawing a rectangle; place the mouse cursor at the upper right corner of the rectangle we want, press the mouse button down and hold it, and move the mouse cursor to the lower right corner and let go of the button. This draws a rectangle. The program must check the mouse button many times each second to see if it has been pressed or released so that an accurate mouse location at the time can be gathered.
Now let’s see how to do some basic drawing. To accomplish this, we once again use Pygame.
Source: Parker James R. (2021), Python: An Introduction to Programming, Mercury Learning and Information; Second edition.