Luminous Flux — Postmortem

•19 February, 2012 • Leave a Comment

For the month of January 2012, I was invited to do an exhibit at the Wiesner Student Art Gallery at MIT.  The gallery is located in the student center right off of Massachusetts Avenue, and every month features a different student artists’ work.  I decided to do an exhibit of some LED-related work I had done, under the title ‘Luminous Flux’ — a unit of light used to measure the perceived power of light.  I thought it was quite a fitting title for my exhibit!

The exhibit consisted of Sandtrap; and Processing In Digito, two pieces that I think explored different aspects of art that I enjoy.

Sandtrap focuses on interaction and creativity, relying on participants to really drive the piece. Without anyone to participate, there isn’t really much to Sandtrap. Processing In Digito, on the other hand, is a piece that is conceptually diametric to Sandtrap. It is computationally generated — computer algorithms produce the imagery, and the artist is essentially absent from the piece. In a sense, Sandtrap focuses on agency while Processing in Digito focuses on removing it.

Below are some pictures of Processing In Digito in the piece:

Processing In Digito at the Wiesner Student Art Gallery

Processing In Digito at the Wiesner Student Art Gallery

Processing In Digito at the Wiesner Student Art Gallery

Sandtrap at the Wiesner Student Art Gallery


Kinetic Art — More Moire

•11 February, 2012 • Leave a Comment

Winter is ending, and the summer is quickly approaching. This means that it is art grant season! So I’m busy looking at all of my abandoned art projects and figuring out which ones should be turned into reality…

One of my favorite projects (conceptually) that hasn’t been brought to life is kinetic art based on moire interference patterns. When sets of lines overlap, interesting visual patterns arise. When motion is added, the visual effect is extremely dramatic. In the spirit of works by David C. Roy, I’ve always wanted to make my own kinetic art based off of these patterns.

My conceptual workflow has been to create shapes in Inkscape, and then use Processing to animate the shapes to determine their visual appeal before I go and build them. From there, it’s easy to turn an Inkscape vector graphic into a .dxf file for rapid prototyping (water jetting for metal, router for wood, laser cutter for cardboard/plastic) and then we’re off to the races!

Below are some of the concept shapes I came up with, along with their respective animations.

Moire Interference Pattern Concept -- Simple Moire Interference Pattern Concept -- Simple (Animated) Moire Interference Pattern Concept -- Simple II (Animated)

This shape (called ‘simple’) is a pretty straightfoward shape with radial symmetry. The radial lines are curved to the give the shape a handedness so I can create two antisymmetric shapes to overlap with each other. The two overlayed shapes can be rotated in opposite directions to create a scintillating interference pattern (see center box). The rightmost box shows a pattern created from taking two copies of the same pattern and overlaying them rotating at different speeds. This causes each arm to appear to grow thicker and thinner in a seemingly periodic fashion. Click on either of the images to the right to see the animation; the original .svg file is available for editing (or for transferring to a .dxf file) by clicking on the image.

Moire Interference Pattern Concept -- Ellipsoid Moire Interference Pattern Concept -- Ellipsoid (Animated)

This next shape is an experiment with a shape that doesn’t exhibit radial symmetry. This pattern is more reminiscent of moire patterns induced by sets of parallel lines (there Wikipedia article linked above has some great examples of more traditional moire patterns). These shapes are achiral, so there’s no way to make them rotate antisymmetrically. However, just rotation in opposite directions gives an interesting visual effect of the shapes expanding and contracting with varying speeds. As before, the original image is on the left with the animation linked on the right.

Moire Interference Pattern Concept -- Semishape Moire Interference Pattern Concept -- Simple (Animated)

This is my favorite shape so far, which came out of trying to make a round shape that was asymmetric but chiral. Antisymmetric copies of this shape rotating in opposite directions gives rise to a very complex visual pattern that has different feels to it at different points of the rotation. I’m a huge fan of both modes and the different ideas they evoke.

I’m looking forward to seeing how these turn out once they’ve been turned into real objects — I’ll be sure to post updates when that time comes 🙂

Perlin Noise Visualization

•26 January, 2012 • Leave a Comment

First off, I played around with the beat frequency-based art and animated it. Now each sinusoid has a phase that changes between 0 and TWO_PI, and then resets back to zero. This creates the illusion of the pattern rotating and expanding at the same time. Check it out: Radial Beating (Animated)

It’s a bit computationally intensive, so I should think of a better way to update the pixel information. It starts to slow down substantially at around 400 x 400 pixels, and I’d like to have it at 512 x 512 if possible. If you have any thoughts on a speedier algorithm, let me know!

I’ve been on a bit of a Processing spree lately. This week I continued my previous adventure in noise by exploring two-dimensional noise maps. The short version of what I did was turn every x,y point in the plane into a single perlin noise value, and then feed that value into another function that does something interesting with it.

The first thing I did was make that perlin noise value proportional to the intensity of the color in each pixel. That was pretty boring, so I made one color proportional to the noise, and the other color inversely proportional to the noise (so one color dominates for high values of noise, and another color dominates for low values of noise). That resulted in an intensity-based visualizer:

Intensity-Based Perlin Noise Visualizer
Intensity (Perlin Visualzation)

The next visualization I tried was to divide up the grid into 5×5 segments, and each segment was filled with a box proportional to the magnitude of the noise. Bigger noise, bigger box; smaller noise, smaller box. In addition, the shade of purple varies with the noise.

Size-Based Perlin Noise Visualizer
Size (Perlin Visualization)

The last one was an attempt to create something a bit more visually complex and appealing than the previous attempts. I take each point in x,y space and make it the center of a circle. The value of the noise gets mapped between zero and two pi, and a line is drawn between the center of the circle and a point on its circumference that is at the aforementioned angle. This causes each line to rotate depending on the value of the perlin noise at each point. Sound a bit confusing? Perhaps an example will help:

Angle-Based Perlin Noise Visualizer
Angles (Perlin VIsualization)

There are a couple of different directions that I’m planning on taking with this. The first is to animate it — I think that some of these visualizations would look quite pleasing if I animated them to shift in a subtle manner. The other potential direction is to use them as photo filters, as I did with the differential/proportional filters. I think the ‘blocking’ algorithm could be used to quite an effect on photographs, to distort the original image and create a new work from it. The rotational algorithm could also have such an effect. Hopefully I can draft up some new photo filters this weekend and test them out! There is definitely more to come.

Beat Frequencies in Visual Art

•23 January, 2012 • Leave a Comment

Inspired by some of the cool math art at SomeMathShit, I decided to do some of my own. A couple hours with Processing at Diesel Cafe resulted in the following:

Radial Beating

The code that generated these images is available here: radial_beating.pde

Radial and Azimuthal Beating

Both images utilize beat frequencies to create interesting visual patterns of color. The colors oscillate according to some sinusoidal frequency — in the first image, the blue and red are both oscillating at beating frequencies, and in the second image, red is oscillating at a beating frequency in both the radial and azimuthal dimensions. I really liked the latter one, so I generated some more images with different frequencies and colors.

Radial and Azimuthal Beating (Blue/Green)

Radial and Azimuthal Beating (Red/Green)

Luminous Flux

•20 January, 2012 • Leave a Comment

A few months ago I was invited to put some of my work up in the Wiesner Student Art Gallery at MIT. I jumped at the opportunity to get some of my work up in a public gallery (even if it’s ‘only’ the student art gallery at MIT) and was hard at work the last few weeks getting stuff ready (my work in processing was also meant to be used in the student art gallery). The result was ‘Luminous Flux’, named after a unit that measures the perceived power of light.

Luminous Flux

The exhibit consists of Sandtrap (which can be found in earlier blog posts or under ‘interactive installation’) and Processing in Digito, which is the name for my laser-etched photographs, lit up with led lighting. Pictures will be coming soon — until then, you should come and check out the exhibit firsthand at MIT!

Digital Photo Editing In OpenProcessing

•16 January, 2012 • Leave a Comment

I /finally/ got around to releasing the digital photo filter code on OpenProcessing. I added some interactivity to them so they were more fun to play with online:

-pressing the up/down arrows changes the filter’s threshold value
-pressing any other key resets the threshold value
-pressing any mouse button switches the images between the original image and the filtered one


Differential Photo Filter
Proportional Photo Filter

Digital Photo Editing in Processing

•12 January, 2012 • Leave a Comment

I finally got around to working more on photo editing in processing, and had some great results! I ended up with two separate algorithms for photo editing, which I call ‘differential’ and ‘threshold’.

The ‘differential’ algorithm starts on a row of pixels, and looks at the left neighbor of the pixel. It takes the color attribute of each pixel, and takes the difference (hence the name) of each pair of neighboring pixels. This difference is compared to a threshold value, and if the difference is great enough, the resulting pixel is colored black. If they are too similar, the entire screen is left white.

The ‘threshold’ algorithm takes the brightness attribute of each pixel and compares it to a threshold value. If it is greater than the threshold, the pixel is assigned the color black. Otherwise, it is white.

These algorithms result in images that are quite aesthetic. The differential algorithm tends to produce outlines of objects, while the threshold algorithm tends to create blobs that are the approximate size and shape of objects in the original photograph. Sometimes, however, I get images that are really quite abstract (these are among my favorites!).

I ran these algorithms on several photographs that Rachel Boyce took; I snagged them from her flickr photostream. A couple of my favorites are below:

Clouds (Differential)

Graffiti (Threshold)

Thorns (Threshold)

More of these images can be found on my Flickr. I’m hoping to make an openprocessing app out of these filters and release the code within a week.

A final thought: the threshold algorithm can be thought of as a ‘proportional’ algorithm because the new value is determined by the value of the old pixel itself. The differential algorithm can be thought of a ‘derivative’ algorithm because it determines the new pixel by how the old pixels are changing — essentially, by their derivative (large derivatives become black and small derivatives stay white). Could you develop a ‘integral’ algorithm to filter the photographs? What would it look like? This is another idea I’ll have to take a shot at.

[Note: I classify these under ‘generative art’ because it’s generating a new image using photographs to provide the seed information. True, it’s not purely generative — I am using a photograph as the base — but because the processing effort is algorithmic, I consider it generative.]