How can the whole strip have a certain colour, without affecting the animated pixels?

Patterns and Code
1

Here’s a question on something I’ve been trying to do for the past days without success:

How can the whole strip have a certain colour, without affecting the animated pixels?

2

Are you looking to merge colors, like mix a blue on top of whatever else the pattern is doing, or paint a background color “behind” animated pixels in a pattern like Sparks?

3

The second one, paint the background behind the animation.

My understanding of it would be as follows:

In the render function, let the active pixels of the array do their thing, all else-> do something else(eg use values from a hue slider or picker).

I get the theory, but have no clue how to execute it:)

4

You nailed it.

Find where the “background” is, usually setting the value to 0,0,0, and do something else.

5

I came up with this:

export function render(index) {
 
 if (pixels[index]){
 v = pixels[index]
 v = v * v * v
 hsv(0, 1, v)
 }
 else {
 hsv(0,1,0.2)
 }
}

This does the trick, but not what I had in mind I guess, as the particular pattern(KITT) has a trail following the lead that fades out. As a consequence, the background is kind of “following” the pattern, with a few pixels either dark or completely off in between.

I guess I’m looking for a different type of argument, one that would say:

Paint the whole strip this colour, then lay the pattern on top.

Which is kind of what @wizard asked originally, I’m looking more for a blend option.

6

So it’s not much different… In the case of KITT, it’s just doing a fade because the background is normally black/off. If you want it to “fade” to your given background color, then “fade” to that… Move from color A (the leading edge of KITT color) to color B (your background color) in increments making the length of your tail. Clear?

7

The thing is, there’s nothing in the KITT pattern as it stands that knows anything about color. It only deals with brightness. Having it interpolate between colors would be fun, but it does add some complexity. Below is a red-over-blue version of KITT that takes a not technically perfect, but reasonably decent looking approach using only the existing brightness data to manage foreground/background hue.

(YMMV - You’ll have to adjust the speed variable for your own strip – KITT is super dependent on frame rate. If you set it moving too fast, it’ll start skipping pixels. Speed’s divisor is the number of milliseconds it takes to move up or down the strip.)

leader = 0
direction = 1
pixels = array(pixelCount)

speed = pixelCount / 3200
fade = .0008
export function beforeRender(delta) {
  leader += direction * delta * speed
  if (leader >= pixelCount) {
    direction = -direction
    leader = pixelCount -1
  }
  
  if (leader < 0) {
    direction = -direction
    leader = 0
  }
  pixels[floor(leader)] = 1
  for (i = 0; i < pixelCount; i++) {
    pixels[i] -= delta * fade
    pixels[i] = max(0, pixels[i])
  }
}

export function render(index) {
  v = pixels[index]
  v = v*v*v
  h = (v > 0.002) ? 0 : 0.6667     // select foreground or background hue
  hsv(h, 1, (h == 0) ? v : 0.5)  // if hue == background, set to background brightness
}
1 Like
8

Yeah, I was speaking pretty generally, even though I mentioned KITT. Nice work!

9

There’s an enhanced version of KITT that doesn’t skip pixels here:

2 Likes
10

Is there a way to control the fade? As in, not let it go totally black? That way, it would travel along the strip without having a black pixel between the pattern and the background.

Edit, solved it by raising the min number here:
pixels[i] = max(0.5, pixels[I])

which of course is dependent on the background brightness, if set to a lower value, the gap can still be seen. Nice:)

Edit again, what I created is a bug, hehe. That value is clearly not the one that sets how low the fade can get. I’ll play around and see if I can figure it out.

1 Like