Filling shapes with a pattern.

edited November 2016 in Questions about Code

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);

}

Answers

  • edited October 2016

    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....

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

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

  • 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?

  • 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.

  • edited November 2016 Answer ✓

    @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:

    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);
      }
    }
    

    DrawMaskRoundedRect

  • thanks you so much. This worked flawlessly thank you Jeremy

Sign In or Register to comment.