We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpSyntax Questions › fill shape with pattern
Page Index Toggle Pages: 1
fill shape with pattern (Read 2767 times)
fill shape with pattern
Dec 19th, 2008, 12:47pm
 
I am looking for a way to create irregular shapes and fill them with patterns. In a similar way to TexturePaint in java:
http://www.java2s.com/Code/Java/2D-Graphics-GUI/TexturePaintDemo.htm
Any idea on how I could achieve that using processing?

Thanks

n
Re: fill shape with pattern
Reply #1 - Dec 21st, 2008, 5:52am
 
That will be texture():

http://www.processing.org/reference/texture_.html
Re: fill shape with pattern
Reply #2 - Dec 21st, 2008, 9:35am
 
Yeah, I was tempted to answer that, but I never used it yet. Does it work in default mode (2D)? Does it tile?
Re: fill shape with pattern
Reply #3 - Dec 21st, 2008, 4:22pm
 
It works in P2D.  Not sure about tiling, though.
Re: fill shape with pattern
Reply #4 - Dec 22nd, 2008, 12:46pm
 
Thanks for the answers.
However, it stretches the background image rather than tile it.
Re: fill shape with pattern
Reply #5 - Dec 24th, 2008, 9:57am
 
I fumbled with TexturePaint but failed to make it work with Processing, and I was uneasy with the mix of Processing and awt graphics.

So I made a pure Processing solution: I manually tile the texture in a buffer (PGraphics) of the size of the sketch. I do it only once. Then I draw the shape to texturize in a mask buffer (black & white) and in yet another buffer I copy the texture, then apply the mask, leaving only the shape with texture, the remainder being transparent. Then I have just to draw the final buffer on the sketch surface.
The shape can have any complexity, it doesn't matter.

Code:
PGraphics pgTexture;
PGraphics pgMask;
PGraphics pgShape;

PVector v1, v2, v3;
PVector s1, s2, s3;
PFont font;

static final int D_TRIANGLE = 1;
static final int D_TEXT = 2;

int m1, m2;

void setup()
{
 size(800, 500);
 PImage smallImage = loadImage("greenfoil.png");
 font = loadFont("AmericanTypewriter-24.vlw");

 pgMask = createGraphics(width, height, JAVA2D);
 pgShape = createGraphics(width, height, P2D);

 // Make tiled texture
 pgTexture = createGraphics(width, height, JAVA2D);
 pgTexture.beginDraw();
 for (int x = 0; x < width; x += smallImage.width)
 {
   for (int y = 0; y < height; y += smallImage.height)
   {
     pgTexture.image(smallImage, x, y);
   }
 }
 pgTexture.endDraw();

 // Define a triangle
 v1 = new PVector(50, 50);
 v2 = new PVector(width - 50, 50);
 v3 = new PVector(width / 2, height / 2);
 m1 = m2 = 5;
}

void draw()
{
 background(230);

 DrawTextured(D_TRIANGLE);
 DrawTextured(D_TEXT);
 v1.x += m1; if (v1.x > width || v1.x < 0) m1 = -m1;
 v2.x -= m2; if (v2.x > width || v2.x < 0) m2 = -m2;
 v1.y += 6*sin(v1.x/36);
 v2.y += 6*cos(v2.x/36);
}

// I would pass an interface and a make drawing class instead
// but I wanted to make it simple here.
// Would be simpler with functions as parameter!
void DrawTextured(int drawing)
{
 pgMask.background(0);
 pgMask.fill(255);
 pgMask.noStroke();
 if (drawing == D_TRIANGLE)
 {
   DrawTriangle(pgMask);
 }
 else if (drawing == D_TEXT)
 {
   DrawText(pgMask);
 }
 PImage piMask = pgMask.get(0, 0, width, height);

 pgShape.image(pgTexture, 0, 0);
 pgShape.mask(piMask);

 image(pgShape, 0, 0);
}

void DrawTriangle(PGraphics g)
{
 g.beginDraw();
 g.triangle(v1.x, v1.y, v2.x, v2.y, v3.x, v3.y);
 g.endDraw();
}

void DrawText(PGraphics g)
{
 g.beginDraw();
 g.textFont(font, 120);
 g.text("Processing", 50, 2*height/3);
 g.endDraw();
}


Of course, the texture can be generated by Processing too... Smiley
Re: fill shape with pattern
Reply #6 - Dec 24th, 2008, 10:06am
 
Thanks, this is really awesome! Not only it solves the problem but it helps to learn a lot how to manipulate buffers with processing. Thanks again.

Re: fill shape with pattern
Reply #7 - Dec 24th, 2008, 4:35pm
 
wow, this so cool!  I'm learning so much from this board.
Page Index Toggle Pages: 1