Debugging problems in an electronics project can be frustrating. When things don't work, they often just sit there and do nothing. Or sometimes, they will billow smoke. When writing firmware, you can sometimes find yourself creating elaborate debugging scaffolding to track down buggy code. Sometimes blinking LEDs and a serial connection are not the best tools for debugging.
Okay, I know that good debuggers exist for microcontrollers. But wouldn't it sometimes be easier to write your code in a familiar environment, debug on screen, then cut and paste into your Arduino code? That's where Processing -- a close relative of Arduino -- comes to the rescue!
The Arduino Integrated Development Environment and language forked from the Wiring project, which was the hardware-oriented twin of the Processing language and IDE. The similarities and compatabilities of the two projects are a Big Win for sketch developers.
Prototyping code: Drawbot Mandala
When I was making the AS220 drawbot (see here), every time I ran a new drawing I had to get on a ladder to reset the location of the marker. Prototyping a drawing in Processing sped up the process considerably and gave me more room to quickly play around with variations in the code.
Here's the Processing code to draw a mandala shape using overlapping circular patterns (see image at the top of this article for the final result, drawn on a wall with a bunch of Sharpies). When I got something I liked, I had to make 0 changes before cutting and pasting into the Arduino environment!
Download the Processing test Mandala code
Download the Arduino Mandala code for the Drawbot
Little Helper Tools
Here are two more quick examples of whipping up a Processing sketch to support the creation of an Arduino program. The first reads an image file and outputs an Arduino-friendly array of numbers representing the grey values of the pixels, scaled to a range.
This array was cut and pasted into a drawbot program that draws a big grayscale (12 circles for black, 6 for 50% grey, etc) like this portrait of Patrick McGoohan:
When I was asked to modify the drawbot to do portraits of people at our annual Fools Ball party, I came up with a "police sketch"-style interface:
People could set their facial attributes using the 6 analog and 4 digitial inputs, hit the "Draw!" button and get their own custom portrait:
The sketch required a bunch of graphics primitives that could be scaled and positioned depending on the inputs and the relative position of the other elements of the face. The graphics primitives (i.e., a female eye, a male mouth, a moustache, etc.) are an array of points in the form (x1, y1, controlx1, controly1, x2, y2, etc...). This array is used to draw the Bezier curves that make up the primitve.
I wanted to be able to draw the shapes by hand on the computer, so I whipped up a Processing sketch that would let you draw a continuous shape and spit out the list of points when you hit the Shift key.
Download Bezier primitive creation tool code
The AS220 drawbot uses quadratic Bezier curves (one control point, like Flash), while Processing uses cubic Bezier curves (two control points). The sketch was easy to hack to approximate the difference between the two.
So, go get Processing! The MIT press book by Reas and Fry is also excellent!
