anthony mattox new media art & design

Website for Rachel Verhaaren

I’ve just finished a website for this cute girl I know, Rachel Verhaaren. She is a photographer, and a student here at MICA. Her work has really fantastic colors and textures (two of my favorite things), especially her large format photographs and often focus on optics and perception.

Most photographers seem to want the most minimal of sites, a white or dark grey page with their work in the middle. I felt it was more appropriate to give it just a little bit more color and give visitors a good impression of Rachel’s work as soon as they open the page, something few photographer’s sites do. WIth that in mind, her portfolio is on the front page with large images linking to sets of images.

www.rachelverhaaren.com

Some nice javascript touches are built with jQuery and the site is powered by Wordpress.

Pulsus

For the past few months I’ve been hard at work building a flash game. As my first game (but hopefully not last) it was a bit of an adventure, but worthwhile in the end. There are certainly still details to be worked out and some extra features to finish off, but overall it’s come out pretty well.

First go play it! Then come back here if you’d like to know a little more about how the game was created.

I’m not one to preface my work, but I would like to mention that I am not a gamer in any respect. This being said, I may not be aware of all the game conventions I should be following, despite a good amount of ‘research’. If you have any tips for this or future games, feedback is always appreciated. You can leave public comments here or send me feedback through the Pulsus contact form.

Recently, thanks to a class with Jason Corace, I’ve become interested in games as interactive systems. In the same class I developed a card game and created Pulsus for my final project.

The Game

The game, Pulsus, is a puzzle game about particle systems. Players have to place objects to direct particles from emitters into goals. While it is a puzzle game, it is also about exploring a dynamic system.

In the game, players solve puzzles by placing objects onto the stage which effect the way the particles move. In each level the particles must be moved from particle emitters into goal points. Different colored goals accept only particles of that color. Particles must hit the goal quickly enough to fill it up, but once it is complete is will remain filled. The colored force objects will attract their own color while repelling others. Grey objects interact with all particles in the same way.

read on »

Filaments

On my way to developing my 3d tree script I first added a function to my basic particle system to cause the particles to branch. I went back and polished up the rendering of this as it looked interesting in 2d.

As usual, the script is built in Processing. Particles are generated by clicking on the screen and then they spread out pushing each other away. A slight perlin noise field gives the strands a more interesting motion and texture. Each frame is drawn successively on the screen, tracing the particles motion, without clearing the background. Each particle is rendered as a filled ellipse with a lighter transparent outline, creating a slightly 3d feel as the outlines get denser toward the edges.

To render the images with a higher resolution I created a global scale variable. The width and height of the applet are multiplied by this variable and then the scale function is called with that variable at the beginning of the draw loop. This lets me switch quickly between a manageable size to see what’s going on and the high res version. On my mac, entering expose fits the oversize window onto my screen. It’s far from a perfect system but it works. Exporting vectors is a much better rout, but this application is to complex for that to be feasible.

Now pictures. Click to see them bigger.

read on »

Wave Pool 2

This sketch builds off one of my recent experimentations in wave motion. In the script an array of waves is created by various inputs. Each wave effects the array of ‘fluid’ and creates a rippling structure. Here the structure is rendered not just after all the waves have been calculated but after each wave is processed.

The result is a stack of rippling points flowing between each other. I first just rendered each wave as a thin bar, to make sure everything was working properly, and then added a color property to the wave class. I dropped the symmetry to avoid some unintended interpretations. The script runs much slower, as I should have expected. I’ll try and streamline things a little (although it’s already very simple) and put it onto my interactive site. I might just have to put some limits on it so people don’t crash their.

Now a bunch of pictures!

read on »

Interactive Site

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.

www.anthonymattox.com/interactive 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.

Enjoy!

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.

Format Processing & Arduino Code for the Web

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);
}

World Stem Cell Map

I’ve been working for a while on this project with Stem Cell Resources for the new cell exhibit at the Maryland Science Center. The exhibition, including the Stem Cell Map and some other fun interactive works, opened yesterday and was received very well. If you’re in Baltimore its worth checking out. Developing this project has a been a great opportunity to do some great educational work with some great people. I enjoy being able to maintain a connection with the sciences despite focusing myself on art, and I always love creating data visualizations.

The Map is scripted in Actionscript 3 and takes all the data from an xml file exported from a spreadsheet making it easy to update. The research is broken down into three categories and each location is colored accordingly and scaled based on the number of facilities. It’s displayed on a large touchscreen in the exhibit and will also soon be online.

read on »

Perlin Flow Ribbons

Although I am happy with how my initial Ribbons script turned out it still wasn’t exactly what I was trying to create. After playing with Perlin Noise based forces in my straightforward particle system and creating outstanding fluid motion, I thought I might go back to the Ribbons and add a Flow Field to that as well. The result is much more dynamic than the original and quite graceful.

And a little technical stuff. The ribbon is just a strategically rendered particle system. I created a particle system class with particles and springs. As new particles are added (on mouse press) new springs are also created connecting each particle to the one before. Each particle repels all nearby particles and springs pull them together. The result is a string of connected particles which would, if the forces extended infinitely, eventually straighten itself out into a line. To render the structure all particles and springs are hidden and a curve is drawn by wrapping the rendering loop in beginShape(); and endShape(); with a curve vertex for each.

In the previous version the wobble was created by a slight random force applied to each point and a wind vector of the particle system. Because of the varied weights of the particles and spring lengths the wind wobbled the structure more convincingly. In this version the same Perlin Flow Field I’ve been using in many of my recent projects pushes the ribbon around much more dynamically. Different parts of the string are pulled in different directions making it writhe back and forth. The color is an attribute of the particle system and ‘randomly’ shifts over time.

read on »

Spinal Network: Drawing Machine

Adding lines connecting nearby points in a particle system creates an interesting effect, but it does get a little messy. I thought it would be interesting if the lines only connected the nearest particles to each, which would vary from point to point, and if the lines didn’t overlap or intersect. The result would be a nice mesh with varied density. Of course after putting the script together I turned it into a drawing machine. I’ll post more on exactly how this script works sometime soon.

In this Drawing Machine a series of particles spawned when the mouse is pressed move through a morphing Perlin noise flow field. They also slightly repel each other. The netting algorithm is applied to the particles to create the dark lines and their colors slowly shift. Many different factors effect the size and transparency of the points and lines in order to keep everything moving smoothly. Lines fade out as they get longer and fade out with the points they join.

read on »