# Switching title images

**URL:** <https://discourse.processing.org/t/switching-title-images/34735>\
**Category:** Coding Questions\
**Created:** [January 19, 2022, 10:32pm UTC](https://discourse.processing.org/t/switching-title-images/34735 "2022-01-19T22:32:02Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![cisky](https://avatars.discourse-cdn.com/v4/letter/c/977dab/32.png) [@cisky](https://discourse.processing.org/u/cisky)\
**Post date:** [January 19, 2022, 10:32pm UTC](https://discourse.processing.org/t/switching-title-images/34735/1 "2022-01-19T22:32:02Z")

</div>

Hi everyone, I’ve just started working with Processing and I need your help on my project.  
I’m tryna make the classic “Breakout” game and, to start, I’d like to have a “blinking” title.  
My goal is to have this red and brown “breakout” text with changes from brown to red and  
from red to brown every second, but I really don’t know how to do that! Here’s what I wrote,  
with this code my text “blinks” but keeps brown just for a millisecond and I really have 0 ideas  
on what to write to make it blink properly. Also, if you have any better solution for a blinking  
text, it’d be awesome. Thanks beforehand.

`PImage bg, titleB, titleR;`

`
int totalTime = 1000;
int savedTime;
void setup(){
size(1000, 650);
background(250, 0, 0);
bg = loadImage(“mattoni.jpg”);
titleB = loadImage(“BREAKOUTm.png”);
titleR = loadImage(“BREAKOUTr.png”);
image(bg, 0, 0);
savedTime = millis();
}
void draw(){
int passedTime = millis() - savedTime;
image(titleR, 90, height/2-130);
if (passedTime > totalTime){
image(titleB, 90, height/2-130);
```
savedTime = millis();

```
`

`}
}`

ps. sorry for the bad indentation but i still don’t know how to properly use this forum haha

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 19, 2022, 10:47pm UTC](https://discourse.processing.org/t/switching-title-images/34735/2 "2022-01-19T22:47:47Z")

</div>

Welcome,

> [@cisky](#):
>
> ps. sorry for the bad indentation but i still don’t know how to properly use this forum haha

This is how:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

`:)`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 19, 2022, 10:50pm UTC](https://discourse.processing.org/t/switching-title-images/34735/3 "2022-01-19T22:50:50Z")

</div>

for your timer I suggest a flag (named showImageNumber1) that tells you which image to draw and that you change with your timer:

```auto
if (passedTime > totalTime){
    //toggle
    if(showImageNumber1) 
            showImageNumber1 = false; 
            else showImageNumber1 = true; 
    savedTime = millis();
}

```

please before setup() say `boolean showImageNumber1 =true;`

**Then in draw():**

```auto
if(showImageNumber1) 
    image(titleR, 90, height/2-130);
    else image(titleB, 90, height/2-130);

```

Chrisir

---

<div class="post-metadata">

**Author:** ![cisky](https://avatars.discourse-cdn.com/v4/letter/c/977dab/32.png) [@cisky](https://discourse.processing.org/u/cisky)\
**Post date:** [January 20, 2022, 10:33am UTC](https://discourse.processing.org/t/switching-title-images/34735/4 "2022-01-20T10:33:21Z")

</div>

> [@Chrisir](#):
>
> boolean showImageNumber1 =true;

Hi, thanks a lot for you reply. I don’t really understand where to write those codes, so here’s what I wrote (this doesn’t work, it just displays the brown image).

`PImage bg, titleB, titleR;`

`
int totalTime = 1000;
int savedTime;
boolean showImageNumber1 =true;
void setup(){
size(1000, 650);
background(250, 0, 0);
bg = loadImage(“mattoni.jpg”);
titleB = loadImage(“BREAKOUTm.png”);
titleR = loadImage(“BREAKOUTr.png”);
image(bg, 0, 0);
savedTime = millis();
}
void draw(){
int passedTime = millis() - savedTime;
/*image(titleR, 90, height/2-130);
if (passedTime > totalTime){
image(titleB, 90, height/2-130);
```
savedTime = millis();

```
`

`}*/
if (passedTime > totalTime){
//toggle
if(showImageNumber1) showImageNumber1 = false;
else showImageNumber1 = true;
savedTime = millis();
}
if(showImageNumber1) {
image(titleR, 90, height/2-130);
image(titleB, 90, height/2-130);
}
}`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 20, 2022, 10:41am UTC](https://discourse.processing.org/t/switching-title-images/34735/5 "2022-01-20T10:41:32Z")

</div>

I made a mistake (corrected it now). I forgot to place the “`else`” here:

```auto
  if (showImageNumber1) 
    image(titleR, 90, height/2-130);
  else image(titleB, 90, height/2-130);

```

* * *

**By the way**

- you can auto-format your code by hitting ctrl-t in processing IDE prior to posting
- in the post: you can highlight your code (without the text) with the mouse and click ctrl-e (or click the `</>` icon in the small command bar with the mouse). Then the `code` is formatted as `code`.
- In the small command bar you can find other formatting tools too.

* * *

**Full Code**

```auto
PImage bg, titleB, titleR;

int totalTime = 1000; // 1 sec
int savedTime;

boolean showImageNumber1 = true;

// -------------------------------------------------------------------

void setup() {
  size(1000, 650);
  background(250, 0, 0);

  bg = loadImage("mattoni.jpg");
  titleB = loadImage("BREAKOUTm.png");
  titleR = loadImage("BREAKOUTr.png");

  savedTime = millis();
}//func

void draw() {
  background(250, 0, 0);

  int passedTime = millis() - savedTime;

  if (passedTime > totalTime) {
    //toggle
    if (showImageNumber1) 
      showImageNumber1 = false;
      else showImageNumber1 = true;
    //set timer again
    savedTime = millis();
  }

  if (showImageNumber1) 
    image(titleR, 90, height/2-130);
  else image(titleB, 90, height/2-130);
  //
}//func
//

```

And welcome to the forum!

Warm regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![cisky](https://avatars.discourse-cdn.com/v4/letter/c/977dab/32.png) [@cisky](https://discourse.processing.org/u/cisky)\
**Post date:** [January 20, 2022, 10:54am UTC](https://discourse.processing.org/t/switching-title-images/34735/6 "2022-01-20T10:54:21Z")

</div>

thanks a lot it works now!!! i’ll probably need some more help in the future (also for this code) so if you’ll be able to help me it’d be great! thanks a lot again

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 20, 2022, 11:34am UTC](https://discourse.processing.org/t/switching-title-images/34735/7 "2022-01-20T11:34:19Z")

</div>

Sure, I am glad to help!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 20, 2022, 7:18pm UTC](https://discourse.processing.org/t/switching-title-images/34735/8 "2022-01-20T19:18:49Z")

</div>

We can shorten two passages in my code.

**Remark 1**

> [@Chrisir](#):
>
> ```auto
> int passedTime = millis() - savedTime;
> 
> if (passedTime > totalTime) {
> 
> ```

You can shorten this to

` if (millis() - savedTime > totalTime) {`

* * *

**Remark 2**

> [@Chrisir](#):
>
> ```auto
> //toggle
> if (showImageNumber1) 
> showImageNumber1 = false;
> else showImageNumber1 = true;
> 
> ```

You can shorten this to

```auto
    //toggle
    showImageNumber1 = ! showImageNumber1;

```

The ! means NOT, so the value on the right is inverted and stored in `showImageNumber1`.

Chrisir

---

<div class="post-metadata">

**Author:** ![cisky](https://avatars.discourse-cdn.com/v4/letter/c/977dab/32.png) [@cisky](https://discourse.processing.org/u/cisky)\
**Post date:** [January 20, 2022, 8:10pm UTC](https://discourse.processing.org/t/switching-title-images/34735/9 "2022-01-20T20:10:39Z")

</div>

thank you so much! is there any way we could talk easily (not on a forum)? maybe on Instagram, if it’s ok for you

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 20, 2022, 11:32pm UTC](https://discourse.processing.org/t/switching-title-images/34735/10 "2022-01-20T23:32:39Z")

</div>

See private message

Chrisir