How do I find out color name or value when I tap on any certain portion of screen?

  • Hi Friends,

    Need urgent help. Is it possible to find out color of touched/tap area of finger touch?

    Thanks in advance.

    Regards,

    Mohan

  • You need Canvas plugin - put a small Canvas object under the mouse cursor, paste all layers onto it, then you will be able to read pixel color from the canvas. You can probably do this easier with Javascript, but I can't help you with this.

    construct.net/en/forum/extending-construct-2/addons-29/plugin-canvas-41782

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • You need Canvas plugin - put a small Canvas object under the mouse cursor, paste all layers onto it, then you will be able to read pixel color from the canvas. You can probably do this easier with Javascript, but I can't help you with this.

    https://www.construct.net/en/forum/extending-construct-2/addons-29/plugin-canvas-41782

    Hi Dop, thanks for quick reply, can you please share an example in which I can understand that how to extract color of the pixel(using canvas plugin) touched/tapped, then it will be big help for me. Also I have another curosity, can we do the same using webcam picture and tap on the cheek to find out color of skin? canvas plugin could do that?

    Regards,

    Jatin

  • Set Canvas size to 1x1 pixel, on click/tap position canvas to that point. Then use "Canvas paste object" or "Canvas paste layer", depending on your needs.

    After that you will be able to get rgb values from Canvas expressions: Canvas.redAt(0,0), Canvas.greenAt(0,0), Canvas.blueAt(0,0)

  • Set Canvas size to 1x1 pixel, on click/tap position canvas to that point. Then use "Canvas paste object" or "Canvas paste layer", depending on your needs.

    After that you will be able to get rgb values from Canvas expressions: Canvas.redAt(0,0), Canvas.greenAt(0,0), Canvas.blueAt(0,0)

    I tried something but dont know thats the result. here is my trial capx. Plz help

    vserv-images.s3.amazonaws.com/adsunit/capx/testcolorcopy.capx

  • You installed the wrong plugin. You need Canvas by R0j0hound:

    construct.net/en/forum/extending-construct-2/addons-29/plugin-canvas-41782

  • You installed the wrong plugin. You need Canvas by R0j0hound:

    https://www.construct.net/en/forum/extending-construct-2/addons-29/plugin-canvas-41782

    I updated plugin but same thing. This is new capx

    vserv-images.s3.amazonaws.com/adsunit/capx/testcolorcopy2.capx

  • You didn't replace the Canvas object in the project and you didn't do any of the things I suggested!

    1. Remove Rex's Canvas from the project, better uninstall it completely.

    2. Add R0j0hound's Canvas object to the project, set its size 1x1px

    3.

    Touch On Tap Sprite
    	: Canvas set position to touch.x, touch.y
    	: Canvas paste object Sprite
    	: Text set text to "Red: " & Canvas.redAt(0,0) & " Green: " & Canvas.greenAt(0,0) & " Blue: " & Canvas.blueAt(0,0) 
    
  • You didn't replace the Canvas object in the project and you didn't do any of the things I suggested!

    1. Remove Rex's Canvas from the project, better uninstall it completely.

    2. Add R0j0hound's Canvas object to the project, set its size 1x1px

    3.

    > Touch On Tap Sprite
    	: Canvas set position to touch.x, touch.y
    	: Canvas paste object Sprite
    	: Text set text to "Red: " & Canvas.redAt(0,0) & " Green: " & Canvas.greenAt(0,0) & " Blue: " & Canvas.blueAt(0,0) 
    

    Thank you dop, it worked flawless and i am able get rgb of the tapped pixel now. Is there any way that i should color name also from the rgb? is it even possible to get color name ?

  • Do you mean color name like "blue" or "yellow"? There is no such expression. You will need to write a bunch of events, something like this:

    Compare variable R>200
    Compare variable G<50
    Compare variable B<50
    			 -> Set colorName="Red"
    
    else
    .....
    
  • Do you mean color name like "blue" or "yellow"? There is no such expression. You will need to write a bunch of events, something like this:

    > Compare variable R>200
    Compare variable G<50
    Compare variable B<50
    			 -> Set colorName="Red"
    
    else
    .....
    

    Something similar sort but comparing variable and then naming is tedious job bcz there are millions of combination and color names possible with 3 RGB values. iS there any way to find out the name by comparing to some database or text file? Also, I noticed that color detected on tap is completely wrong on mobile device but little bit accurate on desktop. Is there any way to increase accuracy of the color detected on tap? And I still want to thank you a lot for showing this possible solution. I was in big need of that.

  • It depends on how many colors you need to detect. If you only need to recognize a few basic colors, simple comparison (as in my previous comment) will do. If you need lots of colors, you can find color tables in google, here are a few examples:

    chir.ag/projects/name-that-color

    cloford.com/resources/colours/500col.htm

    Of course, you can't compare the rgb value directly, you need to find the nearest in the database.

    .

    Color detection should work the same way with mouse and touch. Maybe you are placing the Canvas object wrong on tap? Make it bigger than 1px and after reading r g b values fill the Canvas with some bright color, so that you'll see where it is.

  • It depends on how many colors you need to detect. If you only need to recognize a few basic colors, simple comparison (as in my previous comment) will do. If you need lots of colors, you can find color tables in google, here are a few examples:

    http://chir.ag/projects/name-that-color/#6195ED

    https://cloford.com/resources/colours/500col.htm

    Of course, you can't compare the rgb value directly, you need to find the nearest in the database.

    .

    Color detection should work the same way with mouse and touch. Maybe you are placing the Canvas object wrong on tap? Make it bigger than 1px and after reading r g b values fill the Canvas with some bright color, so that you'll see where it is.

    I used the get webcam example from construct 2 and followed the code you guided. On desktop it is quite ok but not accurate on mobile not satisfactorily. You can try it on mobile.

    vserv-images.s3.amazonaws.com/adsunit/webcamcolordetect/trackcolor/index.html

  • Like I said, if Canvas object doesn't detect the color correctly, it likely means that it's positioned wrong. Touch is obviously less accurate than mouse, so maybe you need to enlarge the image to make aiming easier.

    Also make the canvas object visible (larger in size and fill with color) to see where it has landed after the tap.

  • Like I said, if Canvas object doesn't detect the color correctly, it likely means that it's positioned wrong. Touch is obviously less accurate than mouse, so maybe you need to enlarge the image to make aiming easier.

    Also make the canvas object visible (larger in size and fill with color) to see where it has landed after the tap.

    Hi Dop,

    I tried increasing canvas size for accuracy but didnt work though text showing correct rgb detect on tab for extra sprite I m using to show detected color is different one. I have added color fx effect to achieve this. Can you share ur email id so that I can send my capx to you? thanks in advance.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)