How do I display an event during a certain amount of time?

Artefakt

I have just begun learning to code. How do I make an event happen for a certain amount of time before the program continues? I have searched for a solution, but haven´t found one yet.

An example:

I have made a program where two bars, one green and one red, are expanding to the left in the frame. I let a random function control how much the bars are expanding, with a probability set to 50 percent for which one of the bars that will expand with one pixel each time through the draw-function. When one of the bars reach the opposite frame border the process starts all over with a white frame. See below.

float x = 0;
float x2 = 0;

void setup() {
  size(400, 400);
  smooth();
  background(255);
  noFill();
}

void draw () {
  if (random (100) < 50) {
    stroke(255, 0, 0);
    line (x, 100, x, 200); 
    x += 1;
  } else {
    stroke (0, 255, 0);
    line (x2, 200, x2, 300);
    x2 += 1;
  }
  if (x == width) {
    background(255);
    x = 0;
    x2 = 0;
  }
  if (x2 == width) {
    background(255);
    x = 0;
    x2 = 0;
  }
}

What I want to do, but haven´t found a solution to, is to display a red frame for one second after the red bar reaches the edge first, or a green frame for one second after the green bar reaches the edge first, and then start all over again with a white frame and increasing bars.

I have tried to understand how the millis() works, but haven´t been able to make it work. I have also tried to make three separate void functions that are called from the draw-function, one displaying and increasing the bars, and two that show either the red or the green frame, and try to time these. That didn´t work either. I´d like to find a solution that is using time, rather than using framerates, if possible.

Can someone point me to a workable solution or how to think about this?

Ater

Well, millis() is what you are looking for. You can use %(modulo) to repeat actions each specified period of time or you can create a variable to store millis() value at the beginning of your function and check the difference between current time since the program started and stored one. Just play around with millis() a little bit more, you should get it.

TfGuy44

I'm actually going to advocate not using millis() in this situation, because what you're asking for can be done quite simply with a little more additional logic (and less than would be needed for a solution that uses millis()).

float x = 0;
float x2 = 0;
boolean flashGreen, flashRed;

void setup() {
  size(400, 400);
  smooth();
  background(255);
  noStroke();
}

void draw () {

  if (flashGreen) {
    background(0, 255, 0); 
    flashGreen=false; 
    return;
  }
  if (flashRed) {
    background(255, 0, 0); 
    flashRed=false; 
    return;
  }

  if (random(100) < 50) {
    x += 1;
  } 
  else {
    x2 += 1;
  }

  background(255);
  fill(255, 0, 0);
  rect(0, 100, x, 100); 
  fill (0, 255, 0);
  rect(0, 200, x2, 100);

  if (x == width) {
    x = 0;
    x2 = 0;
    flashRed = true;
  }
  if (x2 == width) {
    x = 0;
    x2 = 0;
    flashGreen = true;
  }
}

Artefakt

Ater:

Ok, thanks, I will try to understand the millis() a bit better then.

TfGuy44:

Ok, I haven´t learned about boolean expressions yet, but I think I understand what it does in your program example. I will look it up.

Yet, your example still doesn´t show how to display the red or green flashes for a certain amount of time, say, 1 second. Now it just makes a single short flash.