Anthony Mattox Interaction Design + Digital Art

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 »

In addition to interparticle forces, all the objects in this script are effected by a Perlin Flow Field. Two dimensional Perlin noise evolves through time and sits behind the particle system as a grid of forces. These forces are applied to each particle based on it’s exact coordinates each frame, before any other functions. The system creates some very elegant effects as smaller (lighter) particles get sorted out and complex force structures create swirling spirals and channels of flowing particles.

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 »

Perlin noise is a pseudo-random gradient texture, developed by Ken Perlin beginning with his work on the 1982 movie Tron. It continues to be a great tool to create textures and dynamic elements. The function generates a continuous string of values in any number of dimensions. Although it was initially developed to build textures it can be very useful for many other things such as particle motion. Noise is generated by a series oscillations over a variety of frequencies, similar to an audio signal.

Processing supports Perlin noise in up to three dimensions and can be implemented by calling the noise function with the parameters for the coordinate. I’ve been playing with using Three dimensional noise to create an animated force field or flow field in which particles move and thought I’d build a little tutorial to demonstrate some useful applications.

Read On »

My anemone piece needed a little color. Here are a few more renderings and a video of the system running. I’ve also added a few more objects to my particle script including particle generators, attractors, and repellers. A faint circle of somewhat random size around each particle gives a little texture in empty space and pushes back older tubes by overlaying a dark texture.

Read On »

This is the result of my attempt to create a variation of my line wave script which waves in two dimensions. I started anew and used some particle systems I’d started a while ago. With a spring class which holds two particles together all the particles could be chained together. Hiding the particles and springs and wrapping the particle loop in a shape method with a curve vertex for each created a wobbling line. Without a background function the line continually drew each frame on the screen.

It’s not exactly what I had in mind, but I like how it turned out. I have a few different variations I may post and will keep playing with it. I’ll also have a few desktop wallpapers available from this script soon as soon as I decide how to set up and organize a wallpaper section on my site.

Read On »

Continuing with particle systems in Processing I stumbled upon some effects I’m very happy with. Although it wasn’t exactly what I was trying for at the time but have an aesthetic which is very interesting to me. The path of each particle is drawn at each frame with a semi-transparent circle, gray with a white border. The way the circles overlap create a pseudo 3d effect which reminds me a lot of an electron scanning microscope.

Read On »

Although there are a couple particle system libraries available for Processing I thought I’d build my own anyway. For practice, a better understanding of what’s going on, and more control over the details. With a little help from Dan Shiffman I began working on one a little while ago but never quite finished it. Trying to extend my Wave script to flow fully in two dimensions, a particle system seemed like a good tool. All the particles repel each other and have realistic motion with force, acceleration, and velocity vectors. I also added a spring class and a few other little tools.

On the way I was distracted a few times and made a few other generative sketches. This one simply creates particles which slowly fade. A curve along all of the points with a very low opacity creates the brushy textures.

Concentric circles and lines always seem to catch my eye. They hold a lot of movement and tension and have an inexplicable beauty to me. This little morning project scripted in Processing draws a waving horizontal line. Each point on the line has a vertical speed and acceleration, and the line is recalculated fifty or so times.

To add a little more depth I put in a blur filter before each new line set, and an invert filter creates some nice complimentary colors.

Read On »