Filling shapes with a pattern.

mapspug

Hi I am new to processing and I am trying to create a shape (a rectangle with curved edges) and fill it with a pattern. I know I can probably fill it using a for loop, but that seemed a little daunting. The alternative approach I thought of is to use an image and fill the shape with that image; however, I can't seem to figure out how to fill out the curved edges.

void draw() {
  background(#FFFAFA);

strokeWeight(5);
fill(255);
rect(70,60,800,470,0,105,105,0);
//resizes the image and fills a rectangle shape
PImage static1 = loadImage("static.jpg");
static1.resize(700, 463);
image(static1, 73, 64);

}

jeremydouglass

Please edit your post and format the code with CTRL-o.

---

First, do you know how to fill any shape with a pattern, like a simple rectangle?

1. you can use beginShape()/endShape() and texture()
2. you can use use a PImage/PGraphics and a mask()
3. you can use createShape() to make a PShape and then use .setTexture() (listed in the javadoc linked from the reference, not the reference)
4. ....

If you want a rectangle with curved edges and don't want to draw each straight line and curve of the shape "by hand", then you could use the 8-argument version of rect(), which supports rounded corners:

rect(a, b, c, d, tl, tr, br, bl)

This might combine well with the "mask" approach -- make a rounded rect mask, then mask an image of your texture. But there are many ways of doing this....

mapspug

Thanks for this response. I will give the mask approach a shot.

jeremydouglass

Great! Please share your results if it works for you -- or if you get stuck.

mapspug

Thanks Jeremy for the response. I tried to create a basic rectangle using Vertex, and tried to use the Texture() function, but received an error stating that texture() isn't available with this renderer. Do you have a sample of making a rounded rect mask?

koogs

PImage static1 = loadImage("static.jpg");

don't loadImage inside draw. it's not something you want to do 60 times a second. do it in setup() and use a global variable.

jeremydouglass

@mapspug --

For texture and a renderer error you may need to use size(x, y, P3D) to specify the P3D renderer.

For a sample of a mask, here is a simple example:

• Draw a Mask example.

Here is the same example, with a rounded rect instead:

/**
 * Draw a Mask example -- rounded rect
 * 2016-11-08 Jeremy Douglass Processing 3.2.2
 * press any key to see mask / no mask
 **/
PImage photo;
PImage photoMasked;
PGraphics maskImage;
void setup() {
  size(512, 512);
  photo = loadImage("https://" + "forum.processing.org/processing-org.jpg");
  // create mask
  maskImage = createGraphics(photo.width,photo.height);
  maskImage.beginDraw();
  maskImage.rect(20, 20, 460, 460, 100);
  maskImage.endDraw();
  // copy and apply mask
  photoMasked = photo.copy();
  photoMasked.mask(maskImage);
}
void draw() {
  background(128);
  if(keyPressed){
    // show original image
    image(photo, 0, 0);    
  } else {
    // show masked image
    image(photoMasked, 0, 0);
  }
}

mapspug

thanks you so much. This worked flawlessly thank you Jeremy