# Code naive beginner...where to start?

**URL:** <https://forum.electromage.com/t/code-naive-beginner-where-to-start/553>\
**Category:** Patterns and Code\
**Created:** [September 15, 2020, 12:51am UTC](https://forum.electromage.com/t/code-naive-beginner-where-to-start/553 "2020-09-15T00:51:22Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Goose](https://forum.electromage.com/user_avatar/forum.electromage.com/goose/32/359_2.png) [@Goose](https://forum.electromage.com/u/Goose)\
**Post date:** [September 15, 2020, 12:51am UTC](https://forum.electromage.com/t/code-naive-beginner-where-to-start/553/1 "2020-09-15T00:51:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![wizard](https://forum.electromage.com/user_avatar/forum.electromage.com/wizard/32/4_2.png) [@wizard](https://forum.electromage.com/u/wizard)\
**Post date:** [September 15, 2020, 4:31pm UTC](https://forum.electromage.com/t/code-naive-beginner-where-to-start/553/2 "2020-09-15T16:31:18Z")

</div>

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](https://github.com/simap/pixelblaze/blob/master/README.expressions.md).

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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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.

```javascript
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:

```javascript
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:

```javascript
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](https://youtu.be/3ugNIZ96UK4?t=547).

* * *

Let us know how it goes! Stuck? We can help! Find an awesome tutorial? Let us know!

---

<div class="post-metadata">

**Author:** ![jeff](https://forum.electromage.com/user_avatar/forum.electromage.com/jeff/32/3473_2.png) [@jeff](https://forum.electromage.com/u/jeff)\
**Post date:** [September 15, 2020, 4:58pm UTC](https://forum.electromage.com/t/code-naive-beginner-where-to-start/553/3 "2020-09-15T16:58:44Z")

</div>

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](https://forum.electromage.com/uploads/short-url/5BvgPT8Bv28Zu4ZszZUkjTHwZak.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?

---

<div class="post-metadata">

**Author:** ![nickbeaulieu](https://forum.electromage.com/letter_avatar_proxy/v4/letter/n/ea5d25/32.png) [@nickbeaulieu](https://forum.electromage.com/u/nickbeaulieu)\
**Post date:** [September 15, 2020, 5:16pm UTC](https://forum.electromage.com/t/code-naive-beginner-where-to-start/553/4 "2020-09-15T17:16:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Goose](https://forum.electromage.com/user_avatar/forum.electromage.com/goose/32/359_2.png) [@Goose](https://forum.electromage.com/u/Goose)\
**Post date:** [September 15, 2020, 5:36pm UTC](https://forum.electromage.com/t/code-naive-beginner-where-to-start/553/5 "2020-09-15T17:36:42Z")

</div>

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 😃

---

<div class="post-metadata">

**Author:** ![wcleafs2002](https://forum.electromage.com/letter_avatar_proxy/v4/letter/w/d6d6ee/32.png) [@wcleafs2002](https://forum.electromage.com/u/wcleafs2002)\
**Post date:** [January 21, 2021, 6:39pm UTC](https://forum.electromage.com/t/code-naive-beginner-where-to-start/553/6 "2021-01-21T18:39:49Z")

</div>

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:

```auto
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

---

<div class="post-metadata">

**Author:** ![wcleafs2002](https://forum.electromage.com/letter_avatar_proxy/v4/letter/w/d6d6ee/32.png) [@wcleafs2002](https://forum.electromage.com/u/wcleafs2002)\
**Post date:** [January 21, 2021, 10:23pm UTC](https://forum.electromage.com/t/code-naive-beginner-where-to-start/553/7 "2021-01-21T22:23:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Scruffynerf](https://forum.electromage.com/letter_avatar_proxy/v4/letter/s/34f0e0/32.png) [@Scruffynerf](https://forum.electromage.com/u/Scruffynerf)\
**Post date:** [January 21, 2021, 10:47pm UTC](https://forum.electromage.com/t/code-naive-beginner-where-to-start/553/8 "2021-01-21T22:47:12Z")

</div>

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](https://natureofcode.com/)  
(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”

---

<div class="post-metadata">

**Author:** ![Scruffynerf](https://forum.electromage.com/letter_avatar_proxy/v4/letter/s/34f0e0/32.png) [@Scruffynerf](https://forum.electromage.com/u/Scruffynerf)\
**Post date:** [January 21, 2021, 10:49pm UTC](https://forum.electromage.com/t/code-naive-beginner-where-to-start/553/9 "2021-01-21T22:49:57Z")

</div>

Also mentioned elsewhere, you might want to try [Tixy.land](https://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](https://forum.electromage.com/t/tixy-a-way-to-get-better-at-pb/735) 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)

---

<div class="post-metadata">

**Author:** ![wcleafs2002](https://forum.electromage.com/letter_avatar_proxy/v4/letter/w/d6d6ee/32.png) [@wcleafs2002](https://forum.electromage.com/u/wcleafs2002)\
**Post date:** [January 21, 2021, 10:52pm UTC](https://forum.electromage.com/t/code-naive-beginner-where-to-start/553/10 "2021-01-21T22:52:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sgroen](https://forum.electromage.com/user_avatar/forum.electromage.com/sgroen/32/315_2.png) [@sgroen](https://forum.electromage.com/u/sgroen)\
**Post date:** [August 20, 2021, 8:19pm UTC](https://forum.electromage.com/t/code-naive-beginner-where-to-start/553/11 "2021-08-20T20:19:16Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jeff](https://forum.electromage.com/user_avatar/forum.electromage.com/jeff/32/3473_2.png) [@jeff](https://forum.electromage.com/u/jeff)\
**Post date:** [August 20, 2021, 10:14pm UTC](https://forum.electromage.com/t/code-naive-beginner-where-to-start/553/12 "2021-08-20T22:14:35Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![sgroen](https://forum.electromage.com/user_avatar/forum.electromage.com/sgroen/32/315_2.png) [@sgroen](https://forum.electromage.com/u/sgroen)\
**Post date:** [August 26, 2021, 6:27pm UTC](https://forum.electromage.com/t/code-naive-beginner-where-to-start/553/13 "2021-08-26T18:27:36Z")

</div>

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.