Pixel sorting (adjusting to read pixels brightness)

beginners
#1

Hey all,

I am trying to port over a processing sketch i’ve come across here:

http://www.openprocessing.org/sketch/86426

I am pretty close I feel, but my issue is in finding the pixel brightness of the frame I am reading. Here is my attempt attempt -

#include "testApp.h"




void testApp::setup() {
    camWidth = 640;
    camHeight= 480;
    cellSize = 2;
    
    
	ofSetVerticalSync(true);
	ofSetFrameRate(30);
	cam.initGrabber(camWidth, camHeight);
    fbo.allocate(cam.getWidth(), cam.getHeight(), GL_RGB);

	frame.allocate(cam.getWidth(), cam.getHeight(), OF_PIXELS_RGB);
}

void testApp::update() {
	cam.update();
	if(cam.isFrameNew()) {

	}
}


ofPixels& testApp::getPixels() {
	
	fbo.begin();
	cam.draw(0,0);
	fbo.end();
	fbo.readToPixels(frame);
	return frame;
}



void testApp::draw() {
    getPixels();
    fbo.draw(0,0);

    
    for ( i=0; i < fbo.getWidth(); i++){
        
        for ( j=0; j < fbo.getHeight(); j++){
            
            
            
            xPix = i*cellSize + cellSize/2;
            YPix = j*cellSize + cellSize/2;
            
            loc = xPix+YPix* camWidth;
            
            
            ofColor color  = frame[loc];
            y2 = (mouseX/fbo.getWidth()) * frame[loc];
            
            ofPushMatrix();
            ofTranslate(xPix, YPix+y2);
            color.set(c);
            ofRect(0,0, cellSize,cellSize);
            
            ofPopMatrix();
        }
        
    }
    

}
#2

@danielJay,

it’s possible to grab the pixels from the camera directly - without drawing it to an fbo first.

   unsigned char * pix = cam.getPixels();

try using the step size (what you’re calling cellSize) within the for loop

 for ( i=0; i < fbo.getWidth(); i+=cellSize){

    for ( j=0; j < fbo.getHeight(); j+=cellSize){

        xPix = i;
        YPix = j;

        // multiply by the number of colors in a pixel (in this case 3, rgb)
        loc = ( xPix+YPix* camWidth ) * 3;

        ofColor color  = frame[loc];
        

        ofPushMatrix();
        ofTranslate(xPix, YPix);
        color.set(c);
        ofRect(0,0, cellSize,cellSize);

        ofPopMatrix();
    }

}

That should do the trick!

#3

Thanks for the response, mantissa! Unfortunately its still not doing what I’m trying to do. The sketch I linked is the basic idea. My issues I feel are in these lines:

 ofColor color  = frame[loc];
 y2 = (mouseX / cam.width) * frame[loc];

i noticed you had removed them, though I’m not sure why. I had incorporated your suggestion below, but its not yielding the results.

void testApp::draw() {
    
   

    
   // getPixels();
    //fbo.draw(0,0);
    
    unsigned char * pix = cam.getPixels();
    cam.draw(0,0);

    for ( i=0; i < fbo.getWidth(); i+=cellSize){
        
        for ( j=0; j < fbo.getHeight(); j+=cellSize){
            //for(int j=0; j < frame.getHeight(); j++){
            
            
            xPix = i;
            YPix = j;
            
            // multiply by the number of colors in a pixel (in this case 3, rgb)
            loc = ( xPix+YPix* camWidth ) * 3;
            
            ofColor color  = frame[loc];
            y2 = (mouseX / cam.width) * frame[loc];
            
            ofPushMatrix();
            ofTranslate(xPix, YPix+y2);
            color.set(c);
            ofRect(0,0, cellSize,cellSize);
            
            ofPopMatrix();
        }
        
    }
}
#4

hey @danielJay, yup, I didn’t totally understand your problem, just took a more thorough look at the processing sketch you linked to and it’s making more sense.

a couple of points:

  • to get the colors from the pixels, you need to access r g and b. in your code, you’re just grabbing r

      int loc = ( xPix+YPix* camWidth ) * 3;
  ofColor color(frame[loc], frame[loc+1], frame[loc+2]);

  • to get the brightness, you can call getBrightness, which will give you a floating pt value

      float br = color.getBrightness();

  • it’s much faster to calculate the xmouse ratio outside of the for loop.

  • use ofSetColor(color) to set the color of the rectangle

  • the example you linked to didn’t re-draw every single pixel … compare the for loops in your code to the p5 sketch.

This is closer to what you had in mind. I hope these tips make everything a little more clear …

    // draw the camera input
    ofSetColor(255);
    fbo.draw(0,0);
    
   // calculate the mouse ratio (as a float)
    int mouseX = ofGetMouseX()*2;
    int w = ofGetWidth();
    float xRatio = float(mouseX)/w;
    
    int nCols = fbo.getWidth()/cellSize;
    int nRows = fbo.getHeight()/cellSize;
    
    for ( int i=0; i < nCols; i++){
        
        for ( int j=0; j < nRows; j++){
            
            xPix = i*cellSize + cellSize/2;
            yPix = j*cellSize + cellSize/2;
            
            // location x * y * colorsPerPixel
            loc = (xPix+yPix* camWidth)*3;
            
            ofColor color(frame[loc], frame[loc+1], frame[loc+2]);
            y2 = xRatio * color.getBrightness();
            
            ofPushMatrix();
            ofTranslate(xPix, yPix+y2);
            ofSetColor(color);
            ofRect(0,0, cellSize,cellSize);
            ofPopMatrix();
        }
    }
2 Likes
#5

Thanks a bunch, mantissa! Let me get organized for the day and ill report back.

Cheers!

#6

hey @mantissa,

edit: i’ve got it :slight_smile: I thanks so much for all of your help.

#7

Hey apologies for not responding earlier, I’ve been traveling this week. Glad to hear that u sorted it out!

1 Like