Matt DesLauriers

creative developer

Page 2


Drawing Lines is Hard

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

Continue reading →


Rapid Prototyping in JavaScript

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

Continue reading →


Motion Graphics for the Web

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.

motion

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

Continue reading →


Faster & Cleaner Module Workflow

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.

readme
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

Continue reading →


array slinging in JavaScript

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 },
    {

Continue reading →


Browserify vs. Webpack

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. It encourages a “whole new way” of writing modules and often requires manually-maintained config files. This is essentially a step

Continue reading →


modular and versioned GLSL

Demo
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

Continue reading →