How do I apply an image, or pattern to a 2D polygon shape?

Programming Questions

strayboog..

How do I apply an image, or pattern to a 2D polygon shape?

in Programming Questions • 1 year ago

So I have a project due tomorrow, and this is one of the last hurdles. I have a large graph being drawn in my program that can show every country in the world, or filter them out. The polygons being drawn represent one country each, and the plotting values come from datasheets

The problem is that there are 231 countries and regions that the user can choose to see. I have tried to use a wide range of colors to distinguish each country from the other, but with such a huge number to fill, a lot of the countries' colors look the same. Also, each graphed shape has 32 vertices on it, so I don't know if such an odd shape can have a texture applied to it or not...

Anyways, I figured that I would diversify the graphed data and add five different patterns, working with a range of different colors, to represent each country. So I made the patterns, all with an alpha channel, hoping that I could easily apply the pattern PNG images to the drawn polygons. Here is the code so far...

noStroke();

beginShape();

textureMode(NORMAL);

texture(patternToUse);

for(int col = 0; col < columnCount; col++){

if( data.isValid(countryToGraph, col)){

float value = interpolators[countryToGraph][col].value;

float x = map(years[col], yearMin, yearMax, graphPlotX1, graphPlotX2);

float y = map(value, dataMin, graphMax, graphPlotY2, graphPlotY1);

vertex(x, y, 0, 0);

if((col == 0) || (col == columnCount -1))

vertex(x, y, 1, 0);

}

//draw the lower-right and lower-left corners

vertex(graphPlotX2, graphPlotY2, 1, 1);

vertex(graphPlotX1, graphPlotY2, 0, 1);

endShape(CLOSE);

I'm not getting an error here; the graphs just aren't drawing at all. I should mention that there is a conditional prior to this that just checks to see if the current row index applies to countries that I want to have a pattern on their graph, but I don't think that's the issue. Any suggestions? Should I be using texture for this? I tried to find a guide to masking by PhilHo, but it has been taken down, and I'm not sure what masking is.

Replies(5)

v.k.

Re: How do I apply an image, or pattern to a 2D polygon shape?

1 year ago

I've never used texture(), and i think you could use it for that. I didn't test your code and can't tell what is wrong if some. But perhaps you can just use mask as you said. Draw the country shape in a PGraphic and use it as alpha for the texture. some thing like (pseudo code):

PGraphics countryOne = createGraphics(Xsize, Ysize, P2D);

countryOne.beginDraw()

countryOne.background(0);

countryOne.fill(255);

countryOne.doAllYourVertexHereWithCountryOneDotSyntax// (several lines)

countryOne.endDraw()

PImage texture = loadImage("textureToUse")

texture.mask(countryOne)

image(texture,x,y);

calsign

Re: How do I apply an image, or pattern to a 2D polygon shape?

1 year ago

A different approach would be to use PGraphics, load the texture, and mask it with the shape of each individual country. Note that is should be technically possible to fill every country with one of four solid colors...

EDIT: I'm beaten by 3 minutes!

v.k.

Re: How do I apply an image, or pattern to a 2D polygon shape?

1 year ago

:-)

There was this very interesting post about color and maps, you may find especially useful this link.

strayboog..

Re: How do I apply an image, or pattern to a 2D polygon shape?

1 year ago

Thanks for the advice guys! Just to be clear, I'm not trying to draw the shapes of actual countries, I am drawing a line graph where each line represents the data within a spreadsheet, for a country. Sorry for the confusion. The reason I referred to it as a shape is because I use curveVertex to create a polygon from each country's respective data plots.

Knowing this, would it still be possible to use masks to apply a pattern with an alpha map to the 2d polygons?

Here is a pic of the polygons I am trying to apply a pattern to...

strayboog..

Re: Re: How do I apply an image, or pattern to a 2D polygon shape?

1 year ago

If anyone can help me with this issue by tonight (09/23/12) or tomorrow morning, it will be much appreciated. I have class tomorrow and will be working on this up until then! :)

I'm not sure if the PGraphics approach will work because the shapes that are created in my program aren't simple rectangular shapes. How do I go about defining the xSize and ySize of the top most graph shown in the picture above, for example? Would I just find the max height of the graphed polygon for ySize, and use the width of the graph for xSize?

Sorry to be asking a million questions without trying it out myself, but I've got a few other things to fix in this program, aside from the graph issue.

Thank you!

Top Reply