It’s been a while since a blog post, so here’s a look at some small sketches I’ve developed in the last six months.

Most of them use WebGL and/or WebAudio, and are intended to be viewed on desktop Chrome or FireFox. Not all work on mobile. Each explores a single idea, delivered as a sort of “animated real-time artwork.”

ink

<sub>desktop only

(demo) - (source)</sub>

This was a small audio-reactive sketch that uses soundcloud-badge by Hugh Kennedy. The original idea was to mimic the flow of black ink on paper, but it quickly diverged as I became more interested in projecting a video texture onto a swarm of 3D particles.

The trick here is just to take the position of the 3D particle and divide by the w component to get its position in screen space. We can use this as our uv coordinates into the video texture.

// vertex shader
void main() {
  // classic MVP vertex position
  mat4

One of the things I like about Material Design is that it builds on principles we see in the real world. Depth is used to convey information, light is used to indicate seams, and drop shadows follow convincing behaviours.

Material design is inspired by tactile materials, such as paper and ink. […] Surfaces can have elevation (z-height) and cast shadows on other surfaces to convey relationships.

^{- Polymer}

What if we take these ideas to the extreme, and treat this as a graphics programming exercise?

The GPU could be used to simulate shading and reflections, new algorithms could be conceived that operate more effectively in a 2D domain, and surfaces could react to user interactions in a more tactile and realistic manner.

There is lots of potential in this idea. In this article, I will focus specifically on rendering text, or “paper and ink.”

Text in the Real World

^references...

^{Twitter: @mattdesl}

Drawing lines might not sound like rocket science, but it’s damn difficult to do well in OpenGL, particularly WebGL. Here I explore a few different techniques for 2D and 3D line rendering, and accompany each with a small canvas demo.

Source for demos can be found here:

https://github.com/mattdesl/webgl-lines

Line Primitives

WebGL includes support for lines with gl.LINES, gl.LINE_STRIP, and gl.LINE_LOOP. Sounds great, right? Not really. Here are just a few issues with that:

• Drivers may implement the rendering/filtering slightly differently, and you may not get a consistent render across devices or browsers
• The maximum line width is driver-dependent. Users running ANGLE, for example, will get a maximum of 1.0, which is pretty useless. On my new Yosemite machine, line width maxes out at about 10.
• No control over line join or end cap styles
• MSAA is not...

^{Twitter: @mattdesl}

In this post I’ll outline a simple workflow for quick prototyping and creative development with JavaScript. It’s the workflow I’ve been using for some years now, and it is how I build most of my libraries, demos and client projects. Some examples of libraries/projects using this workflow:

• Audiograph
• color-wander
• webgl-wireframes
• perspective-camera
• three-bmfont-text

Goals

The goals of this workflow:

• Fast development experience – when I save my code, my browser should reload
• Minimal configuration – I don’t want to spend time with configuration each time I create a new project
• Modular – I want to be able to split my application into many files and depend on third-party libraries from npm
• Easy Deployment – Deploying online should be simple and require no server management
• Modern and Extensible – The workflow should be able to easily scale up to larger...

Lately I’ve been thinking a lot about tooling for the web. Mostly, about how much it sucks, and how far away we are from the aesthetic of other industries, like games, film, and offline motion graphics in general.

^{screenshot of “Where Things Come From”}

Shorts and reels like “Where Things Come From”, we think things’ 2013 Reel, and “Designed by Apple” demonstrate a visual fidelity which seems near impossible to replicate with interactive web content. Yet, the technology is all there: CSS for common elements and typography, SVG for shapes and strokes, and Canvas/WebGL for more advanced effects.

Why do rich websites and online experiences so often fall short of this aesthetic? There’s a few reasons, but I’d say the strongest is that we lack time-based animation tools for HTML5 content. Without these tools, the animations are left up to the developers to implement. And, let’s be...

I’ve noticed when writing lots of small modules that the process of creating new modules and repositories can be a little tedious and error-prone. Automating the process makes things more efficient, produces consistent and clean repositories, and also forces me into the mindset of documenting and testing early on.

Here are some suggestions, tools and scripts that have improved my workflow. I’m going to presume OSX throughout this article, since I don’t use Windows.

^{example readme for a small module}

terminal basics

The best way to improve efficiency when working with npm modules is to get more familiar with terminal commands. You might already know cd and ls, but here’s a few other goodies:

• tab key will auto-complete a path to the next folder; double-tap to list all paths that match the input
• up/down arrow keys to repeat previous commands
• Ctrl + A and Ctrl + E to jump to the...

This is one part of an ongoing style guide for modern front-end JavaScript development. Stay tuned for more: @mattdesl.

Functional programming may be a nebulous concept to some front-end developers, but even learning the basics can greatly improve the readability and flexibility of your code. Here we’ll take a brief look at filter, map, etc and how they can lead to cleaner and more “functional” code.

Briefly explained:

• filter creates a new array with only the elements that pass the test of our given function
• map creates a new array where the elements are the result of calling our given function

Full details in the docs. You should also get comfortable with reduce, reduceRight, some and every.

For example, let’s say we have a list of person objects and we are trying to filter them by age:

var persons = [ 
    { name: "Will", age: 15 },
    { name: "John", age: 49 },
    {

Note: This is a very old article (2014) — everything here is likely outdated, so you should read this with a huge grain of salt.

It’s amazing, and slightly terrifying, how the landscape of JavaScript and its tooling can change in the blink of an eye. But, right now, we have a pretty good thing going with npm and browserify. We get thousands of useful functions and modules that compose well together, promote the Unix philosophy of small and decoupled tools, and blur the lines between “browser” and “client” (e.g. see headless-gl). And, amazingly, we can utilize all of these modules without worrying about paths, version hell, or cumbersome configuration files.

Webpack seems like an amazing tool, and does present some great features (hot module replacement, code splitting, sync vs. async requires, etc). However, it does not promote code re-use in the way that NPM and Browserify does...

^{a WebGL demo of glsl-lut, for efficient color transforms on the GPU. source code here}

Contents

• Intro
• glslify
  • Installing Dependencies
  • Compiling The Shader
  • Relative Requires
• Example Modules
• The Awesomeness of NPM
• Unit Testing
• Extras
• As a Source Transform

Intro

NPM and Node are brilliant tools for pushing JavaScript and web development forward. They have drastically changed the landscape; introducing the concept of small and composable modules, semantic versioning, and automatic dependency management. Gone are the days of “copy-pasting” snippets, fear of new versions, and manually maintaining vendor paths. Installing a dependency has never been easier:

npm install querystring --save

But now it’s starting to make some shifts in other areas; namely, game and graphics programming with GLSL. For the uninitiated, Browserify is a neat tool which statically analyzes your code for...