# Put a void statement into a PGraphics layer

**URL:** <https://discourse.processing.org/t/put-a-void-statement-into-a-pgraphics-layer/4057>\
**Category:** Coding Questions\
**Created:** [October 2, 2018, 9:18pm UTC](https://discourse.processing.org/t/put-a-void-statement-into-a-pgraphics-layer/4057 "2018-10-02T21:18:34Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lore](https://avatars.discourse-cdn.com/v4/letter/l/9dc877/32.png) [@Lore](https://discourse.processing.org/u/Lore)\
**Post date:** [October 2, 2018, 9:18pm UTC](https://discourse.processing.org/t/put-a-void-statement-into-a-pgraphics-layer/4057/1 "2018-10-02T21:18:34Z")

</div>

Hello,

Is there anyway to put a void statement into a PGraphics layer? I mean something like this.

```auto
    circles.beginDraw();
    circles.noStroke()
    circles.fill(col);
    circles.myArc(mouseX, mouseY);
    circles.endDraw();

```

Here is my full code (sorry it is a bit long)

```auto
//Add possibility to change shapes (square, circle, arc, triangle)
PGraphics circles;
boolean randomCol;
int size = 50;
color circleColor;
color col;
float stop = 95;
int toDraw = 0;
float r = size / 2;
float yOffset = (4*r) / (3*PI);
float x1 = size;
float y1 = 0;  
float x2 = size * cos(TWO_PI / 3);
float y2 = size * sin(TWO_PI / 3);
float x3 = size * cos(-TWO_PI / 3);
float y3 = size * sin(-TWO_PI / 3);

void setup() 
{
  fullScreen();
  background(255);
  fill(0);
  circles = createGraphics(2000, 2000); 
  randomCol = false;
}

void draw() 
{
  background(255);
  noStroke();
  noCursor();
  if (randomCol) 
  {
    col = color(random(255), random(255), random(255));
  } 
  if (mousePressed) //If mouse is pressed then draw
  {
    if (mouseY > stop) //If mouseY variable is underneath the text, then you can draw 
    {
    drawCircles();
    }
  }
  image(circles, 0, 0); //Print the second plane
  fill(col);
  if (toDraw == 0)
  {
    fill(col);
    rect(mouseX-(size/2), mouseY-(size/2), size, size);
  }
  else if (toDraw == 1)
  {
    fill(col);
    ellipse(mouseX, mouseY, size, size);
  }
  else if (toDraw == 2)
  {
    fill(col);
    myArc(mouseX, mouseY);
  }
  else if (toDraw == 3)
  {
    fill(col);
    myTriangle(mouseX, mouseY);
  }
}

void drawCircles()
{
  if (toDraw == 0)
  {
    circles.beginDraw();
    circles.noStroke();
    circles.fill(col);
    circles.rect(mouseX-(size/2), mouseY-(size/2), size, size);
    circles.endDraw();
  }
  else if (toDraw == 1)
  {
    circles.beginDraw();
    circles.noStroke();
    circles.fill(col);
    circles.ellipse(mouseX, mouseY, size, size);
    circles.endDraw();
  }
  else if (toDraw == 2)
  {
    circles.beginDraw();
    circles.noStroke();
    circles.fill(col);
    circles.myArc(mouseX, mouseY);
    circles.endDraw();
  }
  else if (toDraw == 3)
  {
    circles.beginDraw();
    circles.noStroke();
    circles.fill(col);
    circles.myTriangle(mouseX, mouseY);
    circles.endDraw();
  }
}

void keyPressed() 
{
  if (key == CODED)
  {
    if (keyCode == UP) 
    {
      toDraw = 0;
    }
    if (keyCode == DOWN)
    {
      toDraw = 1;
    }
    if (keyCode == RIGHT)
    {
      toDraw = 2;
    }
    if (keyCode == LEFT)
    {
      toDraw = 3;
    }
  }
  if (key == TAB) //If tab is pressed, random colors

  {
    randomCol = !randomCol;
  }
  if (key == '1') //Press keys 0-9 to change size of the paint brush 

  {
    size = 10;
    stop = 75;
  }
  if (key == '2')
  {
    size = 20;
    stop = 80;
  }
  if (key == '3')
  {
    size = 30;
    stop = 85;
  }
  if (key == '4')
  {
    size = 40;
    stop = 90;
  }
  if (key == '5')
  {
    size = 50;
    stop = 95;
  }
  if (key == '6')
  {
    size = 60;
    stop = 100;
  }
  if (key == '7')
  {
    size = 70;
    stop = 105;
  }
  if (key == '8')
  {
    size = 80;
    stop = 110;
  }
  if (key == '9')
  {
    size = 90;
    stop = 115;
  }
  if (key == '0')
  {
    size = 0;
    stop = 0;
  }
  if (key == 'b') //If statements make different keys activate different colors 
  {
    randomCol = false; //We don't want random colors anymore
    col = color(0, 0, 255);
  }
  if (key == 'B')
  {
    randomCol = false; 
    col = color(0);
  }
  if (key == 'c')
  {
    randomCol = false; 
    col = color(0, 255, 255);
  }
  if (key == 'g')
  {
    randomCol = false; 
    col = color(0, 255, 0);
  }
  if (key == 'G')
  {
    randomCol = false; 
    col = color(128, 128, 128);
  }
  if (key == 'm')
  {
    randomCol = false; 
    col = color(255, 0, 255);
  }
  if (key == 'M')
  {
    randomCol = false; 
    col = color(139, 69, 19);
  }
  if (key == 'o')
  {
    randomCol = false; 
    col = color(255, 140, 0);
  }
  if (key == 'p')
  {
    randomCol = false; 
    col = color(148, 0, 211);
  }
  if (key == 'P')
  {
    randomCol = false; 
    col = color(255, 192, 203);
  }
  if (key == 'r')
  {
    randomCol = false; 
    col = color(255, 0, 0);
  }
  if (key == 'w')
  {
    randomCol = false; 
    col = color(255);
  }
  if (key == 'y')
  {
    randomCol = false; 
    col = color(255, 255, 0);
  }
  //If you press the spacebar it clears the screen 
  if (key == ' ')
  {
    circles.beginDraw();
    circles.background(255);
    circles.endDraw();
  }
  if (key == ESC) //If you press escape it stops the program
  {
    exit();
  }
}

void myTriangle(float cx, float cy) 
{
  circles.beginDraw();
  circles.pushMatrix();
  circles.translate(cx, cy);
  circles.rotate(-PI/2);
  circles.triangle(x1, y1, x2, y2, x3, y3);
  circles.popMatrix();
  circles.endDraw(); 
  pushMatrix();
  translate(cx, cy);
  rotate(-PI/2);
  triangle(x1, y1, x2, y2, x3, y3);
  popMatrix();
}

void myArc(float cx, float cy) 
{
  circles.beginDraw();
  circles.pushMatrix();
  circles.translate(cx, cy - yOffset);
  circles.arc(0, 0, size, size, 0, PI, CHORD);
  circles.popMatrix();
  circles.endDraw();
  pushMatrix();
  translate(cx, cy - yOffset);
  arc(0, 0, size, size, 0, PI, CHORD);
  popMatrix();
}

```

If you need me to be more specific of have any questions feel free to ask.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [October 3, 2018, 2:18am UTC](https://discourse.processing.org/t/put-a-void-statement-into-a-pgraphics-layer/4057/2 "2018-10-03T02:18:44Z")

</div>

> [@Lore](#):
>
> circles.myArc(mouseX, mouseY);

`myArc()` does not belong to PGraphics. You can do:

```java
void myEllipse(PGraphics pg, int x, int y){
   //Assuming begin draw has already been called
   pg.ellipse(x,y,5,5);
}

```

and you will use it like this:

```java
    circles.beginDraw();
    circles.noStroke()
    circles.fill(col);
    myEllipse(circles,mouseX, mouseY);
    circles.endDraw();

```

The small issue is that in this example I am not managing begin/endDraw. It is possible but you need to have a proper design aka. very well thought.

Kf

---

<div class="post-metadata">

**Author:** ![Lore](https://avatars.discourse-cdn.com/v4/letter/l/9dc877/32.png) [@Lore](https://discourse.processing.org/u/Lore)\
**Post date:** [October 3, 2018, 9:32am UTC](https://discourse.processing.org/t/put-a-void-statement-into-a-pgraphics-layer/4057/3 "2018-10-03T09:32:08Z")

</div>

@kfrajer

> [@kfrajer](#):
>
> void myArc(PGraphics pg, int x, int y){ //Assuming begin draw has already been called pg.ellipse(x,y); }

Wouldn’t that draw an ellipse instead of the arc? Or is there something else I am not understanding (I have tested this code).

---

<div class="post-metadata">

**Author:** ![Lore](https://avatars.discourse-cdn.com/v4/letter/l/9dc877/32.png) [@Lore](https://discourse.processing.org/u/Lore)\
**Post date:** [October 3, 2018, 12:44pm UTC](https://discourse.processing.org/t/put-a-void-statement-into-a-pgraphics-layer/4057/4 "2018-10-03T12:44:14Z")

</div>

I really need help 😅

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [October 3, 2018, 4:27pm UTC](https://discourse.processing.org/t/put-a-void-statement-into-a-pgraphics-layer/4057/5 "2018-10-03T16:27:00Z")

</div>

Hi Lore,

I assume @kfrajer was just giving an example.

The problem is with this line:

```auto
circles.myArc(mouseX, mouseY);

```

You can’t do that because `myArc()` was never implemented in the PGraphics class since you code it yourself.

The solution that @kfrajer gave you was to pass on you PGraphic as an argument of your `myArc()` function so you can keep drawing on it.

Now since you declared your PGraphics as a global variable you should not even have to pass it with an argument. You can just drop the `circles.` and just use `myArc(mouseX, mouseY)`. You will need to get rid of `circles.beginDraw();` and `circles.endDraw();` though since you are already calling them outside of your function.

---

<div class="post-metadata">

**Author:** ![Lore](https://avatars.discourse-cdn.com/v4/letter/l/9dc877/32.png) [@Lore](https://discourse.processing.org/u/Lore)\
**Post date:** [October 3, 2018, 9:36pm UTC](https://discourse.processing.org/t/put-a-void-statement-into-a-pgraphics-layer/4057/6 "2018-10-03T21:36:21Z")

</div>

@jb4x

The code @kfrajer used,

```auto
void myArc(PGraphics pg, int x, int y)
{
   //Assuming begin draw has already been called
   pg.ellipse(x,y);
}

```

still won’t work though because the function “ellipse()” won’t work with `ellipse(x, y)` because it needs 4 numbers inside of it, like `ellipse(x, y, w, z)`. So would the code be

```auto
void myArc(PGraphics pg, int x, int y, int w, int z)
{
   //Assuming begin draw has already been called
   pg.ellipse(x, y, w, z);
}

```

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [October 4, 2018, 4:16am UTC](https://discourse.processing.org/t/put-a-void-statement-into-a-pgraphics-layer/4057/7 "2018-10-04T04:16:27Z")

</div>

I have fixed my post. Anyhow, I was showing the concept. Not sure if this is what you want or if you want to follow some other structure. By the way, you can use arc instead of ellipse. You just need to provide the proper parameters to the arc function. You can find this info in the reference.

Kf

---

<div class="post-metadata">

**Author:** ![Lore](https://avatars.discourse-cdn.com/v4/letter/l/9dc877/32.png) [@Lore](https://discourse.processing.org/u/Lore)\
**Post date:** [October 4, 2018, 5:40am UTC](https://discourse.processing.org/t/put-a-void-statement-into-a-pgraphics-layer/4057/8 "2018-10-04T05:40:44Z")

</div>

@kfrajer

My original code has more than one command/line in “myarc”, would I create a duplicate one and but all of those duplicate commands with “pg.”?

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [October 4, 2018, 6:08am UTC](https://discourse.processing.org/t/put-a-void-statement-into-a-pgraphics-layer/4057/9 "2018-10-04T06:08:29Z")

</div>

Again, @kfrajer just gave you some example to work with: some kinds of template to build on top of. You can replace the content in his `pg.ellipse(float x, float y);` by your own code (the one inside your `myArc()` function).

> [@jb4x](#):
>
> Now since you declared your PGraphics as a global variable you should not even have to pass it with an argument.

It stays true. So your original code is almost correct and you just need little change: dropping the `circles.` in `circles.myArc(mouseX, mouseY);` and getting rid of `circles.beginDraw();` and `circles.endDraw();` inside your function.

---

<div class="post-metadata">

**Author:** ![Lore](https://avatars.discourse-cdn.com/v4/letter/l/9dc877/32.png) [@Lore](https://discourse.processing.org/u/Lore)\
**Post date:** [October 4, 2018, 7:11am UTC](https://discourse.processing.org/t/put-a-void-statement-into-a-pgraphics-layer/4057/10 "2018-10-04T07:11:26Z")

</div>

@jb4x

I have replaced the code @kfrajer with my own

```auto
void myArc(PGraphics circles)
{
   //Assuming begin draw has already been called
   circles.arc(0, 0, size, size, 0, PI, CHORD);
}

```

But there still is a problem. Every time Im not clicking the mouse, it is drawing the arc. My desired code wants it to only draw the arc when the mouse is pressed.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [October 7, 2018, 3:18pm UTC](https://discourse.processing.org/t/put-a-void-statement-into-a-pgraphics-layer/4057/11 "2018-10-07T15:18:01Z")

</div>

can you post your most recent code. What you want to do is doable, but it is important to see your approach. Not sure what changes you have implemented recently. Working with a PGraphics is one solution if you need a separate drawing layer. Working with this type of objects require some extra attention as you need to properly call begin and end draw.

Kf