Fbo oftexture draw subsections

beginners
#1

Hi I was trying to achieve a kinetic typographic effect by drawing type in a fbo, and draw subsections of it using for loops with an offest, but somehow it was moving the fbo as a whole. my code is below:

int gridX = 10;
int gridY = 10;
int gridW = round(fbo.getWidth()/gridX);
int gridH = round(fbo. getHeight()/gridY);
fbo.begin();
ofClear(255,255,255,255);
ofBackground(255);
ofSetColor(0);
texts.drawStringAsShapes(“A”,fbo.getWidth()/2-texts.stringWidth(“A”)/2,fbo.getHeight()/2+texts.stringHeight(“A”)/2);

fbo.end();



for (int i = 0; i< gridX ; i++){
       for (int p = 0; p< gridY ; p++){
           int wave = round(sin(ofGetFrameNum())*100);
           int x = gridW*i+wave;
           int y = gridH*p;
           int w= gridW;
           int h= gridH;
           fbo.getTexture().drawSubsection(x, y, w, h,x,y);
           
       }
   }

I’ve attached the visual I want to achieve below. Thanks in advance!!

46
461004×996 27.1 KB

#2

Hi,
You’re applying the same ‘wave’ to each cell in the grid, so it moves in unison.
Try this:

    int gridX = 10;
    int gridY = 10;
    int gridW = round(fbo.getWidth()/gridX);
    int gridH = round(fbo. getHeight()/gridY);
    fbo.begin();
    ofClear(255,255,255,255);
    ofBackground(255);
    ofSetColor(0);
//    texts.drawStringAsShapes("A",fbo.getWidth()/2-texts.stringWidth(“A”)/2,fbo.getHeight()/2+texts.stringHeight("A")/2);
    ofDrawCircle(150, 150, 150);
    fbo.end();

    for (int i = 0; i< gridX ; i++){
       for (int p = 0; p< gridY ; p++){
//               int wave = round(sin(ofGetFrameNum()/100.)*100);
           int drawX = (gridW+10)*i;
           int drawY = (gridH+10)*p;
           int readX = (gridW)*i + round(sin((ofGetFrameNum()+(i*gridX)+p)/100.)*10);
           int readY = (gridH)*p;
           int w = gridW;
           int h = gridH;
           fbo.getTexture().drawSubsection(drawX, drawY, w, h,readX,readY);
       }
   }

I don’t have the font loaded, so I used a circle.
And you can remove the margin between the cells by removing the +10 in int drawX

#3

Hey Jildert, Just tried your code, and it solved my problem perfectly! Thanks a lot!

#4

Great!

(Oh, and if the code above is your draw()-function, you might want to place the fbo-filling-part to setup(), since it only needs to be done once)
And here’s something I’ve tried with ofNoise, also fun:

    float noiseScale = 10.;
    float noiseSpeedDiv = 100.; // Speed of noise / animation
    int m = 0; // Margin, use for debugging
    float yOffset = 10; // So waveY is not the same as waveX
    
    for (int i = 0; i< gridX ; i++){
        for (int p = 0; p< gridY ; p++){
           float waveX = ofNoise((float)i/noiseScale, (float)p/noiseScale, (float)ofGetFrameNum()/noiseSpeedDiv) * 50;
           float waveY = ofNoise((float)i/noiseScale, (float)p/noiseScale, yOffset+(float)ofGetFrameNum()/noiseSpeedDiv) * 50;

           int drawX = (gridW+m)*i;
           int drawY = (gridH+m)*p;
           int readX = (gridW)*i + waveX;
           int readY = (gridH)*p + waveY;
           int w = gridW;
           int h = gridH;
           fbo.getTexture().drawSubsection(drawX, drawY, w, h, readX, readY);
       }
   }