League of Extraordinary FoundryVTT Developers•4y ago

Colour stuff

here let's make a thread

42 Replies

public Color generateRandomColor(Color mix) {
    Random random = new Random();
    int red = random.nextInt(256);
    int green = random.nextInt(256);
    int blue = random.nextInt(256);

    // mix the color
    if (mix != null) {
        red = (red + mix.getRed()) / 2;
        green = (green + mix.getGreen()) / 2;
        blue = (blue + mix.getBlue()) / 2;
    }

    Color color = new Color(red, green, blue);
    return color;
}

public Color generateRandomColor(Color mix) {
    Random random = new Random();
    int red = random.nextInt(256);
    int green = random.nextInt(256);
    int blue = random.nextInt(256);

    // mix the color
    if (mix != null) {
        red = (red + mix.getRed()) / 2;
        green = (green + mix.getGreen()) / 2;
        blue = (blue + mix.getBlue()) / 2;
    }

    Color color = new Color(red, green, blue);
    return color;
}

Daniel Thorp•4y ago

The part I don't get is getRed, getGreen, getBlue Are those methods of the Color class?

LukeAbbyOP•4y ago

random.nextInt(256) is a 1:1 translation of Math.floor(Math.random() * 256) which makes a number from 0-255. I'm 99% sure that mix.getXYZ() gets the red/green/blue in the form of 0-255. The Color type is irrelevant here. yeah they should be

Daniel Thorp•4y ago

function generateRandomColor(mix) {
    let red =  Math.floor(Math.random() * 256);
    let green =  Math.floor(Math.random() * 256);
    let blue =  Math.floor(Math.random() * 256);

    // mix the color
    if (mix != null) {
        red = (red + mix[0]) / 2;
        green = (green + mix[1]) / 2;
        blue = (blue + mix[2]) / 2;
    }

    let color = [red, green, blue];
    return color;
}

function generateRandomColor(mix) {
    let red =  Math.floor(Math.random() * 256);
    let green =  Math.floor(Math.random() * 256);
    let blue =  Math.floor(Math.random() * 256);

    // mix the color
    if (mix != null) {
        red = (red + mix[0]) / 2;
        green = (green + mix[1]) / 2;
        blue = (blue + mix[2]) / 2;
    }

    let color = [red, green, blue];
    return color;
}

LukeAbbyOP•4y ago

Yup I was typing it out and got this:

const sourceColor = [255, 255, 255]; // This is just white and will result in pastel colourations you can mess with this to get better results
function generateRandomColor() {
    const red = Math.floor((Math.random() * 256 + sourceColor[0]) / 2)
    const green = Math.floor((Math.random() * 256 + sourceColor[1]) / 2)
    const blue = Math.floor((Math.random() * 256 + sourceColor[2]) / 2);

    return [red, green, blue];
}

const sourceColor = [255, 255, 255]; // This is just white and will result in pastel colourations you can mess with this to get better results
function generateRandomColor() {
    const red = Math.floor((Math.random() * 256 + sourceColor[0]) / 2)
    const green = Math.floor((Math.random() * 256 + sourceColor[1]) / 2)
    const blue = Math.floor((Math.random() * 256 + sourceColor[2]) / 2);

    return [red, green, blue];
}

I just merged the conditional with the assignments

Daniel Thorp•4y ago

They are the same

LukeAbbyOP•4y ago

yeah they are well not strictly as you have a typo mix.[2] but that's pedantic

Daniel Thorp•4y ago

not anymore 😜

LukeAbbyOP•4y ago

oh and you do need to use math.floor twice

        red = Math.floor((red + mix[0]) / 2);
        green = Math.floor((green + mix[1]) / 2);
        blue = Math.floor((blue + mix[2]) / 2);

        red = Math.floor((red + mix[0]) / 2);
        green = Math.floor((green + mix[1]) / 2);
        blue = Math.floor((blue + mix[2]) / 2);

cuz if you get a colour like red = 5 and mix[0] = 2 then (5 + 2) / 2 = 3.5 and you want an integer colour as it turns out Java's division operator on integers automatically floors the result e.g. in JS 5 / 2 = 2.5 but in Java 5 / 2 = 2 while 5.0 / 2.0 = 2.5

Daniel Thorp•4y ago

@lukeabby https://codepen.io/arcanist/pen/jOmxvPj

LukeAbbyOP•4y ago

is that a satisfying result?

Daniel Thorp•4y ago

The colors are a bit muted. I also feel like the top and bottom should be more different

Daniel Thorp•4y ago

Daniel Thorp•4y ago

You can't even see a gradient on this one

LukeAbbyOP•4y ago

you could try something like passing in sourceColor and something like:

  const top = generateRandomColor([200, 200, 200]);
  const bottom = generateRandomColor([0, 0, 0]);

  const top = generateRandomColor([200, 200, 200]);
  const bottom = generateRandomColor([0, 0, 0]);

this will make top brighter and bottom as dark as it was before (or generally top brighter and bottom darker) (that's not a guarantee) (top could generate like 0, 0, 0 and bottom could generate 360, 360, 360)

Daniel Thorp•4y ago

lol

LukeAbbyOP•4y ago

lol

Daniel Thorp•4y ago

I was going to say. I'm not a fan of grey, black or white

LukeAbbyOP•4y ago

I suppose it is "mostly accurate", lemme guess it was just a random gradient and the ML algorithms on Discord freaked out

Daniel Thorp•4y ago

Yeah It still says that if I crop

Daniel Thorp•4y ago

LukeAbbyOP•4y ago

lol post on some external site and send the link-- ah

Daniel Thorp•4y ago

Oh there it worked

LukeAbbyOP•4y ago

is that a better result? what's better for your application is fully within your opinion haha

Daniel Thorp•4y ago

No, it's too dark

LukeAbbyOP•4y ago

tinker around with the numbers a bit instead of [0, 0, 0] maybe [25, 25, 25] I'm just pulling numbers out of a hat

Daniel Thorp•4y ago

It's inevitably going to spit out greys unless I filter red, green, blue being too similar

LukeAbbyOP•4y ago

it takes a very informal, 'about 10 clicks' for me to get a gray you don't want grays at all? grays showing up is what happens if it's truly random you can revert to your algorithm if you'd like because "it's working" I hadn't realised you didn't want grays I suppose

Daniel Thorp•4y ago

I only want colors that are aesthetically pleasing and I think bright, but not neon colors are a better option for that. Which is why I locked saturation to 80% and luminosity to 40% before

LukeAbbyOP•4y ago

tbf you can have grays with those but yes you should consider reverting to your previous algorithm or adapting these ones to do similar I hadn't realised this component of the filtering was necessary, my bad

Daniel Thorp•4y ago

No worries, thanks for exploring this with me 🙂

LukeAbbyOP•4y ago

you're welcome

zeel•4y ago

What the heck did it block...

LukeAbbyOP•4y ago

ML for ya

Daniel Thorp•4y ago

A larger version of this image

zeel•4y ago

Lol, that simple gradient image? What could it have possibly thought that was.

LukeAbbyOP•4y ago

I mean ML has also blocked pictures of dunes for being explicit imagery in real life also ML to recognise objects has been tricked to believe something is like a bird with 100% certainty by a bunch of grayscale pixels that look like random noise

zeel•4y ago

Yeah, that's the weird thing. It can be very good at identifying that something is a bird, but not so great at knowing that it's not a bird.

LukeAbbyOP•4y ago

yeah ML working and failing is going to be a mystery for a long while at the least I'd expect it's like when you make a very silly mistake and don't know why but more computer-y

zeel•4y ago

Yup The best part of ML is that we don't actually understand how it works 😁

LukeAbbyOP•4y ago

lol yeah the model I like is we, the coders, know how to train how to score models but we don't really know how we even get out models that do the right or wrong thing because the way we train is just a pile of linear algebra

Gaming

Programming

Colour stuff