nooshu - Matt Hobbs' Web Development Blog

Kneeling on the shoulders of giants

Category: Inspiration

Inspirational information i find on the internet while clicking from one link to the next.

Plotting the Lorenz Attractor using three.js

It’s been a while since I dabbled with three.js. There have been a few API changes, so it’s slightly different from what I remember. That being said it’s still as fun to use, and there are even a few API docs available (not sure if they are fully up to date though)! I happened to be reading an article on Chaos Theory and the “butterfly effect” which mentioned a lovely set of equations; the Lorenz Equations, also known as the Lorenz oscillator. So I decided to investigate further. Here they are in all their glory:

\begin{aligned}\dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned}

So what exactly is the Lorenz oscillator? Well to quote from Wikipedia “The Lorenz oscillator is a 3-dimensional dynamical system that exhibits chaotic flow, noted for its figure eight shape.”. What this really boils down to is how even very small change in the equations initial conditions (x, y and z) causes large changes over time, in a complex and non-repeating pattern. There’s a famous title of a talk given in 1972 by Philip Merilees:

Does the flap of a butterfly’s wings in Brazil set off a tornado in Texas?

The butterfly flapping its wings introduces slight changes to the initial conditions, creating a chain of events that lead to a tornado in Texas. The Lorenz butterfly is a graphical way of showing these changes over time on a much smaller scale.

I’ve created a demo that allows you to change variables related to the Lorenz butterfly and observe the effect it has on the system.

Example of my Lorenz attractor demo in action

Adjust the demo variables to see how the Lorenz butterfly changes.

There are a few variables you can play to change how the Lorenz attractor is rendered:

  • rhoValue: Called the Rayleigh number. Rho of value 28 shows chaotic behavior. Other values show periodic orbits.
  • showAxis: Allows you to turn the x, y, z (red, green, blue) axis on for reference.
  • randomStart: Picks a random initial conditions, rather than 0, 0, 0.
  • totalTime: The total time (or number of iterations performed) when generating the graph. Higher numbers equals more lines and increases the render time.
  • timeIncriment: The accuracy of the graph depends on the number of points plotted. A lower number creates a smoother graph but increases render time.
  • colorModifier: Simply changes the colo(u)r. Pointless but pretty!

While rendering a larger number of points, I noticed the browser lock-up for a second or so. This was because the points were being calculated on the browsers UI thread. Luckily modern browsers support thread like message passing in the form of the Web Workers API. By offloading the point calculation to its own thread (lorenzPoints.js), I was able to stop the nasty UI freeze. Unfortunately you are fairly limited with what you can pass back and forth between workers. It was possible to generate the three.js geometry in the worker thread thanks to the importScripts() method. I tried passing the three.js geometry back to the browser but all the methods were stripped out, leading to lots of errors (JSON issues). In the end I dropped back to calculating the points in the worker, pushing them into an array and generating the geometry on the main browser thread.

It was good fun dabbling with three.js, Web Workers and dat.gui again. Now on to my next project… View the demo here.

Design for Developers

As a developer I must admit I find design hard! Open up a blank PSD in Photoshop and I come out in a cold sweat. More often than not a developer will quickly construct an application, get it working and dump everything on a page. The application works, but it’s horrible to look at and is very unintuitive to use. Thankfully, a designer by the name of Johan Ronsse has put together a presentation aimed at developers who are looking to improve their design skills.

The presentation has some excellent content on what you should (and shouldn’t) do with an interface design. Basics on fonts, colours, shadows and icons are all explained in a clear and concise way. For those wishing to continue with their new-found design skills, slide number 179 has a long list of links and books to read. My personal favourite is the simple, yet effective Grid Calculator tool. I’ve read many articles on the grid system, but have never used it. This handy website does all the mundane maths for you, allowing you to get back to making your application look pretty!

Big thank you to Johan for the presentation, every developer should read it at least once (or bookmark it to read later)!

There ain’t no party like a DemoJS party

Another day, another website that makes my jaw drop to my desk. This time it’s the results from the latest Mozilla Labs DemoJS party. Hosted in Paris, France over the weekend, it had many coders and artists attending hoping to win big prizes by creating interesting demo’s using the latest web technologies. I may not understand French but I’d have still attended just to see all the demos on show; some extremely inspiring coding going on.

The competition was split into two sections; 1k and freestyle. I find both interesting but as I’ve mentioned before in previous blog posts I’m always amazed at what can be done with 1k of code.

The video above is of a demo created by Silexars that came in second place. A live demo can be viewed here. All created with less than 1k of code! WebGL really is starting to come of age. As with any of these demo’s it’s so easy to copy / paste, modify and learn from them. View source is a wonderful tool.

Another demo that caught my eye was by p01 (who I’ve blogged about before). This time he created Quaternion Julia Fractal in only 550 bytes of JavaScript and GLSL! It came in third place.

Quaternion Julia Fractal by p01

All this possible in less that 1k of code.

From the freestyle section the Particles.js by basecode has completely killed my productivity today!

Nice work guys and gals! If you have a spare few minutes (hours) check out the rest of the DemoJS results, you won’t be disappointed.

Chrome Developer Tools at Google IO 2011

I’ve been a long time user of Firefox’s magnificent Firebug extension; I honestly cannot remember how I used to develop websites without it (can you?). Changing web pages on the fly and debugging issues in seconds rather than minutes, we really are spoiled. I thought it would be hard for any other debugging tool to come close to Firebug in terms of ease of use and available tool set. Oh how I was wrong!

Paul Irish and Pavel Feldman hosted a talk at this years Google I/O about Chrome Dev Tools and what’s new in the world of debugging in Chrome. I must admit, there were a number of jaw dropping moments in the video where it dawned on me how powerful the tools actually are. Here are a few of my favourite points:

  • 7:11: Chrome monitoring the changes to the style sheets and letting you know what has changed.
  • 7:55: Ability to revert back to different CSS versions. The Dev Tools automatically creates a new version as you change code.
  • 21:02: A whole host of JavaScript debugging tools. Edit the script in the browser (with code colouring.. nice) rather than edit in IDE, upload, test, repeat…
  • 30:31: My favourite part, the remote debugging feature. Chrome can act as a server meaning you can connect too and edit pages remotely. At first you may think “well, what’s the point?”. As this is being done at the WebKit level it will soon be available for all WebKit browsers including mobile devices. Debug mobiles browser directly from your desktop. Wow!

I’m definitely going to have to wean myself off Firebug and give the Chrome Dev Tools a blast. As mentioned in the video, the tools are being developed all the time with new features landing daily (on dev channel). Looks like Firebug has some serious competition! If you’re a developer with 43 minutes to spare, watch the video, you won’t regret it.

A few helpful links mentioned in the video:

Antimatter 3D Graph Plotter and a little animation

Last year I stumbled upon this blog post by @antimatter15 who added a little three line modification to mr.doobs particle floor demo and created a graph plotter in three.js. Unfortunately as three.js has developed and evolved the API has changed; in doing so it broke the graphing demo. I left a message asking if there was a fix on Antimatters blog but got no response. So I decided to update the code and fix it for the latest version of three.js; once updated for the latest API it ran as expected.

3D graph plotter using three.js

Antimatter15 graph plotter updated for latest version of three.js.

You pass the equation you wish to plot via a URL parameter and out the other pops a pretty 3D graph. Here are a couple of examples taken from the original blog post:

In updating the code I thought I’d have a little play myself and see if I could add a bit of motion to the graphs just for the fun of it. I’ve created a version of my own which you can view here.

Graphing multiple for formula using JavaScript and three.js

Modified version allows you to add more than one formula to plot.

In my version you no longer pass the formula you wish to plot via a URL parameter, you add it via the panel on the right hand side. You can add and remove as many equations as you wish and the demo will cycle between them. To do so update the right hand panel then click the “Plot new formula(e)” button. The equation that is currently being plotted is highlighted in grey and available mathematical functions listed below.

With a little bit of trial end error you can create some interesting effects. There may not be much practical use for the experiment but I enjoyed putting it together with a little help from mr.doob and antimatter15 :)

Currently on page 1 of 512345