how to fill shape with a pattern?

beginners
#1

hi! i would like to be able to fill a shape (circle, rect, etc) with a pattern rather than a solid color. from looking at the documentation there doesn’t appear to be a straightforward way to accomplish this. any suggestions on how i could go about doing this?

the pattern assets that i have are currently in SVG format, but i can convert them to something else if that simplifies the task.

thanks in advance!

rod

#2

since 0061 there’s some methods in ofTexture to make this easier.

the idea is that you need to draw your shape and pass to opengl the corresponding coordinates in the texture for each vertex in the shape.

load the image and then get the texture coordinates from your shape vertices. if you have the shape as a vector of points it would look something like:

  
.h  
  
ofImage img;  
vector<ofPoint> shape;  
vector<float> texCoords;  
  
  
.cpp  
  
setup(){  
//fill shape with the points of the shape  
for(int i=0; i<shape.size(); i++){  
    texCoords.push_back(img.getTextureReference().getCoordFromPoint(shape[i].x,shape[i].y).x);  
    texCoords.push_back(img.getTextureReference().getCoordFromPoint(shape[i].x,shape[i].y).y);  
}  
}  
  
draw(){  
img.getTextureReference().bind();  
glEnableClientState( GL_TEXTURE_COORD_ARRAY );  
	glTexCoordPointer(2, GL_FLOAT, 0, &texCoords[0] );  
	glEnableClientState(GL_VERTEX_ARRAY);  
	glVertexPointer(2, GL_FLOAT, 0, &shape[0] );  
	glDrawArrays( GL_TRIANGLE_FAN, 0, shape.size() );  
glDisableClientState( GL_TEXTURE_COORD_ARRAY );  
img.getTextureReference().unbind();  
}

depending on the size/position of your shape you’ll need to adapt the method to get the texture coordinates.

#3

Also, regarding SVG loading: I wrote an SVG library a few months ago. It’s currently broken, but an older, working version can be found here: http://code.google.com/p/projectknave/source/browse/#svn/trunk/knaveAddons/ofxSvg and it uses this old version of ofxColor http://code.google.com/p/projectknave/source/browse/#svn/trunk/knaveAddons/ofxColor

It’s simple, but will probably do what you want.

#4

kylemcdonald and arturo,

thanks for the quick and helpful replies! i haven’t had a chance to try your suggestions yet (work + midterms), but i plan on messing around more with it this weekend.

looking forward to making some cool stuff in openframeworks!

thanks!

-rod