Reading Colors From Images



So, recently, I’ve been playing around with making a textured sphere in hopscotch (out of trails). Though my attempts to texture it were not successful, I did realize how to get a color from an image.

I can make a tutorial on how to do this if you guys would like.


  • Get a color from an image! Useful for texturing things… or not? (See why below)
  • Works pretty quickly, you can get the color in approx. a tenth of a second.


  • You actually need 24 specific images to so this. They all need to be the same size, at the same position, etc. if you want it to be fast.
  • This teqnique doesn’t work with clones… @Liza I could make a bug report for this if you want. (This is the main downside for me. This is the reason why I couldn’t make the textured sphere.)

Let me know if you want a tutorial on how to do this, it’s pretty cool.


First reply!!!!!!!!!


What do you mean by getting colours of images?


Like I can find the color of a pixel in an image.


Like an eyedropper? Wow how is that even possible..?


Yes, like an eye dropper


I'm interested in the tutorial. This is really intriguing, yet it seriously seems like a trick to me.


@valgo I have a few free websites that I use...
And then I google search the. #....... and it sayes the RGB


@Valgo I have done this before, I did it a very hard way though. I used Adobe Capture once I took screenshots of characters or images.


I've written code to do this, but I think he's talking about using Hopscotch to determine pixel colors (eye dropper effect) in which case I'm very interested.

I have to admit @Valgo that I can't conceptualize how this is possible in Hopscotch. Only thing I can think of is using a combination of transparency and Set Color to create various color masks with the additional copies of the image. But I don't know how we could detect with Hopscotch code what the masks reveal. Please do explain!


Getting a color of an image in Hopscotch? I would really like to test this out and get to know how this works in detail!


@ThinBuffalo @William04GamerA @Rawrbear I'll get started on the tutorial. Just tagging you to let you know.


Okay, cool! I am excited!


Cool! Thanks. ^^



Okay, so some of you will think it's pretty easy to do image color reading. Like I could just write a simple custom block and make a few values to get a pixel from an image.

Unfortunately, it's not that simple. What you actually need is 24 separate images. Let me explain.

In hopscotch (and programming in general), there are exactly 16,777,216 colors possible. That also happens to be 2^24, or 2 * 2 * 2 * 2 * ... * 2 with 24 2s.

In hopscotch, there's 2 possible states for an object touching another object - touching (1) and not touching (0). So if we have 24 separate images, there's exactly 16,777,216 ways that we can have an object touching or not touching those images.

This means that if we have 24 specific images, we can basically have an image but split into 24. We can also get any pixel we want from the original by set positioning to a certain place in the images, and doing some simple math to get the color.

I will probably write some JavaScript later that allows you to take an image and split it into the 24 images, but I can't right now.

Once you have the 24 images, now you import them into hopscotch.

The JavaScript image splitter I will make later will download the images named things like Red 2, Green 8, and Blue 64.

Once you import the images, write a rule like this for the "Red 1":

And then write one for Red 2:

The numbers that switched from 1 in the first rule to 2 in the second rule will always need to be the number in the name of the image. So if you have "Red 64", you will replace those numbers with 64. Now, once you get to the green images, replace all the Red variables with one named Green. Do the same with the Blue images.

Now, the Red, Green, and Blue variables have the color of the pixel of your image where your object is!

Note: This teqnique will not work unless the object is very small, but can still bump other objects.

Let me know if this is confusing, I'll try to help :slight_smile:


@Valgo Ah, I thought you found a way to read the colors from a single image using only Hopscotch. But now it conceptually makes sense since you're pre-processing the image to create the masks. I should have realized that was your strategy since you said it didn't work with clones (but I wouldn't consider that a bug, it's just that you need 24 different images/masks). Still, it's an interesting idea!

That said, I don't follow the need for the If blocks you illustrated. Since each mask already represents one of the bits, wouldn't you just add the appropriate value (1,2,4,8,16,32,64,128) to appropriate variable (R,G,B) depending on which mask was being touched by the pixel-sized "dropper tip".

I'm trying to think of how this would be useful in a Hopscotch project. Picking a color from a color wheel for an art pad comes to mind (although overkill since there's easier ways). How were you thinking of using this?


This image from may help clarify what we're talking about to more Hops

Each RGB color is represented by 24 bits (8 bits each for red, green, & blue). A bit is just single 0 or 1. Since each bit represents 2 states, the total number of combinations for each color is 2^8 or 2x2x2x2x2x2x2x2 or 256 (values 0 to 255). The 1st bit has the value of 1, the 2nd is 2, the 3rd is 4, and so on thru the 8th bit which is 128. To determine the R,G, or B value you just need to add up the corresponding values for each bit that is state 1.

What Valgo proposed is taking an image and converting it into 24 separate images (called a mask). Each mask would have the pixels colored (the color doesn't matter) if the color in that pixel location requires the given bit. Otherwise the pixel would be set to transparent. In this way, if you then have a When Touching rule in Hopscotch with an object the size of a single pixel then you can figure out the RGB values based on which masks are bumped.


Ohhh that part about the masks/24 images was what I wasn't sure about, thanks @ThinBuffalo! :smiley:

This is really awesome @Valgo!


@Valgo Did you ever try this?

@t1_hopscotch Could you move this into one of the new forum categories. It was a very clever & interesting idea.


I think the reason it wasn’t working was because of a bug with clones and bumping. I can try this again.