The Blog

Adventures With WebGL & Three.js

A while ago I developed a little demo app that generates an interactive 3D visualisation – a primitive landscape of sorts – from a number sequence generated by a Perlin Noise algorithm (don’t worry if that means nothing to you!). You can check out the app right here.

The 3D graphics are drawn in the browser DOM, using thousands of divs transformed via CSS. It turned out pretty well, but I found that the frame rate absolutely tanked when adding divs to increase the visualisation’s resolution. Browsers aren’t well equipped when it comes to transforming thousands of divs in 3D, so in pursuit of a better frame rate I decided to use this as an excuse to finally dip into WebGL, by rewriting the app using a WebGL-based renderer.

So, what is WebGL, and what’s Three.js? WebGL is a hardware-accelerated API for drawing graphics in a web browser, enabling 2D and 3D visuals to be drawn with a far higher level of performance than what you might get when using the DOM or a HTML5 canvas. In the right hands, the visual output can be more akin to a modern PC or console video game than the more simplistic animated graphics you might usually see around the web. However, WebGL can be somewhat impenetrable to newcomers, requiring an intimate knowledge of graphics programming and mathematics, so many developers add a library or framework on top to handle the heavy lifting.

And that’s where Three.js steps in, providing a relatively simple API for developing WebGL apps. There are other options of course, but I chose Three.js as there’s a wealth of demos and documentation for it out there, plus it seems like the one I see in the wild the most.

continue reading…

Creating CSS Animations With animation-delay

The CSS animation-delay property is obviously used to delay the commencement of a CSS animation for a specified amount of time. But, like many CSS properties, there’s more than meets the eye… Using animation-delay you can create a variety of complex and beautiful pure CSS animations with ease, by applying it to a set of otherwise identical elements at varying time values.

All of the following examples follow the same basic setup: a number of looping animated elements are created, all of which are identical save for a unique numeric class which allows each element to be selected individually via CSS. Using this, a different animation-delay time can applied to each element, causing each animation to run asynchronously with the others to create various effects. I’ll go into more detail in the examples, below.

continue reading…

Why your website needs to use HTTPS

I recently did something I’ve been meaning to do for a while: I set up my website to use HTTPS. Whilst previously HTTPS was often considered a “nice to have” by web developers working outside of sectors such as banking and retail, we’ve now reached a point where it’s essential for all types of website to use it.

HTTPS is the secure version of the HTTP protocol, used by web browsers and devices to communicate with the servers on which websites are hosted. If you visit a website with an address starting with “http://”, that website is using the standard version of the HTTP protocol. Any interactions you have with that website will be transmitted across the internet as plain text, readable by anyone who might be monitoring the connection.

If you visit a website which has an address beginning with “https://” (or, you can see a padlock symbol in your browser’s address bar) then that site is using HTTPS, the secure version of HTTP. This means that all data sent between the web browser and the server is encrypted. Anyone monitoring your connection would see a random stream of letters and numbers, practically impossible to decode.

But what are the implications of this, and why is it so important that your website uses HTTPS today?

continue reading…

Fun With Local Storage: Multi-Window JavaScript Apps & Canvas Streaming

A short while ago I was invited to participate in µChip3, an arts event curated by Antonio Roberts & Sam Wray which involved chiptune, digital art, hacking, modified hardware and much more. My role was to perform live visuals to accompany performances by some notable chiptune artists, so I set about building a custom browser-based visualiser based on the piece I produced for the BYOB 2013 exhibition.

Visualiser applications need to work across two windows (a control window with which you create and modify visuals, which appear in a display window), so working out how to produce an application able to function reliably in this way was my first concern. I worried it would involve some fiddly work with a local server, but after some research the solution proved straightforward: simply store commands in local storage via the command window, which are then be detected by the display window using the storage event listener.

As well as multi-window web applications, local storage can also be used to keep web apps open in multiple tabs in sync with each other, or even to stream the output of a HTML5 canvas from one window to another. Read on for some demos…

continue reading…

BYOB Birmingham 2013: Art, Projectors & Box2D

On Friday November 29th I found myself exhibiting an artwork at Vivid Projects as part of their Bring Your Own Beamer (BYOB) exhibition. BYOB is a global series of exhibitions which see artists using projectors to display their work, with Birmingham’s event organised by notable local artists Antonio Roberts and Pete Ashton.

The night was a great success, with a diverse range of pieces being exhibited by more than twenty artists. My piece was a physics-y controllable visualiser, using Box2DJS as its foundation.

continue reading…

The Responsive Future

I recently attended Canvas Conference 2013, an event for developers, designers and digital marketers which took place here in Birmingham. The event featured a wide variety of speakers covering a huge range of topics: everything from physical product development to new and emerging tools, as well as your slightly more “traditional” subjects related to web development and marketing.

After a few days spent absorbing the huge amount of information I was exposed to, I noticed a common thread running through quite a few of the talks: that of the future of the responsive web.

continue reading…

The ZTE Open Firefox OS Phone

A short while ago I was lucky enough to bag a ZTE Open smartphone, during it’s initial, limited release on ebay. To the uninitiated, it’s one of the first phones available running on Mozilla’s Firefox OS platform – a new community-based mobile OS primarily aimed at low-end handsets and developing markets. What makes Firefox OS different to other mobile operating systems is that everything – right down the the UI of the OS itself – is written in HTML5 & JavaScript, running inside Mozilla’s Gecko rendering engine.

I’m not going to talk about the handset or operating system too much in this post, as fairly detailed accounts can be found elsewhere – I’m more interested in the opportunities that devices like this present.

continue reading…

Behind the Scenes

Hello, and welcome to my new site. I’ve been a web developer and designer for some five years now, both as a freelancer as well as having worked with agencies. If you’d like to read a bit more about me then you can do so here, and do please let me know if you encounter any bugs or want to give me any feedback.

With this first post I want to talk about my workflow whilst creating this site, and some of the processes and tools I used. My initial objective was simply to create a site which conveys my skills whilst being nice and easy to use across a range of devices, so I decided that a simple design and content structure — with an emphasis on responsive design and performance — would help me meet this objective.

continue reading…