Switching title images

Processing Coding Questions
1

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

2

Welcome,

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

:)

3

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

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

please before setup() say boolean showImageNumber1 =true;

Then in draw():

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

Chrisir

4

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

5

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

  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

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

6

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

1 Like
7

Sure, I am glad to help!

1 Like
8

We can shorten two passages in my code.

Remark 1

You can shorten this to

if (millis() - savedTime > totalTime) {

Remark 2

You can shorten this to

    //toggle
    showImageNumber1 = ! showImageNumber1;

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

Chrisir

9

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

1 Like
10

See private message

Chrisir