# Need help with PGraphics

**URL:** <https://discourse.processing.org/t/need-help-with-pgraphics/3678>\
**Category:** Coding Questions\
**Created:** [September 19, 2018, 7:58pm UTC](https://discourse.processing.org/t/need-help-with-pgraphics/3678 "2018-09-19T19:58:17Z")\
**Posts on this page:** 3\
**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:** [September 19, 2018, 7:58pm UTC](https://discourse.processing.org/t/need-help-with-pgraphics/3678/1 "2018-09-19T19:58:17Z")

</div>

Hello, I am fairly new to processing and I have a problem with my code. What I want the code to do is if the mouse is pressed, to draw on the surface, and if the mouse isn’t pressed, to not draw but to still having an ellipse moving with the cursor. I have managed the second part, but not the first part. The issue is that while holding down on the mouse, it draws like expected. But when the mouse isn’t pressed, it erases the drawing (the background). I have another issue that I can explain later but it might be solved if this first one is solved. Sorry in advance if my code is a bit messy.

```auto
PGraphics circles;
float right = 50;
float left = 50;
float bin = 0;
float ban = 0;
float bam = 0;
float lop = 110;
String v = "Welcome to Paint Game! Below are a list of keys for different colors and a list of challenges for you! But, remember to reset after each challenge.";
String s = "Q = Blue, W = Green, E = Orange, R = Purple, A = Red, S = White, D = Yellow, F = Pink, Z = Black, X = Brown, C = Gray, V = Cyan Space = Random.";
String e = "You can to click to reset your drawing, and press numbers 0-9 to change the size of the paint!";
String q = "Challenge 1: Draw a face. Challenge 2: Draw a person for the face. Challenge 3: Draw a family for the person. Challenge 4: Draw a house for the family. Challenge 5: Have fun!";

void setup() 
{
  size(1280, 730);
  rectMode(CENTER);
  background(255);
  fill(0);
  text(v, 10, 20);
  text(s, 10, 40);
  text(e, 10, 60);
  text(q, 10, 80);
  line(0, 85, 1280, 85);
  circles = createGraphics(1280, 730); 
}

void draw() 
{
  noStroke();
  noCursor();
  if (key == 'q')
  {
    bin = 0;
    ban = 0;
    bam = 255;
  }
  if (key == 'w')
  {
    bin = 0;
    ban = 255;
    bam = 0;
  }
  if (key == 'e')
  {
    bin = 255;
    ban = 140;
    bam = 0;
  }
  if (key == 'r')
  {
    bin = 148;
    ban = 0;
    bam = 211;
  }
  if (key == 'a')
  {
    bin = 255;
    ban = 0;
    bam = 0;
  }
  if (key == 's')
  {
    bin = 255;
    ban = 255;
    bam = 255;
  }
  if (key == 'd')
  {
    bin = 255;
    ban = 255;
    bam = 0;
  }
  if (key == 'f')
  {
    bin = 255;
    ban = 20;
    bam = 147;
  }
  if (key == 'z')
  {
    bin = 0;
    ban = 0;
    bam = 0;
  }
  if (key == 'x')
  {
    bin = 139;
    ban = 69;
    bam = 19;
  }
  if (key == 'c')
  {
    bin = 128;
    ban = 128;
    bam = 128;
  }
  if (key == 'v')
  {
    bin = 0;
    ban = 255;
    bam = 255;
  }
  if (key == ' ')
  {
    bin = random(255);
    ban = random(255);
    bam = random(255);
  }
  if (key == '1')
  {
    right=10;
    left=10;
    lop=90;
  }
  if (key == '2')
  {
    right=20;
    left=20;
    lop=95;
  }
  if (key == '3')
  {
    right=30;
    left=30;
    lop=100;
  }
  if (key == '4')
  {
    right=40;
    left=40;
    lop=105;
  }
  if (key == '5')
  {
    right=50;
    left=50;
    lop=110;
  }
  if (key == '6')
  {
    right=60;
    left=60;
    lop=115;
  }
  if (key == '7')
  {
    right=70;
    left=70;
    lop=120;
  }
  if (key == '8')
  {
    right=80;
    left=80;
    lop=125;
  }
  if (key == '9')
  {
    right=90;
    left=90;
    lop=130;
  }
  if (key == '0')
  {
    right=0;
    left=0;
    lop=0;
  }
  if (mousePressed)
  {
    fill(bin, ban, bam);
    ellipse(mouseX, mouseY, right, left);
    if (mouseY>lop)
    {
      fill(bin, ban, bam);
      ellipse(mouseX, mouseY, right, left);
    }
    if (mouseY<lop);
    {
      noFill();
      ellipse(mouseX, mouseY, right, left);
      print ("e");
    }
  }
  else
  {
    circles.beginDraw();
    circles.noStroke();
    circles.background(255);
    circles.fill(bin, ban, bam);
    circles.ellipse(mouseX, mouseY, right, left);
    circles.endDraw();
    image(circles, 0, 0);
  }
  fill(0);
  stroke(0);
  line(0, 85, 1280, 85);
  text(v, 10, 20);
  text(s, 10, 40);
  text(e, 10, 60);
  text(q, 10, 80);
}

```

---

<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:** [September 19, 2018, 8:07pm UTC](https://discourse.processing.org/t/need-help-with-pgraphics/3678/2 "2018-09-19T20:07:30Z")

</div>

Hi Lore,

the problem is your `if(mousePressed)` statement because either you keep overlapping your ellipses either you arase everything to print just the current one (with `circles.background(255);`)

The way to go is to separate the drawing of the “cursor” to the drawing of the circles on the PGraphic.

You can check the sketch below for an example of what I mean:

```auto
PGraphics circles;

void setup() 
{
  size(1280, 730);
  background(255);

  circles = createGraphics(1280, 730); 
}

void draw() 
{
  background(255);

  if (mousePressed)
  {
    circles.beginDraw();
    circles.noStroke();
    circles.fill(0);
    circles.ellipse(mouseX, mouseY, 10, 10);
    circles.endDraw();
  }
  
  image(circles, 0, 0);
  
  noStroke();
  fill(255, 0, 0);
  ellipse(mouseX, mouseY, 10, 10);
}

```

---

<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:** [September 19, 2018, 8:13pm UTC](https://discourse.processing.org/t/need-help-with-pgraphics/3678/3 "2018-09-19T20:13:09Z")

</div>

Thank you so much. I understand the problem I was facing now.