ESP32 and touch display - part 2 - how to draw pixels, lines, shapes, performance issue

.
Today we continue our adventure with the ESP32-2432S028R board. In the previous installment we ran the display and touchscreen, so today we will use that. We'll see what options and shapes we have available for drawing and then we'll consider what are ways to draw efficiently so that the refresh rate of the screen is high. We'll consider several ways of drawing here, including refreshing only what has changed and using DMA.

Previous topic in the series:
https://www.elektroda.pl/rtvforum/topic4058635.html#21111347

Basic colours and shapes .
First of all, we have two types of functions here - draw (functions that draw without filling) and fill (functions that draw and fill a shape with colour). Details can be found in the documentation:
https://www.arduino.cc/reference/en/libraries/tft_espi/
Based on the documentation, I have collected the different drawing functions in one place. We can draw various shapes, fill them with or without colour, fill them with gradients and for some even round the corners. The code should be self-explanatory, the first arguments are usually the position, the following ones - it depends, refer to the documentation or Visual Code hints.
.
Result:
.
We can use these functions to create our own animations and interfaces, but this is not necessary - later on we will learn about LVGL, which will do all the work for us.

Julia's Fractal and drawing speed .
We've already gained some knowledge about drawing itself, now how about something more advanced. Let's see how a fractal will look on this display. What a fractal is - I won't discuss that here, but in a nutshell, a little calculation can give surprising results:
.
I implement the drawing in two loops, that is, for each pixel.
The result, however, is not the most interesting:
.
The film nicely shows that the whole thing, however, is quite slow to calculate and draw:
.
It would probably be possible to optimise this, e.g. by creating a graphic to a bitmap and then calling the display of that bitmap once....

Can you draw faster? Bouncy Circles demo .
This is where an example from the author of the library we are using himself comes to the rescue.
Source:
https://github.com/Bodmer/TFT_eSPI/blob/maste.../DMA%20test/Bouncy_Circles/Bouncy_Circles.ino
Let's analyse this code:
.
Here we see that the author ... draws the top half of the screen separately and the bottom half separately:
.
The function that draws first separately, without display, clears a given bitmap (of a given half of the screen) and draws our circles on it (without display):
.
After that, the display on the screen already takes place - the drawn half of the screen from the bitmap is sent to it directly via DMA:
.
Then the author updates the wheel positions, but this is less important for us:
.
Here a video of how it works would be useful, but it's lost to me for now, I'll have a moment then I'll fill it in .
The most important two functions here are initDMA and pushImageDMA.
The name of the function already suggests to us that it uses DMA - Direct Memory Access, or fast, direct memory access. But how does it work?
You can peek into the source code to find the answer to that question:
.
The above fuction just adds the DMA transfer to the queue. Then the rest of the code executes normally, and during this time pixels are sent to the display at the same time.

Demo clock .
Of course, not every program, however, is implemented with DMA. Without DMA it is also possible to display interesting animations.
Consider here a clock demo, the demo comes from:
https://git.wiyixiao4.com/Learning/TFT_eSPI/s...xamples/320%20x%20240/TFT_Clock/TFT_Clock.ino
Let's have a look at the source code:
.
The code snippet above is mainly the function setup , it is executed once. Nevertheless, almost the entire clock is drawn in it - without the hands. This is not the case, as in practice there is no need to draw it more than once. In order to optimise here, the loop loop only successively deletes the old hands (paints them with the background colour) and then draws the new ones. Let's see:
.
In addition, the refresh is further split, because, for example, when the seconds hand moves and the hour hand stands still, the hour hand does not need to be redrawn.
The auxiliary functions remain:
.
The result:
.


Summary
Here I first showed the basics of drawing itself (the smallest building blocks, drawing shapes, etc.) and then I also presented different drawing methodologies. One can:
- either draw the whole thing inefficiently, the worst way is to do it pixel by pixel (see the example with the fractal)
- or harness the DMA to the whole, e.g. by dividing the screen into 2 parts, so that when one part is sent, the other part is already rendering (example 'bouncy circles')
- or draw a static background once and erase dynamic objects one by one the background colour and then redraw (example of a clock).
All these methods have their pros and cons, but it is rather clear that the first approach is the simplest and also the least efficient. It all depends on what you want to draw and in what form.
Have you encountered the problem of drawing efficiency? How have you solved it at your place? Feel free to comment. .