Smudge is a JavaScript creative-coding library for drawing with physically-based materials.

Most digital images—and most image authoring software—represent images as pixels that encode only color. These images do not describe material properties such as height, metallicness, and smoothness. These additional properties are important aspects of traditional media. Procedurally generated images without these qualties often appear “flat” and “lifeless” unless great effort is expended in creating detail and subtlety.

The Smudge library allows creative coders to create rich computationally generated images in JavaScript, preview them on a 3d object using Three.js, and export PBR texture assets that can be used in real time engines including Unity.

Project Repo   Project Blog   API Reference

Smudge for Students

Art and Design programs often introduce students to programming through drawing libraries like Processing. Introducing code in the context of making visual art is helpful; it allows students to relate the new skills to skills they are already comfortable with.

Smudge provides a set of drawing tools similar to those in Processing: images are drawn using simple rectangles, ellipses, and lines. Rather than drawing with simple colors, Smudge draws using materials with extended physical properties. The resulting images can interact with 3d lighting making it easier to create effects seen in traditional media.

Smudge for 3D Artists

Physically Based Rendering is in widespread use in both real-time and pre-rendered 3D-graphics tools. These tools work with PBR textures which can be captured from photographs, painted by hand with tools like Substance Painter, or generated procedurally with tools like Substance Designer.

Like Substance Designer, Smudge allows artists to create PBR textures procedurally. But rather than using a node-based approach, Smudge projects are written in JavaScript. 3D Artists can consider using Smudge instead of Substance Designer when the image they want to create is better expressed with imparative code instead of nodes.

Example showing arcs in a variety of materials.
Procedurally generated brick texture demonstrating texture loading and layering.
Basic checkerboard example rendered in Unity.
Emissive material example rendered in Unity.

Smudge UI

The Smudge library provides a UI for visualizing each material property seperately. The UI can optionally provide a 3D preview if three.js is available. Smudge can also run "headless", exporting the PBR texture set without displaying a UI at all.

Smudge Jam 2018

Smudge v0.1 was tested at a one-day code-jam hosted at Parsons. About a dozen students and a few NYC creative coders participated in the jam, learned the basics of Smudge, and created their first Smudge sketches.

Smudge Jam 2018
Earl Nie creates a glowing red cube.
Smudge Jam 2018
Carla Molins working on her Smudge Jam entry.
Smudge Jam 2018 sketch by Carla Molins
Smudge Jam 2018 sketch by Carla Molins
Smudge Jam 2018 sketch by Earl Nie
Smudge Jam 2018 sketch by Jack Reiger
Smudge Jam 2018 sketch by Ting Cheng
Smudge Jam 2018 sketch by Xu Han
Early test sketch by Talia Cotton
Smudge Jam 2018 sketch by Aakanksha Aggarwal