1.6 Graphics

In this section we'll look at some of the basics of pixel graphics. There are many more things you can do in Turing, but this will be enough to get you started.

The graphics screen is broken up into dots called pixels. Each one can be specified by a point (x, y) like in mathematics. The Turing graphics screen basically represents the first quadrant in the x,y-plane. This means that the lower left corner has coordinates (0, 0). Although this is different than virtually all other programming languages it makes a lot more intuitive sense.

Colours in Turing are specified by int values. They can range from 0 to the predefined constant maxcolor (or maxcolour). To see the value on your computer, just execute the statement: put maxcolour.

It is difficult to remember which number represents each colour so Turing has a number of predefined constants for colours. The following colour constants are predefined:

whitebluegreencyan
redpurple (magenta)brownblack
grey (gray)brightbluebrightgreenbrightcyan
brightredbrightpurple (brightmagenta)yellowdarkgrey (darkgray)

Here is a program you can run to see all of the available colours on your computer (Don't worry about trying to understand this program yet; it is just to show the colours): 

for i : 0 .. maxcolor
   colorback(i)
   put i," "..
end for
colourback(white)
put ""
put "" 
colour(black)
colourback(white)
put " white = 0 "..
colour(white)
colourback(blue)
put " blue = 1 "..
colourback(green)
put " green = 2 "..
colourback(cyan)
put " cyan = 3 "..
colourback(red)
put " red = 4 "..
colourback(purple)
put " purple (magenta) = 5 "..
colourback(white)
put""
colourback(brown)
put " brown = 6 "..
colourback(black)
put " black = 7 "..
colourback(grey)
put " grey (gray) = 8 "..
colourback(brightblue)
put " brightblue = 9 "..
colourback(brightgreen)
put " brightgreen = 10 "..
colourback(white)
put ""
colourback(brightcyan)
put " brightcyan = 11 "..
colourback(brightred)
put " brightred = 12 "..
colourback(brightpurple)
put " brightpurple (brightmagenta) = 13 "..
colourback(white)
put ""
colourback(yellow)
colour(black)
put " yellow = 14 "..
colour(white)
colourback(darkgrey)
put " darkgrey (darkgray) = 15 "..

Here are some of the predefined graphics procedures.

maxx

This procedure gives the maximum possible value for x.

maxy

This procedure gives the maximum possible value for y.

drawdot

This procedure is used to color one of the pixels (dots) on the screen. There are 3 parameters for this procedure. You need to specify the x-coordinate, the y-coordinate and the colour for the dot.

drawline

This procedure is used to draw a line from one specified point to another in a given colour. It has 5 parameters. The first two are the x and y coordinates of the first point. The next two are for the x and y coordinates of the second point. The last parameter is for the colour of the line.

drawbox

This procedure is used to draw a rectangle (box) You specify parameters is the same way as for drawline. The first point is the lower left corner of the box. The second point is the upper right corner of the box.

Let's look at an example using these procedures:

% draw dots at points (100, 50) and (250, 200) in brown
% the dots are "very" small
drawdot(100, 50, brown)
drawdot(250, 200, brown)
% draw a line in blue from (300, 250) to (320, 120)
drawline(300, 250, 320, 120, blue)
% draw a rectangle with lower left at (10, 20) in green
% with a width of 100 and height of 200
drawbox(10, 20, 110, 220, green)
% draw a rectangle in black with a diagonal in red
drawbox(400, 50, 600, 175, black)
drawline(400, 50, 600, 175, red)

Here is what the output window will look like:


drawoval

This procedure is used to draw circles and ellipses. It has 5 parameters. The first two parameters represent the x and y coordinates of the centre of the oval. The next two parameters are the x radius and the y radius. If those two values are the same then you will draw a circle. The last parameter is the colour of the oval.

drawfill

So far all our drawings have been simple outlines. It is possible to fill shapes as well. If you have an area enclosed by a border of a single colour then you can fill the inside of that area with a colour. The drawfill procedure takes 4 parameters. The first two are the x and y coordinates of a point inside the area to be filled. The third parameter is the colour to fill with. The last parameter is the color of the border.

drawfillbox

This procedure is exactly the same as drawbox except that the box will be filled with the colour.

drawfilloval

This procedure is exactly the same as drawoval except that the oval will be filled with the colour.

Here is an example with these new procedures: 

% draw a blue circle with centre (100, 50) and a radius of 49
drawoval(100, 50, 49, 49, blue)
% draw a cyan ellipse
drawoval(100, 150, 100, 30, cyan)
% draw a yellow triangle
drawline(100, 200, 150, 200, yellow)
drawline(100, 200, 100, 275, yellow)
drawline(100, 275, 150, 200, yellow)
% fill the inside of the triangle with red
drawfill(120, 210, red, yellow)
% draw a solid green rectangle
drawfillbox(300, 50, 500, 100, green)
% draw a solid magenta circle, centre(300, 200) and radius 75
drawfilloval(300, 200, 75, 75, magenta)

The output window will be:


Exercise 1.6

  1. Write a program that will put four filled squares with sides of length 100 at the four corners of the output window.

  2. Write a program that will produce the five Olympic rings.

  3. Write a program that will draw a house with the sun up in the sky. Draw rays coming from the sun.