November 10, 2013 0

Javascript Wave Equation

By in Javascript
JSwave

Screenshot of JSWave running in a browser

An implementation of a one dimensional wave equation in pure JavaScript and Canvas.
View the Javascript Wave Demo.
View the source on Github

May 17, 2012 5

Augmenting the Responsive Quick Design Response Reality

By in General Development

Are you fed up of your designs ignoring your requests to respond?
Do you enjoy resizing browser windows to see what the transitions won’t look like on devices that don’t support browser resizing?
Are you tired of taking pictures in colour?
Do you yearn for the day when you can open a webpage simply by taking out your phone, opening a proprietary app, taking a photo, re-calibrating, taking another photo and hitting ‘GO!’?

Such are the problems facing today’s ever inventive marketers. But now, with a combination of bleeding-edge technologies, I bring you the solution:

Augmenting the Responsive Quick Design Response Reality

If you want to be first to take advantage of this next generation marketing wankery, get in touch.

Alternatively, visit www.ayetozed.com if you want someone to actually design something for you.

March 15, 2012 1

Painting particles with EaselJS and Coffee Physics

By in Javascript

As a platform for trying out EaselJS I wanted to create a simple particle demo using the Coffee Physics engine. Through a bit of experimentation and (mainly) curiosity, I ended up with something half particle generator, half generative art tool.

View the demo | View sample images | View the source

Having not used EaselJS before it was reassuringly easy to get to grips with, and there’s good documentation available.  Anyone who’s done any work with the Flash display list should have no problems diving straight in. It takes very little code to setup a Stage and a rendering loop, and keeps your application nicely browser and platform agnostic. The demo runs (from best to worst) in Chrome, IE9, Firefox and  Safari for iOS (although very slowly), without the need to write specific code for any of them, which is a great reason for using it.

Although the Coffee Physics demo source contains various renderers, the engine itself is, as you’d expect, completely independent of any rendering process. This makes it very easy to integrate with Easel, or any other rendering method you choose. I didn’t end up using any of the the supplied behaviours in my demo (collision, attraction etc.), but I did play around with these to begin with. The behaviour architecture makes it very easy to leave out any heavy-lifting you don’t need, and easily create and add your own features.

The idea to ‘paint’ the particles came simply from browsing the EaselJS API docs and is achieved easily by setting the autoClear property of the Stage to false. This prevents automatic clearing of the canvas before each render update and would be useful for more serious generative art pieces.

Saving the image seemed like an obvious progression, and it was nice to be able to output and save image data without needing a server transaction or, dare I say it, Flash. It is however, not the most polished solution: dump a base64 encoded image string into a browser window and hope it knows what to do with it. Internet Explorer doesn’t know what to do with it.

Both EaselJS and Coffee Physics are in alpha/beta stage right now, so it will be interesting to see how they progress. This was also my first time using CoffeeScript, which seems to be fairly contentious at the moment, but I found it intuitive and enjoyable to work with. The compiler is reliable, and being able to ‘watch’ any files, recompiling them whenever they are saved, makes the write/run cycle no different from writing straight JavaScript. You could even argue the compile step adds extra sanity checking to your code before run time. Either way, I’ll definitely be using it again