My Blog: projects, sketches, works in progress, thoughts, and inspiration.

Category: art

Back at the old particle system I’ve been enhancing the interaction. In the applet you can now easily create and remove particles and links. Particles can be dragged and multiple particles can be selected. Right now everything is controlled with keypresses, but I plan to build an interface to easily switch between tools and to modify particle and spring properties as well as environmental properties. When its a little closer to finished I’ll post it into my interactive site.

In these images, springs are drawn in purple and forces are drawn as blue lines, stronger forces are darker. Drawing the forces is a little unnecessary but it creates interesting patterns. Which is, at this point, all this application really does.


What is particularly interesting is the way structures move. In the image below, a radial structure is dragged by its central point. The whole mass distorts into a cardioid shape. It eventually collapses into chaotic motion. Moving any particle in an interconnected set creates waves through the rest of the system.



Post Page »

Interested in pushing the interactivity of my Processing work a little further I decided to create a little piece which responds in a more interesting way to mouse movements.

The sketch has an array of vertical bars across the screen. When the mouse is moved (or clicked) waves are created that move along the array and bounce off the walls. The speed, direction, and distance of the mouse motion effect the pool differently simply because of the way the set of waves created overlap.

Slow movements create small ripples, moving your mouse along with a wave makes it grow, and moving the mouse around quickly creates complex noise. The waves still don’t bounce off the edges perfectly, but it usually works pretty well.


A second version of the script creates waves with a different shape, but is otherwise similar. In the first version, the waves were shaped to replicate water ripples and the overall area of the bars stays about the same. In this second version, the waves form large bulges. The wave shape creates a different texture and motion and changes the interaction.


Post Page »

I began programming about a year ago, primarily working a language called Processing. Much of the programming I have been doing has be to create generative or algorithmic artwork. Such works involve writing a script to dynamically generate images based on a variety of systems and inputs. One of the thoughts behind this type of work is that a piece is not manifested as a single image, but in a method which creates an image. What is important is style, texture, motion, and the relationships between elements and colors. The particular composition is generated dynamically each time the piece is viewed. For the past year I’ve been documenting most of this work as still images in this site, a trail of my development, but not a full representation of the work. is a little site I’ve made to display my interactive works in one place. Take some time to explore the projects. I’ll keep adding more work as I create it as well as a number of other projects that still need to be cleaned up and put into the site.


anthony mattox interactive

Most of the projects in it are created with processing and your browser will have to have the java plugin installed to run them. To run the 3d applets you will have to click trust in the dialogue box that appears. There still might be some bugs in the site so let me know if you have any issues.


Post Page »

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.

Processing & Arduino Code Formatter Screenshot

The script is built into a simple site at 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.

processing code
code formatter
Sample Processing Code

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

void setup() {
  mid=new PVector(width/2,height/2,0);

void draw() {
Post Page »

I cracked open the old Processing Particle System again and tried something a little bit different.

Beginning with particles moving through a Perlin Flow Field I moved them into 3d. Since my particle system is built on the PVector class, adding the third dimension was a simple matter of adding a third parameter to every call to a new PVector and adding either the P3D or OpenGL (used for all the images here) rendering engine. An extra force pushes the particles up through space an array stores the previous locations for each particle. As particles die an instance of another object is created, exclusively for storing and rendering these paths.

Another addition causes the growing strands to bud. The budded particles inherit the properties from the parent. Changing the forces between particles, the branching rate, and the environmental properties creates many different structures.

Processing Particle Generated Tree

Processing Particle Generated Tree

As the script runs, a cloud of particles drifts up through space leaving behind a colorful twisted shrubbery. Using the mouse and keyboard the camera can be moved around the structure while it generates itself.

Read On »

Read On (Post Continues) »

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 »

Read On (Post Continues) »

processing audio waveform & spectrum 1

processing audio waveform & spectrum 2

This is a quick little audio visualizer I put together with Processing and the ESS Sound Library. The audio spectrum is analyzed with an FFT and spectrum bands are plotted as vertical bars. The Waveform is drawn over the bars in white, adding a lot of interest to the image. To create the fading effect of the object a transparent, white rectangle is drawn over the whole sketch instead of using a background. Previous frames are left on the screen and are slowly covered up by white.

To create an interesting color scheme each bar is colored based on its own height and its neighbors. Combined with the overlapping shapes a broad range of tones and hues is created.

processing audio waveform & spectrum 3

Read On »

Read On (Post Continues) »

Magnetic Field Clock, created in flash with ActionScript 3

Continuing with clocks in ActionScript I created this slightly less abstract clock, loosely inspired by magnetic fields. I’m happy with the way it turned out. I plan to create a screen saver from this as well. If you’re interested it should be available soon. Leave a comment if you have any thoughts or criticisms.

I had a few little battles trying to get everything functioning. Some functions in Actionscript 3 use radians, namely the trigonometry functions, while other more basic functions use degrees. Having to switch frequently between the two tripped me up a few times. Another issue, not directly related to ActionScript, was dealing with the different number sets. Each dial object has an array of text objects. Some begin with zero, so they line up with the array indexes, while others start with one and throw everything off.

Read On »

Read On (Post Continues) »

Orbit Clock


Tagged: , ,

Orbit Clock: Flash clock by Anthony Mattox

I started working with this idea in Processing. I was playing with clocks and fractals and thought it would be funny to stack all the clock hands on each other. I’ve been working a fair amount in ActionScript and decided to rebuild the project in flash to make it a little more portable and improved the design quite a bit. Building clocks is interesting to me as it is a very basic form of data visualization. The data itself seems quite simple, but also practical. In this particular clock each time is represented by a particular shape.

My code is still a little messy, but I will probably post it after a little cleaning up. The whole applet is created with ActionScript 3. I’m still not friends with the flash interface. I have more fun building classes which can create graphics quickly with a few parameters. It’s just more fun that way. This piece will also (hopefully) be a screen saver soon along with a few other little flash projects I’m working on.

Read On »

Read On (Post Continues) »