Support TinyVG format decoding and rendering

[ndsl7109256]

Implemented support for decoding TinyVG format by parsing commands step-by-step. Each decoded command is executed using twin's path functions to render graphics. This enhances twin's capability to handle compact vector graphics .

2024-12-09.3.20.24.mov

Validating with TinyVG examples (Left : Origin, Right : Rendered by Mado)

• Tiger
  

• Shield Icon
  

• Flow Chart
  

• Folder Icon
  

• Comic
  

• FlowChart
  

Ref:
https://tinyvg.tech/download/specification.pdf

Close #71

[jserv]

Summarize the rendering of TinyVG by validating the examples provided by TinyVG website.

[jserv]

The tiger SVG is a standard demonstration image for SVG viewers, which can be set as the default viewer image in TinyVG rendering.

[jserv]

• Flow Chart
  

The font rasterization in TinyVG image does not precisely match the rendered flow chart. Could you verify?

[jserv]

I didn't get it. Why?

[ndsl7109256]

I think there might be some error in the arc ellipse calculation, so I enforced drawing to the target point to ensure correctness.

[jserv]

I think there might be some error in the arc ellipse calculation, so I enforced drawing to the target point to ensure correctness.

I would expect that we can overcome the underlying issues before the merging of this pull request.

[ndsl7109256]

I think the accuracy of twin_acos could be improved. When I use the acos function from the standard math library, the results seem better. To enhance the accuracy of the arctan calculation, I try to use more precise angle values (0-32768) which allows us perform additional iterations for the CORDIC algorithm.

[jserv]

@jouae, Please comment the above.

[jouae]

@ndsl7109256 could you provide how you use math.h to get the conclusion, along with a comparison between math.h and current twin_acos ?

[ndsl7109256]

I just replace twin_acos with acos in vector_angle and check the rendering result.Besides, I evaluated the CORDIC algorithm's error for different iteration count(original and modified) by testing all integer pairs $(x,y)$, $x \in [1,15]$, $y \in [1,15]$ For each pair, I calculated the arctangent using both the CORDIC method (with varying iterations) and the atan2 from math library.

Iteration	12	15
avg error	0.071239	0.011101
std dev	0.054116	0.008201
max error	0.284898	0.043332

[jouae]

@ndsl7109256

I found you can compute the angle between two vectors without any sqrt operations.

Just modify vector_angle function as:

    twin_fixed_t dot = twin_fixed_mul(ux, vx) + twin_fixed_mul(uy, vy);
+   twin_fixed_t det = twin_fixed_mul(ux, vy) - twin_fixed_mul(uy, vx);
+   twin_fixed_t angle = twin_atan2(det, dot);

You can derive how to calculate the angle based on the following relationship

$$ \tan{\theta} = \frac{\sin{\theta}}{\cos{\theta}} = \frac{\text{det}(u,v)}{u \cdot v} $$

$$ \cos{\theta} = \frac{u \cdot v}{|u||v|} $$

$$ \sin{\theta} = \frac{\text{det}(u,v)}{|u||v|} $$

where $\text{det}$ is the determinant of $u$ and $v$, for more detail see Wikpedia: Determinant.

The advantage of this formula is that it avoids calculating the lengths of $u$ and $v$, thereby eliminating the need for the sqrt operation.

However, this might not be a solution to the rendering problem. The issue is likely caused by insufficient precision, leading to rendering errors. Further detailed analysis is required to obtain a more accurate conclusion and potential solutions.

[ndsl7109256]

Your formula looks great, but the result looks bad :(

Could you help me verify them?

[ndsl7109256]

The font rasterization in TinyVG image does not precisely match the rendered flow chart. Could you verify?

I found that when I zoom in on the flow chart, the font rasterization issue disappears. Maybe we can check the filling function later.

[weihsinyeh]

typedef uint32_t twin_argb32_t;
Can we reuse the previous implementation? I'm uncertain if it's better to stick with the previous type by converting from float to uint8_t when the pixel format is float.

[weihsinyeh]

Within the function, it can check whether res is TVG_SUCCESS. If res is not TVG_SUCCESS, the function can return res immediately. Otherwise, at the end of the function, it can return res directly without checking whether res is TVG_SUCCESS.

[jserv]

Create a user-friendly file selection interface for TinyVG vector graphics using buttons, enabling seamless file picking. Conduct thorough validation of the TinyVG image processing capabilities to ensure the usability.

Then, we can explore potential contributions to established embedded graphics libraries like LVGL, which currently uses ThorVG for vector rendering. The goal is to develop a more efficient graphics solution that excels in resource efficiency and can operate effectively in environments without FPU support.

[weihsinyeh]

Why does line 532 require checking if res equals TVG_SUCCESS, while lines 538 and 542 do not?
Should a log_error be added if they require it?

[weihsinyeh]

I cannot understand why res will be checked initially in line 557, but res will not be checked here?

    uint32_t u32;
    tvg_result_t res = tvg_read_varuint(ctx, &u32);
    if (res != TVG_SUCCESS) {
        return res;
    }

[huaxinliao]

Use the following code snippet to address memory leaks related to ctx.path.

error:
    if (ctx.path) {
    	twin_path_destroy(ctx.path);
    	ctx.path = NULL;
    }
    if (ctx.colors != NULL) {
        free(ctx.colors);
        ctx.colors = NULL;
        ctx.colors_size = 0;
    }

[weihsinyeh]

Should log_error be added here?

[jserv]

Thank @ndsl7109256 for contributing!