Guild Wars 2

I think having this return an array of colours, with an explicit ID property, thus mimicking the events API, would make more sense. It’s currently useful as a map but we don’t have easy access to the keys. It’s easier to construct a map from an array on the client side than extracting all the IDs as keys.

C++. Working around it is easy enough, not having to is just easier. This will require special handling of node names as they now contain information.

Hey Cliff,

I thought the colors might’ve represented a HSB color with normalized values between 0.0 -> 1.0, but no. Some brightness values are less than 0.0; some hue values are greater than 1.0.

Question #1: How should we be interpreting the color numbers (i.e., hue might be a value in degrees out of 360?)

Question #2: This could be outside the scope of the API, but in regards the “lightness” and “contrast” values, I found this page describing a calculation with how these two values might be used. Is this what you meant by color shifting in the API docs?

Thanks

Edit: I really, really tried to find this all out on the web, but the inconsistency with the number just didn’t make sense. thanks for any info you can provide.

Cliff,

We’re getting closer. Thanks for the names; however, some values are still not consistent with what to expect.

For instance, Abyss has values greater than 255

473: {
    name: "Abyss"
        -cloth: {
            brightness: "110"
            contrast: "128"
            hue: "275"
            saturation: "3"
            lightness: "140"
        }
}

Killer Rhino.6794:

Cliff,

We’re getting closer. Thanks for the names; however, some values are still not consistent with what to expect.

For instance, Abyss has values greater than 255

473: {
    name: "Abyss"
        -cloth: {
            brightness: "110"
            contrast: "128"
            hue: "275"
            saturation: "3"
            lightness: "140"
        }
}

As far as i understand HSL, it’s a cylindrical color model where hue represents the angle around the vertical axis (0-360 degrees) while saturation and lightness are values between 0 and 1.

http://en.wikipedia.org/wiki/HSL_and_HSV

Cliff Spradlin.3512:

http://dragonwatch.net/fancyemblemexperiment/ does most of this math already, using pixastic. The only thing it’s missing is brightness/contrast, which seem to be something that pixastic also supports.

It does, yeah. I dug up the non-compiled sources for my little experiment that I did almost a year ago, and it seems I only bothered with hue and value, using 160,32,32 as a base

The way I did it on that site is pick the most common color on those masks and the individual colors from a screenshot of the in game guild emblem designer, then force that through a Python script to convert RGB to HSV, get the saturation and value difference between the two and dump it all into a HSV array.

The JS does something like this:

	var bg = new Image();
	bg.onload = function() {Pixastic.process(bg, "hsl", {hue:hsv[bgi].h,saturation:hsv[bgi].s,lightness:hsv[bgi].v});}
	$('#emblem #backg *:first-child').replaceWith(bg);
	bg.src='images/backgrounds/'+background+'.png';

Where hsv is an array that contains hue, staturation and value.. values, bgi is whatever index I gave that color in the array, and background in this case the file name for the emblem background.

I honestly don’t remember how or why I did some things the way I did, and the whole thing was just a random experiment quickly thrown together to help decide on an emblem for the upcoming launch, but I’m sure people will figure it out, even if it has to be via trial and error like I did it :P

You can find Pixastic here, btw.

zeeZ.5713:

var bg = new Image();
bg.onload = function()
{
Pixastic.process(bg, “hsl”, {hue:hsv[bgi].h,saturation:hsv[bgi].s,lightness:hsv[bgi].v});
}
$(‘#emblem #backg *:first-child’).replaceWith(bg);
bg.src=‘images/backgrounds/’+background+’.png’;

so it should be possible to add something like this before the other process?

Pixastic.process(bg, “brightness”, {brightness:50,contrast:0.5});

Lets test some things ^^

El Do.9467:

so it should be possible to add something like this before the other process?

Pixastic.process(bg, “brightness”, {brightness:50,contrast:0.5});

Lets test some things ^^

Yes. Though I have found that I have to do this in order to chain them:

	Pixastic.process(Pixastic.process(img, "brightness", bright_opts), "hsl", hsl_opts);

Not sure if you need to use legacy for brightness.

Thanks for the update, Cliff.

So, for the first thing, I’m assuming that all values, except for hue, is within a range between 0-255 (even though the prevalence of 128 throughout suggests that it might be 1-256).

Second, I’m still getting weird results for many colors, but I suspect it still might be my math.

I’ve been using a demo I made to try to work through all of this. The band of colors represents the default, cloth, leather, and metal colors, respectively.

I tried for several hours now but I’m unable to generate a RGB color value from the API data in Java

could you please explain how to get to rgb #000 from these values? It think this is the easiest example that we can find:

“name”: “Black”,
“default”: {
“brightness”: “128”,
“contrast”: “128”,
“hue”: “0”,
“saturation”: “128”,
“lightness”: “128”
},

I have something crazy like this

Brightness/contrast for each red, green and blue:

	(base_rgb.r + cloth.brightness - default.brightness) * ((cloth.contrast - default.contrast) / 128)

H/S/L:

	h: (cloth.hue - color.h) % 360
	s: (cloth.saturation - color.s) / 255
	l: (cloth.lightness - color.l) / 255

With base_rgb being 128,26,26 and color being the result of the first transformation

Of course I could be way off

Goddchen.4958:

could you please explain how to get to rgb #000 from these values? It think this is the easiest example that we can find:

“name”: “Black”,
“default”: {
“brightness”: “128”,
“contrast”: “128”,
“hue”: “0”,
“saturation”: “128”,
“lightness”: “128”
},

I somehow get the feeling that “default” refers to the base color Cliff mentioned above since these are the same values for a lot of colors.

Cliff Spradlin.3512:

Default is the default material. There is not necessarily a material-specific color defined for a dye. In this case, the default is used.

Does that also mean that the default color is not always specified? That would explain this:

126: {
  name: "Hot Pink",
    default: {
    brightness: "128",
    contrast: "128",
    hue: "0",
    saturation: "128",
    lightness: "128"
  },
...

…or did i get you completely wrong?

Great, thanks!

okay, with these two, now you totally got me confused. It is black and white, with the exact same values?

{"name":“White”,
“default”:{
“brightness”:“128”,
“contrast”:“128”,
“hue”:“0”,
“saturation”:“128”,
“lightness”:"128"}

{"name":“Black”,
default":{
“brightness”:“128”,
“contrast”:“128”,
“hue”:“0”,
“saturation”:“128”,
“lightness”:"128"}

Did you read the last 4 postings in this thread? O.o

Thanks for the quick update

btw. it’s sunday afternoon and you’re at work :o now go and enjoy your sunday and let us do the maths

as soon as anyone can generate a real rgb color from the API data, some sample code would really be appreciated. I can calculate how much I want, with an API “hue” value of 20, I never get even near a value of ~60 to generate a yellow color

Looks like the most recent API changes have gotten me a lot closer. Thanks for all the effort, Cliff.

How exactly are you supposed to do the HSL shift in step 4?
Say I have 0.75 Saturation after applying brightness and contrast, and the API says I need to shift by 0.41? What should the results be?

Ok, so let’s see if I got it.

I’m using Hot Pink on cloth.

“cloth”: {
“brightness”: 14,
“contrast”: 1.21094,
“hue”: 340,
“saturation”: 0.820313,
“lightness”: 1.44531
},

1. Start with: RGB 128,26,26
2. Add Brightness: RGB 142,40,40
3. Factor in contrast: RGB 144,21,21
4. Convert to HSL: 0° 75% 32%
5. Apply Shifts: 0°+320°=320°, 0.75*0.82 = 0.615, 0.32*1.44 = 0.46 → HSL 320° 61.5% 46%
6. Convert back to RGB: 189,45,141
7. Hex = #BD2D8D

Any obvious mistakes?

Think.8042:

Ok, so let’s see if I got it.

I’m using Hot Pink on cloth.

“cloth”: {
“brightness”: 14,
“contrast”: 1.21094,
“hue”: 340,
“saturation”: 0.820313,
“lightness”: 1.44531
},

1. Start with: RGB 128,26,26
2. Add Brightness: RGB 142,40,40
3. Factor in contrast: RGB 144,21,21
4. Convert to HSL: 0° 75% 32%
5. Apply Shifts: 0°+320°=320°, 0.75*0.82 = 0.615, 0.32*1.44 = 0.46 -> HSL 320° 61.5% 46%
6. Convert back to RGB: 189,45,141
7. Hex = #BD2D8D

Any obvious mistakes?

Nice, Think. I just posted a full thread on how to use the Color API, copying your example as well.

You can see it posted here

Think.8042:

1. Convert back to RGB: 189,45,141
2. Hex = #BD2D8D

Any obvious mistakes?

Hmm, i don’t know if you’re or i’m wrong…

I get RGB 193, 46, 95 with the same input values… and i don’t know where the error is. It’s pink anyway ^.^

I did some rounding (because I’m even too lazy to type), and my resulting color is a little too dark for “hot pink”, but we’ll need your other steps to verify.

If my HSL / RGB conversion is wrong, blame them It’s the most calculation-intensive part anyways.

The conversion might be worth doing a second post on the other thread with some examples in different languages. Python for example seems to have a standard lib for converting, while many other languages need to implement the algorithm themselves. It can be found on Wikipedia or for example here (pseudo-code).

Have a look at this: https://github.com/mjijackson/mjijackson.github.com/blob/master/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript.txt

oh, and this one:
http://www.rapidtables.com/convert/color/hsl-to-rgb.htm

Think.8042:

“hue”: 340,

…

1. Apply Shifts: 0°+320°=320°, 0.75*0.82 = 0.615, 0.32*1.44 = 0.46 -> HSL 320° 61.5% 46%

I see a copy error: the hue shift should be 340, not 320.

I rolled my own Perl methods based on smiley’s PHP functions, and I’m keeping everything as floats throughout. My unrounded (to 5 decimals) result is 193.46350, 47.02226, 95.83601, which is similar to what smiley posted above.

Think.8042:

The conversion might be worth doing a second post on the other thread with some examples in different languages. Python for example seems to have a standard lib for converting, while many other languages need to implement the algorithm themselves.

If you’re talking about colorsys then.. meh. Maybe I’m doing something wrong here, but the result’s off.

http://codepad.org/9jftbuvW

Hm, annoying. I was going off this SO post

Ish, thanks for noticing, it was a little late yesterday. I’m doing more precise calculations now and seeing the same things smiley got.

Never mind that…

http://codepad.org/tvfy3vnz

Turns out they represent hue as something between 0.0 and 1.0 for some reason…

Let’s say I develop a web app that shows all of the dye colors accessible in the game. In the future when OAuth support is implemented, will a logged-in player be able to see their favorites and unlocked dye colors for each of their characters?

Cliff, do you sleep at all? It’s like 2am.

Additional request: since “Hot Pink” was used as an example all over, I just noticed that the API returns two colors with that name. I suppose one of them (most likely #1199) is the armor dye unlock, and the other one (#128) is for char creation or something. Any chance we could have their source flagged. I suppose this is a property of the unlock items/char creation data and not something the colors know about themselves, but it would be kind of nice to be able to distinguish.

Think.8042:

Hm, annoying. I was going off this SO post

btw. the answer to this post refers to the [url=‘https://github.com/mjijackson/mjijackson.github.com/blob/master/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript.txt’
]javascript[/url] i mentioned above – this code works great!

€: kitten bbcode? :o

There are eight different blacks and other duplicated colors in the data. How can I figure out which colors are used in the game?

BruderTack.8429:

There are eight different blacks and other duplicated colors in the data. How can I figure out which colors are used in the game?

Copied my response from another thread

I observed that most (perhaps all) colors that have cloth, leather and metal material values represent dyes. For instance, there are many “Black” colors, but only one “Abyss” color. [The Abyss has cloth, leather and metal materials defined].

Furthermore, only one of the “Black” colors has material values for cloth, leather, and metal. I suspect that is our “Black” dye.

The rest are colors for various other things, like skin, and tattoo colors (to name a few). I agree, it might be helpful to add an intent field for the purpose of the color in game.

Looking at smiley’s listing, it appears that colors 1222-1230 are the hair colors exclusive to the Self-Style Hair Kit, and colors 1231-1242 are the dyes from the Flame and Frost Dye Kits. The hair colors only have a default material, while the dyes all have cloth/leather/metal. This definitely supports Rhino’s hypothesis.

ERMAHGERD! You added RGB values and made all our efforts obsolete! Q.Q
(thanks, was fun to find out anyway )

Great now I spent one whole hour at Starbucks and drank three whole Choclate Mocca and made a colour conversion code and now you just waltz in here and throw us the rgb bone… you just cost me 12€! To the walk of shame with you :P

Just kidding thanks for the rgb values!