How bind sprite/image to 2d shapes (for example circle with texture basketball ball)

Hello.
I would like to create a 2d shape and apply a sprite to it (.png file). Ok, which class is the best to do this (ofPath, ofMesh, ofVBOMesh, …) ? Is it the sprite is good to create object a ball to basketball ? Can i load sprite in format .png or .jpeg ? Can i load sprite with transparency ?

Basketball_Ball

I can be missing something but I think you can load the image (png with alpha) in an ofImage object
and then use it as a texture to draw a shape,
like

image.getTexture().bind();
ofDrawCircle(x, y, radius);
image.getTexture().unbind();
2 Likes

Hey adding a bit to dimitre’s comments, there are lots of ways to do this, and you may want to experiment. ofBook is a great resource for understanding how to use the various classes in OF. And the /examples folder has a ton of projects that you can play around with.

Basically, you need to get the image into something that has an ofTexture (an ofImage, ofFbo, or ofTexture). An ofImage will work well; a .png file should load with all four channels (RGBA). An ofImage can be converted to different kinds with ofImage::setImageType(). And then you need something with some texture coordinates. An ofPlanePrimitive has an ofMesh inside of it and some handy convenience methods:

    plane.set(1000, 1000, 100, 100); // set the width, height, columns, rows
    plane.mapTexCoordsFromTexture(image.getTexture()); // map them from an image
    plane.mapTextCoords(0, 0, 300, 300); // map them from coordinates (0, 0) to (300, 300);

Bind the image and draw the plane in ofApp::draw():

    image.bind(); // or image.getTexture().bind()
    plane.drawFaces();
    image.unbind(); // or image.getTexture().unbind()
2 Likes

Did you test my picture (basketball ball) ?

No. I created my own ofImage in a quick test application I wrote. Any valid jpg or png that you want to use should work just fine.

1 Like

I tried this and it doesn’t work with my basketball ball of image.

You may want to look at the pointsAsTexturesExample. It draws a .png image at each vertex sent to an ofShader (if I remember right). Its in the /examples/gl/ folder. I think using the ofMesh in an ofPlanePrimitive is a more basic approach. Have fun experimenting!

1 Like

Thanks