# Converting PGraphics and Mask from Processing to p5.js

**URL:** <https://discourse.processing.org/t/converting-pgraphics-and-mask-from-processing-to-p5-js/28133>\
**Category:** Beginners\
**Created:** [February 28, 2021, 3:11am UTC](https://discourse.processing.org/t/converting-pgraphics-and-mask-from-processing-to-p5-js/28133 "2021-02-28T03:11:35Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![bdooley](https://avatars.discourse-cdn.com/v4/letter/b/7cd45c/32.png) [@bdooley](https://discourse.processing.org/u/bdooley)\
**Post date:** [February 28, 2021, 3:11am UTC](https://discourse.processing.org/t/converting-pgraphics-and-mask-from-processing-to-p5-js/28133/1 "2021-02-28T03:11:35Z")

</div>

Is there a tag for super beginners? I currently have a simple sketch that uses a mask to reveal an image below another. For some reason once I convert to p5.js, nothing shows up. I think it might have to do with the beginDraw and endDraw, but I am not sure how to fix this…

```auto
PGraphics mask;
PImage bgImage, topImage;

void setup()
{
  size(1080, 720);
  
  bgImage = loadImage("Gradient_Test.jpg");
  bgImage.resize(width, height);
  topImage = loadImage("Black Rectangle.jpg");
  topImage.resize(width, height);
  
  mask = createGraphics(width, height);
  mask.beginDraw();
  mask.background(0);
  mask.stroke(255);
  mask.strokeWeight(10);
  mask.fill(255);
  mask.endDraw();
}

void draw()
{
  background(0);
  mask.beginDraw();
  if (mousePressed) 
    mask.line(mouseX, mouseY, pmouseX, pmouseY);
  mask.endDraw();
  
  image(topImage, 0, 0, width, height);
  
  bgImage.mask(mask);
  image(bgImage, 0, 0, width, height);
}

```

This is the p5.js I have so far:

```auto
function setup()
{
  let bgImage, topImage;
  createCanvas(1080, 720);
  
  bgImage = loadImage('Gradient_Test.jpg');
  topImage = loadImage('Black Rectangle.jpg');
  
  mask = createGraphics(width, height);
  mask.beginDraw();
  mask.background(0);
  mask.smooth();
  mask.stroke(255);
  mask.strokeWeight(10);
  mask.fill(255);
  mask.endDraw();
}

function draw()
{
  background(0);
  mask.beginDraw();
  if (mouseIsPressed) {
  mask.line(mouseX, mouseY, pmouseX, pmouseY);
  }
  mask.endDraw();
  
  image(topImage, 0, 0, width, height);
  
  bgImage.mask(mask);
  image(bgImage, 0, 0, width, height);
}

```

I really appreciate any help!

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [February 28, 2021, 7:44am UTC](https://discourse.processing.org/t/converting-pgraphics-and-mask-from-processing-to-p5-js/28133/3 "2021-02-28T07:44:59Z")

</div>

You don’t need beginDraw/endDraw in p5.js. Also, do you want to upload it on web editor with images so we can test it?

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [February 28, 2021, 11:58am UTC](https://discourse.processing.org/t/converting-pgraphics-and-mask-from-processing-to-p5-js/28133/4 "2021-02-28T11:58:18Z")

</div>

Hello, @bdooley, and welcome to the Processing Foundation Forum!

Consider loading the images within a `preload()` function, as follows:

```auto
function preload() {
  bgImage = loadImage('Gradient_Test.jpg');
  topImage = loadImage('Black Rectangle.jpg');
}

```

As @micuat suggested, if you provide us with those images, we can help with your code.

---

<div class="post-metadata">

**Author:** ![bdooley](https://avatars.discourse-cdn.com/v4/letter/b/7cd45c/32.png) [@bdooley](https://discourse.processing.org/u/bdooley)\
**Post date:** [February 28, 2021, 4:25pm UTC](https://discourse.processing.org/t/converting-pgraphics-and-mask-from-processing-to-p5-js/28133/5 "2021-02-28T16:25:19Z")

</div>

Hi, Thanks for the help! I uploaded it with images on web editor here: [https://editor.p5js.org/bdooley7/sketches/jsmFap5hy](https://editor.p5js.org/bdooley7/sketches/jsmFap5hy)

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [February 28, 2021, 5:10pm UTC](https://discourse.processing.org/t/converting-pgraphics-and-mask-from-processing-to-p5-js/28133/6 "2021-02-28T17:10:47Z")

</div>

You have this line:

```auto
  topImage = loadImage('Black Rectangle.jpg');

```

However, the actual name of the file on the web editor site is `'Black_Rectangle.jpg'`, with an underscore in it, rather than a space.

---

<div class="post-metadata">

**Author:** ![bdooley](https://avatars.discourse-cdn.com/v4/letter/b/7cd45c/32.png) [@bdooley](https://discourse.processing.org/u/bdooley)\
**Post date:** [February 28, 2021, 5:22pm UTC](https://discourse.processing.org/t/converting-pgraphics-and-mask-from-processing-to-p5-js/28133/7 "2021-02-28T17:22:35Z")

</div>

Good catch! The gradient now appears, but I’m getting a message: “You are trying to use setAttributes on a p5.Graphics object that does not use a WEBGL renderer.” Could it be because mask only works with images and not graphics? Maybe adding a function to turn the graphic into an image and then masking?

This is what the sketch looks like in processing.

 ![Screen Shot 2021-02-27 at 1.13.27 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6e6fab5c9778591db0790327bfb2fe5f94130e48.jpeg)

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [February 28, 2021, 6:10pm UTC](https://discourse.processing.org/t/converting-pgraphics-and-mask-from-processing-to-p5-js/28133/8 "2021-02-28T18:10:27Z")

</div>

This discussion on GitHub may help: [convert p5.graphics to p5.Image?](https://github.com/processing/p5.js/issues/2841).

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [February 28, 2021, 7:16pm UTC](https://discourse.processing.org/t/converting-pgraphics-and-mask-from-processing-to-p5-js/28133/9 "2021-02-28T19:16:55Z")

</div>

the error you’re getting “settAttributes…” is only related to `smooth()`. otherwise you can use WEBGL renderer (`createGraphics(width, height, WEBGL)`) but this is not the main issue.

If you read the [doc](https://p5js.org/reference/#/p5.Image/mask) mask uses alpha channel. So I changed the code like this using `clear` to set alpha to 0 and lines to 255, but I don’t know why I only see the circle, and lines don’t show up in realtime

```auto
let bgImage, topImage;
let mask;

function preload() {
  bgImage = loadImage('Gradient_Test.jpg');
  topImage = loadImage('Black_Rectangle.jpg');
}

function setup()
{
  createCanvas(1080, 720);
  
  mask = createGraphics(width, height);
  mask.clear();
  // mask.smooth();
  mask.stroke(255,255);
  // mask.strokeWeight(10);
  // mask.fill(255);
  mask.circle(100,100,100)
}

function draw()
{
  background(0);
  // if (mouseIsPressed)
  {
  mask.line(mouseX, mouseY, pmouseX, pmouseY);
  }
  
  // image(topImage, 0, 0, width, height);
  
  bgImage.mask(mask);
  image(bgImage, 0, 0, width, height);
}

```

---

<div class="post-metadata">

**Author:** ![bdooley](https://avatars.discourse-cdn.com/v4/letter/b/7cd45c/32.png) [@bdooley](https://discourse.processing.org/u/bdooley)\
**Post date:** [February 28, 2021, 10:17pm UTC](https://discourse.processing.org/t/converting-pgraphics-and-mask-from-processing-to-p5-js/28133/10 "2021-02-28T22:17:03Z")

</div>

Oh great! It’s good to know that the mask will work. I’m not sure what to do about the issue with it not drawing in realtime. To test, I wrote the mask layer as a normal image to see if that would work, and it was fine. It must have to do with the mask?

I tried to make a version that converted the p.graphic to a p.image, and it works, although I really would like to draw a continuous lines and not a series of ellipses. Is that possible?

```auto
let bgImage;
let mask;
let size = 10;

function preload() {
  bgImage = loadImage("Gradient_Test.jpg");
}

function setup() {
  createCanvas(displayWidth, displayHeight);
  background(0);
  bgImage.resize(displayWidth, displayHeight);
  background(0, 100);

  mask = createGraphics(size, size);
  mask.fill(255);
  mask.noStroke();
  mask.ellipse(size/2, size/2, size);
}

function draw() {
  if (mouseIsPressed) {
  let newImage = createImage(size, size);
  newImage.copy(bgImage, mouseX - size/2, mouseY - size/2, size, size, 0, 0, size, size);

  newImage.mask(mask);
  image(newImage, mouseX - size/2, mouseY - size/2);
  }
}

```