Simple Graphics

Very soon you will learn about graphics and fractals. You will use this knowledge to implement a graphical representation of your game's "board", or "position". We have provided you with gdraw.scm, a library of graphics routines you'll probably find useful. You are encouraged to be creative when drawing your board. For those of you who are truly motivated, we have provided you with routines to do graphical input using the mouse, not just output.

Colors

There are various colors that you can use to fill and outline the images you create. These color names can be given to the 'fill and 'outline options as color values.

You can also use colormap.stk to select the red, green and blue values. Simply load colormap.stk at the scheme prompt. Messing with the sliders will change a hexadecimal number at the bottom of the window. Use this numebr in place of the color name as follows:

STk> (draw-oval 0 0 100 100 'fill "#a213f4")

Graphics Functions

•(init-graphics)

This function sets up the graphics to be ready to use. When you are not using gamesman, it is necessary to invoke this before using any library functions. If you are using gamesman, the call is made for you and you do not have to worry about it.

(init-graphics) ;; ta-dah!!

•(set-canvas-size x y)

This function sets the canvas dimensions with x as the width and y as the height. The canvas is the surface that you can draw on.

(set-canvas-size 300 300)
;; This sets the size of the canvas to be 300 pixels by 300 pixels.

•(clear-graphics!)

This function erases everything on the canvas.

•(draw-line x1 y1 x2 y2 ... xN yN 'option1 'value1 ... 'optionN 'valueN)

This function draws a line from (x1,y1) to (x2,y2). The function can be given any number of arguments like 'fill followed by a color like 'blue. If you are curious about additional options, you can add any other tk options here. Some options that you might find usefull are: fill, width. You can give it as many point pairs as you like and it will draw a line from point to point.

(draw-line 10 10 100 100 'fill 'blue)
(draw-line 10 10 100 100 30 110 'width 20)
(draw-line 10 10 100 100 'fill 'blue 'width 50)

•(draw-curved-line x1 y1 x2 y2 ... xN yN 'option1 'value1 ... 'optionN 'valueN)

This function draws a line that is curved and has the same options as draw-line. The curved feature only becomes apparent when drawing lines that have more than 2 point pairs. So, with the call (draw-curved-line 50 50 125 200 200 50), instead of drawing a "V" like draw-line, it draws more of a smooth, parabolic "U".

(draw-curved-line 50 50 125 200 200 50 'width 15)

•(draw-text string x y 'option1 'value1 ... 'optionN 'valueN)

This draws text on the screen centered at the point (x, y). You can give it options: fill.

•(get-text IDorTag)

This gets the displayed text of the item with id or tag IDorTag. You will most likely only use this with text items.

(define a (draw-text "ha ha ha" 20 20))
(define b (draw-text "ho ho ho" 30 50))
(define label (string-append (get-text a) (get-text b)))
;; String append concatenates two strings together
(draw-text label 120 200)

•(set-text! IDorTag new-text)

This takes an existing item with id or tag IDorTag which has text (again, probably a text item from (draw-text ...)) and sets its text to new-text.

(define a (draw-text "ha ha ha" 20 20))
(set-text! a "ho ho ho")
;; now in the place of ha ha ha, it says ho ho ho

•(get-font-size IDorTag)

This gets the size of the font of the item with id or tag IDorTag (this is most likely going to be a text item made by draw-text)

•(set-font-size! IDorTag size)

This sets the size of the font of the item with id or tag IDorTag (this is most likely going to be a text item made by draw-text)

•(draw-oval x1 y1 x2 y2 'option1 'value1 ... 'optionN 'valueN)

This draws an oval with the upper left hand corner at (x1,y1) and its bottom right hand corner at (x2,y2). You can give it options: outline, fill. Each of these have color values. Note: if either of these are not stated, it will default to the default fill color.

(draw-oval 100 200 300 400 'outline blue 'fill 'red)

•(draw-rectangle x1 y1 x2 y2 'option1 'value1 ... 'optionN 'valueN)

This is formated in the same way as draw-oval with the same options except it draws a rectangle.

•(draw-polygon x1 y1 x2 y2 ... xN yN 'option1 'value1 ... 'optionN 'valueN)

This draws a polygon with any amount of sizes/corners. You can give it options: fill, outline. Note, it draws the lines in the order that you list them.

(draw-polygon 30 10 20 10 30 30 2 2 0 0 'outline 'blue 'fill 'red)
(draw-polygon 34 58 98 29 100 187 78 98 39 23 'outline 'blue 'fill 'red)

•(draw-arc x1 y1 x2 y2 'option1 'value1 ... 'optionN 'valueN)

This draws an arc that is the upper right corner wedge of a circle that has it upper left corner at (x1,y1) and it bottom right corner at (x2,y2). You can give it options: fill, outline.

(draw-arc 50 100 200 200 'fill 'blue 'width 4)

•(draw-image x y name 'option1 'value1 ... 'optionN 'valueN)

This loads an image called name (which is a string), centered at (x,y). The name must be the path relative to the gamesman directory. The image can be of type gif and ppm.

(draw-image 50 50 "game.gif") ;; if the path is gamesman/images/game.gif

•(set-image! IDorTag name)

This function sets up the graphics to be ready to use. When you are not using gamesman, it is necessary to invoke this before using any library functions. If you are using gamesman, the call is made for you and you do not have to worry about it.

•(init-canvas)

This sets the image with id or tag IDorTag to have a new image in the new path name.

(define pic (draw-image 50 50 "badPic.gif"))
(set-image! pic "goodPic.gif")

•(get-fill-color IDorTag)

This returns the fill color for an item with id or tag IDorTag that has a fill color (e.g. oval, rectangle...). The fill color is a word of the color 'black, 'blue...

(define rec (draw-rectangle 50 50 100 100 'fill 'blue))
(display (get-fill-color rec)) ;; ==> blue
(draw-oval 50 100 100 150 'fill (get-fill-color rec))

•(get-outline-color IDorTag)

This gets the outline color for an item with id or tag IDorTag in the same way that get-fill-color does.

•(set-fill-color! IDorTag color)

This sets the color of an item with id or tag IDorTag to the color (a word) color;

(define rec (draw-rectangle 50 50 100 100 'fill 'blue))
(define oval (draw-oval 50 100 100 150 'fill (get-fill-color rec)))
(set-fill-color! oval (get-fill-color rec))

•(set-outline-color! IDorTag color)

This sets the outline color for an item with id or tag IDorTag in the same way that set-fill-color! does.

•(set-bg-color! IDorTag color)

This sets the background color of items. The only thing that you will probably use this for is to change the background of the whole canvas. The id of the whole canvas is the number 0.

(set-bg-color! 0 'gray)

•(get-width IDorTag)

This takes an item with id or tag IDorTag and return its width. If you give it 0, the canvas, it returns the dimentions in a list.

(define o (draw-oval 50 100 100 150 'outline 'red 'width 10))
(display (get-width 0)) ;; ==> 10

•(set-width! IDorTag new-width)

This takes an item with id or tag IDorTag and sets its width to new-width.

(define o (draw-oval 50 100 100 150 'outline 'red 'width 10))
(set-width! o 20)

•(get-coords IDorTag)

This gets a list of the coordinates for the item with the id or tag IDorTag. Note that the size of this list can be different for different types of items.

(define o (draw-oval 50 100 100 150 'outline 'red 'width 10))
(diplay (get-coords o)) ;; ==> (50.0 100.0 100.0 150.0)
(define a (draw-text "adskksdkj" 100 300 ))
(diplay (get-coords a)) ;; ==> (100.0 300.0)

•(set-coords! IDorTag coords) OR (set-coords! IDorTag x1 y1 ... xN yN)

This function sets the coordinates for the item with the id or tag IDorTag to be either coords if coords is a list of the coordinates, or to be the list made from all of the arguments which are the coordinates.

(define (move IDorTag times)
(if (= times 0) 'ok
(begin
(set-coords! IDorTag (map (lambda (x) (+ x 3)) (get-coords IDorTag)))
(move IDorTag (- times 1)))))
(define a (draw-text "weeeeeee!!!" 50 50 ))
(move a 10) ;; ==> This will happen too fast for you to see, but you get the point.

•(get-binding IDorTag)

This returns the procedure that is bound to clicking the item IDorTag. In other words, if there is a procedure that is already called every time an item is clicked on, if you give the item's id or tag to this function, it will return that procedure.

•(set-binding! IDorTag thunk)

This gives you the ability to allow an item with an id or tag, IDorTag to have the procedure thunk called every time it is clicked. Note that thunk is a procedure with no arguments like (lambda () (display 'clicked!!!!))

(set-binding! (draw-oval 50 100 100 150) (lambda () (display 'clicked!!!!)))
;; ==> every time you click on the oval, clicked!!!! is displayed to the console

•(raise! IDorTag1 IDorTag2)

This raises an item with id or tag IDorTag1 to be above IDorTag2.

(define a (draw-oval 50 100 100 150 'fill 'blue))
(define b (draw-oval 50 100 100 150 'fill 'black))
(set-binding! b (lambda () (raise! a b)))
;; ==> When you click the black circle, the blue one comes to the surface.
;; How do we get the blue one back?

•(lower! IDorTag1 IdorTag2)

This lowers one item with id or tag IDorTag1 below IDorTag2.

;; from above...
(set-binding! a (lambda () (lower! a b)))
;; ==> This will alternate between each item being on the surface.
;; It seems as it the color of one circle is changing

•(get-motion-binding IDorTag)

This gets the motion binding attached to the item with id or tag IDorTag. A motion binding is a no argument function that is called each time the mouse is moved.

•(set-motion-binding! IDorTag thunk)

This associates the no argument function thunk with the item with id or tag IDorTag such that every time the mouse moves while the cursor is hovering over the item, thunk is called.

(define a (draw-oval 50 100 100 150 'fill 'blue))
(set-motion-binding! a (lambda () (display 'a)))
;; ==> your console will soon be full of a's when your mouse is in motion over the oval.

•(get-type IDorTag)

This returns the type of item that IDorTag is.

(display (get-type (draw-oval 50 100 100 150 ))) ;; ==> oval
(display (get-type (draw-rectangle 50 50 100 100))) ;; ==> rectangle

•(set-default-outline-color! color)

This sets the default color that will be used to outline when no outline attribute is given.

•(set-default-fill-color! color)

This sets the default color that will be used to fill when no outline attribute is given.

•(get-mouse-coords)

This returns a list of (x y) where x and y are the (x, y) coordinates of your mouse at the time this procedure was called.

(define txt (draw-text "HEY" 50 50))
(set-binding! txt
  (lambda ()
    (set-motion-binding! 0
      (lambda ()
              (set-binding! 0 (lambda () (set-binding! 0 "")
                                      (set-motion-binding! 0 "")))
              (set-coords! txt (get-mouse-coords))))))
                                       
;; Now you can click on a piece, have it follow your mouse, 
;; and then click again to let go of it.
;; Look carefully at what is happening.

•(addtag IDorTag tag-to-add)

This allows you to tag an existing ID or tag with another tag. Tagging is used to refer to items since it is often hard to have to store all of the IDs. You can also group a set of items in any way that you like, and do commands that affect all of the tagged items. Note that you can tag something multiple times. Items can be a part of multiple tag groups and respond to many tag group commands.

(addtag (draw-oval 50 50 100 100 'fill 'red) 'ovals)
(addtag (draw-oval 25 25 50 50 'fill 'green) 'ovals)
(addtag (draw-oval 0 0 10 10 'fill 'blue) 'ovals)
(addtag (draw-oval 20 100 80 250 'fill 'yellow) 'ovals)
;; At this point all of the ovals will be different colors
(set-fill-color! 'ovals 'orange)
;; They are all changed to orange

•(get-tags ID)

This returns the tags that a given ID has in a list.

•(get-ids-with-tag tag)

This gets all the ID's with a given tag and returns them in a list.

•(get-IDs)

This returns all the IDs on the canvas.

•(fly-to x y IDorTag speed position-modif)

This makes the item(s) with id or tag IDorTag "fly" from where they currently are to the position (x,y). Speed is the speed at which they go. position-modif is a procedure that takes in a list of coordinates (cooresponding to the item) and increments the position by a dx and dy. For example an item with a four element coordinate list would have this as a position-modif function:

(define (position-modif coords xInc yInc)
(let ((x1 (car coords))
(y1 (cadr coords))
(x2 (caddr coords))
(y2 (cadddr coords)))
(list (+ x1 xInc) (+ y1 yInc) (+ x2 xInc) (+ y2 yInc))))

Note: This actually makes the item fly really close to point (x, y), so if you want it to be exact, follow the call

(fly-to x y tag speed pos-mod)

with

(set-coords! tag x y)

This will make a smooth transition to exactly (x, y).

Gamesman ©2003 Dan Garcia. All rights reserved. Site design by Steven Chan. Site maintained by Hesam Samimi.