# Having trouble with if/else statement

**URL:** <https://discourse.processing.org/t/having-trouble-with-if-else-statement/16460>\
**Category:** Coding Questions\
**Created:** [December 17, 2019, 1:06am UTC](https://discourse.processing.org/t/having-trouble-with-if-else-statement/16460 "2019-12-17T01:06:17Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![lilturkey7](https://avatars.discourse-cdn.com/v4/letter/l/b5e925/32.png) [@lilturkey7](https://discourse.processing.org/u/lilturkey7)\
**Post date:** [December 17, 2019, 1:06am UTC](https://discourse.processing.org/t/having-trouble-with-if-else-statement/16460/1 "2019-12-17T01:06:17Z")

</div>

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.

```auto
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.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 17, 2019, 1:37am UTC](https://discourse.processing.org/t/having-trouble-with-if-else-statement/16460/2 "2019-12-17T01:37:13Z")

</div>

start with the  
[https://processing.org/reference/mousePressed\_.html](https://processing.org/reference/mousePressed_.html)

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

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![lilturkey7](https://avatars.discourse-cdn.com/v4/letter/l/b5e925/32.png) [@lilturkey7](https://discourse.processing.org/u/lilturkey7)\
**Post date:** [December 17, 2019, 2:23am UTC](https://discourse.processing.org/t/having-trouble-with-if-else-statement/16460/3 "2019-12-17T02:23:19Z")

</div>

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)

```auto
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

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 17, 2019, 2:30am UTC](https://discourse.processing.org/t/having-trouble-with-if-else-statement/16460/4 "2019-12-17T02:30:38Z")

</div>

you mean like

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

```

---

<div class="post-metadata">

**Author:** ![lilturkey7](https://avatars.discourse-cdn.com/v4/letter/l/b5e925/32.png) [@lilturkey7](https://discourse.processing.org/u/lilturkey7)\
**Post date:** [December 17, 2019, 2:45am UTC](https://discourse.processing.org/t/having-trouble-with-if-else-statement/16460/5 "2019-12-17T02:45:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [December 17, 2019, 6:28am UTC](https://discourse.processing.org/t/having-trouble-with-if-else-statement/16460/6 "2019-12-17T06:28:24Z")

</div>

> [@lilturkey7](#):
>
> but this still does not change anything when I click my mouse

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.

```auto
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);
}

```