Flickering animation

Other Hardware Displays
1

Hi,

I want to animate the filling of a beer bottle. I have some flickering effect during the "filling" of the neck. I draw two white triangles to shape the bottle which seems to be the flicker reason.

Do you have better ideas ? thank you

#include <TFT_eSPI.h> // Hardware-specific library
#include <SPI.h>

TFT_eSPI tft = TFT_eSPI();       // Invoke custom library

#define TFT_GREY 0x5AEB

#define LOOP_PERIOD 300 // Display updates every 300 ms
#define TFT_BEER 0xD404 //Couleur biere

uint32_t updateTime = 0;       // time for next update


int d = 0;


// Bottle position
int x=150;
int y=70;

int i=0;

//                       D1  D2   H1  HG  H2
//                       0    1   2    3   4
int bottle_values[6] = {80, 30, 150, 60, 30};


void setup(void) {
  tft.init();
  tft.setRotation(2);
  Serial.begin(57600); // For debug
  tft.fillScreen(TFT_WHITE);
  draw_bottle();
  updateTime = millis(); // Next update time
}


void loop() {
  if (updateTime <= millis()) {
    updateTime = millis() + LOOP_PERIOD;

  //d est le remplissage virtuel en ml
   d += 10; 
   if (d >= 360)
    d = 0;   

  draw_bottle();

  }
}





void draw_bottle(){


   int d1=bottle_values[0];
   int d2=bottle_values[1];
   int h1=bottle_values[2];
   int hg=bottle_values[3];
   int h2=bottle_values[4];
   

  int ax = x+d1/2-d2/2;
  int ay = y;
  
  int bx = x+d1/2+d2/2;
  int by = y;

  int cx = x+d1/2+d2/2;
  int cy = y+h2;
  
  int dx = x+d1;
  int dy = y+h2+hg;

  int ex = x+d1;
  int ey = y+h1+hg+h2;

  int fx = x;
  int fy = y+h1+hg+h2;
 
  int gx =  x;
  int gy = y+h2+hg;

  int hx = x+d1/2-d2/2;
  int hy = y+h2;

//on efface l'ancienne biere
  if (d==0)
    tft.fillRect(x, y,d1+1 ,h1+hg+h2 , TFT_WHITE);

// Bière
  tft.fillRect(x, y+h1+h2+hg-d*(h1+h2+hg)/360,d1+1 , d*(h1+h2+hg)/360, TFT_BEER);
  old_beer_y = y+h1+h2+hg-d*(h1+h2+hg)/360;
  old_beer_height =d*(h1+h2+hg)/360;

  
  //découpes
  tft.fillRect(x, y, d1/2-d2/2, h2, TFT_WHITE);
  tft.fillRect(bx, by, 2+d1/2-d2/2, h2, TFT_WHITE);

  tft.fillTriangle(x , y + h2, hx , hy , gx, gy, TFT_WHITE);
  tft.fillTriangle(cx, cy, 1+cx + d1/2-d2/2, cy,dx,dy, TFT_WHITE);

// Bouteille
  tft.drawLine(hx, hy, ax, ay, TFT_BLACK);
  tft.drawLine(ax, ay, bx ,by,  TFT_BLACK);
  tft.drawLine(bx ,by, cx, cy, TFT_BLACK);
  tft.drawLine(cx, cy, dx, dy, TFT_BLACK);
  tft.drawLine(dx, dy, ex, ey, TFT_BLACK);
  tft.drawLine(ex, ey, fx, fy, TFT_BLACK);
  tft.drawLine(fx, fy, gx, gy, TFT_BLACK);
  tft.drawLine(gx, gy, hx, hy, TFT_BLACK);

  
  }
2

Go on. Sit down with a nice cup of tea.

Think about your animation.

  1. draw the empty bottle.
  2. fill with beer. One raster line at a time.

(2) requires you to calculate the left and right edge of the beer line. e.g. as a function of bottle height.

I would guess that you will get a smooth image.

Then you start doing some maths. i.e. draw a bottle tilted at an angle. calculate the (horizontal) beer line.

David.

3

Hi zarg404,

I downloaded your sketch to an Arduino Nano - 230x240 TFT, controller unknown ,to check the effect. My first impression is that you might draw the bottle once and for all in void setup and then in void loop concentrate on the filling process. There is beer leaking out of the bottle ! Further follow David's advice. You might even program in a further development some bubbles.
Don't worry about the color of the beer - this is a crazy TFT display contriller, ILI something.
Good luck, photoncatcher

500×504 28.4 KB

4

@David, tea was not enough...Beer was needed ! Now the beer bottled could be filled !

one more question :
Is it quicker for the lower part to a do tft.fillRect(...) or to draw each little ? I guess it is more a less the same.

5

Yes, it is always faster to use fillRect() than a series of drawHLine().
But an animation will look better if you fill the bottle at a consistent rate.

David.

6

Yesterday I had limited time to study the beer sketch. As it turns out, the bottle is drawn in (setup), and then in (loop) filled with the juice and redrawn again. If I remove the draw_bottle () function call from (loop) then the bottle is displayed firm (no flickering, as it should be) but the filling does not work any more. Apparently there is some more debugging and development to do.

And the beer has no bubbles - must be UK beer - haha :slight_smile: