Simple Pictures

1
Simple Pictures
2
Outline

• Prerequisites
• Simple Scheme functions
• Objectives
• Nature of structures
• Definition of the screen
• Pixels
• Simple drawings
• Reference
• HTDP Sections 6.1 and 6.2

3
Background

• So far, we have used functions which manipulate
  single data items numbers, symbols or strings
• Frequently, we need to group items together
• Note drawing violates one of pure Schemes
  fundamental principles
• Requires persistence (i.e. some permanent change
  to survive beyond the execution of a function)
• e.g. load the teachpack draw.ss
• (start ltxgt ltygt) builds a canvas
• The canvas exists after (start ) has completed

4
Basics of Drawing

• We create a canvas using the Scheme function
  (start ltxgt ltygt) built into draw.ss
• The canvas consists of ltxgtltygt points in a new
  window.
• Each point is called a pixel picture element
• A pixel has two attributes
• distance horizontally from the top left of the
  canvas
• distance vertically from the top left of the
  canvas
• Scheme allows grouping two or more items together
  into a structure.

5
The posn Structure

• Contains the x and y coordinates of a pixel
• To build a new posn structure, use make-posn
• make-posn number, number -gt posn
• To extract the x and y values, use posn-x and
  posn-y
• posn-x posn -gt number
• retrieve the x coordinate from a posn
• posn-y posn -gt number
• retrieve the y coordinate from a posn

6
Recall
Required Distance between points P1 and P2
P1 (10,6)
?Y 6 - 2
P2 (4,2)
Y
?X 10 - 4
__________ Distance ?(? X)2
(? Y)2
X
7
Using posn Structures

• between posn, posn -gt number
• find the distance between two points
• use sqrt( dxdx dydy)
• examples ( 0 0 ) to ( 0 100 ) -gt 100
• ( 0 0 ) to ( 100 100 ) -gt 141
• (define (distance dx dy)
• (sqrt ( ( dx dx) ( dy dy))))
• (define (between a b)
• (distance (- (posn-x b)
• (posn-x a))
• (- (posn-y b)
• (posn-y a))))

8
Built-in Drawing Tools

• (start ltxgt ltygt) open a canvas
• (draw-solid-line ltagt ltbgt color)
• ltagt and ltbgt are posns
• Color is a symbol
• 'white 'yellow 'red 'blue 'green 'black
• (draw-solid-rect ltagt ltwgt lthgt color)
• ltwgt and lthgt are numbers giving the height and
  width
• (draw-circle ltagt ltrgt color)
• ltrgt is a number giving the radius
• (draw-solid-disk ltagt ltrgt color)
• (stop) close the current canvas

9
Draw a Simple Tree
100
150
100
50
90
20
100

• (define (doit x)
• (and
• (draw-solid-disk
• (make-posn 100 100) 50 'green)
• (draw-solid-rect
• (make-posn 90 150) 20 100 'black)))

10
Add Another Tree
100
120
How did we calculate this?
100
Position of the new tree!
200

• (define (doit x)
• (and
• (draw-solid-disk
• (make-posn 100 100) 50 'green)
• (draw-solid-rect
• (make-posn 90 150) 20 100 'black)
• (draw-solid-disk
• (make-posn 200 120) 50 'green)
• (draw-solid-rect
• (make-posn 190 170) 20 100 'black)))

How about this?
New position (posn -10 50)
Call this an offset
11
Programming Principle

• Whenever you are tempted to copy and paste some
  code
• (draw-solid-rect
• (make-posn 200 120) 50 'green)
• (draw-solid-rect
• (make-posn 190 170) 20 100 'black)
• Stop and think "Is there a better way?"
• Let's abstract out the drawing of the tree from
  its location

12
Draw a Re-Usable Tree
y
(y 50)
tree posn -gt drawing (define (tree p) (and
(draw-solid-disk p 50 'green)
(draw-solid-rect (offset p (make-posn -10
50)) 20 100 'black)))
x
50
(x 10)
20
100

• offset posn posn -gt posn
• take an initial position a and offset b return
  a new posn
• whose x and y components are the sums of the x
  and y components
• of a and b.
• (define (offset a b)
• (make-posn ( (posn-x a)
• (posn-x b))
• ( (posn-y a)
• (posn-y b))))

13
tree car
14
Actual Code

• (define (offset a b)
• (make-posn ( (posn-x a)
• (posn-x b))
• ( (posn-y a)
• (posn-y b))))
• (define (car a)
• (and (and (draw-solid-rect
• (offset a (make-posn 0 100)) 200 50
  'blue)
• (draw-solid-rect
• (offset a (make-posn 50 70)) 100 30
  'blue))
• (and (draw-solid-disk
• (offset a (make-posn 30 150)) 20
  'red)
• (draw-solid-disk
• (offset a (make-posn 170 150)) 20
  'red))))
• (start 400 400)
• (car (wait-for-mouse-click))

15
Questions?
16
Summary

• You should now know
• Nature of structures
• Definition of the screen
• Pixels
• Simple drawings

17
(No Transcript)