Need help with PGraphics

Processing Coding Questions
1

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.

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

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:

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);
}
2 Likes
3

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