# Fbo oftexture draw subsections

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 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!!

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 drawX = (gridW+10)*i;
int drawY = (gridH+10)*p;
int w = gridW;
int h = gridH;
}
}
``````

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`

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

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;