# Drawing inside a shape

**URL:** <https://discourse.processing.org/t/drawing-inside-a-shape/34685>\
**Category:** Project Guidance\
**Created:** [January 17, 2022, 1:09am UTC](https://discourse.processing.org/t/drawing-inside-a-shape/34685 "2022-01-17T01:09:13Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![yalaniv](https://avatars.discourse-cdn.com/v4/letter/y/7993a0/32.png) [@yalaniv](https://discourse.processing.org/u/yalaniv)\
**Post date:** [January 17, 2022, 1:09am UTC](https://discourse.processing.org/t/drawing-inside-a-shape/34685/1 "2022-01-17T01:09:13Z")

</div>

I want to paint inside a shape.  
let me explain :

I want to write a big word on the screen, for example: BEST  
and I want to paint only in the parts of the letters

(imagine that I paint on all the size of screen, than I erase all the around, and it only left the word BEST)

I hope I managed to explain myself

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 17, 2022, 2:09pm UTC](https://discourse.processing.org/t/drawing-inside-a-shape/34685/2 "2022-01-17T14:09:31Z")

</div>

maybe mask() command?

see [Reference / Processing.org](https://processing.org/reference/mask_.html)

For complex work with the outline of letters

see [How to 'deform' a text generated with theGeomerative library?](https://discourse.processing.org/t/how-to-deform-a-text-generated-with-thegeomerative-library/1147)

---

<div class="post-metadata">

**Author:** ![yalaniv](https://avatars.discourse-cdn.com/v4/letter/y/7993a0/32.png) [@yalaniv](https://discourse.processing.org/u/yalaniv)\
**Post date:** [January 17, 2022, 9:30pm UTC](https://discourse.processing.org/t/drawing-inside-a-shape/34685/3 "2022-01-17T21:30:20Z")

</div>

Thanks, I will search for that command, as I am not familiar with it

---

<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:** [January 18, 2022, 12:52am UTC](https://discourse.processing.org/t/drawing-inside-a-shape/34685/4 "2022-01-18T00:52:45Z")

</div>

Hello @yalaniv,

Here is a simple example of masking the sketch window:

```auto
PGraphics pg2;

PImage img1;

void setup()
  {
  size(200, 200);
  
  img1 = createImage(width, height, RGB);
   
  pg2 = createGraphics(width, height);  
  pg2.beginDraw();
  pg2.textSize(196);
  pg2.textAlign(CENTER, CENTER);
  pg2.fill(255);                
  pg2.text("A", width/2, height/2-30);
  pg2.endDraw();   
  }

void draw() 
  {
  //background(255, 0, 0); // Try it with and without this!
  
  noStroke();
  fill(0, 255, 0);
  circle(mouseX, mouseY, 10);
  
  // Mask the sketch window with PImage pg2
 
  img1 = copy();
 
  background(0);
  img1.mask(pg2);
  image(img1, 0, 0);
  }

```

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

References:

- [https://processing.org/reference/PImage\_mask\_.html](https://processing.org/reference/PImage_mask_.html)
- [https://processing.org/reference/PGraphics.html](https://processing.org/reference/PGraphics.html)
- [https://processing.org/tutorials/rendering](https://processing.org/tutorials/rendering)
- [https://processing.org/reference/copy\_.html](https://processing.org/reference/copy_.html)
- You can look up the rest…

`:)`

---

<div class="post-metadata">

**Author:** ![yalaniv](https://avatars.discourse-cdn.com/v4/letter/y/7993a0/32.png) [@yalaniv](https://discourse.processing.org/u/yalaniv)\
**Post date:** [January 18, 2022, 1:20am UTC](https://discourse.processing.org/t/drawing-inside-a-shape/34685/5 "2022-01-18T01:20:48Z")

</div>

Thanks, that’s a great start.

Now, let me take it even further 🙂

I want the background to be white, and so the letter,

So It would be a surprise what is written …

---

<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:** [January 18, 2022, 11:43am UTC](https://discourse.processing.org/t/drawing-inside-a-shape/34685/6 "2022-01-18T11:43:40Z")

</div>

> [@yalaniv](#):
>
> Now, let me take it even further 🙂

Go for it!

There are resources (building blocks) are here to get you started:

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

`:)`

---

<div class="post-metadata">

**Author:** ![yalaniv](https://avatars.discourse-cdn.com/v4/letter/y/7993a0/32.png) [@yalaniv](https://discourse.processing.org/u/yalaniv)\
**Post date:** [January 19, 2022, 1:36pm UTC](https://discourse.processing.org/t/drawing-inside-a-shape/34685/7 "2022-01-19T13:36:15Z")

</div>

Will surely go for it 🙂  
Thank for you guidance

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 21, 2022, 9:07pm UTC](https://discourse.processing.org/t/drawing-inside-a-shape/34685/8 "2022-01-21T21:07:23Z")

</div>

I like the window mask example in java. I tried to convert it to p5.js and did not get the same result. Do you have any suggestions on how I could fix this:

```auto

let pg2;
let img1;

function setup() {
  createCanvas(600, 600);
  img1 = createImage(width, height);
  pg2 = createGraphics(width, height);
  pg2.fill(255);
  pg2.circle(300,300,450);
}

function draw() {
 // background(255, 0, 0); // Try it with and without this!
  noStroke();
  fill(0, 255, 0);
  circle(mouseX, mouseY, 10);
  // Mask the sketch window with PImage pg2
  img1.copy(pg2, 0,0,width,height,0,0,width,height);
  background(0);
  img1.mask(pg2);
  image(img1, 0, 0);
}

```

---

<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:** [January 22, 2022, 4:01pm UTC](https://discourse.processing.org/t/drawing-inside-a-shape/34685/9 "2022-01-22T16:01:03Z")

</div>

Hello @svan,

Take a look:

```auto
let pg1;
let pg2;

function setup() 
  {
  createCanvas(600, 600);
  pg1 = createGraphics(width, height);
  pg2 = createGraphics(width, height);
  pg2.fill(255);
  pg2.circle(300, 300, 300);
  }

function draw() 
  {
  noStroke();
  fill(0, 255, 0);
  circle(mouseX, mouseY, 10);
   
  circle(random(width), random(height), random(10, 20));  
  
  // Mask the sketch window with PImage pg2
  pg1 = get();
  background(0);
  pg1.mask(pg2);
  image(pg1, 0, 0);
  }

```

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

Reference:  
[https://p5js.org/reference/#/p5.Image/get](https://p5js.org/reference/#/p5.Image/get)

`:)`

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 22, 2022, 5:06pm UTC](https://discourse.processing.org/t/drawing-inside-a-shape/34685/10 "2022-01-22T17:06:22Z")

</div>

Big help. Thank you.

---

<div class="post-metadata">

**Author:** ![davidlara0507](https://avatars.discourse-cdn.com/v4/letter/d/aeb1de/32.png) [@davidlara0507](https://discourse.processing.org/u/davidlara0507)\
**Post date:** [February 10, 2022, 7:13am UTC](https://discourse.processing.org/t/drawing-inside-a-shape/34685/11 "2022-02-10T07:13:32Z")

</div>

hola, soy David y me gusta la tecnología aunque no se mucho la vdd pero me gusta todo eso de los algoritmos y códigos y asi