Generating time specifies flashes

Programming Questions

walterleaf

Generating time specifies flashes

in Programming Questions • 10 months ago

Hi all,

I'm v. new to Processing and could do with a couple of pointers. I'd like to have a screen with four rectangles flashing ON and OFF independently. The flashing rates are different for each rectangle, and for every ON and OFF period. As the flashes will be happening very quickly are there any tips to avoid frames dropping? I need to have the flashing as precise as possible.

The code I have below is the first step, I just need to add the flashing!

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

void draw() {

//Top left square
rectMode(CENTER);
noStroke();
fill(122);
rect(250,150,100,100);
delay(500);

//left square
rectMode(CENTER);
noStroke();
fill(122);
rect(100,250,100,100);

    //right square
rectMode(CENTER);
noStroke();
fill(122);
rect(400,250,100,100);


//Bottom right square
rectMode(CENTER);
noStroke();
fill(122);
rect(250,350,100,100);
}

Replies(12)

einraum.d..

Re: Generating time specifies flashes

10 months ago

int frequency = 30; // 30/60 -> frequency 0.5 seconds

if (frameCount % frequency == 0)

void setup() {
size (500, 500);
background (255);
frameRate(60); // set frameRate
smooth();
}
void draw() {
background(0);
int frequency = 30; // 30/60 -> frequency 0.5 seconds // 1 -> 1/60 s // 60 -> 1s // 120 -> 2s ...
if (frameCount % frequency == 0) {
rectMode(CENTER);
noStroke();
fill(122);
rect(250, 150, 100, 100);
delay(500);
}
}

GoToLoop

Re: Generating time specifies flashes

10 months ago

Just some preliminary tips:
If all your drawing is smooth() + noStroke(); + rectMode(CENTER); + fill(122); + framerate(30);
It is much better you set those within function setup() {}:

void setup() {
    
    size(500, 500);
    frameRate(2);
    smooth();
    noStroke();
    rectMode(CENTER);
    fill(122);
}

void draw() {
    
    background(255);
    
    //Top left square
    rect(250, 150, 100, 100);

    //left square
    rect(100, 250, 100, 100);

    //right square
    rect(400, 250, 100, 100);

    //Bottom right square
    rect(250, 350, 100, 100);
}

GoToLoop

Re: Re: Generating time specifies flashes

10 months ago

The best approach would be to create a class for your rectangles.
Within it, you can define variables for each characteristic of each rectangle.
Like:

xPos & yPos
width & height
colorON & colorOFF
flashTimerON & flashTimerOFF
flashState

Then you can code methods to deal w/ those data.

Take notice that each instance of class Rectangle is independent from each other.
For example -> rectangle[0].flashTimerON is stored separately from rectangle[3].flashTimerON.

Although not so precise, if your program is fast enough, you can base the timer from frameCount variable.

frameCount = number of times function draw() was called!
frameRate(x) = number of attempt times draw() is called per second ( x = FPS )

So with frameRate(2) & rectangle[2].flashTimerON = 10 & rectangle[2].flashTimerOFF = 5
means that rectangle #3 displays colorON for 5 seconds and colorOFF for 2.5 seconds!

walterleaf

Re: Generating time specifies flashes

10 months ago

Thanks for all the tips I'll get cracking!

Eirnraum > I tried running your code but when I start ramping up the frequencies (e.g. ON = 50ms OFF 17ms) I get a lot of visible dropouts.

Also, is there a way to delay by floating point numbers?

GoToLoop

Re: Re: Generating time specifies flashes

10 months ago

Well, I did the scheme I've told you about; that is, the class approach (OOP)

You can see it in action @ Flash Rectangles

Here's my example code; any doubts about it, just ask:

/*
 * Flash Rectangles (v2.4)
 * by GoToLoop (2012/Dec)
 * for WalterLeaf
 *
 * http://forum.processing.org/topic/generating-time-specifies-flashes
 * studio.processingtogether.com/sp/pad/export/ro.96hnGiPFBa4CP/latest
 */

final static color BLACK  = 0;
final static color WHITE  = 0xFF;
final static color RED    = #FF0000;
final static color GREEN  = #00FF00;
final static color BLUE   = #0000FF;
final static color YELLOW = #FFFF00;

final static color BG  = WHITE;
final static byte  FPS = 10;

final static short rectW = 100, rectH = 100;
final static short rectHH = rectH + rectH/2;

final static byte  rectsNum = 4;
final static Rectangle[] rects = new Rectangle[rectsNum];

void createRects() {

    //Top square:
    rects[0] = new Rectangle( width>>1, rectHH, rectW, rectH, 
    5, 10, RED, GREEN, true );    //GREEN stays longer (10/10 = 1s)

    //Left square:
    rects[1] = new Rectangle( rectW, height>>1, rectW, rectH, 
    2, 4, BLUE, YELLOW, true );  //YELLOW stays longer (4/10 = .4s)

    //Right square:
    rects[2] = new Rectangle( width-rectW, height>>1, rectW, rectH, 
    2, 4, YELLOW, BLUE, false ); //BLUE stays longer (4/10 = .4s)

    //Bottom square:
    rects[3] = new Rectangle( width>>1, height-rectHH, rectW, rectH, 
    4, 10, RED, GREEN, false );  //GREEN stays longer again
}

void setup() {

    size(500, 500);
    frameRate(FPS);
    rectMode(CENTER);
    smooth();
    noStroke();
    background(BG);

    createRects();
}

void draw() {

    for ( byte r=rectsNum; r!=0; rects[--r].run() );

    print(frameCount + "\t");
}

class Rectangle {

    int x, y;
    int w, h;
    int timerON, timerOFF;
    color colorON, colorOFF;
    boolean flashState;

    int finishON, finishOFF;

    Rectangle(int xPos, int yPos, int wide, int high, 
    int tON, int tOFF, color colON, color colOFF, boolean state) {

        x = xPos;
        y = yPos;
        w = wide;
        h = high;

        timerON  = tON;
        timerOFF = tOFF;

        colorON  = colON;
        colorOFF = colOFF;

        flashState = !state;

        run();
    }

    void run() {

        if ( updateState() )    drawRect();
    }

    void drawRect() {

        fill(flashState ? colorON : colorOFF);

        rect(x, y, w, h);
    }

    boolean updateState() {

        if ( checkTimer() ) {
            flashState = !flashState;
            restartCounters();
            return true;
        }

        return false;
    }

    boolean checkTimer() {

        return flashState ? 
        frameCount == finishON : frameCount == finishOFF;
    }

    void restartCounters() {

        finishON  = frameCount + timerON;
        finishOFF = frameCount + timerOFF;
    }
}

walterleaf

Re: Generating time specifies flashes

10 months ago

Awesome, thanks!

One question, how can I change the tON and tOFF variables in milliseconds (and fractions of milliseconds)?

For example, one square needs to be ON for 50ms, OFF for 16.7ms.

GoToLoop

Re: Generating time specifies flashes

10 months ago

Just an observation:
tON & tOFF are temporary created local variables which receive the parameters passed to them when an instance of class Rectangle are created.
The "real" persistent variables are timerON & timerOFF respectively!

Now, both timerON & timerOFF are of type int which store whole numbers only.
But you can switch them to type float so you can store real numbers if you wish.

Although, maybe, it is a little pointless, since frameCount, on which class Rectangle's timer check strategy is based, is also an integer variable!

However, you may also try to change variable FPS, which is the rate on which function draw() is attempted to be called.

With FPS = 60, frameCount gets 60 bigger in just 1 second.
And if timerON = 10 & timerOFF = 5, which means it is a total period = 15 frames; the whole flash ON/OFF happens @ 4 times / second I guess. Not so good at math though!

Another option is to replace current var frameCount based timer for function millis() based timer!
You just need to modify Rectangle's method functions -> checkTimer() & restartCounters() to use millis() instead of frameCount!

Function millis() is not based on the # of times draw() is called back, rather on real milliseconds passed since program has started running!

But then, it's up to you!

walterleaf

Re: Generating time specifies flashes

10 months ago

Thanks GTL.

I've tried your suggestions, redefining as floats and replacing framecount with millis(), but think I'm missing something as now I can't see the squares. Do I need to define millis() somewhere?

/*
* Flash Rectangles (v2.3)
* by GoToLoop (2012/Dec)
* for WalterLeaf
*
* http://forum.processing.org/topic/generating-time-specifies-flashes
* studio.processingtogether.com/sp/pad/export/ro.96hnGiPFBa4CP/latest
*/

final static color BLACK = 0;
final static color WHITE = 0xFF;
final static color RED    = #FF0000;
final static color GREEN = #00FF00;
final static color BLUE   = #0000FF;
final static color YELLOW = #FFFF00;

final static color BG = WHITE;
final static byte FPS = 40;

final static short rectW = 100, rectH = 100;
final static short rectHH = rectH + rectH/2;

final static byte rectsNum = 4;
final static Rectangle[] rects = new Rectangle[rectsNum];

void createRects() {

    //Top square:
    rects[0] = new Rectangle( width>>1, rectHH, rectW, rectH,
    10, 33.8, RED, GREEN, true );    //GREEN stays longer

    //Left square:
    rects[1] = new Rectangle( rectW, height>>1, rectW, rectH,
    50, 50, BLUE, YELLOW, true ); //YELLOW stays longer

    //Right square:
    rects[2] = new Rectangle( width-rectW, height>>1, rectW, rectH,
    50, 16.7, YELLOW, BLUE, false ); //BLUE stays longer

    //Bottom square:
    rects[3] = new Rectangle( width>>1, height-rectHH, rectW, rectH,
    50, 88.6, RED, GREEN, false );   //GREEN stays longer again
}

void setup() {

    size(500, 500);
    frameRate(FPS);
    rectMode(CENTER);
    smooth();
    noStroke();
    background(BG);

    createRects();
}

void draw() {

    for ( byte r=rectsNum; r!=0; rects[--r].run() );

    print(millis() + "\t");
}

class Rectangle {

    int x, y;
    int w, h;
    float timerON, timerOFF;
    color colorON, colorOFF;
    boolean flashState;

    float finishON, finishOFF;

    Rectangle(int xPos, int yPos, int wide, int high,
    float tON, float tOFF, color colON, color colOFF, boolean state) {

        x = xPos;
        y = yPos;
        w = wide;
        h = high;

        timerON = tON;
        timerOFF = tOFF;

        colorON = colON;
        colorOFF = colOFF;

        flashState = !state;

        run();
    }

    void run() {

        if ( updateState() )    drawRect();
    }

    void drawRect() {

        if (flashState)    fill(colorON);
        else               fill(colorOFF);

        rect(x, y, w, h);
    }

    boolean updateState() {

        if ( checkTimer() ) {
            flashState = !flashState;
            restartCounters();
            return true;
        }

        return false;
    }

    boolean checkTimer() {

        if (flashState)
            return millis() == finishON;
        else
            return millis() == finishOFF;
    }

    void restartCounters() {

        finishON = millis() + timerON;
        finishOFF = millis() + timerOFF;
    }
}

GoToLoop

Re: Re: Generating time specifies flashes

10 months ago

The most likely bug is in checkTimer() 's if block:

boolean checkTimer() {
if (flashState)
return millis() = = finishON;
else
return millis() = = finishOFF;
}

Operator == has to be replaced by >= .

The reason for it is that system variable frameCount is increased by exactly 1 each time draw() is called.
And also, the speed of its increase is dependent on frameRate() 's FPS.

However, millis() means how many milliseconds transpired since program has started running.
And it's not influenced by frameRate() . Although for a reliable reading, a high frameRate() is welcome!

Since each reading from millis() won't result in an previous value increased by just 1, it's extremely unlikely that millis() would ever match finishON or finishOFF !

So, an extrapolation test ought to be done, thus the use of >= relational operator instead of just an == .
Also, there's no need to use float-type variables, since millis() also results in an int just like frameCount .

Each 1000 milliseconds corresponds to 1 second.
For example, if you need an ON state to last 0.5 seconds, for parameter, just use 0.5 * 1000 = 500 .

Also, for more precision reliability, a high frameRate() is necessary.
So for this millis() version, I've set FPS = 100 !!!
Enjoy:

/*
 * Flash Rectangles (v3.2)
 * by GoToLoop (2012/Dec)
 * for WalterLeaf
 *
 * forum.processing.org/topic/generating-time-specifies-flashes
 * studio.processingtogether.com/sp/pad/export/ro.96hnGiPFBa4CP/latest
 * studio.processingtogether.com/sp/pad/export/ro.9tGnEKV9FqawX/latest
 */

final static color BLACK  = 0;
final static color WHITE  = 0xFF;
final static color RED    = #FF0000;
final static color GREEN  = #00FF00;
final static color BLUE   = #0000FF;
final static color YELLOW = #FFFF00;

final static color BG  = WHITE;
final static byte  FPS = 100;

final static short rectW = 100, rectH = 100;
final static short rectHH = rectH + rectH/2;

final static byte  rectsNum = 4;
final static Rectangle[] rects = new Rectangle[rectsNum];

void createRects() {

    //Top square:
    rects[0] = new Rectangle( width>>1, rectHH, rectW, rectH, 
    200, 1000, RED, GREEN, true );   //GREEN stays longer (1s)

    //Left square:
    rects[1] = new Rectangle( rectW, height>>1, rectW, rectH, 
    100, 800, BLUE, YELLOW, true );  //YELLOW stays longer (0.8s)

    //Right square:
    rects[2] = new Rectangle( width-rectW, height>>1, rectW, rectH, 
    200, 500, YELLOW, BLUE, false ); //BLUE stays longer (0.5s)

    //Bottom square:
    rects[3] = new Rectangle( width>>1, height-rectHH, rectW, rectH, 
    200, 1000, RED, GREEN, false );  //GREEN stays longer again (1s)
}

void setup() {

    size(500, 500);
    frameRate(FPS);
    rectMode(CENTER);
    smooth();
    noStroke();
    background(BG);

    createRects();
}

void draw() {

    for ( byte r=rectsNum; r!=0; rects[--r].run() );

    //print(millis() + "\t");
}

class Rectangle {

    int x, y;
    int w, h;
    int timerON, timerOFF;
    color colorON, colorOFF;
    boolean flashState;

    float finishON, finishOFF;

    Rectangle(int xPos, int yPos, int wide, int high, 
    int tON, int tOFF, color colON, color colOFF, boolean state) {

        x = xPos;
        y = yPos;
        w = wide;
        h = high;

        timerON  = tON;
        timerOFF = tOFF;

        colorON  = colON;
        colorOFF = colOFF;

        flashState = !state;

        run();
    }

    void run() {

        if ( updateState() )    drawRect();
    }

    void drawRect() {

        fill(flashState ? colorON : colorOFF);

        rect(x, y, w, h);
    }

    boolean updateState() {

        if ( checkTimer() ) {
            flashState = !flashState;
            restartCounters();
            return true;
        }

        return false;
    }

    boolean checkTimer() {

        return flashState ?
        millis() >= finishON : millis() >= finishOFF;
    }

    void restartCounters() {

        if (flashState)
            finishON  = millis() + timerON;
        else
            finishOFF = millis() + timerOFF;
    }
}

walterleaf

Re: Generating time specifies flashes

10 months ago

OK, I think I'm following you. Thanks for all your help!

One thing though, again when I ramp up the flashing rates there is a visible jitter in the flashing. This goes when I bring down the FPS to, say 30. Is this because I'm asking too much of my graphics card? Should I be paying attention to the flashes per second and adapting the FPS accordingly?

GoToLoop

Re: Re: Generating time specifies flashes

10 months ago

In my computer, the example above using millis() w/ FPS = 100, I seem not to have noticed any obvious jitter.
Although the minimum timer I had used for finishON/OFF was 100 or 200, which are 0.1s or 0.2s.

The reason to use high frameRate() w/ millis() version is so that:

boolean checkTimer() {
return flashState ? millis() >= finishON : millis() >= finishOFF;
}

happens more times per second, raising the detection speed of when millis() becomes greater than finishON/OFF!

But I guess an FPS about 30 is reasonably OK and much less CPU intensive.

The advantage of my previous frameCount version is that it can go well w/ a low frameRate().

However, it is indeed extremely less intuitive, since the duration of each ON/OFF flashState is a mixture of frameRate(), which determines the speed of frameCount's increase, plus how many of those counts to wait for timerON/OFF!

In short, if jitter is annoying you and an FPS = 30 is not precise enough for you, the other option is to use the unintuitively, but lighter, frameCount version!

P.S.: Comment out this code line -> // print(millis() + "\t");
It is just a useless debugging and increses the time to complete a whole draw() callback!

walterleaf

Re: Generating time specifies flashes

10 months ago

OK, again... thanks loads.

I think I'm getting my head around this now. For the purposes that I need it for, it is really important that there is no dropping of flashes at all and that all changes are extremely precise in time. It's kind of doing that most of the time now so thanks. I'll keep going.