javascript formule sepia
ik ben bezig een javascript te schijven dat de sepia tint van een kleur kan berekenen.
grijs is makkelijk, namelijk
Code (php)
1
color = ((R + G + B) / 3);
maar hoe gaat dit voor sepia?
ik heb nu iets van
Code (php)
1
return 'rgb(' + ((color + 25) < 255 ? (color + 25) : 255) + ', ' + ((color + 10) < 255 ? (color + 10) : 255) + ', ' + ((color - 35) > 0 ? (color - 35) : 0) + ')';
waar color de grijs waarde is.
het lijkt ergens op, maar volgens mij is dit niet echt sepia...
volgens wikipedia is sepia rgb(112, 66, 20), maar ik weet niet zo goed wat ik daar me moet, iets met procenten en verhoudingen gok ik?
Edit:
dit lijkt ook nergens op... nu heb je geen zwart en wit meer....
Code (php)
1
return 'rgb(' + ((color * 1.6969) < 255 ? Math.round(color * 1.6969) : 255) + ', ' + color + ', ' + ((color * 0.3030) > 0 ? Math.round(color * 0.3030) : 0) + ')';
dit lijkt ook nergens op... nu heb je geen zwart en wit meer....
Gewijzigd op 01/01/1970 01:00:00 door Pepijn de vos
color = ((R + G + B) / 3);
Dat komt neer op 'paars is even grijs als geel is even grijs als licht blauw'.
Gewijzigd op 01/01/1970 01:00:00 door - SanThe -
ow wacht eens... een vriend zij eens dat er in een camera steeds een rode een blauwe en 2 groene cellen zitten, is het zo iets?
dat sepia #704214 is kan ik volgen, maar wat ben ik daar me geholpen?
een sepia foto gaat van zwart naar wit met daartussen licht sepia, sepia en donker sepia zal ik maar zeggen.
daar wil ik een kloppende formule voor vinden... en daar is nu een kloppende formule voor grijs bij gekomen.
color = ((R + G + B) / 3);
color = ((FF + FF + 00) / 3) => geel
color = ((FF + 00 + FF) / 3) => paars
color = ((00 + FF + FF) / 3) => licht blauw
Rekenkundig geven ze alledrie dezelfde uitkomst.
wikipedia: Adobe recommends setting Hue = 27 and Saturation = 21 and checking the Colorize box in the Hue/Saturation filter in Photoshop.
maar bij javascript heb je geen hue/saturation toch? dus ik zoek een manier om toch de kleur te 'verschuiven' naar sepia.
als we dat weten kunnen we wel wat experimenteren...
0, 0, 0 = 0, 0, 0
63, 63, 63 = 76, 62, 50 = +13, -1 -13
127, 127, 127 = 154, 125, 101 = +27, -2, -26
170, 170, 170 = 188, 169, 153 = +18, -1, -17
255, 255, 255 = 255, 255, 255
ik moet nog even denken wat ik daar nu aan heb hoor...
Edit:
ik heb het denk ik!!!
nu alleen nog uitvinden wat er nou mis is met mijn grijs berekening....
ik heb het denk ik!!!
Code (php)
1
2
3
2
3
diff = (Math.abs(Math.abs(color - 127.5) - 127.5) / 4);
//alert(color +": "+ diff);
return 'rgb(' + ((color + diff) < 255 ? Math.round(color + diff) : 255) + ', ' + color + ', ' + ((color - diff) > 0 ? Math.round(color - diff) : 0) + ')';
//alert(color +": "+ diff);
return 'rgb(' + ((color + diff) < 255 ? Math.round(color + diff) : 255) + ', ' + color + ', ' + ((color - diff) > 0 ? Math.round(color - diff) : 0) + ')';
nu alleen nog uitvinden wat er nou mis is met mijn grijs berekening....
Gewijzigd op 01/01/1970 01:00:00 door pepijn de vos
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
public function yiq ($r,$g,$b) {
return (($r * 0.299) + ($g * 0.587) + ($b * 0.114));
}
public function to_grayscale ($grayfile) {
list($width, $height) = getimagesize ($this->path);
$src = imagecreatefromjpeg ($this->path);
$dst= imagecreate ($width, $height);
for ($c = 0; $c < 256; $c++) {
$palette[$c] = imagecolorallocate ($dst, $c, $c, $c);
}
for ($y = 0; $y < $height; $y++) {
for ($x = 0; $x < $width; $x++) {
$rgb = imagecolorat ($src, $x, $y);
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
//This is where we actually use yiq to modify our rbg values, and then convert them to our grayscale palette
$gs = $this->yiq ($r, $g, $b);
imagesetpixel ($dst, $x, $y, $palette[$gs]);
}
}
imagejpeg ($dst, $grayfile, $this->jpg_quality);
}
?>
public function yiq ($r,$g,$b) {
return (($r * 0.299) + ($g * 0.587) + ($b * 0.114));
}
public function to_grayscale ($grayfile) {
list($width, $height) = getimagesize ($this->path);
$src = imagecreatefromjpeg ($this->path);
$dst= imagecreate ($width, $height);
for ($c = 0; $c < 256; $c++) {
$palette[$c] = imagecolorallocate ($dst, $c, $c, $c);
}
for ($y = 0; $y < $height; $y++) {
for ($x = 0; $x < $width; $x++) {
$rgb = imagecolorat ($src, $x, $y);
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
//This is where we actually use yiq to modify our rbg values, and then convert them to our grayscale palette
$gs = $this->yiq ($r, $g, $b);
imagesetpixel ($dst, $x, $y, $palette[$gs]);
}
}
imagejpeg ($dst, $grayfile, $this->jpg_quality);
}
?>
Edit: hou er rekening mee dat deze functies bij mij in een class zitten. Je moet dus nog wat keywords aanpassen, zoals $this.
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
de magie zit hem in de yiq denk ik he?
wat ik eigenlijk doe is ze allemaal door 0.333 delen, wat jij doet is net een andere verhouding, want die 3 getallen bij elkaar opgeteld is precies 1
ik neem aan dat je die getallen niet uit je duim hebt gezogen, hoe kom je daar aan?
als mijn javascript dingetje werkt ga ik misschien ook nog wel iets maken om plaatjes te doen met php en ajax.
Edit:
sorry, had ik toch bijna bij de 'te-lui-om-te-googelen' categorie behoort...
http://en.wikipedia.org/wiki/YIQ
sorry, had ik toch bijna bij de 'te-lui-om-te-googelen' categorie behoort...
http://en.wikipedia.org/wiki/YIQ
Gewijzigd op 01/01/1970 01:00:00 door pepijn de vos
http://blogs.techrepublic.com.com/howdoi/?p=120
Code (php)
1
outputColor = (inputRed + inputGreen + inputBlue) / 3
de methode voor sepia vind ik wel goed, ik had het allen mooier gevonden als er had gestaan
Quote:
inplaats van microsoft.....If any of these output values is greater than 255, you simply set it to 255. These specific values are the values for sepia tone that are recommended by Adobe
Edit:
http://blogs.adobe.com/kevin.goldsmith/2007/10/writing_a_fadet_2.html
heeft nog een ander lijstje waardes... nog meer suggesties?
http://blogs.adobe.com/kevin.goldsmith/2007/10/writing_a_fadet_2.html
heeft nog een ander lijstje waardes... nog meer suggesties?
Gewijzigd op 01/01/1970 01:00:00 door pepijn de vos
pepijn de vos schreef op 06.10.2008 21:36:
bedankt allemaal, resultaat is hier te zien:
http://plugins.jquery.com/project/colorizer
http://plugins.jquery.com/project/colorizer
Heb je demo?
maar er zitten voorbeelden bij het project.