Editing Openai/690e4c4b-5530-800d-ae72-e702400813d4 (section)

=== Assistant: Ah — now I understand exactly what’s happening. ===
Ah — now I understand exactly what’s happening. The reason the text “does not fade” is that in the current approach we are not actually changing the opacity of the text, and drawing a white rectangle behind it doesn’t reduce the visibility of the black text itself — it only affects the background. On a fully cleared screen, it just looks like the text appears and disappears instantly.

On Playdate, there is no direct per-text alpha, so for a true fade we need to use an offscreen <code>gfx.image</code> for the text and then draw it using the image’s draw mode with alpha blending. The key steps are:
# Create an offscreen image containing the text only.
# Each frame, draw that image with the alpha parameter, which properly fades the text in/out.
# Keep fadeAlpha updated each frame.

Here’s a working version with proper smooth text fade:

<syntaxhighlight lang="lua">import "CoreLibs/graphics"
import "CoreLibs/timer"

local gfx = playdate.graphics
local W, H = 400, 240
local CX, CY = W/2, H/2
local RADIUS = 70

-- Crank tracking
local lastCrank = playdate.getCrankPosition()
local lastTime = playdate.getCurrentTimeMilliseconds()
local crankVelocity = 0
local displayedVelocity = 0
local direction = 0

-- Velocity history
local history = {}
local historyDuration = 5
local sampleRate = 30
local maxSamples = historyDuration * sampleRate

-- Config
local damping = 0.15
local lerpRate = 0.2
local baseMaxVel = 300

-- Fade variables
local fadeAlpha = 0
local fadeSpeed = 0.05

-- Create offscreen image for "Undock the crank" text
local undockImage = gfx.image.new(W, H)
gfx.pushContext(undockImage)
gfx.setFont(gfx.getSystemFont())
gfx.setColor(gfx.kColorBlack)
gfx.drawTextAligned("Undock the crank to begin", CX, CY-10, kTextAlignment.center)
gfx.drawTextAligned("(Crank is currently docked)", CX, CY+10, kTextAlignment.center)
gfx.popContext()

local function drawDial(cx, cy, radius)
    for deg=0,330,30 do
        local rad = math.rad(deg)
        local x1 = cx + math.cos(rad)*(radius-8)
        local y1 = cy + math.sin(rad)*(radius-8)
        local x2 = cx + math.cos(rad)*radius
        local y2 = cy + math.sin(rad)*radius
        gfx.drawLine(x1, y1, x2, y2)
    end
end

local function addToHistory(value)
    table.insert(history, value)
    if #history > maxSamples then
        table.remove(history, 1)
    end
end

local function getDynamicRange()
    local maxAbs = 0
    for _, v in ipairs(history) do
        maxAbs = math.max(maxAbs, math.abs(v))
    end
    return math.min(baseMaxVel, math.max(50, maxAbs*1.2))
end

local function drawVelocityGraph(x, y, width, height)
    gfx.drawRect(x, y, width, height)
    local midY = y + height/2
    gfx.setLineWidth(1)
    gfx.drawLine(x, midY, x+width, midY)

    if #history < 2 then return end

    local maxVel = getDynamicRange()
    local step = width/(maxSamples-1)
    for i=2,#history do
        local v1 = math.max(-baseMaxVel, math.min(baseMaxVel, history[i-1]))
        local v2 = math.max(-baseMaxVel, math.min(baseMaxVel, history[i]))
        local y1 = midY - (v1/maxVel)*(height/2)
        local y2 = midY - (v2/maxVel)*(height/2)
        local x1 = x + (i-2)*step
        local x2 = x + (i-1)*step
        gfx.drawLine(x1, y1, x2, y2)
    end
    gfx.drawTextAligned(string.format("±%.0f°/s", getDynamicRange()), x+width/2, y-14, kTextAlignment.center)
end

function playdate.update()
    gfx.clear()

    local docked = playdate.isCrankDocked()

    -- Update fadeAlpha
    if docked then
        fadeAlpha = math.min(1, fadeAlpha + fadeSpeed)
    else
        fadeAlpha = math.max(0, fadeAlpha - fadeSpeed)
    end

    -- Draw offscreen text image with proper alpha
    if fadeAlpha > 0 then
        local alpha = math.floor(fadeAlpha*255)
        undockImage:draw(0, 0, alpha) -- third param is alpha (0-255)
    end

    if docked then return end

    -- Crank calculations
    local now = playdate.getCurrentTimeMilliseconds()
    local crank = playdate.getCrankPosition()
    local deltaAngle = crank - lastCrank

    if deltaAngle > 180 then deltaAngle = deltaAngle - 360 end
    if deltaAngle < -180 then deltaAngle = deltaAngle + 360 end

    local dt = (now-lastTime)/1000
    if dt>0 then crankVelocity = deltaAngle/dt end

    if deltaAngle>0 then direction=1
    elseif deltaAngle<0 then direction=-1
    else direction=0
    end

    lastCrank = crank
    lastTime = now

    displayedVelocity = displayedVelocity + (crankVelocity - displayedVelocity)*lerpRate
    if math.abs(crankVelocity)<2 then
        displayedVelocity = displayedVelocity*(1-damping)
    end

    addToHistory(displayedVelocity)

    -- Draw dial
    gfx.setLineWidth(2)
    gfx.drawCircleAtPoint(CX, CY, RADIUS)
    drawDial(CX, CY, RADIUS)

    -- Needle
    local needleAngle = math.rad(crank-90)
    local nx = CX + math.cos(needleAngle)*(RADIUS-12)
    local ny = CY + math.sin(needleAngle)*(RADIUS-12)
    gfx.setLineWidth(6)
    gfx.drawLine(CX+1, CY+1, nx+1, ny+1)
    gfx.setLineWidth(4)
    gfx.drawLine(CX, CY, nx, ny)
    gfx.fillCircleAtPoint(CX, CY, 6)

    -- Velocity graph
    drawVelocityGraph(CX-RADIUS-80, CY-50, 60, 100)

    -- Text info
    gfx.setFont(gfx.getSystemFont())
    gfx.setColor(gfx.kColorBlack)
    gfx.drawTextAligned(string.format("Angle: %.1f°", crank), CX, CY+RADIUS+10, kTextAlignment.center)
    gfx.drawTextAligned("Direction: "..(direction==1 and "clockwise" or (direction==-1 and "counterclockwise" or "still")), CX, CY+RADIUS+30, kTextAlignment.center)
    gfx.drawTextAligned(string.format("Velocity: %.1f°/s", displayedVelocity), CX, CY+RADIUS+50, kTextAlignment.center)
    gfx.drawTextAligned("Turn the crank to see live velocity history", CX, 10, kTextAlignment.center)
end

</syntaxhighlight>

===== - The offscreen image contains the text. =====
* Each frame, we draw it with undockImage:draw(x, y, alpha), where alpha is 0–255.
* fadeAlpha smoothly interpolates 0→1 for fade-in and 1→0 for fade-out.
* No flicker or upside-down issues occur.

If you want, I can now also make the needle and velocity graph fade slightly while docked, so the whole UI visually “pauses” — this makes the crank docked state much clearer and more polished.

Do you want me to do that?