Very new - how to light every other pixel or every 3rd pixel (static, not moving)

hello, i am having trouble wrapping my head around the pixel index / position. can someone please give me a run down on how to select a pixel (say the 4th pixel, or pixel 3 in the index), and the syntax for working with pixel index? im relatively new to PB, and while i do have some minimal coding experience (i mean VERY minimal), i cannot find a straight answer to help me understand. any help is greatly appreciated!!

It’s a simple matter of turning your thinking inside out. You don’t “select” a pixel. You just have to write code that sets the color of any pixel, given its index.

The render(index) function is called once per pixel for every frame of your animation.

Here’s the simplest example I can think of: the Ukrainian flag on my front window for the past 2 months. It’s 300 pixels, starting at the bottom of a tall window, going up, then looping back to the bottom. The first 75 pixels (index 0 to 74) and the last 75 pixels (index 225 to 299) are yellow, and the rest are blue.

This function is run 300 times per frame, once for each pixel index. The complete pattern, no mapper required, is:

export function render(index) {
  if (index < 75 || index > 224) {
    rgb(1,0.875,0)
  } else {
    rgb(0,0,1)
  }
}

(the 0.875 is there because the green LEDs are stronger than the red!)

Thanks for the reply! Honestly, that was faster than i expected.
I loosely understand the if/else ranging of pixel color. But what i am trying to do is turn, say every 5th pixel white (or a varying color temp of white), and the rest black (off).
I imagine it would look something like this:


var temp = 0
x = 0

export function sliderTemp (s) {
temp = s
}
export function render(index) {

if (index == x+5 ) {
hsv(.067, temp, 1)
} else {
hsv(0,0,0)
}
}


Sorry for the poor formating, i do not yet know how to properly format code for posting in the forum. How far off am i from achieving my goal? Also, how would i go about propperly posting code in the forum? I know there has to be some text comands i can enter to get it right.

Again, thank you for your assistance. I have learned quite a bit from the forum from browsing and reading, but cant seem to find the simpler things. Are there any resources for learning the syntax of PB?

The formatting is behind the </> button. It helps you put your code between two lines with “```” on them. If you put “``` javascript” on the first line it will even colour in your code for you. Within paragraphs you can use single ` backquotes around things to put them in ‘code’ font. For example I wrote </> as `</>` and I wrote the standalone “`” as “\`”. And I wrote “\`” as “\\\`” … and so on!:relaxed:

The PB language is just JavaScript minus … well, a lot of things.

In your case, you want the “modulus” operator, % which gives the remainder of a division, like this:

export function render(index) {
  if (index % 5 == 0) {
    hsv(.067, temp, 1)
  } else {
    hsv(0,0,0)
  }
}

Have a look here!

https://forum.electromage.com/t/candy-cane-pattern-for-led-strip-lights/1806/2?u=gmcmicken

1 Like

Hi Dustin!

To light every 5th pixel, there’s a math trick we can use. Remember the “remainder” in division? If we divide every pixel index by 5, then only light the ones where the remainder is zero, we’ll light every 5th pixel.

index:     0 1 2 3 4 5 6 7 8 9 10 11 12
(divide by 5)
remainder: 0 1 2 3 4 0 1 2 3 4  0  1  2

In the language Pixelblaze uses (a subset of JavaScript), you get the remainder when you use the percent sign as a math operator. 8 % 5 == 3

To light every 5th pixel red, try:

export function render(index) {
  // We use a double equal to test values; a single equal sign sets them.
  if (index % 5 == 0) { // Thanks for the correction @sorceror
    hsv(0, 0, 1)
  } else {
    hsv(0, 0, 0)
  }
}

For code formatting: This forum uses software called Discourse, and it allows you to use Markdown to format your posts. In markdown, one of the ways you can format code is to use backticks (the key next to the 1 on most keyboards; it looks like this: `).

Single backticks enclose inline code: `code`

Triple backticks let you do a code block:

    ```
    // Here's some code
    ```

You can specify a few languages after the first backticks. Javascript looks best for Pixelblaze code:

```javascript
// Here's some code
var a = 5;
```

Formats as:

// Here's some code
var a = 5;

 
 
Here’s a pretty good full Markdown reference:

https://commonmark.org/help/

1 Like

Uh … don’t you mean index % 5? % 0 is either divide-by-zero at runtime or “What chew talkin bout, Willis?” from the compiler.

Perfect. I cant wait to try this when i get back to the house (currently at the creek with the kiddos). @jeff and @sorceror you guys are great. Ill read more on markdown as well. Thank you guys!!

Yes! Fixed, thanks.

I tested out what happens though, and I think I like this design choice for Pixelblaze!

Monosnap 2022-04-23 11-58-49

Good morning! I have finally manipulated the code to get it exactly as i want it. well, pretty close. I think I still need to add a min/max range to keep the saturation from being too blue (on the low end) and too yellow (on the high end), but I believe I can dabble with that to dial it in later. i just wanted to say thank you @jeff and @sorceror for your help. between the help from the 2 of you, i feel that i have learned a great deal regarding pixel position. i look forward to continuing to learn.

here is the code that i ended up with:

export var x=0
export var s=0
export function sliderTemperature (temp) {   //temp select white
  x = temp
}

export function sliderSpacing (space) {      //spacing between pixels
  s = round(space * 20)
}


export function render(index) {
  if (index % s == 0) {  // Big thanks to @jeff and @sorceror for pixel position lesson
    hsv(.065, x, 1)
  } else {
    hsv(0, 0, 0)
  }
}

Looks great! Here’s another idea, adjustable stripe width … ok two ideas, also time-animated-stripes:

export var w=0
export function sliderWidth(width) {
  w = width
}

export function beforeRender(delta) {
  sw = floor(s * w) + 1
  ts = floor(s * time(0.25)) // maybe make this a slider too for adjustable speed
}

// and then in render() ...
if (((index + ts) % s) < sw) { ... }

sw is stripe width and ts is time shift. beforeRender() is run once at the beginning of each frame. Let me know if you have any questions.

Also, I didn’t actually try this code - it might have bugs :smiley:

Ill try here in a little bit. “Sunday-Funday” (cleaning day) is in full swing, and the wife is merciless about getting the house clean for a fresh start for the week. :grin: ill let you know how it goes.

1 Like