Love the product, so much fun out of the box but I have no idea where to start with learning how to program my own patterns. I can change vars and that’s about it.
The instructions are way too advanced for me. I can’t even gleen what language this is. Javascript? Is there a library? It doesn’t make much sense to me without any background in code.
Are there any tutorials out there? What should I start with as foundational knowledge?
Many thanks, d.
Hi @Goose,
Welcome! Yeah, starting out changing variables or constants used in existing patterns is a good way to tweak things without much code experience.
To get an idea of how this works to make pixels, I would check out this video where I go over the basics in the older V1 interface which didn’t have code, just math:
After that, you can check out what changed in V2 video to get an overview of the new code features:
Next, I recommend this video where I go through the thought process of writing the KITT pattern:
Of course none of that will teach you how to code, but should give you an idea of what Pixelblaze is doing and some of the fundamental tools.
Yes, this the language a subset of JavaScript ES6. The basic stuff is all there, the same kind of things you will find in most programming languages. Those basics make up much of what you’ll need to know to do just about anything you want. There are some docs about the language features if you scroll below the editor, and are also available here.
I would recommend some JavaScript tutorials, but many would focus on advanced language features that aren’t available (even things like console.log. The C language is also very close, they share much of the same syntax and keywords (things like for loops), and could be a good place to start.
Here’s the 5 minute version:
1. Expressions and Statements
Expressions are core to much of what goes on. These are basically just math. These are often composed in statements that store the result in a variable. Code like this:
h = t1 + index/pixelCount
What is happening is that the expression on the right of the = is evaluated to a value, and stored in a variable called h. On the right side, index/pixelCount is evaluated first since there are an order of operations that make division happen before addition. The index and pixelCount are also variables that have been defined previously.
So the above says: “take index, divide by pixelCount, add t1, and store in h”
Code is run one line at a time, so this block of code:
a = 5
b = 3
a = b -1
will result with a = 2
2. Functions
Functions are a tool that lets you compose groups of statements into an abstraction. You can then call the function instead of repeating those statements.
A function looks like this:
function myFunctionName(input) {
return input + 1
}
The return keyword will cause the function to resolve to the value of the expression to the right of it. The input in the parenthesis is called an argument and is provided when the function is called.
This function will add 1 to whatever its given. It can be called like this, and these statements are equivalent:
a = 6
a = 5 + 1
a = myFunctionName(5)
a = myFunctionName(4 + 1)
In each case, a ends up being 6.
Functions can also be used as a way for systems to communicate information. In Pixelblaze, there are a few special exported functions the system looks for, namely render and beforeRender. In Pixelblaze you define these functions, and the engine calls them to make stuff happen. render is where pixels get rendered, and it is called once for each pixel. You are given the index of the pixel, which is a variable that is numbered for every pixel, starting at 0, then 1, 2, 3, etc. Another global variable is also provided by the system called pixelCount, which is the total number of pixels configured on the Settings tab.
The basic idea is that you implement a render function that takes the current pixel index, and does something interesting with it. Often some math is involved 
Eventually the code in render will call either hsv() or rgb() functions to get data to the pixel.
3. Control Flow
Statements and functions are great, but what if you wanted to do something only when certain conditions were met? Thats where control flow statements come in.
The if keyword lets you write conditional blocks that only execute if the given expression is true*. e.g.
if (index > 5) {
v = .5
}
In this case, v will be set only when index > 5. Otherwise it will be left alone.
* trueness in this language is any non-zero value, and the > operator (or any other comparison operator) results in a value that is 0 or 1.
You can add the else keyword to cover the opposite case:
if (index > 5) {
v = .5
} else {
v = 1
}
What if you wanted to do something a bunch of times, like maybe once per pixel?
To repeat a block of code, you can use while or for - these can be tricky though. Often you will see a pattern go through an array using a for loop like this code in KITT:
for (i = 0; i < pixelCount; i++) {
pixels[i] -= delta * fade
pixels[i] = max(0, pixels[i])
}
This is going to run the code between the braces several times, and the i variable is going to change each time. I go over that briefly around 9 minutes in to the KITT video.
Let us know how it goes! Stuck? We can help! Find an awesome tutorial? Let us know!
Wow! That was an incredible primer, Wizard!
Goose, I also wanted to invite you to try out a pattern I’ve been working on called, “An Intro to Pixelblaze Code”, which I just uploaded to the pattern library and am also attaching here for you:
An Intro to Pixelblaze Code.epe (21.9 KB)
This is meant to be tinkered with live so you can iterate quickly to learn - that’s really the magical essence of Pixelblaze to me.
Finding people early in their learning journey is rare, so could you give me feedback about anything you find confusing along the way?
Thanks Jeff and Wizard. I’m in the same boat as Goose, my coding knowledge is relatively low… Pascal from 20+ years ago and that’s about it lol
Some great responses here, thanks Wizard & Jeff! I can’t wait to digg into those tutorials and try out that sample code. Thanks for the thoughtful replies
Jeff, your help has been awesome and the question I posed,
“I also am curious if it is the following is possible; a string of 50 leds, a pattern runs on 0 to 45 and 46 to 49 is constant white. I was looking to see if you could use a expression using < , not even sure if that is a legal command, I was trying it on the example where the 3rd led was blue and tried to have all LEDs < 2 to be blue.”
and your response " An expression like this added to the bottom of any render() {} would do what you ask:
export function render(index) {
# The other normal code for pixels 0-45 goes here
# ...
if (index > 45) { hsv(0, 0, 1) } // Full white
}
"
it worked great, thank you for your guidance !
Much appreciated.
Wizard, Thank you for your tutorials as well between the both of you it has been very enlightening! no pun intended 
Bob
I would also like to ask, should I focus on learning C or python skills for working with patterns? (hoping it is not a stupid question).
Thanks
Bob
It’s not a stupid question at all. The answer is either and neither…
If you learn basic “computer” syntax, C, python, JavaScript, etc, while there are differences, the similarities are there too. (Ironically, BASIC the computer language can teach you many of these same ideas but as a language, it’s showing it’s age and isn’t recommended these days)
Processing is another good example of a language where learning it will help you grasp concepts. And there are good tutorials.
PB isn’t actually Javascript, it’s just a subset (meaning some of it works but not everything).
I’ve been slowly planning a series of tutorials for LED programming, and the first thing I’m working on is deciding the scope. It’s not going to be super beginner because the goal not to teach programming, but it’s also not going to be super complex. Defining the sweet spot is actually quite hard.
For example, I’m currently reading
The Nature of Code
(Free to read online, code all on GitHub) which is not LED centric and uses Processing. But there are some absolutely critical ideas in there that can be translated to LED graphics.
I’ll be putting together a reading list, as well.
Even for hardware, the goal is to find a sweet spot. I see PB as a good example of the sweet spot. You can learn how to code FastLED and do everything PB can do, but you’ll need to learn C, you’ll need to learn lots of stuff before you can do all the pretty bits. You can learn how to write a pattern for WLED, but it’s still much harder to get a finished product without way more “work” and “knowledge”
Also mentioned elsewhere, you might want to try Tixy.land, which is online and can teach you how to think about patterns in a single line of code.
I did write a Tixy emulation for PB, and I do plan on using that as part of the approach for how to think about some LED patterns (not all but… Many)
Thanks for the reply, much appreciated. If you need a “beta tester” for your planned tutorials give me a poke I will happily provide feedback as I progress on this journey of learning.
Cheers
Bob
I had planned to sell modern wall art that incorporated the SP108E controller for back lighting. I tested one controller very thoroughly and ordered 10 more only to find several bugs that prevented proper connection to the internet in Client (STA) mode.
I’ve purchased the Pixelblaze 1, 2 and 3 but I find PB’s subset of JavaScript very un-intuitive. Your fireworks program is the closest I’ve seen to the more linear, straight forward patterns the SP108E can display.
Would you or someone you know be available for hire to write the code for agreed upon LED patterns similar to the SP108E’s but running on the PB3?
Hi @sgroen! I saw your similar comment on YouTube.
I’m pretty sure there’s a good set of people on here who would be able to help for your project. Anything the SP108E can put out is something we can easily replicate and improve on with Pixelblaze.
I’d first recommend you inquire about hiring @wizard for this. I’d be happy to give you/him the code for the radial fireworks project to get a head start, and he’ll be able to adapt it to be generalized (it was undocumented, thrown together last minute, and specific to my particular arrangement of LEDs). Anything I did on the radial fireworks display is stuff he can also do much faster and thus more cost effective than I can. Plus it keeps the ecosystem healthy.
If it’s not a good fit for him, I’m also happy to give the code to anyone else you might hire from the forums here. We have a talented community!
Jeff - Thanks for your quick reply.
After more thought, I’ve decided to try harder at understanding how to program using the JavaScript subset with the Pixelblaze 3.