Skip to content

Ctx: Linear gradients with negative coordinates fail to render on the badge

When running this simple example to show a full-screen rainbow gradient only a red screen is rendered on the badge:

from ctx import Context
from st3m.input import InputState
from st3m.application import Application, ApplicationContext
import st3m.run


class GriadientTest(Application):
    def __init__(self, app_ctx: ApplicationContext) -> None:
        super().__init__(app_ctx)

    def draw(self, ctx: Context) -> None:
        ctx.linear_gradient(-120, 0.5 * 120, 110.0, 0.5 * 120)
        ctx.add_stop(0.0, [1.0, 0.0, 0.0], 1.0)
        ctx.add_stop(0.2, [1.0, 1.0, 0.0], 1.0)
        ctx.add_stop(0.4, [0.0, 1.0, 0.0], 1.0)
        ctx.add_stop(0.6, [0.0, 1.0, 1.0], 1.0)
        ctx.add_stop(0.8, [0.0, 0.0, 1.0], 1.0)
        ctx.add_stop(1.0, [1.0, 0.0, 1.0], 1.0)

        ctx.rectangle(-120, -120, 240, 240)
        ctx.fill()

    def think(self, ins: InputState, delta_ms: int) -> None:
        pass


if __name__ == "__main__":
    # Continue to make runnable via mpremote run.
    st3m.run.run_view(GriadientTest(ApplicationContext()))
[app]
name = "gradient_test"
menu = "Apps"

[entry]
class = "GriadientTest"

[metadata]
author = "alufers"
license = "pick one, LGPL/MIT maybe?"
url = "https://git.flow3r.garden/you/mydemo"

image

While on the simulator it works fine:

image

The curious thing is that when you change the left coordinate of the gradient to be positive it works fine on the badge:

ctx.linear_gradient(1.0, 0.5 * 120, 110.0, 0.5 * 120)

The gradient starts getting more bandy in the [-10, 0] range, and if less than -10 it breaks completely and becomes red.