5x5显示屏上的光滑点,如何避免楼梯效应?

时间:2018-01-24 14:52:33

标签: javascript graphics antialiasing bbc-microbit

我最近得到了BBC-Micro:bit,它有一个小的5x5 led“显示器”。

我想制作能够在没有阶梯效果的情况下绘制平滑移动点的代码,但我在移动时努力使其垂直和水平平滑。

这就是我所拥有的,它只是垂直平滑点:

while (true) {
    basic.clearScreen()
    plotAA(input.acceleration(Dimension.X), input.acceleration(Dimension.Y),
        255, 255)
    basic.pause(15)
}

function plotAA(_x: number, _y: number, _brightness: number, _scale: number) {

    /* 
    * Draw a dot without "staircase effect"/aliasing.
    * _x           : from 0 to 4 but in _scale scale
    * _y           : from 0 to 4 but in _scale scale
    * _brightness  : led brightness
    * 
    * Half of _scale is a number of [0,0] pixel center
    */

    // Keep in mind that numbers are 32 bit signed integers!

    let px = (_x + _scale) % _scale * 2 // subpixel x position
    let py = (_y + _scale) % _scale * 2 // subpixel y position

    // It should be _x / _scale, but to fix a bug I use this...
    let rx = (_x + _scale) / _scale - 1 // real x position (ceil)
    let ry = (_y + _scale) / _scale - 1 // real y position (ceil)

    led.plotBrightness(rx, ry, ((_scale - py) + /* Add something here? */0) * _brightness / _scale)
    led.plotBrightness(rx + 1, ry, ((_scale - py)) * _brightness / _scale)
    led.plotBrightness(rx, ry + 1, (py) * _brightness / _scale)
    led.plotBrightness(rx + 1, ry + 1, (py) * _brightness / _scale)
}

要测试此代码,请使用https://makecode.microbit.org/(在顶部选择JavaScript)。

如何让它同时垂直和水平平滑移动?

1 个答案:

答案 0 :(得分:2)

我想我可以计算4个LED和所选点之间的距离。根据它们的距离,我可以设置LED的亮度。这是我所知道的最准确的方法。

编辑:已解决。

{{1}}

稍后我会调整它。