Kleuren sorteren

[TheLunatic]

Ik ben bezig in Delphi met het maken van een tabelletje waarin je web-safe colors kunt zien. Om het even bot te zeggen, de hex-codes van websafe colors mogen enkel de waarden 0, 3, 6, 9, C en F bevatten, dus heb ik een script gemaakt dat al deze hex-codes genereert, hier kleuren van gemaakt, en dan laat ik dat tekenen in een overzichtje:



Zoals je ziet, alle kleuren zitten er in. Alleen ben ik niet tevreden over de volgorde. Je kent wel die kleurkiezer van Windows zelf, daar zitten de kleuren een beetje gesorteerd op teint. Bij mij zitten ze ruwweg gesorteerd op 'alfabetische' volgorde :

code:

000000
000033
000066
...
3399CC
3399FF
33CC00
...
99FFFF
CC0000
CC0033

Is wel duidelijk lijkt me.

Wat is nu de logica die ik moet toepassen in de volgorde van de kleuren om een beetje een normaler indeling te krijgen ? Ik stel deze vraag hier, omdat jullie verstand hebben van grafische dingen. Het is namelijk geen programmeertechnische vraag (ondanks dat ik het in Delphi maak), het heeft volgens mij meer te maken met W&G. Ik hoop dat jullie begrijpen wat ik bedoel !

[rollebol]

Je kleuren zijn nu gesorteerd op RGB-waarde. Wellicht maak je een goeie kans als je het sorteert op HSB-waarde. In de search (en anders in de search zeker) is wel te vinden hoe je dat omrekent.

HSB = Hue, saturation, brightness. Je kan ook nog sorteren op YUV, dit is wat de televisie gebruikt en gaat uit van een verloop van (ik geloof) geelheid, brightness en eh, nog iets.

RGB to YUV Conversion
Y = (0.257 * r) + (0.504 * g) + (0.098 * bb) + 16
Cr = V = (0.439 * r) - (0.368 * g) - (0.071 * b) + 128
Cb = U = -(0.148 * r) - (0.291 * g) + (0.439 * b) + 128

YUV to RGB Conversion
B = 1.164(Y - 16) + 2.018(U - 128)
G = 1.164(Y - 16) - 0.813(V - 128) - 0.391(U - 128)
R = 1.164(Y - 16) + 1.596(V - 128)

(bron)

[ Voor 65% gewijzigd door rollebol op 09-07-2003 22:33 . Reden: HSB en YUV ]

[Wortelsoep]

Hmmm, wat je misschien zou kunnen doen is iedere letter/cijfer een bepaalde score geven (0 = 0, 3=1, 6=2, 9=3, C=4, F=5 bijvoorbeeld). Ik *denk* dat je dan aan de hand van die score kan bepalen welke kleur het donkerste is. Maar ik heb er niet al te veel verstand van hoor dus ik kan me vergissen.

[crisp]

Ik heb wel een scriptje liggen dat deze verdeling gebruikt:



geen idee wat voor verdeling dat is eigenlijk; heb ooit de rekenmethode daarvoor gevonden en gebruik 'm sindsdien erg vaak.

[Super_ik]

kun je nie:

code:

000000
000033
003300
330000
330033
333300
333333
333333
............
enz...

doen?

[jvo]

Ja, de oplossing lijkt mij de conversie naar hsb. Yuv lijkt me lastig. Bij hsb kan je dan een dimensie toekennen aan de hue en de andere dimensie aan saturation en brightness.

Het is inderdaad te bot om te zeggen dat ze alleen 0, 3, 6, 9, C en F mogen bevatten. Als je zegt dat het om paren van 0, 3, 6, 9, C en F gaat, dan klopt het wel

[alienfruit]

Hier een stukje pseudo code als je html kleur als invoer hebt.

code:

rode = htmlkleur bitshiften naar 16
hou een waarde over die:
groen = htmlkleur bitshiften naar 8
wat je over houd is blauw

max_value = max( rode, max( groen, blauw ) )
min_value= max( rode, max( groen, blauw ) )

brightness = max * 100 / 255;

saturation krijg je dan door:

saturation = 100 * ( max - min ) / max;

Als je deze waardes hebt kun je die HSB krijgen door:

if ( ( ( max - red ) / ( max - mim ) ) == max ) {
   hue = ( max - blauwe ) / ( max - min ) - ( max - groene ) / ( max - min );
} else if ( groene == max ) {
   hue =  ( 2 + ( ( max - rode ) / ( max - min ) ) + ( max - blauwe ) / ( max - min ) );
} else if ( groene == max ) {
   hue =  ( 4 + ( ( max - groen ) / ( max - min ) ) + ( ( max - rode ) / ( max - min ) ) );
}

hue = hue * 60 + 360;

Ik weet dat het brakek code is maar moet wel kloppen volgens mij.

[ Voor 34% gewijzigd door alienfruit op 09-07-2003 22:45 ]

[TheLunatic]

Wow, veel antwoorden zo snel ineens ! Ik ga er morgen mee aan de slag, vind het er nu iets te laat voor om er op m'n gemak voor te gaan zitten Ik begin met de oplossing van rollebol, die is makkelijk uit te voeren. Werkt dat niet wil ik de manier van alienfruit hierboven gaan proberen, die in pseudocode, maar die ziet er op het eerste oog ingewikkeld uit (k weet ook niet wat bitschiften is ?).

Crisp, jou kleurindeling ziet er goed uit, hoe heb je dat gemaakt ?

[crisp]

TheLunatic schreef op 09 July 2003 @ 23:37:
[...]
Crisp, jou kleurindeling ziet er goed uit, hoe heb je dat gemaakt ?

zoals gezegd een scriptje wat ik ooit gevonden heb en verbouwd.
In het kort; vul 3 arrays:

JavaScript:

var total = 6 * 255 + 127;

var arrR = new Array(total);
var arrG = new Array(total);
var arrB = new Array(total);

for (var i=0; i<256; i++) {

  var j = Math.round(i/2);

  arrR[i] = 255;
  arrR[2*255-i] = i;
  arrR[i+2*255] = 0;
  arrR[i+3*255] = 0;
  arrR[i+4*255] = i;
  arrR[6*255-i] = 255;
  arrR[j+6*255] = j;

  arrG[i] = i;
  arrG[i+255] = 255;
  arrG[i+2*255] = 255;
  arrG[4*255-i] = i;
  arrG[i+4*255] = 0;
  arrG[i+5*255] = 0;
  arrG[j+6*255] = j;

  arrB[i] = 0;
  arrB[i+255] = 0;
  arrB[i+2*255] = i;
  arrB[i+3*255] = 255;
  arrB[i+4*255] = 255;
  arrB[6*255-i] = i;
  arrB[j+6*255] = j;

}

nu bepaal ik aan de hand van de muispositie de kleur (kan je dus ook omdraaien om in een grid de kleur per blokje te bepalen; houdt dus geen rekening met websafe oid):

JavaScript:

var theWidth = 192;
var theHeight = 192;
var color = '#ffffff';

var hexChars = '0123456789abcdef';

function Dec2Hex(Dec) {
  var a = Dec % 16;
  var b = (Dec - a)/16;
  hex = '' + hexChars.charAt(b) + hexChars.charAt(a);
  return hex;
}

function getColor(e) {

  // calculate color using mousecursor position

  if (!e) e = event;

  var mouseX = e.clientX;
  var mouseY = e.clientY;

  if (mouseX < 1) mouseX = 1;
  else if (mouseX > theWidth) mouseX = theWidth;
  if (mouseY < 1) mouseY = 1;
  else if (mouseY > theHeight) mouseY = theHeight;

  var adjX = Math.round(mouseX * (total/theWidth));
  var Ydiff = Math.round(mouseY * (2*255/(theHeight+1)) - 255);

  var R = arrR[adjX] - Ydiff;
    if (R < 0) R = 0;
    else if (R > 255 || isNaN(R)) R=255;
  var G = arrG[adjX] - Ydiff;
    if (G < 0) G = 0;
    else if (G > 255 || isNaN(G)) G=255;
  var B = arrB[adjX] - Ydiff;
    if (B < 0) B = 0;
    else if (B > 255 || isNaN(B)) B=255;

  color = '#' + Dec2Hex(R) + Dec2Hex(G) + Dec2Hex(B);

}

[ Voor 13% gewijzigd door crisp op 10-07-2003 00:03 ]

[TheLunatic]

Wat ik me nog even afvraag, als ik die YUV conversion doe... waar moet ik dan op sorteren ? Wat ik nu heb gedaan is een array gevuld met de YUV waarden van de kleuren. Dus Y, U en V apart. En ook een totaal. Vervolgens heb ik de array gesorteerd op dat totaal omdat ik niet weet hoe ik het anders zou moeten doen. Maar als ik dat doe komt er nog geen 'logische' kleurenordening uit.

[Verwijderd]

je hebt altijd een probleem omdat je 3 variabelen hebt in je kleuren, dus eigenlijk zou een 3d representatie het beste zijn. Je hebt dus een kubus met kleurtjes erin. Wat mij het handigste lijkt is die kubus in plakjes zagen en dan die naast elkaar zetten. Dan krijg je dus voor elke R waarde de G en B waarde uitgezet. Stel ik heb voor elke kleur de waarde 1 t/m 3 dan krijg je het volgende:

code:

111 112 113     211 212 213    311 312 313
121 122 123     221 222 223    321 322 323
131 132 133     231 232 233    331 332 333

Alleen heb je dan nog niet echt een intuitief pallet. Wat ik zou doen is toch naar hsb gaan en dan voor elke h (kleurtint) de s en b uitzetten.

wat je vaak in kleurenkiezers (zeg maar de standaard photoshop) is aan de zijkant de hue uitgezet en dan daarnaast de bijbehorende doorsnede (s,b) van de hsb kubus

[ Voor 11% gewijzigd door Verwijderd op 10-07-2003 16:13 ]