Get RGB values from from a color picker

[Dan Ebberts]

I’m confused but curious. Where are you planning on applying this expression?

Dan

[Christian Magadan]

If any part of my description is confusing, let me know. It’s a bit difficult to explain what I’m trying to do.

This is meant to be an end credit sequence, so there is a composition that will have the scrolling text/graphics, and then the layers on top of that will be used to create this pixel effect.

This is what I have in my composition right now:

3 shape layers (One represents the red node, green node, and blue node inside of a pixel)
A composition below it where I will put the scrolling text/graphics that will eventually become pixelated. (Let’s call this the “Main Content” layer)

Lets say that there is a solid green color underneath one of the pixels. In my head, this is how it should work:

Each of the shape layers has a slider control on it that will retain a numerical value. The expression on the slider control looks at the location of the shape layer and uses the sampleImage() expression to see the color value of the “Main content” layer beneath it. But instead of returning a specific color, I’m trying to figure out how to get the separated RGB value from the layer. So since in this example, the color beneath the pixel is solid green, the shape layer representing the red node will return a value of 0, the shape layer for the green node will return a value of 255, and then the shape layer for blue will return a value of 0. So when there is a solid green color underneath the pixel, only the green pixel should be set to 100% opacity, and the other pixels should be off. So I could have an expression on the opacity of the green pixel to look at the slider control value (0-255) and convert it to a 0%-100% number that the opacity can use.

[Dan Ebberts]

OK, so say you have the sampleImage() value of a particular pixel stored in variable s. Then

s[0]*100

would give you a 0 to 100 range for the red level (which could be applied to opacity).

green would be:

s[1]*100

and blue would be:

s[2]*100

Does that help?

Dan

[Christian Magadan]

No, not exactly. The main thing I’m having trouble with is getting the individual values for Red, Green, and Blue onto separate slider controls using expressions. I only want the shape layer that is supposed to be the red pixel to look the red value.

All colors have a hex code, but then they are also written as:

R: 145
G: 47
B:34

Is there an expression that will look at a point and only give me the red value or only the green value or only the blue value?

[Christian Magadan]

Or is there another type of controller that I can use that will store all 3 values separately so that I can use another expression to use them?

[Alex Printz]

I built something similar to this once that worked quite well. I don’t know how or why you would use sampleImage to accomplish what you’re trying to do, but this is how I did my way:

First, I made a single ‘pixel’ composition made up of 9×9 pixels and 3 frames long, and inside there I had three 2×8 white solids for each R,G,B with a single pixel space around them on all sides. I adjusted the solids so each was visible for only one frame.

Then I made a ‘screen matte’ composition that was 320×240 of the ‘pixel’ compositions laid out in a grid (so 2880×2160) with a black solid beneath them. By scrubbing through the three frames, I could get a frame where only R, G, or B were white for the whole of the monitor.

Then I made another comp called ‘screen footage’ at 960×720 pixels (320×240 X 3). I placed what I wanted on the screen inside here, scaled the footage to the size of the composition, and applied a mosaic effect to it at 320×240.

Then I made a final comp called ‘screen assembly’, and inside there placed the ‘screen matte’ and ‘screen footage’ comps like this:

– Red Matte layer (time remapped to red pixel times)
– Red Footage (effect: set channel, keep only red channel visible from source, none for other color channels; luma track matte mode, blend mode set to add)
– Green Matte layer (time remapped to green pixel times)
– Green Footage (same as red but blue channel)
– Blue Matte layer (time remapped to blue pixel times)
– Blue Footage (same as red but blue channel)
– Black Solid

Place ‘screen assembly’ comp into a regular composition and scale it down to whatever size you need, blur, bloom, etc.)

Alex Printz
Mograph Designer

[Dan Ebberts]

>Or is there another type of controller that I can use that will store all 3 values separately…

I guess you could use a 3D Point Control with an expression like this:

s = sampleImage(anchorPoint,[.5,.5]);
r = Math.round(s[0]*255);
g = Math.round(s[1]*255);
b = Math.round(s[2]*255);
[r,g,b]

but I’m not sure why you would want the color channel values converted to a 0-255 range when a color expression will need them in the 0-1 range provided by sampleImage() and an opacity expression will need them in a 0-100 range.

Dan