How would you make a 2D KITT?

Patterns and Code
8

@Scruffynerf,
I think that would be a different pattern and/or implementation, at least the way I understand what you describe. The KITT implementation relies on a leader painting into an array, then fading those out over time. In the corners, the leader changes direction and will overdraw the tail, which is still fading out in the direction of the corner. Replicating that without an array would be tricky, especially for certain values of the fade variable. Quantizing it into a number of columns is a good strategy to adapt this implementation without completely reinventing it.

It would be possible to virtualize the KITT array to a size that doesn’t match the matrix width, then pick an index based on the relative X of a given pixel. Much like resizing an image. Either nearest neighbor or some kind of interpolation could work. You could have a smaller source array, but that wouldn’t look as good (just like upscaling an image).

A simple solution would be to keep the pixels array 1:1 with pixelCount, changing only how render2D chooses which element from the pixels array to render. This calculates more elements than necessary, so knowing and using the width as @Aarvix has done allows for more FPS. For example, on a 8x8 matrix, it would calculate a 64 pixel long KITT pattern, then scale it down to 8 pixels wide.

Taking the original KITT code, and only adding this render2D:

export function render2D(index, x, y) {
  v = pixels[floor(x * pixelCount)]
  v = v * v * v
  hsv(0, 1, v)
}

This works as long as x is within the range from 0 to 1, exclusive (which it is when using world units). The expression floor(x * pixelCount) will resolve to a number between 0 and pixelCount-1, which matches the pixels array nicely!

3 Likes