Drawing Basic Geometric Shapes
Imagine you are building a house using only plastic building blocks on a flat floor. You must decide exactly where each wall starts and how far each edge stretches across your workspace. Digital art works in the same way because you tell the computer where to place every single pixel on your screen. When you learn to draw simple shapes, you gain the power to build complex scenes from basic building blocks.
Drawing Shapes with Code
To draw shapes, you use a set of instructions that define the size and position of your art. Most drawing programs use a coordinate system to track where items appear on your display. When you want to draw a rectangle, you provide four specific pieces of information to the computer. You tell it the horizontal position, the vertical position, the total width, and the final height. Think of this like giving a friend directions to place a sticker on a large grid. If you change any one of these four numbers, the shape shifts or stretches to a new location.
Key term: Rectangle — a four-sided shape defined by its top-left corner coordinates, its width, and its height.
Drawing a circle follows a similar logic but requires different inputs to define its unique curved boundary. Instead of width and height, you provide the center point of the circle and its radius. The radius measures the distance from the center to the outer edge of the circle. Because the computer calculates the curve for you, you only need these three numbers to create a perfect ring. You can think of this process like using a compass to draw a circle on paper. You fix the center point firmly, then you rotate the pencil around that point to create a smooth, round shape.
Building Complex Images
When you master these two basic functions, you can combine them to create much more detailed digital drawings. You might stack rectangles to form the walls of a house or use circles to create the wheels of a car. By changing the order of your code, you decide which shapes appear on top of other shapes. This layering technique allows you to build depth within your artwork. You can organize these shapes into a simple list to keep your code clean and easy to read as you add more objects to your digital canvas.
| Shape Type | Required Inputs | Primary Purpose |
|---|---|---|
| Rectangle | X, Y, W, H | Structural frames |
| Circle | X, Y, Radius | Curved elements |
| Line | X1, Y1, X2, Y2 | Connecting paths |
This table shows how different shapes require specific data to render correctly on your screen. You should always check your input numbers if your shapes do not appear where you expect them. If you make a mistake with your coordinate numbers, the shape might move off the visible area of your screen. Practicing these basic commands helps you understand how computers translate numbers into visual art. You will soon find that even the most complex digital images rely on these simple, repeating geometric patterns.
# Drawing a rectangle and a circle
# rect(x, y, width, height)
rect(50, 50, 100, 80)
# ellipse(x, y, width, height)
ellipse(200, 200, 50, 50)As you can see in the code above, the computer processes these commands in the order you write them. Every line of code acts as a new layer in your final project. You can move your shapes by simply updating the numbers in your function calls. This flexibility allows you to animate your drawings later by changing the coordinates over time. Mastering these primitive shapes is the first step toward creating interactive digital experiences that respond to user input.
Understanding coordinate inputs for rectangles and circles allows you to construct complex digital scenes from basic geometric building blocks.
The next Station introduces color palettes, which determines how your shapes gain visual style and personality.