├── .gitignore
├── README.md
├── docs
├── earring.jpg
├── examples
│ ├── boxblur.png
│ ├── greyscale.png
│ ├── histogramequalization.png
│ ├── invert.png
│ ├── medianfilter.png
│ ├── seamcarvedynamicprogramming.png
│ ├── seamcarving.png
│ ├── sharpen.png
│ ├── skformula.png
│ ├── threshold.png
│ └── warmfilter.png
├── index.html
├── index.js
├── low-contrast.png
├── noisy.png
├── simple.png
├── styles.css
├── supernoisy.jpg
└── tower.jpg
├── images
├── earring.jpg
├── low-contrast.png
├── noisy.png
├── simple.png
├── supernoisy.jpg
└── tower.jpg
├── package-lock.json
├── package.json
└── src
├── Editor.js
├── Image.js
├── effects
├── boxblur.js
├── greyscale.js
├── histogramequalization.js
├── invert.js
├── medianfilter.js
├── seamcarving.js
├── sharpen.js
├── threshold.js
└── warmfilter.js
├── index.html
├── index.js
└── styles.css
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | *.iml
3 | node_modules/
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Image workshop
2 |
3 | Velkommen til AlgPip's konkurrent til Photoshop!
4 |
5 | I denne workshopen skal vi implementere forskjellige bildebehandlingsalgoritmer.
6 |
7 |
8 | # Oppsett
9 |
10 | ```
11 | npm install
12 | npm run dev
13 | ```
14 |
15 | Åpne http://localhost:9966/ i nettleseren. Når du gjør endringer i koden vil browseren
16 | refreshe.
17 |
18 | ## Koden
19 |
20 | I `src/effects/`-mappa ligger filene til de forskjellige effektene. En effekt får typisk inn bildet det skal jobbes på, og eventuelt noen parametre.
21 | Så itererer man over pikslene i bildet og lager et nytt bilde som man returnerer.
22 |
23 | APIet er ikke så stort, det består bare av funksjoner for å lese eller skrive verdier til et bilde.
24 |
25 | ```javascript
26 | // Lage et nytt bilde:
27 | var newImage = Image.empty(width, height); // Lager et blankt bilde med en viss størrelse
28 | var newImage2 = Image.clone(image); // Kopi av et annet bilde
29 |
30 | // Lese ut størrelser
31 | var width = image.width;
32 | var height = image.height;
33 |
34 | // Lese ut verdier
35 | // venstre topp er (0, 0). y=0 er altså øverste rad, y=1 neste rad osv.
36 | var red = image.getR(x, y); // Få rødkomponenten av fargen på piksel x,y
37 | var green = image.getG(x, y);
38 | var blue = image.getB(x, y);
39 |
40 | // Setter verdier/farger tilsvarende
41 | // Fra og med 0 til og med 255
42 | newImage.setR(x, y, 255);
43 | newImage.setG(x, y, 0);
44 | newImage.setB(x, y, 128);
45 |
46 | // Kan evt sette alle i ett
47 | newImage.setRGB(x, y, [255, 0, 128]);
48 | ```
49 |
50 | En typisk effekt ser ut som noe ala det her:
51 |
52 | ```javascript
53 | function effect(image) {
54 | // Lag et nytt bilde av samme størrelse
55 | const newImage = Image.empty(image.width, image.height);
56 |
57 | // Iterer over hver pixel, rad for rad (merk vi itererer over y ytterst)
58 | for (let y = 0; y < image.height; y++) {
59 | for (let x = 0; x < image.width; x++) {
60 |
61 | // Les ut aktuelle verdier fra originalbildet
62 | var r = image.getR(x, y);
63 | // ...
64 |
65 | // Regn ut nye verdier
66 | var nyR = r + 25;
67 | // ...
68 |
69 | // Sett verdi i det nye bildet
70 | newImage.setR(x, y, [nyR, nyG, nyB]);
71 | }
72 | }
73 | return newImage;
74 | }
75 |
76 |
77 | ```
78 |
79 | # Oppgaver
80 |
81 | Anbefaler at man starter med Greyscale for å få en følelse av hvordan ting fungerer,
82 | deretter er det bare å plukke det man synes virker mest spennende! Merk at vanskelighetsgraden
83 | varierer mellom de forskjellige.
84 |
85 | Kan se fasit (/få hjelp) ved å sjekke ut branchen `solution`, evt klikke [her](https://github.com/Matsemann/image-workshop/tree/solution/src/effects)
86 |
87 | [Greyscale](#Greyscale) (liten)
88 | [Threshold](#Threshold) (liten)
89 | [Invert](#Invert) (liten)
90 | [Warmfilter](#Warmfilter) (liten)
91 | [Blur](#Boxblur) (middels)
92 | [Median filter](#Median-filter) (middels)
93 | [Sharpen](#Sharpen) (liten, men avhengig av èn av de to foregående)
94 | [Histogram equalization](#Histogram-equalization) (middels)
95 | [Seam carving](#Seam-carving) (stor)
96 |
97 |
98 | ## Greyscale
99 |
100 | 
101 |
102 | Ofte kalt svart/hvitt, men vi har jo mange "shades of grey". For hver piksel, regner man ut "intensiteten"
103 | den har, basert på R,G,B verdiene. Det letteste er bare å ta snittet av RGB-verdiene på en piksel i originalbildet og sette
104 | pikselen i det nye bildet til den verdien. Men for å et greyscale som bedre tilsvarer det et menneskeøye opplever intensiteten er,
105 | kan man heller bruke formelen `intensity = 0.34 * r + 0.5 * g + 0.16 * b`.
106 |
107 | Endre på fila `src/effects/greyscale.js`. Gjør tilsvarende som i eksempelet over:
108 | Iterer over alle pikslene i bildet. Les ut verdiene fra originalbildet og beregn intensitetsverdien/gråverdien
109 | pikselen skal ha og sett den i det nye bildet. For å sette verdien som grå, setter man RGB til samme verdi. F. eks. om man
110 | regnet ut at intensiteten skal være 203, setter man både R, G og B til 203.
111 |
112 |
113 | ## Threshold
114 |
115 | 
116 |
117 | Den egentlige "svart/hvitt". Ligner veldig på greyscale, men i stedet for å sette RGB til intensiteten,
118 | setter man enten fargen til svart (0,0,0) eller hvitt (255,255,255) basert på om intensiteten er over en viss grense/threshold.
119 |
120 | Endre på fila `src/effects/threshold.js`. I tillegg til bildet effekten skal legges på, får du inn grenseverdien for om hver piksel skal bli hvit eller svart.
121 |
122 | ## Invert
123 |
124 | 
125 |
126 | Rett og slett invertering av fargene, 255 - c, der c er intensiteten per pixel per farge. Brukes hyppig i flashes i skrekkfilmer.
127 |
128 | Endre på fila `src/effects/invert.js`.
129 |
130 | ## Warmfilter
131 |
132 | 
133 |
134 | Gjør bildet varmere ved å legge til litt rød og trekke fra litt blå. Endre på fila `src/effects/warmfilter.js`.
135 | Lag et nytt blankt bilde på størrelse med bildet du får inn, og iterer over alle pikslene. For hver piksel,
136 | les ut RGB verdiene fra bildet du fikk inn. Men i stedet for å kopiere verdiene direkte over til det nye bildet, legger du til litt (f eks +25) på rødverdien,
137 | og trekker til litt på blåverdien (feks -25).
138 |
139 | ## Boxblur
140 |
141 | 
142 |
143 | Dette er gode gamle blur som mange har minner fra i photoshop. Det finnes mange måter å implementere blur på, men vi har
144 | valgt det aller enkleste tilfellet, nemlig å sette hver pixel til å være gjennomsnittet av pixlene rundt. Vi sier ofte
145 | at vi beregner verdien basert på et *omegn* av hver verdi. Denne måten å behandle bilder på kalles *spatial filtering*,
146 | og box blur er et såkalt *lavpassfilter**. I vår implemetasjon sender man med hvor stor radius rundt hver pixel som skal
147 | være beregningsgrunnlaget. Dvs. at sender vi med 1, så er omegnet et 3x3-grid, sender vi med 2, er omegnet et 5x5-grid.
148 |
149 | Endre på fila `src/effects/boxblur.js`. Iterer over alle pikslene, og for hver piksel må du finne pikslene i en radius rundt og summere opp RGB-verdiene for å regne ut snittet for hver farge.
150 | Sett deretter fargen på pikselen til å være disse snittene av RGB. For å iterere over alle naboene, kan du bruke en dobbel for-løkke, der man går `(fra x-radius til og med x+radius)` og tilsvarende for y.
151 |
152 | ## Median filter
153 |
154 | 
155 |
156 | Medianfilteret er en veldig god støyreduserer, og har veldig lik implementasjon som blur, bare at man setter hver pixel
157 | til å være medianen av omegnet i stedet for gjennomsnittet.
158 |
159 | Endre på fila `src/effects/medianfilter.js`. Gjør som for boxblur, men i stedet for å finne snittet putter du alle verdiene i en liste, sorterer den og plukker ut den
160 | midterste verdien og bruker den som verdi på pikselen du ser på.
161 |
162 | ## Sharpen
163 |
164 | 
165 |
166 | Krever at man har implementert enten blur eller medianfilter (eller et annet lavpassfilter!).
167 |
168 | En enkel sharpen-funksjon er å ta differansen mellom et bilde og den lavpassfiltrerte versjonen av bildet, for så å
169 | legge til differansen på orignalbildet igjen.
170 |
171 | `diff = originalbilde - lavpass(originalbilde)`,
172 | `sharpened_originalbilde = orignalbilde + diff`.
173 |
174 | Hvorfor fungerer dette? Når vi trekker et utjevnet bilde fra originalen, står vi igjen med høye verdier i de pixlene som
175 | har blitt utjevnet mye, altså de pixlene som skiller seg ut fra nabopixlene. Når vi så legger dette på originalbildet igjen,
176 | vil de homogene områdene forbli de samme (fordi differansen er ~0 der), mens vi får utslag der det er kanter e.l.
177 |
178 | Endre på fila `src/effects/sharpen.js`.
179 |
180 | ## Histogram equalization
181 |
182 | 
183 |
184 | Histogram equalization dreier seg om å utjevne spekteret av intensitetsverdier man bruker i et bilde. Enklere forklart,
185 | dersom man har et bilde som er lite kontrastfylt, f. eks et veldig lyst bilde, så gir man bildet mer kontrast.
186 |
187 | Det som skjer er at vi for hver pixel og farge gjør en mapping til en ny verdi. Lang historie kort, formelen er på
188 | følgende format. Hver intensitetsverdi `k` skal mappes til verdien `ny_k` (0 til 255). `ny_k` er på
189 | formen (se bildet):
190 |
191 | 
192 |
193 | Der `L-1 = 255`, `MN = image.height*image.width` og `n_j`er antallet pixler i bildet som har intensitetsverdi `j` (mellom 0 og `k`).
194 |
195 | Endre på fila `src/effects/histogramequalization.js`.
196 |
197 | **Eksempel**
198 |
199 | La oss si vi har et bilde som er `3x3`, der rødverdiene er `5, 4, 4, 5, 3, 1, 0, 4, 1`.
200 | Vi teller antall av hver verdi `k` og får linjen `nr` i tabellen under.
201 | Deretter summerer vi hvor mange verdier som er til og med hver `k`. F. eks. er `sr[4] = 7`, fordi det er summen av `nr[0]+nr[1]+nr[2]+nr[3]+nr[4]`.
202 | Så regner vi `ny_kr` for hver `k`, altså verdien den skal mappes til. For bårt 3x3 bilde blir det da `(255 / (3*3)) * sr[k]`, rundet til hele tall.
203 | Når det er gjort itererer vi over alle pikslene i vårt originale bilde, og bytter ut verdiene i henhold til tabellen. F. eks. skal alle `4` bli byttet med `198`, da får vi spredd
204 | verdiene utover hele spekteret og får bedre kontrast.
205 |
206 | ||||||||||
207 | |---|---|---|---|---|---|---|---|---|
208 | |**k**|**0**|**1**|**2**|**3**|**4**|**5**|**6**|...|
209 | |**nr**|1|2|0|1|3|2|0|...|
210 | |**sr**|1|3|3|4|7|9|9|...|
211 | |**ny_kr**|28|85|85|113|198|255|255|...
212 |
213 | ## Seam carving
214 |
215 | 
216 |
217 | Når man skalerer bilder ned i én akse, får man et problem med at ting blir skvist/strukket ut av sine egentlige proposjoner.
218 | Seam carving løser dette ved at i stedet for å skalere ned hele bildet jevnt, finner man heller de
219 | uviktige delene av bildet og forkaster dette.
220 |
221 | Algoritmen består av 3 deler:
222 | 1. Finn energien til hver piksel, altså hvor viktig den er i bildet
223 | 2. Beregn forskjellige stier fra topp til bunn og regn ut deres totale energi
224 | 3. Fjern pikslene i den stien som var minst viktig (hadde lavest energi)
225 |
226 | Dette gjøres om og om igjen til bildet har den bredden man ønsker.
227 |
228 | I `src/effects/seamcarving.js` skal du implementere del 1 og 2. Del 3 er ikke så spennende og mest knot, så det får du av oss.
229 |
230 | **imageEnergy(..)**
231 | Bildet vi skal returnere skal ikke ha RGB, men bare én verdi per piksel, så i stedet for å lage et nytt bilde kan vi heller lage et
232 | energyimage i riktig størrelse, ala `var energyImage = Image.createEnergyImage(image.width, image.height);`.
233 | Et energyimage er det samme som et vanlig image, men kan bare ha én verdi per piksel. Den kan vi sette ved å gjøre `energyImage.setValue(x, y, 1000);`.
234 |
235 | Vi må beregne energinivået til hver piksel. For å beregne det for en piksel, ser vi på pikslene rundt.
236 | For piksel `(x, y)`, er det pikselen over `(x, y-1)`, under `(x, y+1)`, venstre `(x-1, y)` og til høyre `(x+1, y)` vi må se på.
237 | Vi regner ut differansen i rød, grønn og blå mellom pikselen til høyre og den til venstre, aka
238 | ```
239 | diffRx = (rHøyre - rVenstre)^2
240 | diffGx = (gHøyre - gVenstre)^2
241 | diffBx = (bHøyre - bVenstre)^2
242 | ```
243 | I kode ville det tilsvart `diffRx = Math.pow(image.getR(x+1, y) - image.getR(x-1, y), 2)`. Deretter gjør man det samme, men for pikselen under minus den over.
244 | Når man har gjort det summerer man sammen alle 6 verdiene og tar roten av dem, ala `Math.sqrt(diffRx + diffGx + diffBx + diffRy + diffGy + diffBy)`.
245 |
246 | **Eksempel**
247 | Om det var litt forvirrende, har vi heldigvis et eksempel her. Vi skal beregne energien til pikselen i midten.
248 |
249 | | | | |
250 | |---|---|---|
251 | |(0,0,0)|(180,190,50)|(0,0,0)|
252 | |(100,101,75)|(55,55,55)|(255,125,50)|
253 | |(0,0,0)|(199,200,10)|(0,0,0)|
254 |
255 | ```
256 | diffRx = (255 - 100)^2 = 24025
257 | diffGx = (125 - 101)^2 = 576
258 | diffBx = (50 - 75)^2 = 625
259 | diffRy = (199 - 180)^2 = 361
260 | diffGy = (200 - 190)^2 = 100
261 | diffBy = (10 - 50)^2 = 1600
262 | energi = sqrt(24025 + 576 + 625 + 361 + 100 + 1600) = 165.18
263 | ```
264 |
265 | Piksler som ligger på kanten vil ikke dette fungere på, så du kan bruke `isBorderPixel(..)` funksjonen for å sjekke dette, og da heller sette
266 | energien for den pikselen til en fast verdi. `300` f. eks.
267 |
268 | **calculateSeams(..)**
269 |
270 | Her bruker vi dynamisk programmering for å finne den veien fra topp til bunn av bildet som har minst energi.
271 | Vi får inn energibildet vi akkurat regnet ut, og skal nå summere verdiene nedover for å beregne totalenergien for de forskjellige veiene man kan velge.
272 |
273 | En path/vei er sammenhengende, og kan enten komme fra pikselen rett over, den skrått oppover til venstre, eller den skrått oppover til høyre.
274 |
275 | **Eksempel**:
276 | 
277 |
278 | Verdiene i EnergyImage til venstre er de vi beregnet i forrige steg, og får som input til vår funksjon. Etter at funksjonen vår har kjørt,
279 | skal vi returnere et nytt bilde med verdier tilsvarende det i høyre bilde. Algoritmen er som følger:
280 | For første rad, kopier over verdiene som energibildet hadde. For de andre radene, finner vi billigste path til den pikselen vi ser på ovenifra, og legger til verdien til pikselen fra energibildet.
281 | For eksempel om vi ser på ruten med pilene: For den pikselen ser vi på de 3 pikslene ovenfor. Av 4, 3 og 5 er 3 lavest. Så ser vi på energibildet, der har den pikselen verdien 5. Vi summerer da 3 og 5 og får verdien 8.
282 | Vi gjør dette for alle piksler på rad to, før vi så gjør det samme for rad 3. Da finner vi den laveste av de over på rad 2.
283 | Merk at på kanten har vi bare to over oss. F. eks. nederst i venstre hjørne er det det laveste av 4 og 3, plusset på 5, som blir verdien.
284 |
285 | Algoritmen er litt forenklet for hver piksel (man må ta hensyn til om man er på kanten):
286 | ```javascript
287 | seamValue = Math.min(
288 | seamImage.getValue(x-1, y-1),
289 | seamImage.getValue(x, y-1),
290 | seamImage.getValue(x+1, y-1)
291 | )
292 | seamImage.setValue(x, y, seamValue + valueOfEnergyImage);
293 | ```
294 | Dette gjøres da først for alle pikslene på en rad, så raden under osv.
295 |
296 |
297 | (* Lavpassfilter er et type filter som jevner ut forskjeller. Motsetningen er høypassfilter, som fremhever forskjeller.
298 | Både blur og median filter er lavpassfiltre. Et filter som beregner den andrederiverte er et eksempel på et høypassfilter.)
299 |
300 |
301 |
--------------------------------------------------------------------------------
/docs/earring.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Matsemann/image-workshop/97354a0dc67ce51d3f15e866e7a669c6494e1e57/docs/earring.jpg
--------------------------------------------------------------------------------
/docs/examples/boxblur.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Matsemann/image-workshop/97354a0dc67ce51d3f15e866e7a669c6494e1e57/docs/examples/boxblur.png
--------------------------------------------------------------------------------
/docs/examples/greyscale.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Matsemann/image-workshop/97354a0dc67ce51d3f15e866e7a669c6494e1e57/docs/examples/greyscale.png
--------------------------------------------------------------------------------
/docs/examples/histogramequalization.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Matsemann/image-workshop/97354a0dc67ce51d3f15e866e7a669c6494e1e57/docs/examples/histogramequalization.png
--------------------------------------------------------------------------------
/docs/examples/invert.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Matsemann/image-workshop/97354a0dc67ce51d3f15e866e7a669c6494e1e57/docs/examples/invert.png
--------------------------------------------------------------------------------
/docs/examples/medianfilter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Matsemann/image-workshop/97354a0dc67ce51d3f15e866e7a669c6494e1e57/docs/examples/medianfilter.png
--------------------------------------------------------------------------------
/docs/examples/seamcarvedynamicprogramming.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Matsemann/image-workshop/97354a0dc67ce51d3f15e866e7a669c6494e1e57/docs/examples/seamcarvedynamicprogramming.png
--------------------------------------------------------------------------------
/docs/examples/seamcarving.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Matsemann/image-workshop/97354a0dc67ce51d3f15e866e7a669c6494e1e57/docs/examples/seamcarving.png
--------------------------------------------------------------------------------
/docs/examples/sharpen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Matsemann/image-workshop/97354a0dc67ce51d3f15e866e7a669c6494e1e57/docs/examples/sharpen.png
--------------------------------------------------------------------------------
/docs/examples/skformula.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Matsemann/image-workshop/97354a0dc67ce51d3f15e866e7a669c6494e1e57/docs/examples/skformula.png
--------------------------------------------------------------------------------
/docs/examples/threshold.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Matsemann/image-workshop/97354a0dc67ce51d3f15e866e7a669c6494e1e57/docs/examples/threshold.png
--------------------------------------------------------------------------------
/docs/examples/warmfilter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Matsemann/image-workshop/97354a0dc67ce51d3f15e866e7a669c6494e1e57/docs/examples/warmfilter.png
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | AlgPip's Super Image Editor
6 |
7 |
8 |
9 |
10 |