Easiest way to get the amount of color used?

Post reply
0 favourites
  • 7 posts
From the Asset Store
Color Flow
$5 USD
Color all tiles with the same color in 22 moves or less!
01smile's avatar
01smile

  • Hey there!

    For my drawing game I want to get the amount of ink used of each color to draw the picture.

    Therefore, after the picture is drawn I take a snapshot of it and run a loop_x and loop_y with the expressions redat(loop_x,loop_y), greenat(loop_x,loop_y), blueat(loop_x,loop_y).

    For the basic colors it is pretty easy. Let's assume the picture was filled with rgbEx(100,0,0). Then the amount of red ink used would be DrawingCanvas.width * DrawingCanvas.height. Because every pixel inside the DrawingCanvas uses only red.

    But I have a hard time figuring out a formula for mixed colors like rgbEx(77,35,68). I need help finding a formula that evaluates the values in relation to each other.

    For example: If the color values of rgbEx are the same, if they are above 50 the ink used is white, if below the ink used is black. Then there probably needs to be a variance of 5-10%. For example here rgbEx(100,97,98) the values are not the same but the color is still white.

    Some basic rules I must fulfill:

    - The amount of red ink used for rgbEx(100,0,0) must be the same as rgbEx(40,0,0) or the players would never draw in bright colors if it costs them more ink

    - black and white need to be separate ink colors too or it would be free of ink to draw black and the most expensive to draw white (or leave white spaces)

    It was pretty hard to explain and I hope you understand what I'm trying to do here. If you have questions feel free to ask. :D

    Maybe someone has a smart solution or an expression I didn't know.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Have you considered just storing the colors used for each session in a temp array or dictionary and looping with those criteria?

  • My main problem for now is the math behind it. Finding a suitable formula that can calculate the amount of color used, also considering black and white. The dictionary/array may help with performance later.

    Edit:

    Thats what I have so far:

    I'm not sure yet if that is correct.

  • I'm still having no luck.

    That's the updated version:

    What it should do:

    - Loop through every pixel of the DrawingCanvas

    - Store the pixels rgb value in the temporary variables red, green and blue

    - Then check if these values are within +-5% from another (means, if the color is black-ish, gray-ish or white-ish)

    - If so, check if (red+green+blue)/3 is above 50 (= white_ink +1) or below (= black_ink +1)

    - If the color is not black, gray or white their color proportions will be calculated:

    red_ink will be increased by: red/(red+green+blue)

    green_ink will be increased by: green/(red+green+blue)

    blue_ink will be increased by: blue/(red+green+blue)

    For example rgbEx(100,0,100), which is purple, will increase red and blue by 0.5 each.

    So, but what it actually does:

    - The white color is count correctly if I'm not wrong (if I fill the 800*800 DrawingCanvas with white its about over half a million white pixels)

    - Black is count very weird. If I draw a long white line it will increase the white_ink by about 200-300. If I do it with black color it is only increased by 1-5. Sometimes even decreased (?!).

    - The colored pixels will not be count at all. In the debug mode NaN will be displayed behind them

    .

    What am I doing wrong here? Any suggestions please? :D

    Thank you in advance <3

  • I played around with this a bit.

    How many colors does the user get to choose from?

    And are you checking this once the user is done with a color, or at the end?

    I ended up using a 3d array (RGB and not storing Alpha), then ran a function to get the count of colors. Then used an AND statement to tell what color (in a range). It's very labor intensive to run that for anything over 500x500 pixels.

    If you could figure out how to decipher the drawingcanvas.colorvalue that might be a way to solve your issue but I couldn't figure that out. (Would eliminate the need for an array, which was very clunky)

    Or if you limited the color pallet and could key off the exact value stored (this would be much easier but not as nice for the user experience).

  • First, thank you very much for trying to help me! Very appreciated.

    I am running this function only once and at the end of the drawing. Because as you say it is processing intense. Good idea, I might reduce the size of the DrawingCanvas to 500x500 or even 400x400.

    The user will have all sorts of colors. Maybe I will even add a color picker tool.

    I also thought about storyng the picked colors rgb values and then count the colored pixels on the fly.

    But I'm not sure how to do that. I could use getred(mouse.x,mouse.y) etc., but I don't know what to do if the brush is not 1, but 10 pixels wide. Also it would be complicated if I implement a paint bucket / fill tool.

    I would like to know what I did wrong with my events. Maybe someone has an idea.

  • The reason I used the array was to see what the DC.snapshot"color"at was retrieving.

    Your using 50 as your lower bound, but unless I'm mistaken, the number your getting is a 1-100 color scale (your 50 is likely the equivalent of 127.5 on the 255 scale).

    I didn't run your math, on the +/- to see if that's returning correctly (as in is it picking up 100,0,0 and so is 100,11,11 etc. as red, I figured you verified all that.)

    I'll bow out and perhaps someone else has a clue. Good luck!

Post reply
  • 7 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)