Just a quick update
I’ve uploaded my very very super rough fractal canvas image editor. This is what I’ve been putting the galleries together with. It’s super rough, I’ll be improving it in random fits and spurts, and putting some demo posts up as well. Also, someone please please suggest a decent title for this one. I’ve got nothing.
Related Images:
three.js particle system
Well, I’ve caught a bug, and it’s a bad one. I’m hooked on WebGL demos. If you follow me on twitter, I’ve been tweeting a few of my favorites. I’ve also been downloading them and playing around with the base api, through the lessons on Learning WebGL and with a number of different frameworks.
The latest particle system demos from three.js caught my eye, and I hacked together my latest demo with the three.js code. Given the raw horsepower of my brand spanking shiny new video card, and the complexity of many of the demos, I was expecting more from my hacking around. The page is generating around 30-40 thousand points a second, where the fractal editor page will crank out around a million or so.
I’m sure it has to do with pumping the geometry over to the video card, and rendering points. That’s the downside of trying to do anything performance dependent, or pretty looking, or both. Polish take time, and a lot of it. I’ve got to run some tests and profiles to see what the issue is.
In the mean time, I played around with the point sizes, number of points and functions. The images show more of the shape of the actual attractor. In the previous demo, I was trying to get something more particle-ish, rather than show off the details of the fractal.
A lot of work, but a lot of fun too. Latest creation: 3d particle webGL
PS. This page requires WebGL, which means that you need Chrome 9.0 or higher or Firefox 4.0.
Related Images:
I’m just playing around with particles for this one
This has come together more quickly than any of the other demos. I wanted to see what I could do with a more abstract particle system driven through the same equations I’ve been using for fractals. The old formulas didn’t have quite enough pizazz, so I moved over to the sylvester library for matrices and bumped it up to 3d, which gave me the twisting, darting and zooming I was looking for.
Related Images:
Speed of sound
I’ve finally written some code that works in IE8.0, chrome and firefox. Rather than drawing complex fractals and solutions to equally archane differential equations, I’m trying to build some simple demos using more easily understood principles and mathematics.
Now this is a very simple model that just shows the general principles of how something like a shockwave can build up from basic building blocks. Before I go into too much description, give it a spin and see if you can figure out what is going on. Try sliding the speed back to zero, then to one and up past one, racing supersonic!
Mach:0.5
I first encoutered the mathematics for this little demo in a beautiful Russian book of mathematics aimed at high school students. It demoed families of curves from physical problems and then used basic calculus to find interesting related curves. It was a trancendent text and it introduced me to the theory of evelopes
Here is what’s going on. Imagine a little super bee sitting on a flower just beating his wings. The sound waves radiate in circles at the speed of sound around him. That’s what you see when you slide the speed down to zero. The waves expand concentricly and uniformly in space.
Now our bee is done colecting polen and starts heading back to the hive at a leisurly pace. At each moment the sound waves still expand in a circle around him, but now that he is moving he’s not at the same place when he emits the next one. Now things are no longer uniform. The waves of pressure are bunching up ahead of him, and spreading out behind.
Now his bee sense starts tingling and he kicks is in gear to get to a disturbance at the hive. He approaches the speed of sound. Now things get interesting as he hits the speed of sound. He still emits sound the same way, but now by the time the next wave is released, he’s caught up with it, and the same with the one right after, and so on. All these waves keep piling up building a huge wave of pressure right on top of him. In this model with non-interacting waves and constant velocity, the pressure wave is infinite. The wave still exists in more realistic models, but things like changes in air pressure, temperature and density put a limit on how much pressure actually builds up.
Just a little more speed, push it, push it, and he’s through. Once he’s moving faster than sound, the waves can’t even catch up, and expand out in a cone behind him perfect to sneak up on wrong doers, as noone can hear him outside of the cone training behind him, and by then it’s too late. POW!
In reality, this just shows where the simple model breaks down. There are many more effects that kick in and become important long before these speeds are reached, however I love how this simple model using nothing more than addition and multiplication can explain some of the features of supersonic travel.
Related Images:
Now we’re getting somewhere
Ok, I’ve made a few tweaks. Removed a close path call that was adding an extra random line. I’ve played around with the 3d projection and I’ve tweaked the color scheme, line width and alpha settings.
Related Images:
Lorenz attractor v1
I’m still working out some issues with the 3d to 2d projection, but I’ve been preoccupied with differential equation solvers (like the runge-kutta in this case)over the past few weeks. Again these are pages that are best viewed in chrome, because of the raw performance of the javascript engine.
This page shows a rotating view of the Lorenz equations as one of the parameters is varied through time. You can see how the solutions evolve through chaotic and periodic regimes as the parameter is varied. I haven’t seen a display like this for these equations. Most viewers just give a view of a static parameter solution over time. In this case the parameters are varied.
The only thing that keeps me from stamping this as complete and moving on is that the 3d to 2d projection isn’t setup just the way I’d like. It should be fixed in the next few days and then, I’ll move on to some more displays that relate to the waves class I took as a sophomore in college.
http://curvatureofthemind.com/wp-content/uploads/2010/11/Lorenz.htm
Related Images:
Closer to a good stopping point
I’ve finally got the chrome crashing bug and crazy memory usage fixed, so I’ve taken a little bit of time while my 3 week old daughter is sleeping here and there to add some refinements. I’ve added basic shading back in, added a link to the blog and a couple of bookmarking links. I’m going to go take a nap now, so check it out:
I’ve also submitted this version to canvas demos, it would be nice if it was picked up there since I haven’t heard anything after submitting an earlier version to chrome experiments.
Related Images:
I think this is the last moving fractal for a while
I’ve completely revamped the way I generate motion for the IFS fractals. I think it is much more entertaining. Now I generate new points and linearly interpolate between them with the constraint that the sum of the scaling factors is a fixed constant. Before I just generated a fixed path which ended up with a rather repetitive sequence of images. It didn’t matter what image you were shown, you could pretty much see how it was going to twirl into the future.
With this rev, the destination is more random, so the images themselves seem to ebb and flow in a much more organic fashion. I added a 1.5 second pause at the randomly generated point and those images are rendered with more detail.
I’m disappointed that I haven’t tracked down what is causing chrome to crap out rendering, but I’m hoping it’s a bug in the engine that will get patched or eventually I’ll get it figured out.
Anyway, here is the latest version: http://curvatureofthemind.com/wp-content/uploads/2010/10/fractal-lerp.htm
Related Images:
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