Archives for September 2010

faster, denser

WARNING javascript development geek alert.

I haven’t posted in a while as I’ve been refactoring the javascript. I’ve broken the script down into a jQuery plugin to draw the fractals, and moved the ifs animation portion into another level of code. I’m thinking about releasing the code as a canvas based replacement to those “loading” animated gifs on websites. That way users can see something a little bit more interesting than a spinning circle while something is going on with the server.

On the math side of things, I’ve finally worked out a scheme to produce more evenly distributed paths through the fractals. I’ve two minds about this. On one hand, the outlines of the images are moreÂ thoroughlyÂ filled out, on the other the image is missing some of the nebulous detail I liked in the previous rendering image. I love this. It means I get to choose how each rendering looks. Right now I can choose between a distribution which is evenly selected per transformation or the area traced out by that map. Either the senate or the house of representatives in political terms. Each choice produces a different set of images and I am free to choose the ones that I like best.

So I’ll be playing with those choices and an infinitude in-between. I’ve also got my eye on creating something that will let my viewers create and share images of their own, as well as get into the nitty gritty details of how these images are generated and all the mathematics that goes into them.

Far from being vacuous beauties, there are a number of advanced mathematical concepts that can be explored through them. Topology, probability, measures, geometry, chaos theory, group theory are just the tip of the iceberg. I’ve plans to delve into group theory and generating one dimensional fractals, though it’s going to be a challenge for me. I’ve been more comfortable with short descriptions of the code that I’ve generated, and now I’ll be focusing on the mathematics behind them; I’ll probably be spending a lot more time on those.

Link to the gratuitous new version of the engine here:

http://curvatureofthemind.com/wp-content/uploads/2010/09/fractal_balance1.htm

Related Images:

Visual complexity

Visual complexity is a bad ass site. It introduced me to the term generative art and reawakened my interest in exploring it myself. I fell in love with the mathematics and images of fractals that exploded in the eighties. One of my favorite books in high school was chaos by James Gleick. The pictures were beautiful, and the math to compute them could be grasped by someone with just a high school education.

I eventually tired of the images and wrote the whole thing off as I realized that most of the slick pictures were little more than thomas kincaid paintings for geeks. They looked pretty, but lacked message or meaning. I still played around with this stuff from time to time, but it was just a personal hobby of mine.

When I stumbled onto visual complexity things changed. Here were images and programs that just dripped and oozed with meaning and message. Here were artists that distilled meaning out of data and poured it onto the page, so that every inch of the screen illustrated their point. They pull the narrative out of the noise and instead of telling it with words and numbers, they distill it down to raw pixels so it leaps out at you with a glance. That is what I aspire to.

So poke around the site a little bit, there is a ton there and I plan on linking to some of the ones that have really inspired me, and others that are just plain cool.

Related Images:

New streaking and pause

$paused fractal$

paused fractal

I’ve updated yet again. This time I’ve increased the refresh rate and changed the way that I do the motion blur. Instead of keeping a buffer of past images and redrawing them all for each frame, I’m clearing the screen with an alpha factor. That gives a fading trail. I also added a pause on click feature, so you can see a more detailed image if you pause it. Things are starting to come together, and I’m thinking about adding some UI elements to control rate, pause and resume, also hide an show the map indicators with the ability to drag them around the screen.

I also want to work on the movement algorithm to add some more random and compelling movement, like speeding up/slowing down, changing direction, or pulsing through the same point in different directions for a while before zooming off into a completely new area.

Of course I want to add color back too, and experiment with different ways to color the image based on path through the fractal, location, randomness, etc. I’d also like to add movement through the color palette and algorithm as well.

Pause

Related Images:

Improvements and effects

swirlies I’ve made some changes to the way I’m drawing to the canvas. Using the imageData api is much faster, even though it’s a lot less user friendly. I’m able to keep a histogram of hits per pixel in the image. However, mapping the histograms to the color palette is now going to be more complicated, but I can fill in about 20 times the number of pixels. I’m putting the histogram into the alpha channel and I’m going to play with using the fill mode to mask off an image. In the mean time I ended up commenting out the page clear code, and I liked the trailers it produced. So here it is.

fractal_swirlies

Related Images:

Animate2

The continual evolution of the animated fractal page. I’ve worked a simple palette into the images giving a slight scintillating effect. I’m testing out markers to show the center, scale and rotation of the maps. They also include more kinds of movement. In the first version, I only included animating the scale and rotation of the maps which lead to a predictable pattern of movement, so this update includes moving the centers as well.

animate2

Related Images:

Now with Movement

simple fractal

One of the nice things about these images is that they give me the opportunity to talk about some of the more abstract mathematical concepts in a natural environment. These images are rough and don’t look anything like the functions from algebra and calculus, but the are built out of those same simple functions.

The first thing I’d like to talk about is continuity. These images lack many features that I would consider important for a shape. They don’t have distinct edges, sides or middles. Some are just groups of distinct blobs and others are nebulous clouds which don’t look much like anything at all.

In spite of that each one has a well defined “size” and it is possible to overlay two shapes, subtract one from the other and compute the “size” of the difference. This gives a basic concept of distance between the shapes.

One of the neat things about this distance is that you can show the shape generated by these equations depends continuously on the parameters of the equations, so changing one of the numbers slightly produces a correspondingly small change in the shape. That’s what inspired my next page, a random path through a small image space over time.

The images slowly blend and blur into each other over time without jumps or tears, precisely because of that continuity.

animate

Related Images:

Gritty Block Header

I’ve picked one of the simple themes, and played around for a minute or two with one of the designs from the last post to get a header image. Now I’m generating them on the page, and I’m using paint.net on a screen shot. I’ll be looking to streamline generating more images and using them through the site. I like this one because it is almost pure texture, and you would be hard pressed to find the self similarity in the image at all.

Related Images:

chrome fractals

This is my first attempt at a chrome experiment to generate fractal art. It uses iterated function systems that I learned from Fractals Everywhere that I picked up in college. It’s really rough, and a very ugly user interface. It’s nothing more than a text area full of json objects and an eval statement hooked up to a set interval statement and a canvas. If you understand half of what I’ve written, then you might want to give it a try and create your own favorite. post them here as a comment if you like it.

/wp-includes/pages/fractal/fractal.htm

Be warned, it looks best in chrome.