Jagged lines in my animated circles. Please advise.

[jobou-70]

Hello,
I'm trying to move two simple circles through a star field. For that I draw the stars on a fullscreen sprite (480x320), draw the circles on the sprite and push the sprite to the LCD. To be able to store the full screen sprite I reduced the color depth to 4bit.
Doing this I see jagged edges or lines through my circles. It's more obvious when animated but it looks like this.

note that if I don't draw the stars, the circles are much cleaner.

Is there a way to fix this ?

My config:
esp32 S3 16Mb RAM and 8Mb PSRAM.
ili9486/ili9488 wired in 16bit parallel mode.

here is my code.

#include "LGFX_ili9486_S3.h"
LGFX lcd;

LGFX_Sprite starsSprite(&lcd);
LGFX_Sprite frameSprite(&lcd);
LGFX_Sprite torSprite(&lcd);

struct Star {
  float x, y, z;
  float dx, dy;
};
int centerX,centerY;
const int nStars = 400;
Star stars[nStars];

// 4-bit global palette indices
enum {
  IDX_TRANSPARENT = 0,
  IDX_BLACK       = 1,
  IDX_WHITE       = 2,
  IDX_RED         = 3,
  IDX_GREEN       = 4,
  IDX_BLUE        = 5,
  IDX_YELLOW      = 6,
  IDX_MAGENTA     = 7,
  IDX_XW0         = 8,  // 8–15 reserved for X-Wing colors
  IDX_XW1,
  IDX_XW2,
  IDX_XW3,
  IDX_XW4,
  IDX_XW5,
  IDX_XW6,
  IDX_XW7
};

static const uint16_t GLOBAL_PALETTE[8] = {
  0x0000, // 0 transparent (same as black, but treated as transparent in sprites)
  0x0000, // 1 black
  0xFFFF, // 2 white
  0xF800, // 3 red
  0x07E0, // 4 green
  0x001F, // 5 blue
  0xFFE0, // 6 yellow
  0xF81F, // 7 magenta
};

void initSprite4bit(LGFX_Sprite &s, int w, int h) {
    s.setColorDepth(4);
    s.createSprite(w, h);
    for (int i = 0; i < 16; i++) {
       s.setPaletteColor(i, GLOBAL_PALETTE[i]);
    }
}

void initStars() {
  for (int i = 0; i < nStars; i++) {
    float angle = random(0, 628) / 100.0f;
    stars[i].x = random(-240,240);
    stars[i].y = random(-160, 160);
  }
}

void drawStarsTo(LGFX_Sprite &s) {
  s.fillSprite(IDX_BLACK);
  for (int i = 0; i < nStars; i++) {
    int sx = centerX + (int)stars[i].x;
    int sy = centerY + (int)stars[i].y;
    if (sx >= 0 && sx < s.width() && sy >= 0 && sy < s.height()) {
      s.drawPixel(sx, sy, IDX_WHITE);
    }
  }
}

void setup() {
  lcd.init();
  lcd.setRotation(1);
  lcd.setColorDepth(16);
  lcd.fillScreen(TFT_BLACK);
  lcd.setSwapBytes(true);

  centerX = lcd.width() / 2;
  centerY = lcd.height() / 2;

  initStars();
  initSprite4bit(starsSprite, 480, 320);
  initSprite4bit(frameSprite, 480,320);
}

void loop() {
animateSpots();
}

void animateSpots() {
  float x = centerX;
  float y = centerY + 50;

  float tx = lcd.width() / 4.0f;
  float ty = 100.0f;

  float dx = tx - x;
  float dy = ty - y;
  float dist = sqrtf(dx * dx + dy * dy);
  dx /= dist;
  dy /= dist;

  float cx1 = x - 10, cy1 = y;
  float cx2 = x + 10, cy2 = y;

  float pos = 0.0f;
  float speed = 2.0f;

  while (pos < dist) {
    cx1 = x + dx * pos - 10;
    cy1 = y + dy * pos;
    cx2 = x - dx * pos + 10;
    cy2 = y + dy * pos;

    frameSprite.fillSprite(IDX_BLACK);  
    drawStarsTo(frameSprite); // draw all the stars on the frameSprite
   
   // draw circles 
   frameSprite.fillCircle((int)cx1,(int)cy1, 10,IDX_GREEN);
    frameSprite.fillCircle((int)cx2,(int)cy2, 10, IDX_GREEN);
   
   frameSprite.pushSprite(0,0,IDX_TRANSPARENT);    // push to frame to lcd 
    pos += speed;
    delay(16);
  }
}

[tobozo]

Hi,

is there any improvement if you add this at the end of setup() ?

    lcd.startWrite();

please share the contents of LGFX_ili9486_S3.h

[jobou-70]

lcd.startWrite();

No there is no improvement.

here is my config file

#pragma once
//#define LGFX_USE_V1
#include <LovyanGFX.hpp>

class LGFX : public lgfx::LGFX_Device
{
  lgfx::Panel_ILI9486 _panel;
  lgfx::Bus_Parallel16 _bus;

public:

  LGFX(void)
  {
    // ============================
    // 16-bit Parallel Bus config
    // ============================
    {
      auto cfg = _bus.config();

      // Write strobe frequency
      cfg.freq_write = 20000000;   // 20 MHz is safe, can push to ~30MHz
      cfg.pin_wr  = 13;
      cfg.pin_rd  = 14;
      cfg.pin_rs  = 11;            // DC / RS

      // Data pins (D0 = LSB)
      cfg.pin_d0  = 1;
      cfg.pin_d1  = 2;
      cfg.pin_d2  = 3;
      cfg.pin_d3  = 4;
      cfg.pin_d4  = 5;
      cfg.pin_d5  = 6;
      cfg.pin_d6  = 7;
      cfg.pin_d7  = 8;

      cfg.pin_d8  = 15;
      cfg.pin_d9  = 16;
      cfg.pin_d10 = 17;
      cfg.pin_d11 = 18;
      cfg.pin_d12 = 19;
      cfg.pin_d13 = 20;
      cfg.pin_d14 = 21;
      cfg.pin_d15 = 47;

      _bus.config(cfg);
      _panel.setBus(&_bus);
    }

    // ============================
    // ILI9486 Panel config
    // ============================
    {
      auto cfg = _panel.config();

      cfg.pin_cs   = 10;
      cfg.pin_rst  = 12;
      cfg.pin_busy = -1;

      cfg.memory_width  = 320;
      cfg.memory_height = 480;
      cfg.panel_width   = 320;
      cfg.panel_height  = 480;

      cfg.offset_x = 0;
      cfg.offset_y = 0;

      cfg.dummy_read_pixel = 8;
      cfg.dummy_read_bits  = 1;

      cfg.readable   = false;
      cfg.invert     = false;
      cfg.rgb_order  = false;   
      cfg.dlen_16bit = true;    
      cfg.bus_shared = false;

      _panel.config(cfg);
    }

    setPanel(&_panel);
  }
};

[jobou-70]

Also I'm not sure if it is related, but If I push the sprite like this
frameSprite.pushSprite(0,0);
half of the screen is moving and the dot look like this

[tobozo]

ideas:

• Run 1_simple_use.ino sketch and see if it glitches too, this will rule out panel configuration issues.

  • If 1_simple_use.ino sketch glitches, try different frequencies with cfg.freq_write e.g. from 2Mhz to 18MHz.
  • If 1_simple_use.ino doesn't glitch, but starfield sketch does, then it's either a bug in LovyanGFX (palette conversion) or in the starfield sketch (color type casting mismatch).

• Use lgfx::grayscale_4bit everywhere a 4bits color is involved e.g. s.fillSprite(IDX_BLACK); => s.fillSprite((lgfx::grayscale_4bit)IDX_BLACK);

• Try sprite.setPaletteGrayscale() after creating the sprite and before using setPaletteColor()

[jobou-70]

I ran 1_simple_use with my config file and I don't see any glitch. The only thing is that if I push the sprite to another 480x320 frame sprite I do see little waves in the sprite with the circle and the triangle. But frameSprite.pushSprite(0,0); does not glitch.
However I took the draw star code and put it the 1_simple code by just adding the iniStars() function and add the draw star code to the loop like this

void loop(void)
{
  static int count = 0;
  static int a = 0;
  static int x = 0;
  static int y = 0;
  static float zoom = 3;
  ++count;
  //frame.fillSprite(0x0000);
  if ((a += 1) >= 360) a -= 360;
  if ((x += 2) >= lcd.width()) x -= lcd.width();
  if ((y += 1) >= lcd.height()) y -= lcd.height();
  sprite.setPaletteColor(1, lcd.color888( 0, 0, count & 0xFF));
  sprite.setPaletteColor(2, lcd.color888( 0,~count & 0xFF, 0));
  sprite.setPaletteColor(3, lcd.color888( count & 0xFF, 0, 0));

  sprite.setPaletteColor(1, lcd.color888( 0, 0, count & 0xFF));
  sprite.setPaletteColor(2, lcd.color888( 0,~count & 0xFF, 0));
  sprite.setPaletteColor(3, lcd.color888( count & 0xFF, 0, 0));

 // draw stars
   frame.fillSprite(4); // 4  black in my palette.
    for (int i = 0; i < nStars; i++) {
      int sx = centerX + (int)stars[i].x;
      int sy = centerY + (int)stars[i].y;
      if (sx >= 0 && sx < frame.width() && sy >= 0 && sy < frame.height()) {
        frame.drawPixel(sx, sy, 5 );  // 5 is white in the palette
      }
  }
// draw circle
  sprite.pushRotateZoom(&frame,x, y, 0,1,1);
  frame.pushSprite(0,0);
  if ((count % 100) == 0) lcd.display(); // 電子ペーパーの場合の表示更新を 100回に一度行う
}

I see again the screen bend and the little sprite shifted when using frame.pushSprite(0,0) and not when using frame.pushSprite(0,0,4);