Playing with Processing and p5.js

Marie Curie Stand-Alone Demo Page

I decided to play with Processing as a platform for making an interface. This turned out to be incredibly fun to play with.

I started off by going through some basic tutorials. I then did some simple sketches, using the mouse as the input device.




I then made a sketch that read in an image file and converted it to a halftone, and tied the size of the halftone to the mouse Y value.

This worked well in Processing, but I then wanted to put it on a webpage. It turns out that p5.js is a straightforward port of Processing, so I was able to convert it without much difficulty. Final script for this is in marie_half.js. Note that I needed to include p5.min.js to interpret this. (See source of this page.)

Demo at Bottom of Page

I got hit with a few gotchas in the porting, but the only really subtle bug was due to the fact that p5.js and Processing store the different channels of the ikmage pixels in different ways. Both use a flat array, but p5.js uses four values per pixel, meaning the flat array is 4 times the number of pixels, while Processing uses a different packing mechanism.

I also tried hooking p5.js up to my webcam, but this failed for security reasons as p5.js (reasonably) requires https to enable webcam access.

Accelerometer Fail

I had a failure this week in trying to get an accelerometer board made. I tried making Neil's hello world board for the ADXL343, and all seemed fine, but when I hooked it up to FTDI there seemed to be a short near the 3.3V regulator (judging by the way it got hot to the touch). I didn't have time to debug further, but will come back to that soon as I'd like to use an accelerometer in my final project.

This is too bad as I was really looking forward to hooking up this sensor to a Processing / p5.js front end to make a little accelerometer-driven paintbrush, but that's going to have to wait for now.

Halftone Demo