Forelæsning 3.2 Billedredigering (bl.a. brug af for-løkker)

Præsentationer af emnet: "Forelæsning 3.2 Billedredigering (bl.a. brug af for-løkker)"— Præsentationens transcript:

1 Forelæsning 3.2 Billedredigering (bl.a. brug af for-løkker)
Mini Java style guide BlueJ’s Debugger Afleveringsopgave 4.1: Bouncing balls dIntProg, E14

2 Giv ikke op! – Hæng i! Om programmering Programmering Faser Anderledes
Svær tankegang Faser Motivation Begejstring Tvivl Frustration Eksistensiel krise Heureka! Fascination Kompetencer Indsigt Magt over teknologien Tid Begejstring Giv ikke op! – Hæng i! dIntProg, E14

3 Billedredigering Lighten Darken Blur Invert dIntProg, E14

4 Billedrepræsentation
x width Pixel (x, y)  [0..255] hvor 0 ~ sort, 255 ~hvid y height dIntProg, E14

5 Billedredigering * Vi bruger to klasser
Image repræsenterer et billede og har metoder som arbejder på billedet, bl.a. lighten, darken, blur og invert. Pixel repræsenterer en pixel og har metoder til at aflæse og sætte pixel værdien Image Pixel * height dIntProg, E14

6 Class Image – interface
public class Image { // returnerer billedets højde public int getHeight() // returnerer billedets bredde public int getWidth() // returnerer billedelementet på position (x,y) public Pixel getPixel(int x, int y) // returnerer en liste med samtlige pixels i billedet public List<Pixel> getPixels() // returnerer de op til ni naboer til (x,y) (inkl.(x,y)) public List<Pixel> getNeighbours(int x, int y) // gentegner billedet public void pixelsUpdated() } dIntProg, E14

7 Class Pixel – interface
public class Pixel { // returnerer gråtonen for denne pixel public int getValue() // opdaterer gråtonen for denne pixel public void setValue(int value) } dIntProg, E14

8 Simpel billedbehandling
image for ( Pixel p : image.getPixels() ) { int oldValue = p.getValue(); int newValue; // calculate newValue // from oldValue p.setValue(newValue); } Vi kender ikke rækkefølgen som pixels behandles i Det er ofte ikke nødvendigt p dIntProg, E14

9 Brighten newValue = oldValue + 30 dIntProg, E14

10 Brighten, Javakode image p for ( Pixel p : image.getPixels() ) {
int oldValue = p.getValue(); int newValue; newValue = oldValue + 30; p.setPixel(newValue); } for ( Pixel p : image.getPixels() ) { p.setPixel(p.getValue()+30); } p Kan I se et potentielt problem? dIntProg, E14

11 Invert newValue = oldValue dIntProg, E14

12 Invert, Javakode image p for ( Pixel p : image.getPixels() ) {
int oldValue = p.getValue(); int newValue; newValue = 255 – oldValue; p.setPixel(newValue); } for ( Pixel p : image.getPixels() ) { p.setPixel(255 - p.getValue()); } p dIntProg, E14

13 Koordinatbaseret gennemløb
x width for (int y=0; y < image.height(); y++) { // behandl række y } y For (int y=0; y < image.height(); y++) { // behandl række y for (int x=0; x < image.width(); x++) { // behandl pixel(x,y) } height dIntProg, E14

14 Invert – koordinatbaseret
public void invert() { // go through all pixels and // invert the colour value for(int y = 0; y < image.height(); y++) { for(int x = 0; x < image.width(); x++) { //behandl pixel(x,y) Pixel p = image.getPixel(x,y); int oldValue = p.getValue(); int newValue; newValue = 255 – oldValue; p.setValue(newValue); } // redisplay the image on screen image.pixelsUpdated(); dIntProg, E14

15 Invert – koordinatbaseret og kompakt
//behandl pixel(x,y) Pixel p = image.getPixel(x, y); int oldValue = p.getValue(); int newValue; newValue = 255 – oldValue; p.setValue(newValue); //behandl pixel(x,y) image.getPixel(x,y).setValue(invert(x,y)); public int invert(int x, int y) { return image.getValue(x,y); } dIntProg, E14

16 newValue = gennemsnit af naboer
Blur newValue = gennemsnit af naboer dIntProg, E14

17 Blur, koordinatbaseret og kompakt
public Image blur() { Image result= new Image(image.getWidth(), image.getHeight(),"blurredImage”); for (int y = 0; y<image.getHeight(); y++) { for (int x = 0; x<image.getWidth(); x++) { result.getPixel(x,y).setValue(average(x,y)); } result.pixelsUpdated(); return result; public int average(int x, int y) { int sum = 0; for (Pixel p : image.getNeighbours(x,y)) { sum += p.getValue(); } return sum/image.getNeighbours(x,y).size(); dIntProg, E14

18 Eksempler på billedoperationer
brighten Gør billedet lidt lysere darken Gør billedet lidt mørkere blur Erstat hvert pixel med gennemsnitsværdien i det 3x3 kvadrat det er centrum i invert Inverter hver gråtone, dvs. 0 bliver til 255, 1 bliver til 254, 2 bliver til 253, etc. mirrorHor Spejlvend billedet omkring den horisontale midterakse mirrorVer Spejlvend billedet omkring den vertikale dIntProg, E14

19 Flere eksempler på billedoperationer
frame Sæt en sort ramme omkring billedet Parameter: rammens bredde rotateLeft Rotér billedet 90 grader mod uret rotateRight Rotér billedet 90 grader med uret crop Skær et rektangel ud af et billede og lav dette til et nyt billede Parametre: øverste venstre og nederste højre hjørne på crop-rektanglet threshold Sæt alle pixels der højst har tærskelværdien til 0 og alle pixels større end tærskelværdien til 255 Parameter: tærskelværdi  dIntProg, E14

20 Flere eksempler på billedoperationer
add Læg et billede til et andet. Billeder adderes ved at addere værdierne for korresponderende pixels Parameter: et billede subtract Træk et billede fra et andet oilPaint Erstat hvert pixel med den hyppigst forekommende værdi i det kvadrat det er centrum i Parameter: størrelsen på kvadratet osv. Den anden afleveringsopgaverne i uge 4 handler om billedbehandling dIntProg, E14

21 Mini Java Style Guide Navngivning Indrykning
Klasser: med stort CamelCase eks.: Person, String, NumberDisplay, Variable og metoder: med lille camelCase eks.: firstName, trackName, displayString Indrykning Alt mellem {} rykkes ét ’hak’ ind For hvert ekstra niveau af {} rykkes endnu et ’hak’ ind., eks.: public class Person { private int age; public Person() { age = 32; } Husk at bruge editorens Auto-layout BlueJ styleguide: dIntProg, E14

22 Hvad gør nedenstående kode?
dIntProg, E14

23 Hvad gør nedenstående kode?
Præcis det samme Den er bare næsten umulig at læse Husk at bruge editorens Auto-layout dIntProg, E14

24 BlueJ debugger (afluser = fejlfinder)
Nyttig når man skal tjekke den detaljerede opførsel af noget Java kode Breakpoints indsættes (og fjernes) ved at klikke i venstre margin Under kørslen vil debuggeren stoppe, når et breakpoint nås, og vise positionen med en sort pil Herefter kan man ”steppe” gennem koden statement for statement dIntProg, E14

25 Metodekald Når man skal til at udføre et metodekald er der to muligheder: Udfører hele metodekaldet uden at man ser detaljerne Starter metode-kaldet, men stopper ved første statement i den kaldte metode dIntProg, E14

26 Metodekald Parat til at udføre første statement i den kaldte metode
Andre knapper: Fortsætter kørslen frem til næste breakpoint Stopper kørslen Nødstop (uendelig while-løkke eller lignende) dIntProg, E14

27 Undervejs kan man inspicere
Igangværende metodekald Feltvariables værdier Lokale variables værdier dIntProg, E14

28 Afleveringsopg 4.1: Bouncing Balls
Greenfoot Brug af vektorer til modellering af hastighed og retning dIntProg, E14

29 Bolde og vektorer BallWorld Ball Vector
Initialiserer verdenen til en passende størrelse Ball En bold der flyver rundt i verdenen og ’bouncer’ mod kanterne (opg. 3) andre bolde (opg. 4 – extra credit) Vector Repræsenterer boldens retning og hastighed Hver gang act kaldes af Greenfoot: x bestemmer hvor langt bolden skal flytte sig vandret (på x-aksen) y bestemmer hvor langt bolden skal flytte sig lodret (på y-aksen) dIntProg, E14

30 Animering – hvordan flytter bolden sig?
Greenfoot kalder Ball’s act() metode act() kalder move() metoden move() får fat i boldens koordinater ved at kalde getX() og getY() (fra Actor) move() får fat i vel’s koordinater vha. vel.getX() og vel.getY() (fra Vector) move() opdaterer boldens position ved at kalde setLocation (fra Actor) :Ball vel:Vector act() move() getX() getY() getX() getY() setLocation(…) dIntProg, E14

31 Bouncing på kanterne Disse fire metoder skal checke om bolden rører ved en kant Efter kaldet til move skal kant-kollision håndteres Dette indkapsles i en metode handleWallCollision To tilfælde Hvis bolden rører ved en sidekant skal hastigheden vel sættes til vel.verticalFlip() Hvis bolden rører ved top eller bundkanten skal hastigheden vel sættes til vel.horizontalFlip() dIntProg, E14

32 Eksempel på kantcheck - hitRightWall()
(0,0) getWorld().getHight() getY() getImage().getWidth() getWorld().getWidth() getX() getX() + getImage().getWidth()/2 > getWorld().getWidth()-1 dIntProg, E14

33 Opsummering Billedredigering Mini Java style guide BlueJ’s Debugger
Brug af to forskellige slags for-løkker Mini Java style guide Navngivning Indrykning BlueJ’s Debugger Nyttigt værktøj til at finde fejl i kode Afleveringsopgave 4.1: Bouncing balls dIntProg, E14