New Site

Recently I redesigned my website ( Personal sites are kind of a constant background project for me and a great way to keep exploring and learning. I like to keep it clean with some animation and effects. One of these effects is a subtle WebGL background animation using white and off-white semi-transparent beams. I think this keeps the site clean while adding some visual interest without too much noise.


Script Analog Game Design with SVG

I have a great passion for games of all kinds. Since I was a kid board games were always something I enjoyed and I even would sketch out and make up my own out of cardboard. So as my kids get older and we start playing games together I thought it would be fun to design our own. To make this easier I made some code snippets that are tools and templates for making various games using SVG.


SVG Calendar

Happy New Year! I like to make a calendar for our family each year and doing the layout in illustrator can be rather tedious. So last year I decided to write some code to do it in SVG utilizing Snap.svg. I added a vector illustration noting some of the vacations we had planned for the year.


Tiny Javascript Libraries

I used to do a lot of flash banner ads. Banner ads have tight requirements around file size so as not to bloat the hosting page's download. With banner ads migrating to HTML this is even more of an issue with often lack of compression. Jack Doyle of Greensock wrote a great article talking about these problems and possible solutions.

Often making these banner ads in HTML we're limited in what libraries we can use because of their file size. However after looking into many of the libraries I use and how I use them, only a fraction of them are necessary for general use. So I started looking at my rendering libraries (Snap.svg, Pixi.js). I then took a quick stab at rebuilding them with a focus on just drawing and moving objects, nothing else, to focus on small file size. So I started making them:


Animate SVG with the Flash Timeline

Here's an introduction video to Snap.SVG Animator, allowing you to publish animated SVG from the Flash Animation tool.

Scalable Vector Graphics (SVG) is a powerful tool in the web developer's arsenal. But web creators have been rather limited by how they can create and manipulate this content. Vector tools like Adobe Illustrator have been able to export SVG for a long time but animating SVG content has been limeted to javascript libraries used by developers. Great designers, animators and motion graphics artists have long relied on timeline based animation tools to create dynamic rich animations.


Custom Filters with Pixi.js using GLSL Shaders

NOTE: This applies to Pixi v3

Pixi.js is Mat Groves' lightning fast 2D rendering engine for the web utilizing WebGL or 2D Canvas. When used with WebGL it supports filters, which are basically a simple way to leverage specific GLSL shaders. We can even write our own filters for Pixi.js using GLSL and javascript.

To create your own GLSL filter download the source on github and follow the instructions to build, running 'npm install' and then 'gulp' from the command line. All the filters live in the 'src/filters/' directory. To create your own filter you'll need to add a new directory for your filter name which will include at minimum two files. First, the javascript file that contains the browserify module for your filter. Second, the glsl fragment shader with the suffix '.frag'.

Below is an example of a custom filter module I used for Signed Distance Fields, a way to visually vectorize specially created raster images. I'll walk through the different parts of the code.


Evolution of the Web: SXSW Interactive 2015

I was fortunate to have the opportunity to speak at SXSW Interactive again this year. My talk, the Evolution of the Web, covered how the web has changed and where it seems to be heading. It covers how the documents we create have gotten more and more complex as the web has had to compete with native mobile platforms. I discuss the GPU and how hardware accelerated rendering is being leveraged by browsers to close the performance gap. I also get into WebGL and lower level API's that allow us to create more amazing graphical experiences, as well as frameworks that simplify the process of making them. I also explored other hardware features we have access to now and how the web is getting better at accessing them, for example the Gamepad API and Leap Motion's leap.js library for integrating peripherals in you web content.


Augmented Reality, Virtual Reality and the Web

The industry has been excited about the idea of Virtual Reality brought into the spotlight through innovative headsets like the Oculus Rift. Where by wearing a pair of goggles you can transport to a digital world.


SXSW 2014: Rich Web Experiences and The Future of the Web

Earlier this year at SXSW I gave a presentation on Rich Web Experiences, involving different technologies and techniques you can use to build richer experiences. This was an evolving talk that I've continued to work on and will be doing the latest version at Adobe MAX this year in Los Angeles, come by and check it out if you'll be there, otherwise here's the video from SXSW.


Richer Web Experiences

An article of mine was recently published in Web Designer Depot, discussing a few topics I've been covering in recent talks about how to make richer web experiences. It's just a brief overview, but you can read the full article at the link below.

4 ways to create richer web experiences