Workingwithimagesandscenes

CS5010ProgramDesignParadigmsLesson2.5

1©MitchellWand,2012-2014ThisworkislicensedunderaCreative Commons Attribution-NonCommercial 4.0 International License.

Introduction

• Rackethasarichlibraryforworkingwithimagesandscenes.

• Wewillusethislibraryextensivelyinthiscourse.

• Inthislesson,wewillexploreafewthingsfromthelibrary.

• Note:thislessonismostlyreviewfromLesson0.4

2

LearningObjectives

• Attheendofthislesson,thestudentshouldbeableto:– Createsimpleimagesandscenes– Combinesimpleimagesintomorecompleximagesandscenes

– Determinethepropertiesofanimage– Testimagesandtheirproperties

3

ImagesareScalarData

• InRacket,imagesarescalardata• Rackethas:– Functionsforcreatingimages– Functionsforcombiningimages– Functionsforfindingpropertiesofimages

• Ingeneral,webuildcompleximagesbystartingwithsimpleimagesandthencombiningthemusingfunctions.

4

Loadingtheimagelibrary

Toloadtheimagelibrary,includetheline(require 2htdp/image)

inyourprogram.

5

FunctionsforCreatingImages(1)

bitmap : String -> ImageGIVEN:thenameofafilecontaininganimagein.png or.jpgformatRETURNS:thesameimageasaRacketvalue.

6

FunctionsforCreatingImages(2)

rectangle : Width Height Mode Color -> Image

GIVEN:awidthandheight(inpixels),amode(eitherthestring“solid”orthestring“outline”),andacolorRETURNS:animageofthatrectangle.[SeetheHelpDeskforinformationontherepresentationofcolorsinRacket].

7

FunctionsforCreatingImages(3)

circle : Radius Mode Color -> ImageLikerectangle,buttakesaradiusinsteadofawidthandheight.

Therearelotsofotherfunctionsforcreatingshapes,likeellipse,triangle,star,etc.

8

FunctionsforCreatingImages(4)

text : String Fontsize Color -> Image

RETURNS:animageofthegiventextatthegivenfontsizeandcolor.

9

CombiningImages

• Theimagelibrarycontainsmanyfunctionsforcombiningimagesintolargerimages.

• Thesefunctionsgenerallyaligntheimagesontheircenters.Thisisusuallywhatyouwant.Ifyoureallywanttoalignimagesontheiredges,therearefunctionsinthelibrarytodothat,too.Seethehelpdesk,asusual.

• Let’slookatthetwomostcommonly-usedimagecombining-functions:beside andabove.Here’sanexample:

10

besideandabove

11

Slightlymorecomplicatedimages

12

Slightlymorecomplicatedimages

13

Therectanglehaswidth0,soit'sinvisibleJ

Scenes

• Ascene isanimagethathasacoordinatesystem.

• Inascene,theorigin(0,0)isinthetopleftcorner.Thex-coordinateincreasesaswemovetotheright.They-coordinateincreasesaswemovedown.Thesearesometimescalled“computer-graphicscoordinates”

• Weuseascenewhenweneedtocombineimagesbyplacingthematspecificlocations.

14

SceneCoordinates

15

(0,0) x

y

CreatingScenes

• (empty-scene width height)– returnsanemptyscenewiththegivendimensions.

• (place-image img x y s)– returnsascenejustlikes,exceptthatimageimgisplacedwithitscenteratposition(x,y) ins

– resultingimageiscroppedtothedimensionsofs.

16

scene+line

• (scene+line s x1 y1 x2 y2 color)– returnsascenejustliketheoriginals,butwithalinedrawnfrom(x1,y1) to(x2,y2) inthegivencolor.

– theresultingsceneiscroppedtothedimensionsofs.

17

CreatingSceneswithFunctionsComposition

• Createsceneswithimagesinthembycombiningthemwithfunctions.

• Startwithanempty-scene,thenpaintimagesandlinesonthescenebyusingplace-imageandscene+line.

• Thisisallfunctional:paintinganimageonascenedoesn’tchangethescene– itproducesanewscene.

18

VideoDemonstration

19YouTubelink

• https://www.youtube.com/watch?v=O7eDIBF3jKg

MeasuringImages

• Racketalsoprovidesfunctionsfordeterminingimageproperties.Herethemostimportantones:– image-width : Image -> NonNegInt– image-height : Image -> NonNegInt– image? : Any -> Boolean

20

Inpixels

BoundingBox

• Theboundingbox ofanimageisthesmallestrectanglethatcompletelyenclosestheimage.

• Itswidthwillbetheimage-widthoftheimage,anditsheightwillbetheimage-heightoftheimage.

• Itiseasytodeterminewhetheranarbitrarypointisinsidetheboundingbox– let’slookatanexample.

21

BoundingBoxExample

22

w = (image-width CAT-IMAGE)

h =(image-height CAT-IMAGE)

(x0,y0)

(x,y)isinside therectangleiff(x0-w/2)≤x≤(x0+w/2)

and(y0-h/2)≤y≤(y0+h/2)

y=y0-h/2

y=y0+h/2

x=x0-w/2 x=x0+w/2

ImagesandtheDesignRecipe:Examples

• Inyourexamples,describetheimageinwords.

• EXAMPLE:Considerafunctionthattakesanimageanddoublesit.

• Inyourexamplesyoucouldwrite:(define red-circle1

(circle 20 "solid" "red"))

;; (double-image red-circle1);; = two red circles, side-by-side

23

ImagesandtheDesignRecipe:Tests(1)

• First,constructthecorrectimage.DoNOTusethefunctionyouaretestingtoconstructtheimage.

• EXAMPLE:(define two-red-circles

(beside red-circle1 red-circle1))

• Checkitvisuallytoseethatit'scorrect– Alas,thisstepisnotautomatable.

24

ImagesandtheDesignRecipe:Tests(2)

• Thenyoucanusecheck-equal? ontheresultingimages:(check-equal?

(double-image red-circle1)two-red-circles)

• Thislooksalittlesillynow,butitwillbehelpfulwhenyoubuildmorecomplicatedimages.

25

ImagesandtheDesignRecipe:Tests(3)

• check-equal? isfairlyclever,butnotperfect.• Whichoftheimagesbelowarevisuallyequal?• Seewhichofthemcheck-equal? acceptsasequal.

(define vspace1 (rectangle 0 50 "solid" "black"))(define vspace2 (rectangle 0 50 "solid" "white"))(define vspace3 (rectangle 0 50 "solid" "red"))(define vspace4 (rectangle 0 50 "outline" "black"))(define vspace5 (rectangle 0 50 "outline" "white"))

26

Summary

• Imagesareordinaryscalarvalues• Createandcombinethemusingfunctions• Scenesareakindofimage– createwithempty-scene– buildwithplace-image

• 2htdp/image haslotsoffunctionsfordoingallthis.– Golookatthehelpdocs

27

NextSteps

• Ifyouhavequestionsorcommentsaboutthislesson,postthemonthediscussionboard.

28