Question about Video Grabber.getPixels()

if (vidGrabber.isFrameNew()){

	for (int i=0; i<vidGrabber.getWidth()*vidGrabber.getHeight(); i++){

		ofFloatColor sampleColor(vidGrabber.getPixels()[i*3]/255.f,				// r
								 vidGrabber.getPixels()[i*3+1]/255.f,			// g
								 vidGrabber.getPixels()[i*3+2]/255.f);			// b
		glm::vec3 tmpVec = mainMesh.getVertex(i);
		tmpVec.z = sampleColor.getBrightness() * extrusionAmount;
		mainMesh.setVertex(i, tmpVec);

		mainMesh.setColor(i, sampleColor);

ofFloatColor sampleColor(vidGrabber.getPixels()[i*3]/255.f

I know that this function stores the color of the i-th pixel.

But I don’t know why you multiply i by 3.

And I’m curious why you divide 255.

I think I’m such a beginner…

Pixels in the video are in number vidGrabber.getWidth()*vidGrabber.getHeight() whereas the ofPixels in the videos are in number vidGrabber.getWidth()*vidGrabber.getHeight() * 3 (RGB) or vidGrabber.getWidth()*vidGrabber.getHeight() * 4 (RGBA) etc… (GRAY / other alignements).
And the ofPixels are stored
0 1 2 …

so you have to offset it accordingly, multipling the index you get by 3.

Hope this is clear,



Um… It’s kind of hard.

Can I know what an array means in “vidGrabber.getPixels()[i*3]”?

I don’t understand yet that rgb values are classified according to the numbers in the array.

If i3+1 is 10 and i3+2 is 11, I don’t know how to distinguish g from b.

I know you have to do *3 to offset it.


"vidGrabber.getWidth()*vidGrabber.getHeight() * 3 "

Can i know what it means to get the rgb value by doing this?

I’m sorry I’m a beginner. I’m not sure yet.

Hey @jewel , the documentation describes some of these things you’re wondering about:
ofColor, ofPixels, and ofVideoGrabber::getPixels().

oF has different kinds of colors depending on the type used to hold the value. An ofColor uses an unsigned char type for the red, green, blue (RGB) values. These values can range from 0 to 255. An ofFloatColor uses a float type with values between 0.0 and 1.0 for the RGB values. The pixels from the video grabber are (probably) unsigned chars, so dividing them by 255.0 will convert them to a float between 0.0 and 1.0. Its worth noting that ofFloatPixels and ofFloatImage also use float values for colors.

Hey @jewel , the following code might help clarify things a bit. Note the increment of i += 3. Also, a local ofPixels object is used to reduce the repeated calls to ofVideoGrabber::getPixels().

    ofPixels pixels = vidGrabber.getPixels();
    unsigned char* pixelsArray = pixels.getData();

    // pixels.getNumChannels() can also be used instead of 3
    // pixels.size() should be:  pixels.getWidth() * pixels.getHeight() * 3
    for(size_t i{0}; i < pixels.size(); i += 3)
        uint8_t red = pixels[i];
        uint8_t green = pixels[i+1];
        uint8_t blue = pixels[i+2];
        ofFloatColor sampleColor = ofFloatColor(red  / 255.f, green / 255.f, blue / 255.f);
        // do stuff with sampleColor        

Wow, thank you so much.
I understand.

But is there a reason it’s i+=3 instead of i++?

I’m not sure what this 3 means yet.

I don’t know what changes if I add 3 to the pixel order or multiply it means I don’t know.

As each pixel is [r][g][b] the i+=3 is so you are iterating 1 pixel ( 1 set of rgb ) at a time.
If you did i++ you would be moving over [r] then [g] then [b].

Btw a slower but easier approach would be:

ofPixels pixels = vidGrabber.getPixels();
for(int y = 0; y < pixels.getHeight(); y++){
    for(int x = 0; x < pixels.getWidth(); x++){
        ofFloatColor sampleColor = pixels.getColor(x, y); 
        // do stuff with sampleColor        

Oh, I understand why it’s +=3.

But if +1 +2 is added to the pixel arrangement, can we get g and b, respectively?

I’m curious what this pixel arrangement means.

If there is a picture with 10 pixels, does this pixel arrangement consist of pixel [10]?

If so, I wonder if pixel[0] is r, pixel[1] is g, and so on.

An array (called pixel) with 10 total colors that are RGB (so, 3 values or channels per color) will have 30 elements. The RGB values for the first color are pixel[0], pixel[1], and pixel[2]. The RGB values for the second color are pixel[3], pixel[4], pixel[5].