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

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

Billedredigering Lighten Darken Blur Invert dIntProg, E14

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

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

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

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

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

Brighten newValue = oldValue + 30 dIntProg, E14

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

Invert newValue = 255 - oldValue dIntProg, E14

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

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

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

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 255 - image.getValue(x,y); } dIntProg, E14

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

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

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

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

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

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: http://www.bluej.org/objects-first/styleguide.html dIntProg, E14

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

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

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

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

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

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

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

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

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

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

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

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