cs 5010 program design paradigms lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50...
TRANSCRIPT
![Page 1: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/1.jpg)
Workingwithimagesandscenes
CS5010ProgramDesignParadigmsLesson2.5
1©MitchellWand,2012-2014ThisworkislicensedunderaCreative Commons Attribution-NonCommercial 4.0 International License.
![Page 2: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/2.jpg)
Introduction
• Rackethasarichlibraryforworkingwithimagesandscenes.
• Wewillusethislibraryextensivelyinthiscourse.
• Inthislesson,wewillexploreafewthingsfromthelibrary.
• Note:thislessonismostlyreviewfromLesson0.4
2
![Page 3: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/3.jpg)
LearningObjectives
• Attheendofthislesson,thestudentshouldbeableto:– Createsimpleimagesandscenes– Combinesimpleimagesintomorecompleximagesandscenes
– Determinethepropertiesofanimage– Testimagesandtheirproperties
3
![Page 4: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/4.jpg)
ImagesareScalarData
• InRacket,imagesarescalardata• Rackethas:– Functionsforcreatingimages– Functionsforcombiningimages– Functionsforfindingpropertiesofimages
• Ingeneral,webuildcompleximagesbystartingwithsimpleimagesandthencombiningthemusingfunctions.
4
![Page 5: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/5.jpg)
Loadingtheimagelibrary
Toloadtheimagelibrary,includetheline(require 2htdp/image)
inyourprogram.
5
![Page 6: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/6.jpg)
FunctionsforCreatingImages(1)
bitmap : String -> ImageGIVEN:thenameofafilecontaininganimagein.png or.jpgformatRETURNS:thesameimageasaRacketvalue.
6
![Page 7: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/7.jpg)
FunctionsforCreatingImages(2)
rectangle : Width Height Mode Color -> Image
GIVEN:awidthandheight(inpixels),amode(eitherthestring“solid”orthestring“outline”),andacolorRETURNS:animageofthatrectangle.[SeetheHelpDeskforinformationontherepresentationofcolorsinRacket].
7
![Page 8: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/8.jpg)
FunctionsforCreatingImages(3)
circle : Radius Mode Color -> ImageLikerectangle,buttakesaradiusinsteadofawidthandheight.
Therearelotsofotherfunctionsforcreatingshapes,likeellipse,triangle,star,etc.
8
![Page 9: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/9.jpg)
FunctionsforCreatingImages(4)
text : String Fontsize Color -> Image
RETURNS:animageofthegiventextatthegivenfontsizeandcolor.
9
![Page 10: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/10.jpg)
CombiningImages
• Theimagelibrarycontainsmanyfunctionsforcombiningimagesintolargerimages.
• Thesefunctionsgenerallyaligntheimagesontheircenters.Thisisusuallywhatyouwant.Ifyoureallywanttoalignimagesontheiredges,therearefunctionsinthelibrarytodothat,too.Seethehelpdesk,asusual.
• Let’slookatthetwomostcommonly-usedimagecombining-functions:beside andabove.Here’sanexample:
10
![Page 11: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/11.jpg)
besideandabove
11
![Page 12: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/12.jpg)
Slightlymorecomplicatedimages
12
![Page 13: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/13.jpg)
Slightlymorecomplicatedimages
13
Therectanglehaswidth0,soit'sinvisibleJ
![Page 14: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/14.jpg)
Scenes
• Ascene isanimagethathasacoordinatesystem.
• Inascene,theorigin(0,0)isinthetopleftcorner.Thex-coordinateincreasesaswemovetotheright.They-coordinateincreasesaswemovedown.Thesearesometimescalled“computer-graphicscoordinates”
• Weuseascenewhenweneedtocombineimagesbyplacingthematspecificlocations.
14
![Page 15: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/15.jpg)
SceneCoordinates
15
(0,0) x
y
![Page 16: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/16.jpg)
CreatingScenes
• (empty-scene width height)– returnsanemptyscenewiththegivendimensions.
• (place-image img x y s)– returnsascenejustlikes,exceptthatimageimgisplacedwithitscenteratposition(x,y) ins
– resultingimageiscroppedtothedimensionsofs.
16
![Page 17: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/17.jpg)
scene+line
• (scene+line s x1 y1 x2 y2 color)– returnsascenejustliketheoriginals,butwithalinedrawnfrom(x1,y1) to(x2,y2) inthegivencolor.
– theresultingsceneiscroppedtothedimensionsofs.
17
![Page 18: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/18.jpg)
CreatingSceneswithFunctionsComposition
• Createsceneswithimagesinthembycombiningthemwithfunctions.
• Startwithanempty-scene,thenpaintimagesandlinesonthescenebyusingplace-imageandscene+line.
• Thisisallfunctional:paintinganimageonascenedoesn’tchangethescene– itproducesanewscene.
18
![Page 19: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/19.jpg)
VideoDemonstration
19YouTubelink
• https://www.youtube.com/watch?v=O7eDIBF3jKg
![Page 20: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/20.jpg)
MeasuringImages
• Racketalsoprovidesfunctionsfordeterminingimageproperties.Herethemostimportantones:– image-width : Image -> NonNegInt– image-height : Image -> NonNegInt– image? : Any -> Boolean
20
Inpixels
![Page 21: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/21.jpg)
BoundingBox
• Theboundingbox ofanimageisthesmallestrectanglethatcompletelyenclosestheimage.
• Itswidthwillbetheimage-widthoftheimage,anditsheightwillbetheimage-heightoftheimage.
• Itiseasytodeterminewhetheranarbitrarypointisinsidetheboundingbox– let’slookatanexample.
21
![Page 22: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/22.jpg)
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
![Page 23: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/23.jpg)
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
![Page 24: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/24.jpg)
ImagesandtheDesignRecipe:Tests(1)
• First,constructthecorrectimage.DoNOTusethefunctionyouaretestingtoconstructtheimage.
• EXAMPLE:(define two-red-circles
(beside red-circle1 red-circle1))
• Checkitvisuallytoseethatit'scorrect– Alas,thisstepisnotautomatable.
24
![Page 25: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/25.jpg)
ImagesandtheDesignRecipe:Tests(2)
• Thenyoucanusecheck-equal? ontheresultingimages:(check-equal?
(double-image red-circle1)two-red-circles)
• Thislooksalittlesillynow,butitwillbehelpfulwhenyoubuildmorecomplicatedimages.
25
![Page 26: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/26.jpg)
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
![Page 27: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/27.jpg)
Summary
• Imagesareordinaryscalarvalues• Createandcombinethemusingfunctions• Scenesareakindofimage– createwithempty-scene– buildwithplace-image
• 2htdp/image haslotsoffunctionsfordoingallthis.– Golookatthehelpdocs
27
![Page 28: CS 5010 Program Design Paradigms Lesson 2 · 2017. 1. 14. · (define vspace2 (rectangle 0 50 "solid" "white")) (define vspace3 (rectangle 0 50 "solid" "red")) (define vspace4 (rectangle](https://reader036.vdocument.in/reader036/viewer/2022081411/60b0b36fe5b68848095abdb5/html5/thumbnails/28.jpg)
NextSteps
• Ifyouhavequestionsorcommentsaboutthislesson,postthemonthediscussionboard.
28