nooshu » JavaScript Archives

Plotting the Lorenz Attractor using three.js

Matt — Thu, 15 Dec 2011 14:53:24 +0000

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:

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.

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.

Remote Loading HTML5 Elements with jQuery

Matt — Fri, 18 Nov 2011 10:31:28 +0000

I ran into a rather annoying problem a few months ago while developing my travel blog; the problem of course was involving Internet Explorer. I’m used to working with WordPress as I use it all the time, but I wanted to get away from the standard pagination you find on a blog. So I decided to use jQuery 1.6.4 to pull in articles from other pages (blogname.com/page/2, blogname.com/page/3 etc). Now this is all fairly simple using the handy jQuery .load() method; point it to a URL, pull in the page, pick the bits you need and reinsert into the page. Simple! Unfortunately once I got a prototype working in ‘good’ browsers, IE8 and below was having non of it!

After a little head scratching to work out what was failing, I worked out it was because I was using HTML5 elements such as ‘article’, ‘header’ and ‘footer’. There was no problem displaying them on the page, as I’d used Remy Sharps excellent HTML5 Shiv script. It only failed when trying to pull in these ‘new’ elements via Ajax.

Note: Before you read on you’ll be happy to hear that this issue no longer occurs in jQuery 1.7.0. Horray!

If you can’t upgrade, for whatever reason, I hashed together a little work-around for browsers IE8 and below, so read on. I admit the work around isn’t pretty, but it works. I tried for a few hours to get IE8- to recognise the ‘new’ elements after an Ajax request, but to no avail. Eventually I had to wrap the HTML5 tags in a div using conditionals:

1
2
3
4
5
6
7
8
9
10
11
12
13

id="html5Content">

<h2>H2 wrapped in a header element</h2>
</header>

The div is added for browsers IE8 and below, you can then use it as a hook to pull in the elements inside the div. I was hoping that wrapping the HTML5 elements in a standard div would be the end of it, I’m afraid not. The .load() method still didn’t work, IE just ignored the elements it didn’t recognise. I used jQuerys much more customisable .ajax() method to fix the issue in IE6, 7 and 8:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

//IE8- work around to load HTML5 elements into a page
$("#loadHTML5LinkOld").click(function(){
$.ajax({
url: "page_to_load.html",
cache: false,
success: function(html){
var HTML;
//Clear before load
$("#html5LoadHolder").empty();

//IE: Look for the hacky wrapper before insertion
HTML = $(html).filter("div#ieHackContainer").html();

//If HTML var is empty assume using newer browsers
if(!HTML){
HTML = $(html).filter("#html5Content").html();
}

//Append to page
$("#html5LoadHolder").append(HTML);
}
});

return false;
});

This method works in all browsers I’ve tested in as I’ve added a fall back (or should that be forward?) for newer browsers. The solution isn’t ideal (I really hate the conditional comments), but older versions of IE aren’t going away any time soon, and it works. Maybe there’s a more obvious solution that I missed? Leave a comment if there is, I’d love to know!

You can see a working example here. The page I’m loading from is here and the JavaScript in full here.

dat.gui – controller library for JavaScript

Matt — Wed, 16 Nov 2011 02:14:45 +0000

Very recently I’ve been looking at some awesome JavaScript experiments and have noticed they are all using the same GUI. Now I fully admit I had a little ‘blonde’ moment as I assumed it was just a style everyone had adopted; developers being ‘one of the cool kids’, that type of thing. It turns out I was wrong, and it finally clicked. All the experiments have started using a little controller library called dat.gui.

After it appeared on Google’s workshop (along with three.js), I thought it was about time I had a play with this neat little library. Luckily there’s an excellent set of documentation and working examples available so you can dive right in. Here’s a code example of how to get started:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

//Define the controller function
var FresnelControls = function() {
this.movingParticles = 5000;
this.seedColor = "#ff0098";
};

//Create the Dat.gui controls
var fc = new FresnelControls();

//Create the GUI
var gui = new dat.GUI();

//Add 2 folders
var f1 = gui.addFolder('Particle Dynamics');
var f2 = gui.addFolder('Particle Colours');

//Add the moving particles controller to folder 1
f1.add(fc, 'movingParticles', 0, 5000).step(1);

//Add the colour controller, store in a var to attach events
var seedColor = f2.addColor(fc, 'seedColor');

//Colour change event
seedColor.onChange(function(value) {
//Do something on color change...
});

I decided to dig out an old demo I created last year and adapt it to use dat.gui. Originally I used jQuery + jQuery UI to control the JavaScript variables. It worked well, but it really added page weight (jQuery + UI came to over 90Kb); not great when you are only using it for the sliders.

Following the documentation you start off simple and progressively add more of the dat.gui functionality. You can see my adapted demo here. The dat.gui code is highlighted if you want to see how it was set up.

You can see dat.gui in action on my modified Euler Spiral demo.

Dat.gui really has some excellent features available. I was able to make use of the colour picker, presets and folder functionality; but there’s a whole host of others I didn’t, such as the custom placement and updating the display automatically. Personally I love the presets functionality; supply the GUI with a little bit of JSON and away you go!

As always, a big thank you goes out to the Data Arts Team in Google’s Creative Lab for creating such a useful little library! One I will be using in every demo I create from now on.

A little bit of MicroJS

Matt — Sun, 29 May 2011 18:12:10 +0000

Recently there was a flurry of talk around a little something called MicroJS, mainly thanks to a website of the same name created by Thomas Fuchs, author of the script.aculo.us user interface library. I’m not sure if Thomas coined the term “MicroJS” or if it’s been in use for a while, but it describes the micro-framework methodology perfectly. So what is a micro-framework? The best way to answer that is to first ask what is a JavaScript framework?

JavaScript frameworks have been around since around 2005 (looking at the Prototype and jQuery history); their purpose is to allow developers to easily add interactivity to a page by creating a JavaScript abstraction layer to build from. The library takes care of any cross browser issues and quirks, allowing developers to focus on the “cool” stuff, building websites. As a developer I can’t thank all the library authors enough; without them my working life would be so much more stressful (and my hair would be even grayer than it is now!).

Once you know what a JavaScript framework is, it doesn’t take a genius to guess what a micro-framework is. Where as a full framework will have many tools (methods) a developer can use, a micro-framework only focuses on a very specific set of functions. I like the knife analogy: a full-framework like Dojo would be a Swiss Army knife where as a micro-framework could be considered a small pen knife. So which do you use in a project? This completely depends on the project in hand. I’ve put together a small list of pros and cons for each (let me know if you have any others):

Full Framework

Pros
Extensive set of features to cater for most eventualities.
Consistent API across features.
Large user base with lots of community support.
Huge number of working examples available.
Many developers to fix bugs and add additional functionality.
Single point of reference of documentation.

Cons
Large code base could be very daunting to new users.
Large page footprint.
Many features of the library may not be needed.

Micro-Framework

Pros
Small page weight, usually less than 5K.
Small set of features so very quick to pick up and use.
Main focus on a very specific set of functionality.
No feature creep or excess code.
Use the right tool for the right job.

Cons
Small number of developers, bugs and issues may take a while to be fixed.
Development of the framework may stop completely.
May be very little support from the author and the community.
Fellow developers in your team may not be familiar with the framework.
Mixing micro-frameworks could conflict if badly coded.
Multiple frameworks could mean multiple HTTP requests.
Multiple points of reference for API docs.
Multiple frameworks could lead to an overlap in functionality.

Many of the cons for micro-frameworks stem from using more than one at a time, but if you only plan on using one then they can be ignored.

Micro-frameworks caught my eye recently due to a couple of small projects I’d been working on. The projects all used vanilla JavaScript as there was no need for a helper library. I later realised I needed to attach a few events and manipulate the DOM but I wanted to avoid including jQuery in the project as I only needed a small fraction of its functionality. Luckily the MicroJS website came to the rescue.

The examples below are taken from Query, Bonzo, Events.js and Bean. As you can see the usage for each is pretty self-explanatory with lots more functionality is available from each library’s website. If you’re a jQuery user the syntax will look very familiar.

CSS selector and DOM utility

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/*
Query - Dustin Diaz
https://github.com/ded/qwery
CSS selector engine
*/
query("#myid");
query(".myclass");
query("#myid .myclass div a");
query("a, div, strong");

/*
Query Paired with Bonzo - Dustin Diaz
https://github.com/ded/bonzo
DOM utility
*/
query("#myid").show();
query(".myclass").offset(50, 100);
query("#myid .myclass div a").addClass("anchorClass");
query("a, div, strong").remove();

Events

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

/*
Events.js - James Brumond
https://github.com/kbjr/Events.js
Event handler library
*/
Events.bind(window, 'load', function(e) {
//Page loaded, do something
});
//Invoke the page load event
Events.invoke(window, 'load');
//Mouse click event
Events.bind(selectedElements, 'click', function(e) {
//Mouse has been clicked
});
//Very handy keystroke event
Events.bind(document, 'keystroke.Ctrl+Shift+Alt+S', function(e) {
saveMySlices();
});

/*
Bean - Dustin Diaz
https://github.com/fat/bean
Event handler library
*/
bean.add(selectedElements, 'click', function (e) {
//Mouse has been clicked
});
//DOM has loaded
bean.add(document, 'DOMContentLoaded', function(e){
//Page loaded, do something
});
//Invoke an event on an element
bean.fire(selectedElement, 'click');
//Remove the event from an element
bean.remove(selectedElement, 'click');

I’ll be trying out a few more of these micro-frameworks for my personal projects in the future as the ability to select only the functionality you need really appeals to me. Are there any other micro-frameworks you’ve used that you’d recommend? Leave me a comment and I’ll check them out.

Update: It just so happens that a handy library website has emerged inspired by the MicroJS website called EveryJS. The website lists all library’s rather than just micro versions. Not all are listed but I’m sure they will be added soon so it’s one to keep your eye on.

Fun with Space Invaders and Parallax scrolling

Matt — Wed, 25 May 2011 23:25:47 +0000

Back when I was a young wippersnapper (many moons ago) one of my good friends had a Sega Mega Drive. As with any new console it was on every kids Christmas list but compared to the current generation of games consoles it looks very primitive. The games were immense fun and you didn’t need an instruction manual to play them. Two of my favourite games were Golden Axe and Sonic the Hedgehog. Sonic the Hedgehog used a technique called Parallax scrolling; this is where background images move slower than “closer” foreground images giving the illusion of depth in a 2D plane.

I’m quite late to the web parallax party as the effect was recreated and popularised back in 2008. I first remember seeing it being used by the holding page for Clearleft’s Silverback application, but it may have appeared elsewhere before that. Three years on the web is a long time and technology has moved on, so I set myself a little project to recreate the effect using the HTML5 canvas element.

Move your mouse to see the Parallax scrolling effect.

To demonstrate the effect I used a few graphics from another iconic retro game: Space Invaders. As you move the mouse the scary alien separates into its constituent pixels. The foreground pixels move faster than the background pixels creating a slight parallax effect. You have three aliens to choose from: Dave, Julian and Brian, which I’ve named for no particular reason. I think the names quite suit them. I’ve also added a little randomness to the demo in how they are generated, which you can see by reloading the page.

Hooray for retro games and pointless demo’s! :)

Antimatter 3D Graph Plotter and a little animation

Matt — Tue, 17 May 2011 08:32:35 +0000

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.

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.

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 :)

Debug Axes in three.js

Matt — Sun, 15 May 2011 14:51:31 +0000

Update: The code I had previously stopped working with the latest three.js API. I’ve updated and improved the code for the latest API.

I’ve been working on a couple of small projects using three.js recently; An issue I always seem to have when working with 3D is knowing the current orientation. To help me out I’ve put together a small snippet of JavaScript.

{x: red, y: green, z: blue} It's not much to look at but the axes can be very useful.

The point where the lines cross is 0,0,0 as you’d expect, you can adjust the length of the line by changing the axisLength variable. I’ve uploaded a small demo so you can see the code used or copy / paste below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

It’s not much to look at, but it can certainly help you get your bearing when starting a new project (or when things aren’t working!). Hopefully you find it useful.

The Sieve of Eratosthenes

Matt — Thu, 12 May 2011 15:19:05 +0000

I recently read Prime Obsession by John Derbyshire; a book all about prime numbers and one of the worlds greatest Mathematicians: Bernhard Riemann. The books main focus is on the Riemann Hypothesis which states that:

The real part of any non-trivial zero of the Riemann zeta function is 1/2.

I’d love to say that after reading the book I understand the Maths behind it but alas I do not. That’s not surprising though as it’s a problem that has yet to be solved, 159 years after Riemann paper on “On the Number of Primes Less Than a Given Magnitude”. It doesn’t look like it’s going to be solved any time soon either! If you’re interested it’s one of the Clay Mathematics Institutes Millennium Prize Problems in which you can earn yourself US$1,000,000.

While reading Prime Obsession it mentioned an interesting method for finding prime numbers called “Sieve of Eratosthenes” (pronounced air-a-TAWS-the-nEEss). Eratosthenes was a librarian at the great library of Alexandria around 230 B.C.E. It’s quite obvious how the method works once you know it, and easy to see why it’s called a sieve. The method goes like this:

Write a list of numbers in which you wish to identify the primes, say 2 – 100 (exclude 1 as it isn’t required)
Take the first number 2. Leaving 2 intact, remove every second number.
Move onto the next number 3. Leave 3 intact and remove every third number
Take the next number 5. Leave 5 intact and take away every fifth number
Repeat until you get to the end of your list

The end result is the set of prime numbers up to your given number. Essentially all you are doing is removing any number that is divisible by the 1st, 2nd… Nth number. Clever stuff!

As a little side project I decided to implement this method using JavaScript, displaying the result in the browser. You can view the demo here. For fun I created two implementations, one relying heavily on the DOM, the other only using arrays. As you’d expect the DOM method is slow; looping through large tables multiple times doesn’t make for a quick execution time. The second method using a single JavaScript array is much quicker. I’ve added a stats panel to the right hand side of the page so it’s possible to compare results from both methods over different input values.

I’ve added a limit to the number you can enter into the input box (5000), I don’t want anyone blaming me for crashing their browser by entering 10 million! :) Feel free to copy the demo if you want to see what happens at higher values.

The sieve in action showing prime numbers up to 500.

Thanks goes to John Resig for his very handy Array Remove method.It made removing non-primes from the numbers array very simple indeed.

Prime Obsession is a superb book but a word of warning, it contains a lot of higher level Mathematics, so may not be to everyone’s taste. It certainly made my brain hurt at times; not always what you need on that 8am commute to work! View the demo.

Creating 3D trees with some #CreativeJS

Matt — Mon, 09 May 2011 15:15:06 +0000

Trees generated at random using some CreateiveJS and Three.js.

Over a month has passed since my last blog post and much has happened. We’ve had a wedding, a funeral at sea (maybe in bad taste!) and I’ve gone full-time freelance (yay!). I’ve had a little more time to work on a couple of personal projects so I’ve finished one that I started way back in January.

I had the pleasure of attending a Creative JavaScript course in Brighton, UK, hosted by Seb Lee-Delisle; a two-day course that covered a wealth of topics from Vanilla JavaScript to Three.js. If you’re looking for some inspiration I highly recommend looking out for one of Seb’s courses. Great fun and you get to meet some really nice people. Quick tip: You may want to brush up on a little Trigonometry before you go as it’s used numerous times. I knew that A-Level Mathematics course would come in useful one day :).

Seb produced a demo in Canvas that created ‘trees’ and it really caught my eye. The trees were in 2D so as I’ve had a bit of experience with Three.js I decided to create a 3D version! I’m quite happy with the result although I’ve had to restrict the number of branches rendered due to the lack of dedicated graphics card in my laptop; I get about 1fps when stopping at a branch length value of 10 (line 211) :(

The demo also allowed me to use the new request animation frame API which vendors have added to aid animations in browsers. The main advantage of using it is if you have the animation running in a tab that isn’t visible, the browser will know to stop the animation! Using the old setTimeout method, the animation still runs in the background and uses up precious CPU, memory and battery power (especially on a laptop). As with most new browser features the API isn’t set in stone (yet) but luckily Paul Irish has created a polyfill that falls back to setTimeout in older browsers.

View the demo here; reload for different trees. JavaScript finally seems to be coming of age!

Update: Original credit goes to Jean-No with his amazing OpenProcessing work! I’ll be bookmarking that link, some stunning work there. Thanks to Seb for pointing out who to credit :)

The developing WebGL demoscene

Matt — Mon, 07 Mar 2011 00:36:43 +0000

One of my key memories from playing a friends Amiga oh so many years ago (apart from Cannon Fodder) is the cool intro demos created by the demoscene. These were usually found on, cough, slightly dodgy versions of games that were “acquired” from various sources :)

What’s always amazed me about these demos is the amount of space the programmers had to play with and the hardware available at the time; both extremely limited. While the space and hardware limitations are no longer an issue, people are still developing these amazing demos. One reason for this is due to an exciting area in Web Development that’s currently flourishing: WebGL. The technical specification was finalised last week and developers have started to take notice of this very powerful visual programming language. Developing demos in the browser environment is a new limitation and programmers are looking at WebGL to push the boundaries.

WebGL port of "glass", an old 64kb demo from 2000.

The demo above has been converted into WebGL by a very talented programmer called Per-Olov Jernberg (Possan). You can even take a look at the source on Github if your that way inclined! You can view the original from April 2000 here.

With modern browsers like Chrome, Firefox 4 and now Opera adding WebGL support and improving their JavaScript engines, there’s never been a better time for Web Developers to get involved in this new demoscene. All that’s needed is some JavaScript, Canvas and a little creativity. I genuinely look forward to seeing all the old school programmers diving into WebGL. I personally know very little about this new language so I’ll be able to learn so much by doing a quick “view source”.

There’s already a WebGL competition in progress called gl64k where programmers have to create an interesting visual demo with only 64k (65,536 bytes) at their disposal. Awesome stuff will be emerging from this new technology in the next couple of years and I for one can’t wait to see what!