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.

Leave a Reply

Your email address will not be published. Required fields are marked *