“Bootcamp” Lesson 2 - Northeastern University...• Note: this lesson is mostly review from...
Transcript of “Bootcamp” Lesson 2 - Northeastern University...• Note: this lesson is mostly review from...
Workingwithimagesandscenes
CS5010ProgramDesignParadigms“Bootcamp”Lesson2.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
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