Anthony Mattox Interaction Design + Digital Art

In my blog I frequently share code for little projects in Processing & Arduino. It’s always bothered me to look at the black and white text which, in comparison to the beautifully colored code in various editors, is quite a strain to read. I considered a few ways to do this, primarily client side with JavaScript, server side with PHP, or something pre-formatted in any language.

I decided to write a script to add in the necessary HTML to color the code, which I could then paste into my site. Although this does add a fair amount more to the size of the HTML files on the site I decided it was the best way to go. A server side script, probably built into a WordPress Plugin, would be nice and easy to use, but it would be run every time the page was loaded and would be a load on the server. A JavaScript highlighter would also work well, but it would still be a large script anyway and it would add the hassle of browser inconsistencies and run time on slower browsers.

Since I was building this script I wanted to make it available to others. The Processing and Arduino communities, which the script is built for, are both great about sharing code, and this will make sharing just a little bit easier.

The script is built into a simple site at www.anthonymattox.com/code_formatter. You can paste your code into the page, adjust the settings, and format it. The script returns the HTML and a chunk of CSS based on the styles you selected on the first page. Paste the HTML into your site and either add the given CSS or use it as a model to write your own.

In my blog its styled to look something like this. Unfortunately it’s still black in rss readers.

/* sample processing code */
/* analog clock */
PVector mid;
float sc, mn, hr, s, m, h;

void setup() {
  background(20);
  size(400,400);
  noFill();
  stroke(200);
  smooth();
  frameRate(1);
  mid=new PVector(width/2,height/2,0);
}

void draw() {
  background(0);
  s=float(second());
  m=float(minute());
  h=float(hour());
  sc=(s-15)/60*TWO_PI;
  mn=(m-15)/60*TWO_PI;
  hr=(h-3)/12*TWO_PI+mn/12;
  
  strokeWeight(2);
  stroke(200,0,0);
  line(mid.x,mid.y,mid.x+100*cos(sc),mid.y+100*sin(sc));
  stroke(200);
  line(mid.x,mid.y,mid.x+110*cos(mn),mid.y+110*sin(mn));
  strokeWeight(4);
  line(mid.x,mid.y,mid.x+60*cos(hr),mid.y+60*sin(hr));
  
  stroke(50);
  ellipse(mid.x,mid.y,240,240);
}

I’ve been interested in experimenting with electronic music for a while now and also recently started doing some work with the Arduino. So I thought, ‘why not try both?’ I began with a great article I found on Make Magazine (one of my absolute favorite sites) to create the basic script to generate an audio signal with an Arduino. A Digital to Analog Converter (DAC) converts the binary outputs from the Arduino into a relatively fluid scale of voltages which make up the sound wave

On the electronics side, my setup is quite similar to my reference, with the addition of a small amplifier using an LM386 op amp chip and a couple resistors and capacitors for some basic filtering. On the code side I’ve created a much more substantial instrument. Using Processing I built an interface to create a 32 sample waveform and a melody. The data is sent live to the Arduino which places the data into it’s waveform array and then using a timer writes each value sequentially to the DAC to create the sound.

The interface contains two sets of sliders. One represents the shape of the sound wave. Changing the shape alters the timbre of the sound. The second set controls a series of pitches. The currently playing note is lit and a light bar indicates the current position of the playhead. The waveform sliders can be adjusted individually or as a group by clicking and dragging across the set. The sequence bars control both the pitch and the frequency of the notes.

Read On »

Last Saturday I was part of the Baltimore Robot Fest. The event took place at the National Electronics Museum in Baltimore. All sorts of cool nerds came to share their robots. Make Magazine held a workshop, a ring was set up for battle bots, the Baltimore SDIY Group played some incredible electronic music, and many other fantastic groups brought great projects. The Museum was a great location for the event. Modern robotics and DIY projects were mixed in with WWII radar systems, ancient tube computers and even an Enigma cipher machine.

Read On »

In my last post I explained how to control the brightness of multiple light emitting diodes connected to an Arduino with an interface scripted in Processing. The script which I created was great because it just took a series of values sent via USB and lit the LED’s appropriately. This is convenient because it is not specific to any input which might be needed to control the lights. The script to send a value serially along with an indicator character can be added to any Processing script. Naturally one of the first things I had to do with it was create an audio visualizer. With the Arduino programmed as it was all I had to do was use a sound library to break an audio input into frequency bands and send the values down.

The circuit is pretty straight forward. Six LED’s are connected through resistors to the six pins which support PWM (3, 6, 5, 9, 10, 11) and to a ground pin. I have everything crammed onto a tiny breadboard on my proto-sheild cause it’s cute and self contained. That’s just my style. PWM stands for Pulse Width Modulation and is the a way to control the brightness of LED’s as well as some other components. It is a digital output and produces the effect by switching on and off very quickly. The result can be visualized as a square wave. When you send a higher value to a PWM pin it will spend more time on than off. This blinking is faster than we can see so the LED appears to be changing brightness according to the amount of time it spends in the on position.

Read On »

As I started working with my shiny new Arduino board I quickly learned how to build basic circuits and program the micro controller to respond to various stimuli, but what really interested me in the technology was the ability to send information between the board and a computer. I’ve done a fair amount of programming in Processing and was excited to bring some of my work off screen. There is a nice script on the Arduino site on sending data from the board to a computer to control elements within a processing sketch. Unfortunately, the reverse is not as well documented.

I needed a script to send multiple variables from Processing to an Arduino to control a few components. After a bit of research, and more trial and error, I put together a script which controls the brightness of three LED’s through a virtual interface on a monitor. Here are my scripts and the circuit I came up with. It seems simple enough to me but if anyone has suggestions I’d love to hear them.

Here three color LED’s are connected to pins 9, 10, and 11 which can use Pulse Width Modulation (PWM) to control the brightness of each LED. They are connected to their respective pins through appropriate resistors and also connected to a grounded row in the bread board. In the image I am using the prototyping shield from Adafruit which makes it easy to build small circuits.

Read On »

My processing work in my blog as slowed to a trickle recently. This is due to a couple of large projects which I can’t wait to reveal. One is a fun web project and the other a flash application. I’ve also been playing with my fancy new toy here and am beginning to make some progress. Along with the Arduino board I’m also using a prototyping shield from Adafruit. It creates a nice little workspace with a breadboard and some extra power sources and grounds. It also contains two led’s, one of which I wired to digital pin 0 on the underside of the board. This just keeps the light on (as long as I’m not using the pin for something else) when the board has power, and makes it blink when data is being transmitted. The shield covers up the power and transmission led’s on the Arduino itself.

In the photo above I have an led display I took out of something else and, for the sake of learning, programmed. Turning the potentiometer controls the display. Nothing thrilling, but it’s good practice. I’ve also been trying to understand serial communication so I can build devices which send and receive complex data.

Anyway, there’s a quick update, and here is my Arduino code in case it might be useful to someone. It’s not put together very well. In particular there should be a 2d array containing all the numerals and their corresponding led’s. But nonetheless.

Read On »

Hooray! I got my first Arduino. It seems like a necessary step on the long path to becoming a true power-nerd.

“So what is this thing that gets nerds so excited?” you might be wondering. Well, chances are you are one if your reading my blog, but I will explain for the less fortunate. An Arduino is an open source circuit board created by a sister project of Processing. The board has a small micro controller (computer) and a number of input/output pins. The chip can be programmed with a language very similar to processing, and any sort of hardware can be wired to the board. The board connects to a computer via usb for programming and power, and can also be powered from a more portable source.

I’ve been programming for a little while now in Processing and the Arduino was easy to grasp after a quick read through the function reference. After the chip has been programmed it can also interact with Processing applications through a usb port.

There will certainly be a learning period. I havn’t done much circuitry before, but I have a few projects in mind and hopefully soon will have some things to show. I am hoping this will be a means for me to extend the work I’ve been doing into the physical world, creating new interfaces or autonomous works.