# Masking with vertex()

**URL:** <https://discourse.processing.org/t/masking-with-vertex/40095>\
**Category:** Coding Questions\
**Created:** [December 9, 2022, 3:49pm UTC](https://discourse.processing.org/t/masking-with-vertex/40095 "2022-12-09T15:49:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gecko](https://avatars.discourse-cdn.com/v4/letter/g/c4cdca/32.png) [@Gecko](https://discourse.processing.org/u/Gecko)\
**Post date:** [December 9, 2022, 3:49pm UTC](https://discourse.processing.org/t/masking-with-vertex/40095/1 "2022-12-09T15:49:26Z")

</div>

Hi there,  
I’m struggling to mask an image with a shape drawn with beginShape(); vertex(); endShape();  
Here’s the code (shorted to highlight the key issue):

```auto
  mskGraphics.image(ink, 100, 100, ink.width / 2, ink.height / 2);
  push();
  beginShape();
  for (let a = 0; a <= TWO_PI; a += TWO_PI / res) {
    let noiseX = cos(a) * 15 + 1; //cosine angle x intensity + 1
    let noiseY = sin(a) * 15 + 1; //sine angle x intensity + 1
    let noiseVal = noise(noiseX, noiseY, t); //lookup value at this xy location in perlin noise field
    let attenuatedNoiseVal = map(noiseVal, 0.0, 1.0, 0.5, 1.0); // map noiseVal to amplitude

    x = cos(a) * rad * attenuatedNoiseVal;
    y = sin(a) * rad * attenuatedNoiseVal;

    msk.vertex(x, y);
  }

  (mskClone = mskGraphics.get()).mask(msk.get());

  endShape(CLOSE);
  pop();
  image(mskClone, 0, 0);

```

What I want is to a) create a wiggly shape as a mask, and b) use this to mask out a texture.png. What actually happens is that the texture doesn’t appear at all. Weirdly if you comment out the two lines that should show what’s been drawn:

```auto
(mskClone = mskGraphics.get()).mask(msk.get());
image(mskClone, 0, 0);

```

…the sketch still renders a wiggly shape!

My project is here:

> **[p5.js Web Editor](https://editor.p5js.org/geckohooks/sketches/i29HdO3px)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

And I’m basing it on a project by slow\_izzm I found here: [p5.js Web Editor](https://editor.p5js.org/slow_izzm/sketches/kYr0Q9OWp)

Can anyone help please?!  
Best

Gecko

---

<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:** [December 10, 2022, 5:23pm UTC](https://discourse.processing.org/t/masking-with-vertex/40095/2 "2022-12-10T17:23:20Z")

</div>

Hello @Gecko,

I took this out for a test run with Processing Java 4.1.1:

```auto
// https://discourse.processing.org/t/masking-with-vertex/40095

PGraphics pg;

PImage img;

void setup()
  {
  size(300, 300);  
  float t = .1;  
  float rad = 130; 
  
  img = loadImage("http://learningprocessing.com/code/assets/sunflower.jpg");
  img.resize(width, height);
    
//mskGraphics.image(ink, 100, 100, ink.width / 2, ink.height / 2);
  pg = createGraphics(300, 300);
  pg.beginDraw();
  pg.translate(150, 150);
  pg.stroke(255, 0, 0);
  pg.strokeWeight(2);
  //push();
  pg.beginShape();
  for (float a = 0; a <= TWO_PI; a += TWO_PI / 100) 
    {
    float noiseX = cos(a) * 15 + 1; //cosine angle x intensity + 1
    float noiseY = sin(a) * 15 + 1; //sine angle x intensity + 1
    float noiseVal = noise(noiseX, noiseY, t); //lookup value at this xy location in perlin noise field
    float attenuatedNoiseVal = map(noiseVal, 0.0, 1.0, 0.5, 1.0); // map noiseVal to amplitude

    float x = cos(a) * rad * attenuatedNoiseVal;
    float y = sin(a) * rad * attenuatedNoiseVal;
    pg.vertex(x, y);
    //msk.vertex(x, y);
    }
  pg.endShape(CLOSE);  
  pg.endDraw();    

  //(mskClone = mskGraphics.get()).mask(msk.get());

  endShape(CLOSE);
  //pop();    
  }

void draw()
  {
  img.mask(pg);
  image(img, 0, 0);
  }  

```

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

A few changes to your project based on my Processing Java example and it seemed to work:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/b/1ba004c284ed63df856cc921b2978c650476e305.jpeg)

Keep at it!

`:)`

---

<div class="post-metadata">

**Author:** ![Gecko](https://avatars.discourse-cdn.com/v4/letter/g/c4cdca/32.png) [@Gecko](https://discourse.processing.org/u/Gecko)\
**Post date:** [December 11, 2022, 5:13pm UTC](https://discourse.processing.org/t/masking-with-vertex/40095/4 "2022-12-11T17:13:24Z")

</div>

Thanks so much! That’s worked perfectly 😁  
That noise circle works well with a dandelion too doesn’t it!