Put a void statement into a PGraphics layer

Processing Coding Questions
1

Hello,

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

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

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

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

1 Like
2

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

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:

    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

1 Like
3

@kfrajer

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

4

I really need help :sweat_smile:

5

Hi Lore,

I assume @kfrajer was just giving an example.

The problem is with this line:

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.

1 Like
6

@jb4x

The code @kfrajer used,

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

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);
}
1 Like
7

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

8

@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.”?

9

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

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.

10

@jb4x

I have replaced the code @kfrajer with my own

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.

11

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