Remember how we write simple and combined expressions of calling functions

`(+ 2 3) (* 2 3 4) (+ 2 (* 4 5) (* 5 (/ 6 7)))`

and how we define new variables and new functions, and then test or call these functions

`(define Pi 3.1415) ;Contract: radius:Number -> Number ;returns area of a circle with given radius (define (circleArea radius) (* Pi radius radius)) (check-expect (circleArea 10) 314.15) (circleArea 15)`

- Write a function to compute the volume of a sphere \(\frac{4}{3}\pi r^3\)

DrRacket provides a library to work with images: activate teachpack

`image.ss`

It includes several commands to produce images:

`(circle 100 "solid" "red") (square 100 "solid" "yellow") (rectangle 50 100 "outline" "green") (triangle 100 "outline" "black") (ellipse 50 100 "solid" "purple") (rhombus 80 ;side length 150 ;one of the angles "solid" "magenta") (star 40 "solid" "firebrick") (empty-scene 100 200)`

Dimensions in image related functions are expressed in terms of

`pixels`

. If the function requires two dimensions the first is horizontal (x-dimension) and the second is vertical (y-dimension)`(rectangle 50 100 "outline" "green")`

An image is within a rectangular

*containing box*, whose dimensions can be measured as follows:`(image-width (circle 100 "solid" "red")) (image-height (circle 100 "solid" "red"))`

Commands for drawing shapes take a color parameter.

A color is a combination of basic colors red-green-blue.

There are predefined colors like "magenta", "brown", "orange"

but one can create a new color by combining different amounts of basic colors, where amount is measured on a scale between 0-255, using the command

`(color ... ... ...)`

:`(circle 100 "solid" (color 170 50 20))`

Commands for drawing basic shapes take a "mode" parameter for drawing style. It can be one of "solid", "outline".

Instead of "solid" one can also use an integer between 0-255 indicating transparency. Compare the following:

`(circle 100 70 (color 0 0 200)) (circle 100 255 (color 0 0 200))`

Some basic commands can be used to place images side by side, above or over one another:

`(beside (circle 100 70 (color 0 0 200)) (square 250 "solid" "red")) (above (circle 100 70 (color 0 0 200)) (square 250 "solid" "red")) (overlay (circle 100 70 (color 0 0 200)) (square 250 "solid" "red")) (overlay/align "right" "bottom" (circle 100 "solid" "red") (square 250 "solid" "green"))`

Write a function which takes a size parameter, and two color parameters:

```
(define (myShape size color1 color2)
...
(myShape 100 "red" "green")
(myShape 200 "red" "green")
```

and draws shapes as the follows, whose outer size is equal to the given size:

```
(define (myShape size color1 color2)
(overlay
(above
(beside (circle (/ size 4) "solid" color1) (circle (/ size 4) "solid" color1))
(beside (circle (/ size 4) "solid" color1) (circle (/ size 4) "solid" color1)))
(square size "solid" color2)))
(myShape 100 "red" "green")
```

We wish to build a checker board of given size and colors.

In doing so we utilize two helper functions as below:

```
;Function fullchecker: size:Number color1: String color2:String -> Image
;Returns an 8 by 8 checker board
(define (fullchecker size color1 color2)
(quadruple (quadruple (checker2 size color1 color2))))
;Function checker2: size:Number color1: String color2:String -> Image
; draws a checker board 2 by 2
(define (checker2 size color1 color2)
(above
(beside
(square size "solid" color1)
(square size "solid" color2))
(beside
(square size "solid" color2)
(square size "solid" color1))))
;Function quadruple: image:Image -> Image
;returns an image which replicates the input image 2 by 2
(define (quadruple image)
(above
(beside image image)
(beside image image)))
(fullchecker 40 "red" "green")
```

A 2-dimensional coordinate on an image's containing box is expressed in terms of x and y coordinates. Both are measured from top-left corner corresponding to (0, 0) position. x-coordinate increases rightwards, and y-coordinate increases downwards.

One can control how an image is placed over another using coordinates:

`(place-image (circle 100 70 (color 0 0 200)) 50 150 ; x and y coordinates to put the center of the first image on the second (square 250 "solid" "red"))`

Some commands require two coordinate points:

`(add-line (square 100 "solid" "red") ;on what image we are adding the line 10 50 ;first coordinate, beginning of line 90 70 ;second coordinate, end of line "green") ;the line color`

Rotation angles are in degrees, counter-clockwise:

`(rotate 10 (square 100 "outline" "black")) (rotate -30 (ellipse 100 20 "outline" "black"))`

Images can be scaled to be smaller or larger, or with different scaling factors for two dimensions:

`(scale 2 (ellipse 20 30 "solid" "blue")) (scale/xy 2 4 (ellipse 20 30 "solid" "blue")) (overlay (ellipse 20 40 "solid" "red") (rotate 90 (scale/xy 2 4 (ellipse 20 30 "solid" "blue"))))`

Images can be flipped horizontally or vertically:

`(beside (rotate 30 (square 50 "solid" "red")) (flip-horizontal (rotate 30 (square 50 "solid" "blue")))) (above (star 40 "solid" "firebrick") (scale/xy 1 1/2 (flip-vertical (star 40 "solid" "gray"))))`

Write a function to draw a butterfly of given size and color:

```
(define (butterfly size color angle)
...
(butterfly 200 "red" 60)
(butterfly 200 "red" 80)
```

which produces an image like follows, whose outer size is equal to the given size:,

```
(define (butterfly size color angle)
(beside
(above
(rotate 45 (rhombus (/ size 2) angle "solid" color))
(rotate -45 (rhombus (/ size 2) angle "solid" color)))
(above
(rotate 315 (rhombus (/ size 2) angle "solid" color))
(rotate -315 (rhombus (/ size 2) angle "solid" color)))))
(butterfly 200 "red" 60)
(butterfly 200 "red" 80)
```

An animation consists of a series of pictures called frames, where each frame \(n\), is slightly different from the previous one, \(n-1\), thus creating the effect of a smooth motion.

DrRacket provides a system for creating animations, when you enable teachpack

`universe.ss`

We need a function to create an animation frame. In its simplest form this function can take the frame no:

`(define (animation1 frameNo) (place-image (circle 20 "solid" "green") 50 frameNo ;note how the y-coordinate is related to frameNo (empty-scene 400 400)))`

The above function is intended to progress a ball downwards over an empty-scene as frame no increases, thus creating an animation of a falling ball.

The Racket function

`(animate ...)`

is used, its only parameter is the frame creating function of our choosing:`(animate animation1)`

The animation is shown on a separate window, and can be stopped by either closing that window or pressing 'stop'.

- Animate two moving balls, one going down and one going horizontally.
- define two constants which determine speeds of balls, i.e. they can be different from 1 pixel/frame.

```
(define (animation2 frameNo)
(place-image
(circle 20 "solid" "red")
frameNo 50
(place-image
(circle 20 "solid" "green")
50 frameNo ;note how the y-coordinate is related to frameNo
(empty-scene 400 400))))
(animate animation2)
(define speedX 1.2)
(define speedY 0.5)
(define (animation2 frameNo)
(place-image
(circle 20 "solid" "red")
(* speedX frameNo) 50
(place-image
(circle 20 "solid" "green")
50 (* speedY frameNo) ;note how the y-coordinate is related to frameNo
(empty-scene 400 400))))
(animate animation2)
```