Having trouble with if/else statement

Processing Coding Questions
1

Hi, I’m new to Processing. I’m using the program as an introduction to coding in my high school class.
I’m currently making a face but I’m having trouble with switching the display of two shapes.

PShape face1, head, eye1, eye2, pupil1, pupil2, mouth;
PShape face2, head1, eye3, eye4, mouth1;

void setup () {
size(1200, 850);

face1 = createShape(GROUP);
  head = createShape(ELLIPSE, 100, 100, 150, 150);
  head.setFill(color(255, 205, 148));
  eye1 = createShape(ELLIPSE, 75, 85, 30, 20);
  eye1.setFill(color(255));
  eye2 = createShape(ELLIPSE, 125, 85, 30, 20);
  eye2.setFill(color(255));
  pupil1 = createShape(ELLIPSE, 75, 85, 10, 10);
  pupil1.setFill(color(0));
  pupil2 = createShape(ELLIPSE, 125, 85, 10, 10);
  pupil2.setFill(color(0));
  mouth = createShape(ARC, 100, 125, 80, 50, 0, 3.14);
  mouth.setFill(color(255, 205, 148));
  
  face1.addChild(head);
  face1.addChild(eye1);
  face1.addChild(eye2);
  face1.addChild(pupil1);
  face1.addChild(pupil2);
  face1.addChild(mouth);

face2 = createShape(GROUP);
  head1 = createShape(ELLIPSE, 100, 100, 151, 151);
  head1.setFill(color(255, 205, 148));
  eye3 = createShape(ELLIPSE, 75, 85, 30, 20);
  eye3.setFill(color(219, 164, 130));
  eye4 = createShape(ELLIPSE, 125, 85, 30, 20);
  eye4.setFill(color(219, 164, 130));
  mouth1 = createShape(ARC, 100, 125, 80, 50, 0, 3.14);
  mouth1.setFill(color(255, 205, 148));
  
  face2.addChild(head1);
  face2.addChild(eye3);
  face2.addChild(eye4);
  face2.addChild(mouth1);
}

void draw() {
  background(204);
  translate(mouseX, mouseY);
  shape(face1);
}

My problem arises at the last bit of code, starting with void draw() - I’m unsure of how to place an if / else statement that will allow me to switch between displaying face1 and face2 by clicking the mouse.

1 Like
2

start with the
https://processing.org/reference/mousePressed_.html

also need like a screen variable
and choose what to show like example:

void draw() {
  background(100, 200, 0);
  if ( screen == 1 ) shape(face1, mouseX, mouseY);
  if ( screen == 2 ) shape(face2, mouseX, mouseY);
}

int screen = 1;

void mousePressed() {
  if ( screen == 1 ) screen = 2;
}
1 Like
3

Instead of switching back and forth between two seperate shapes, i tried setting it up to just change the color values of where the eyes would be (eye1, eye2, pupil1, pupil2)

void draw() {
    background(200);
    translate(mouseX, mouseY);
    shape(face1);
if (mousePressed == true) {
    fill(219, 164, 130);
  } else {
    fill(0);
  }
  shape(eye1);
  shape(eye2);
  shape(pupil1);
  shape(pupil2);
}

but this still does not change anything when I click my mouse

4

you mean like

void draw() {
  background(100, 200, 0);
  if ( mousePressed ) shape(face1, mouseX, mouseY);
  else                shape(face2, mouseX, mouseY);
}
1 Like
5

Yes! That’s exactly what I was going for. Thank you so much

1 Like
6

It would work if we’d replace the shapes in the bottom of void draw() with 2D primitives such as rect and ellipse. When changing the colour of an existing PShape we need to use setFill instead.

void draw() {
  background(200);
  translate(mouseX, mouseY);
  shape(face1);
  if (mousePressed == true) {
    eye1.setFill(color(219, 164, 130));
  } else {
    eye1.setFill(color(0));
  }
  shape(eye1);
  shape(eye2);
  shape(pupil1);
  shape(pupil2);
}
1 Like