AddThis Social Bookmark Button

Listen Print Discuss
Mac OS X > Excerpts >

Elementary Computer Graphics: Drawing with Pixels
Pages: 1, 2, 3, 4

Just like the Tic-Tac-Toe grid, the Wish window is described by x and y coordinates. The upper lefthand corner of the Wish Shell window is the origin just as the upper lefthand corner of the Tic-Tac-Toe grid had its origin. The origin is where the x and y coordinates are both 0. Figure 15 looks a lot like Figure 4, only the Wish window is 640 x 480 instead of 3 x 3 like the Tic-Tac-Toe grid.


You move around using the coordinates in the game window we created in much the same way we moved around the Tic-Tac-Toe grid. At the top of the window y=0, and y gets bigger as you move down. To the left of the window, x=0, and x gets bigger as you move right through the window. Now for a pop quiz. What are the x and y values of the middle of the window?

Let's see, the biggest value of x is 639, on the righthand side of the window and half of 639 is roughly 320. The biggest value of y, at the bottom of the window is 479. Half of 479 is roughly 240. The middle x value is 320 and the middle y value is 240. The pixel coordinates of the middle of the window are x=320 and y=240.

Want to have a little fun and prove this is the middle of the window? We can run a simple experiment to tell us the x and y coordinates of the Wish app window. Tk uses x and y values for tracking the computer's mouse. The x mouse value is %x and the y mouse value is %y in Tk. These values are used to tell us where the mouse pointer is inside our Wish Shell window. Type in the following command and see this for yourself:

bind .video_game_window <Motion> { puts "mouse x: %x mouse y: %y" }

The Tk command bind instructs Tk we want our Tcl command puts bound to the motion of the mouse. Every time you move the mouse, Tk will hand off the mouse coordinates to our Tcl command puts. You will need to move your mouse inside the Wish Shell game window to see the mouse coordinates. The mouse is only bound there. Move outside the window and Tk will not display any coordinates. Move back in and the coordinates will scroll down the console window again.

Let's give it a try and see if you can prove the middle of the screen is x=320 and y=240. My test values are shown in Figure 16.


The Script:

set video_game_width 640
set video_game_height 480

canvas .video_game_window \
-width $video_game_width -height $video_game_height
pack .video_game_window
bind .video_game_window <Motion> { puts "mouse x: %x mouse y: %y" }

Lesson 6: Drawing a Pixel

The moment you have been waiting for, all young game-playing careers. Here is the dark secret to drawing on the computer. Are you worthy of having such knowledge and power? Behold, plotting the pixel.

The Tk graphics environment doesn't actually provide a utility to plot a pixel, so we are going to have to make do with drawing extremely small rectangles. The rectangle will be one pixel wide by one pixel tall. Basically, we're going to draw a square and pass it off as a pixel for this example. Type in this small piece of code into the console,

.video_game_window create rectangle 320 240 320 240

This should draw a teeny-tiny black pixel in the center of your game window. Now you're cooking, and just a few short minutes ago you typed in your first Tcl program.

The Script:

set video_game_width 640
set video_game_height 480

canvas .video_game_window -width $video_game_width -height $video_game_height
pack .video_game_window
.video_game_window create rectangle 320 240 320 240

If you're not as enthusiastic with those results, how about we draw a larger rectangle we can see. And let's give it some color! 

.video_game_window create rectangle 320 240 350 270 -fill red

The -fill option for the Tk create rectangle command allows you to change the colors. Try playing around with black, blue, red, green, and yellow.

The Script:

set video_game_width 640
set video_game_height 480

canvas .video_game_window -width $video_game_width -height $video_game_height
pack .video_game_window
.video_game_window create rectangle 320 240 350 270 -fill red

Lesson 7: The Grand Finale

In just a few short lessons of experimenting with scripts you can't become a game-coding master. That takes time and experience. But what can we do with what we already know? Well, Tcl/Tk is powerful enough to allow us to code a simple paint program. Most kids have played with Broderbund's Kid Pix in school. This drawing program can be crudely replicated with a few lines of scripting code in Tcl/Tk. We are going to create a very basic paint program using our video game window. We first create our window and display it in the usual manner. 

set video_game_width 640
set video_game_height 480

canvas .video_game_window -width $video_game_width -height $video_game_height
pack .video_game_window

To draw with the mouse, you hold the left button down and draw. The left mouse button is B1 in Tcl/Tk language. We will be dragging the mouse to draw pixels. Moving the mouse in Tcl/Tk we use the Motion option, as we did while experimenting with the window mouse coordinates. Just as we did before, our script must bind to the B1-Motion action on the computer. When a computer is looking for an action to take place in a window it is said to be looking for an event. The event our computer is looking for in order to draw is the B1-Motion, where you are pressing the left mouse button down and moving the mouse. This is also called dragging the mouse.

We will need to write our own special Tcl command, which will be called when this event is seen by the computer. When we write a special command of our own in Tcl it is called a procedure. Consider it a mini-program script. To let Tcl know we're implementing our own script we must use the Tcl command proc. The following procedure will tell the Tcl interpreter how to handle the mouse drawing on our videogame window. Our mini-script procedure name is mouse_draw. Here is what it looks like:

proc mouse_draw { x y } {

    set xul [expr $x - 3]
    set yul [expr $y - 3]
    set xlr [expr $x + 3]
    set ylr [expr $y + 3]
    .video_game_window create rectangle $xul $yul $xlr $ylr -fill red 
}

What are the variable names xul, yul, xlr, and ylr? Remember, we are drawing a rectangle, well, actually a square, 6 pixels by 6 pixels. The xul means x, upper left, and yul means y, upper left. The xlr stands for x lower right, and so forth. Doesn't this look a lot like how we described the Tic-Tac-Toe grid?

What is the { x y } in the Tcl command proc mouse_draw { x y }? We need to collect the mouse coordinates. Remember how we did this in the simple mouse experiment from before? The Tk graphics tool allows us to examine the mouse coordinates using the special notation, %x and %y. We will call our mouse_draw procedure in this manner:

mouse_draw %x %y

This command as it is won't work for us. Remember, the computer is listening for an event. In this case we want to draw only when the left mouse button (Bl) is held down and the mouse is moving (Motion). We need to bind the event (B1-Motion). 

bind .video_game_window <B1-Motion> { mouse_draw %x %y }

That's it. You have a simple paint program. My work of art is displayed in Figure 17.


There is a paint online version of Kid Pix, try it out and see how your paint program compares.

The Script:

set video_game_width 640
set video_game_height 480

canvas .video_game_window -width $video_game_width -height $video_game_height
pack .video_game_window

proc mouse_draw { x y } {

    set xul [expr $x - 3]
    set yul [expr $y - 3]
    set xlr [expr $x + 3]
    set ylr [expr $y + 3]
    .video_game_window create rectangle $xul $yul $xlr $ylr -fill red 
}

bind .video_game_window <B1-Motion> { mouse_draw %x %y }

Congratulations!

You mastered basic graphics scripting. We didn't write a first person shooter game but you did master writing a simple draw program. You will need to play around with scripts presented here and go back and play with them. You have the web address for the Kid Pix online page -- why don't you see if you can copy some of the operations of Kid Pix.

A lot of cool computer graphics projects can be tackled using Tcl. Try to add keyboard bindings to your programs. Keep at it. I find computer graphics programming to be as fun as building with Legos. Don't take my word for it. Find out for yourself. Remember to use your new-found knowledge for the good of mankind.

Michael J. Norton is a software engineer at Cisco Systems.

Return to the Mac DevCenter