how to apply a texture in a circle

Hi !

Now I’m printing a circle with ofCircle and I d like to print an image inside it.
I would prefer to maintain this structure rather than using an alpha image showing a circle.

Any suggestion ? Thanks for advance

Hi there!
I have the same question !
How do you bind a texture to a 2d (and maybe 3d too) polygonal shape ?
Anybody out there willing to help a beginner ?
thanks !

Here’s an idea on one way to do this, but it’s not the really the right way:

#include "testApp.h"  
void testApp::setup(){  
	text.allocate(512, 512, GL_RGB, false);  
	quadraticObj = gluNewQuadric(); // declare GLUquadricObj *quadraticObj; in yr .h file  
	text.loadData(img.getPixels(), 512, 512, GL_RGB);  
void testApp::draw() {  
	glTranslatef(350, 250, 0);  
		gluQuadricDrawStyle(quadraticObj, GLU_FILL);  
		gluQuadricTexture(quadraticObj, GL_TRUE);  
		gluDisk(quadraticObj, 0, 200, 50, 10);  

Another idea that I can’t quite get to work right is like this:

void testApp::setup(){  
	text.allocate(512, 512, GL_RGB, false);  
	text.loadData(img.getPixels(), 512, 512, GL_RGB);  
void testApp::draw() {  
	glTranslatef(350, 250, 0);  
	int numFanVertices = 360; // make a constant for this  
		GLfloat textureAngle = 0.0f;  
		//make coordinates for the texture  
		GLfloat textureCoordinates[2*numFanVertices];  
		angle = 0.0f;  
		textureCoordinates[0] = 0.5f;  
		textureCoordinates[1] = 0.5f;  
		for(int i=2; i<(2*numFanVertices); i++){  
			textureCoordinates[i++] = 0.5f * cos(angle) + 0.5f;  
			textureCoordinates[i] = 0.5f * sin(angle) + 0.5f;  
			textureAngle += (PI/180.0f);  
		// set the texture to get drawn in the glDrawArrays that's inside ofCircle  
		ofCircle(0, 0, 200);  

Maybe someone a little more texturing savvy can get find a cool way to get all the coords for the texture set correctly.

Hey - here is a quick example:

void testApp::setup(){	   
	//note because we use the ARB method - texture coordinates are measured in pixels not 0.0-1.0  
	//this has the advantage in that we can work with a non power of two image and not need to worry about the extra pixel padding.   
	circleTexture.allocate(sqImg.width, sqImg.height, GL_RGB);   
	circleTexture.loadData(sqImg.getPixels(), sqImg.width, sqImg.height, GL_RGB);  
	int numPts  = 64;  
	float angle = 0.0;  
	float step  = TWO_PI / (float)(numPts-1);  
	for(int i = 0; i < numPts; i++){  
		//get the -1 to 1 values - we will use these for drawing our pts.   
		float px = cos(angle);  
		float py = sin(angle);  
		NormCirclePts.push_back( ofPoint(px, py) );  
		//map the -1 to 1 range produced by cos/sin  
		//to the dimensions of the image we need for our texture coords  
		float tx = ofMap( px, -1.0, 1.0, 0, circleTexture.getWidth());  
		float ty = ofMap( py, -1.0, 1.0, 0, circleTexture.getHeight());  
		NormCircleCoords.push_back( ofPoint(tx, ty) );  
		angle += step;  

void testApp::draw(){  
	ofSetColor(255, 255, 255);  
	float radius = 200.0; //change this to scale your circle  
			for(int i = 0; i < NormCirclePts.size(); i++){  
				glTexCoord2f(NormCircleCoords[i].x, NormCircleCoords[i].y);  
				glVertex2f( NormCirclePts[i].x * radius + mouseX,  NormCirclePts[i].y * radius + mouseY);  

class testApp : public ofBaseApp{  
		void setup();  
		void update();  
		void draw();  
		void keyPressed  (int key);  
		void keyReleased(int key);  
		void mouseMoved(int x, int y );  
		void mouseDragged(int x, int y, int button);  
		void mousePressed(int x, int y, int button);  
		void mouseReleased(int x, int y, int button);  
		void windowResized(int w, int h);  
		ofImage sqImg;  
		ofTexture circleTexture;  
		vector <ofPoint> NormCirclePts;  
		vector <ofPoint> NormCircleCoords;  

You need to pass in a square image though.


Ah, cool. I had tried something like that but having this:

text.allocate(512, 512, GL_RGB, false);  

threw everything off, into GL_TEXTURE_2D and I didn’t notice. GL_TEXTURE_RECTANGLE_ARB is pretty cool.

This is awesome, thanks Theo.
Also, glad to see it still works after 3 years!