# Drawing with custom function on p5.Graphics layer

**URL:** <https://discourse.processing.org/t/drawing-with-custom-function-on-p5-graphics-layer/23268>\
**Category:** Coding Questions\
**Created:** [August 14, 2020, 11:07pm UTC](https://discourse.processing.org/t/drawing-with-custom-function-on-p5-graphics-layer/23268 "2020-08-14T23:07:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hapiel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hapiel/32/10226_2.png) [@Hapiel](https://discourse.processing.org/u/Hapiel)\
**Post date:** [August 14, 2020, 11:07pm UTC](https://discourse.processing.org/t/drawing-with-custom-function-on-p5-graphics-layer/23268/1 "2020-08-14T23:07:27Z")

</div>

Hiya,

I wrote a function which draws a shape for me, and now I want to draw that shape onto a p5.Graphics layer. How do I do that?  
Normally I write `myGraphics.ellipse(0,0,10);` which works fine, but I can’t write:

```auto
myGraphics.myFunction();
...
function myFunction() { ellipse(0,0,10);

```

Can I somehow enter the p5.Graphics object as a parameter? Or is there another way to do this? Or was it a silly idea to draw a shape with a function to begin with?

My full code in action, I hope that makes it a bit more clear what I’m trying to do:

[https://editor.p5js.org/hapiel/sketches/F1WHueh48](https://editor.p5js.org/hapiel/sketches/F1WHueh48)

And also pasted here:

```auto
let layerDraw;

function setup() {
  createCanvas(400, 400);

  layerDraw = createGraphics(width, height);

}

function draw() {

  background(123);

  ngon(mouseX, mouseY, 5, 50);

  if (mouseIsPressed) {

    //I want to write this shape onto layerDraw
    ngon(mouseX, mouseY, 5, 50); 
    //like I write this line to layerdraw:
    layerDraw.line(mouseX, mouseY, pmouseX, pmouseY);

  }
  image(layerDraw, 0, 0);

}

function ngon(x, y, sides, sz, star = false, ins_ = sz/2, midPos = 0.5){
  //simple multigon ngon or star drawing, starting on the right.
  //x, y, amount of sides, size (diameter if it were in a circle)
  //optional: star (true/false), star depth radius, position of middle (default 0.5. 0 or 1 is under the points.)

  let angle = TWO_PI / sides;
  let r = sz/2;
  let inside = ins_/2;

  push()
  translate(x, y);
  beginShape();
  for (let i = 0; i < sides; i++) {
    x = r * cos(angle * i);
    y = r * sin(angle * i);
    vertex(x, y);   
    if (star){
      x = inside * cos(angle * i + angle*midPos);
      y = inside * sin(angle * i + angle*midPos);
      vertex(x, y);   
    }
  }
  endShape(CLOSE);
  pop();
}

```

Thanks for taking a look!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 15, 2020, 5:53am UTC](https://discourse.processing.org/t/drawing-with-custom-function-on-p5-graphics-layer/23268/2 "2020-08-15T05:53:52Z")

</div>

> [@Hapiel](#):
>
> `function ngon(x, y, sides, sz, star = false, ins_ = sz/2, midPos = 0.5) {`

You can request the layer canvas as an extra argument for your **ngon()** function:  
`function ngon(x, y, sides, sz, star = false, ins_ = sz/2, midPos = .5, pg = p5.instance) {`

Now prefix all drawing-related methods w/ that _pg_ parameter:

- `push();` → `pg.push();`
- `beginShape();` → `pg.beginShape();`
- `vertex(x, y);` → `pg.vertex(x, y);`

---

<div class="post-metadata">

**Author:** ![Hapiel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hapiel/32/10226_2.png) [@Hapiel](https://discourse.processing.org/u/Hapiel)\
**Post date:** [August 15, 2020, 9:25am UTC](https://discourse.processing.org/t/drawing-with-custom-function-on-p5-graphics-layer/23268/3 "2020-08-15T09:25:03Z")

</div>

That’s exactly what I needed!

I do wonder: I can’t find anything about p5.instance in the p5 reference. How could I have been able to work out that this is the default graphics object?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 15, 2020, 9:36am UTC](https://discourse.processing.org/t/drawing-with-custom-function-on-p5-graphics-layer/23268/4 "2020-08-15T09:36:44Z")

</div>

> [@Hapiel](#):
>
> I can’t find anything about p5._instance_ in the p5 reference.

It’s undocumented for internal use I guess. 🙈

> [@Hapiel](#):
>
> , that this is the default graphics object?

Actually it’s the sketch’s global p5 reference. But its methods act upon the main canvas too. 🖌