So I just got back to NYC last weeks from 3 weeks in Canada. The first week was in Montreal for the Chromatic Festival, May 26 – June 2, where I showed the Digital Rothko patterns.

Now that I’m back, I have a summer of works to do. First on my to-do list… finally get a handle of serial communication to the lightboard. By this I mean being able to send an jpeg image through P5JS through serial, to the arduino, which spits out the patterns on the neopixel matrix. This is the key to my mastery of this board, and key to the next idea for a piece that I have.

Right now the status is that I am trying to just get a one pixel red coloured gif image from P5JS to display on the very first LED pixel of the matrix, at position 0. The serial port is open, and arduino takes in comments from the serial monitor but it doesn’t seem to be showing what I am sending through P5….

June 20: All I’m trying to do is enter a value into the serial monitor and have the LED reflect that value in brightness. So if i enter 1, I will get a very dim white LED at 1,1,1.


-when you set the chat fromSerial, then everything you type in the Serial monitor will show up as you type it.

-P5 serial.readline() reads a string until it sees a newline character — this is in comparison to

-the atoi() function converts char to int. It is derived from the standard C libraries and there’s not much info on the arduino reference guide on it.

-BREAKTHROUGH (Clue): the topic of extracting ASCII values from chars (i.e. I type in 2 and it becomes the int 2, not 46 or whatever it is.) is a discussion topic which means many people have run into this problem and asked this question before.

-BREAKTHROUGH: int character = fromSerial – ‘0’; that’s what solves this whole thing. Now I can press on serial monitor and the LED is at level 1. AMAZING.

-now I need to create a system that takes serial input either at one or three digits for the range of possible serial values between 0 and 255. Hmmmm

JUNE 22 (Friday): The process is as follows: gives single chars

-these chars can be made into ints

-these ints can be concated into a string

-this can be mapped into the LED

PROBLEM: Now things are appearing in the serial monitor at differing order. I think this is at the heart of the mix ups with the INPUT. Right now, I’m trying to map on to a 3 item array.

BREAKTHROUGH (June 22 afternoon):

-able to input three numbers separated by commas and have these mapped into the first pixel LED.

THEN: -able to input a series of 3 and have them light up LED 1, 2, 3, etc consecutively and accurately.

PROBLEM: Unable to verify whether any serial information is being received over P5.

RECTIFIED: It was just messing with P5 Serialport and opening up the port

PROBLEM: P5 should be providing data with the correct format A,B,C, but somehow the arduino sketich is not responding to it, despite me verifying that serial. available is working.

JUNE 29: Got the thing working somewhat. I can grab the pixel values from a pixel image from P5JS using a one-item array, and then serial.write that 3 value data through P5 serial control. I get this on the arduino, have it show on the LED display, then spit back the values back to P5 which I see on Chrome’s Console. HOWEVER, the issue remains that this interaction happens once in a while and the system of transferring data is still unstable. I dont know if there is anything I can do to make it stable, or if this patch-work of P5 serial control is a work-around that is not meant to be stable.

Loadpixels(): from this processing article it seems like loadpixels starts the pixel array from the top left, going right, then down to the next row.

PROBLEM: I am trying to display this chessboard 10×10 pixel pattern, but the data coming out of load pixels seems to not be in the right order. After further experiments with loadpixel() it seems that it does not display the pixel information in the right order…

(SOLVED) PROBLEM: LoadPixels() gives you an RGBA value of each pixel. Which means there are 4 array elements for the first pixel. However, for a 100 pixel picture, I only get 100 array elements, which means only the data of 100/4 = 25 pixels. What’s up with that? SOLVED: it was simply the matter of adjusting createCanvas to 100,100 because it was on 1,1 when I was just doing one pixel

(SOLVED) PROBLEM: now that I’ve adjusted the canvas and image size to reflect it (10×10), somehow there are TOO many array elements. pixels.length gives me 10,000. Not sure why… since if there are 4 elements to each pixel and 100 pixels, then that would be max 400. So…. SOLVED: the problem was pixeldensity, which I guess was making it more pixels on the screen that the image was, and P5 automatically scales the pixel to the screen. Got rid of this problem by setting it to pixeldensity(1). Now pixel.length is 400 and all is right with the universe again 🙂

(SOLVED) PROBLEM: Uncaught TypeError: pixels.splice is not a function. Trying to splice the ‘A’ out of the RGBA of the pixels array, so every 4th element. But it’s not recognising splice as a function. Weird because I just made a separate array in the same program and splice works just fine. Also weird is that pixels.splice seems to crash the entire program, and no lines of code below it is used.

My working hypothesis at this point must be that there must be something different about the array that loadPixels() creates and a regular array I can create with just var array [blah0, blah1, blah2]. Proposed Solution is to find a workaround, since there’s not much I can do. I dunno, maybe the people who made P5 decided that splice shouldn’t be something you do to the pixel array. Anyways, I’ll try to make a new array and just have it be 300 elements and try to take out the 4,8,12, etc of the pixel array. I just need a mathematical way of doing this… SOLVED: I had to duplicate the array with a separate array function but not using array.slice but rather just doing it the manual way with a for loop. THEN with the new array, P5 allowed me to do splice. YES!

PROBLEM: I am attempting to gain a degree of stability in serial interations. I gained that through serial.write something in arduino in the serial.available statement that that spits it back out to the Chrome console through the P5 SerialEvent function. However no matter what I serial.write, it keeps showing up at “255” when P5 Not sure why…

JULY 2: PROBLEM: Still stuck on the same thing yesterday. The key to this whole thing is why the P5 spits out a 255 from the arduino’s kicked-back serial input…

This problem is pretty tough. I’m not sure what parts of the code are being written to serial by the arduino. Specifically the part that tells the program if you see a comma, do this –  I’m not sure that part is writing. So far I wrote a small flashLED() function which flashes the LED.

Having huge problems even reading serial data from P5 on the arduino now… not sure where the problem is located or if it’s just P5 serialport.

Neopixel library too slow?

The shape of the Digital Rothko splotches are just not fading in fast enough and things seem to really slow down in the IDE’s serial monitor. This is after I simplified the number of operations as much as possible by re-orienting them from the drawcirclemaster, drawcircle and circle functions. So then I just did basic shapes: two rectangles and four lines — should be faster, right? WRONG.

It’s simply too slow. It’s like the time it takes to do all those setPixelColor is too slow. Going to look into the FastLED Library now and see if I can build the sketch that I showed at the ITP Spring Show from it, stat.

Lag on Uploading Sketches to Arduino Due

I’ve always noticed a lag in uploading to the Arduino Due when connected to the LED board. Like, a super long delay from pressing the “upload” button to seeing anything happen in the serial monitor or on the LED board. This can be 30 seconds to minutes. I don’t know why this is. With the UNO it’s generally less than a second. The Due is the most powerful Arduino money can buy, yet it’s super slow — why?

Time calculations for figuring out color transitions in Digital Rothko.

39 seconds from “done uploading” to the following happening on the Serial monitor:


understanding getPixelColor in Neopixel Library

According to Adafruit, the function getPixelColor returns an “32-bit merged color value”

When I set it to fetch the value for a WS2812B set at 10,10,10 and println, the monitor shows the value to be 657930. This is the 32 bit merged colour value.

From an Adafruit forum discussion, I’ve learned that this number is the summation of the following formula:

(red * 65536) + (green * 256) + blue

So sub’ing in my 10,10,10 to confirm this formula:

(10* 65536) + (10 * 256) + 10 = 655360 + 2560 + 10 = 657930

Excellent. Now we’ve found bedrock.

Now question is… can I extract the RGB value just by knowing the 32BMV?

From a math standpoint, it seems like ascertaining 3 unknown variables from an equation is impossible. BUT since I am using making the yellow using only one random value and then dividing that value by 3 to make the green to mix w the red to get the yellow, it is possible. GENIUS!

Therefore, applied to Digital Rothko sketch, it becomes:

(red* 65536) + (red/3 * 256)  + 0 = 32BMV

red = 32BMV / 65621.33



Serial Understanding Experiments

The following code from

int incomingByte = 0; // for incoming serial data

void setup() {
Serial.begin(9600); // opens serial port, sets data rate to 9600 bps

void loop() {

// send data only when you receive data:
if (Serial.available() > 0) {
// read the incoming byte:
incomingByte =;

// say what you got:
Serial.print(“I received: “);
Serial.println(incomingByte, BIN);



1,2,3 leads to:

I received: 110001
I received: 110010
I received: 110011

For OCT: 61,62,63

For HEX: 31,32,33

For DEC: 49,50,51

Serial.print(x, DEC);  // print as an ASCII-encoded decimal
Serial.print(x, HEX);  // print as an ASCII-encoded hexadecimal
Serial.print(x, OCT);  // print as an ASCII-encoded octal
Serial.println(x, BIN);  // print as an ASCII-encoded binary