Masking with vertex()

p5.js Coding Questions
1

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

  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:

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

…the sketch still renders a wiggly shape!

My project is here:

And I’m basing it on a project by slow_izzm I found here: p5.js Web Editor

Can anyone help please?!
Best

Gecko

1 Like
2

Hello @Gecko,

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

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

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

image
image1288×821 172 KB

Keep at it!

:)

1 Like
4

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

1 Like