# Filling a PShape

**URL:** <https://discourse.processing.org/t/filling-a-pshape/33644>\
**Category:** Coding Questions\
**Created:** [November 21, 2021, 7:22am UTC](https://discourse.processing.org/t/filling-a-pshape/33644 "2021-11-21T07:22:15Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![bcabc](https://avatars.discourse-cdn.com/v4/letter/b/6a8cbe/32.png) [@bcabc](https://discourse.processing.org/u/bcabc)\
**Post date:** [November 21, 2021, 7:22am UTC](https://discourse.processing.org/t/filling-a-pshape/33644/1 "2021-11-21T07:22:15Z")

</div>

I’d like to be able to generate an arbitrary shape and fill it with a simple pattern.  
Drawing the shape is easy - something like this would do:

```auto
void setup(){
  size(650, 650, P3D);
  smooth(8);
   translate(200, 200);
   beginShape();
   vertex(random(100),random(100));
   vertex(random(100), random(100));
   vertex(random(100), random(100));
   vertex(random(100),random(100));
   endShape();
   
}

```

However, if I wanted to fill in that shape with small blue strokes of circles, I would have no idea where to start. Can anyone direct me towards some code or a tutorial that would help?

Thanks!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 21, 2021, 12:26pm UTC](https://discourse.processing.org/t/filling-a-pshape/33644/2 "2021-11-21T12:26:41Z")

</div>

Hello,

Here is an example using the existing `circle()` shape:

```auto
PImage img1, img2;
PGraphics pg;

void setup()
  {
  size(300, 300);
  //img1 = loadImage("https://processing.org/img/processing-web.png");
  img1 = loadImage("https://raw.githubusercontent.com/processing/processing-website/main/content/examples/Basics/Image/LoadDisplayImage/data/moonwalk.jpg");
  
  img2 = createImage(100, 100, RGB);
  img2 = img1.get(360, 100, 100, 100);
  
  pg = createGraphics(100, 100);
  pg.beginDraw();
  //pg.background(0);
  pg.noStroke();
  pg.fill(0, 0, 255); // Look this up in the references
  pg.circle(50, 50, 100);
  pg.endDraw();
  
  // The "pg image" is masking the "img2 image"
  img2.mask(pg); //Look this up in the references 
  
  background(255, 128, 0, 255);
  image(img2, 100, 100);
  noLoop();
  }

```

Look up all the tutorials and references related to the example:

> **[Welcome to Processing!](https://processing.org)**
>
> Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Since 2001, Processing has promoted software literacy within the visual arts…

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0be026607b6f273fac32c7f85f97523602a9a05b.png)

You will have to use `createShape()` to create a shape with your vertices to replace the `circle()` shape in the example with your shape.

This may also be of interest:

> **[Reference](https://processing.org/reference/texture_.html)**
>
> Sets a texture to be applied to vertex points. The texture() function must be called between beginShape() and endShape() and before any calls to vertex(). This function onl…

`:)`

---

<div class="post-metadata">

**Author:** ![bcabc](https://avatars.discourse-cdn.com/v4/letter/b/6a8cbe/32.png) [@bcabc](https://discourse.processing.org/u/bcabc)\
**Post date:** [November 21, 2021, 7:46pm UTC](https://discourse.processing.org/t/filling-a-pshape/33644/3 "2021-11-21T19:46:41Z")

</div>

Thanks, GLV - I will definitely take a closer look at masking functions in the documentation.  
I am curious, though: is there another method where new drawings/shapes can be made according to the bounds of an existing shape? In the masking approach, it seems that we use transparency to reveal a back layer - but if I wanted to have many different types of “fills”, with many different types of shapes - I think this might prove difficult. I could be wrong, though - I am new to this.

---

<div class="post-metadata">

**Author:** ![bcabc](https://avatars.discourse-cdn.com/v4/letter/b/6a8cbe/32.png) [@bcabc](https://discourse.processing.org/u/bcabc)\
**Post date:** [November 22, 2021, 3:02am UTC](https://discourse.processing.org/t/filling-a-pshape/33644/4 "2021-11-22T03:02:03Z")

</div>

Ah - it looks like this “texture” mode might be what I’m after.  
Is it possible to take a generated set of drawn shapes and use it as a texture, though?

---

<div class="post-metadata">

**Author:** ![bcabc](https://avatars.discourse-cdn.com/v4/letter/b/6a8cbe/32.png) [@bcabc](https://discourse.processing.org/u/bcabc)\
**Post date:** [November 26, 2021, 9:25pm UTC](https://discourse.processing.org/t/filling-a-pshape/33644/6 "2021-11-26T21:25:16Z")

</div>

I have been working with PShapes - but I believe they need to be PGraphics in order to be converted into PImages so that they might be used as a texture. Is that accurate?  
My understanding is that PShapes cannot be converted into PGraphics - essentially, we’re talking about a difference between vectors and pixels - but certainly, I can’t be the first person looking to create textures on shapes using basic geometry?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 29, 2021, 12:19am UTC](https://discourse.processing.org/t/filling-a-pshape/33644/7 "2021-11-29T00:19:38Z")

</div>

Hello,

This tutorial discusses renderers including PGraphics:

> **[Render Techniques](https://processing.org/tutorials/rendering/)**
>
> Tools for rendering geometries in Processing.

Reference:

> **[Reference](https://processing.org/reference/PGraphics.html)**
>
> Main graphics and rendering context, as well as the base API implementation for processing "core". Use this class if you need to draw into an off-screen graphics buffer. A PGraphics object can be cons…

There are tutorials and references for PShape as well.

Another example from @jeremydouglass :  
[https://forum.processing.org/two/discussion/18710/filling-shapes-with-a-pattern.html](https://forum.processing.org/two/discussion/18710/filling-shapes-with-a-pattern.html)

I can’t add more to this topic…

`:)`