| < 3. Strings and Variables | 5. Lists > |
4. The Cartesian Plane
Let's take a closer look at the graphics box.
The default setting of the graphics box is a Cartesian plane with the limits -180 <= x < 180 and -180 <= y < 180. It looks and behaves like the 2-D plane in math textbooks.
The center of the graphics box, (0, 0) is called the origin. Positive x values go towards the right, and positive y values go towards the top.
Text
It is very useful to place a label anywhere in the graphics box. The (text x y string) function accepts x and y coordinates where the string's bottom-left corner should be placed.
Let's try writing "center" at the very center.
(text 0 0 "center")
Now, let's label each of the four quadrants of the two-dimensional plane. Each quadrant is separated from each other by the two axes. The x-axis is the straight horizontal line where \(y = 0\) everywhere, and similarly, the y-axis is the vertical line where \(x = 0\) everywhere.
(text 80 80 "(80, 80)") (text -80 80 "(-80, 80)") (text -80 -80 "(-80, -80)") (text 80 -80 "(80, -80)") (text 110 10 "x-axis") (text 10 160 "y-axis")
Points
The simplest drawing function is pt. It is short for point. It takes two numbers, x and y, for the (x, y) location where to draw the point. Since a single point is hard to see, let's draw a short line segment of 5 points. Click on the code block below.
(pt 20 20) (pt 20 21) (pt 20 22) (pt 20 23) (pt 20 24)
You should see a small vertical line segment close to the center.
A dotted diagonal line segment may be created by increasing both x and y values at the same time. By adding a bit of space in between the points, we make it appear dotted:
(pt 20 20) (pt 23 23) (pt 26 26) (pt 29 29) (pt 32 32) (pt 35 35)
If you wish, click below to (clear) the contents of the graphics box. (axes) will redraw the x and y axes.
(clear) (axes)
As you can see, it's tedious to generate a drawing point-by-point. We will revisit the use of points later. For now, let's look at other kinds of drawing functions.
Lines
Another basic element of drawing is a line. It is a function that takes 4 arguments.
They are x1, y1, x2, and y2, where (x1, y1) are the coordinates of one endpoint, and (x2, y2) are the coordinates of the other endpoint.
For example, the function call below will draw a diagonal line in the top-right quadrant:
(line 40 20 150 150)
Rectangles
A rectangle is a four-sided shape with right angles. There are two ways of drawing rectangles:
The first way, (rect x y width height), behaves a bit differently from lines. The bottom-left corner x and y values are the first two arguments, then the width and the height. The edges will extend to the right an upwards.
The second way, (rect-corners x1 y1 x2 y2) is more similar to (line ...), because you define two corners, the bottom-left and top-right corners. The diagonal is not drawn, however.
Try drawing the rectangles below and observe where their corners are:
(rect -100 -100 50 80)
(rect-corners 100 10 170 50)
If you wish, clear the graphics box:
(clear)
Circles
Another frequently used shape is the circle. Its parameters are the x and y coordinates of its center, and a radius. The radius is the distance between the center and the edge.
(circle 70 -60 50)
Ellipses
The last shape we'll look at for now is the ellipse. Drawing one combines part of circle and part of rect. The arguments you pass are the x and y coordinates of the center, the width and the height. The width and height are from the center to the edges. The function call below draws an ellipse that is taller than its width.
(ellipse -50 50 25 40)
Colors
The graphics element works with two colors: the stroke color , used on shapes' outlines and lines, and the fill color, used to paint the inside of shapes and text.
The functions set-stroke! and set-fill! are used to set these two colors.
They accept one argument, which is a string representing a color's name, such as "green" or "LightSkyBlue", or a 6-digit hexadecimal value starting with #, such as "#39a0da". Hexadecimal colors are widely used in HTML and CSS definitions.
Briefly, hexadecimal numbers go from 0 to 9, then a to f. Each pair of digits corresponds to the intensity of red, green, and blue, in this order. For example, #0000ff is pure blue, and #ff00ff is magenta.
(set-stroke! "#9c307a") ; a dark purple
(set-fill! "LightSkyBlue")
The valid color names are the CSS color names (view a list in external documentation).
Click below to draw a line and circle using the current values of stroke and fill colors:
(line -100 140 100 140) (circle 0 0 80) (fill)
Example: filled circles
Let's finish the chapter with a simple example: drawing four circles around the origin, with two black ones.
First, we should clear the graphics box, and redraw the axes (to visually ensure that our circles are lined up with the center):
(clear) (axes)
Let's have circles with a radius of 20 pixels:
(define r 20)
Having the circles around the origin means that their centers will be r pixels away from the origin. Negative values must be written as (- r), because inverting the sign of a number is a function, and function calls must be enclosed in parentheses.
An alternative would be defining a new variable, such as (define neg-r (- r))
With this information, we draw the circles, filling every other circle (remember that drawing the outline and filling the shape are separate functions).
(set-stroke! "black") (set-fill! "black") (circle r r r) ; top-right (fill) (circle (- r) r r) ; top-left (circle (- r) (- r) r) ; bottom-left (fill) (circle r (- r) r) ; bottom-right
Let's check that the neg-r version works:
(clear) (axes) (define neg-r (- r)) (set-stroke! "green") (set-fill! "SteelBlue") (circle r r r) (circle neg-r neg-r r) (fill)
| < 3. Strings and Variables | 5. Lists > |