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.
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.
Thank You
Smudge was created with the support of a grant from Parsons the New School which provided funding to host the code jam with Parson's students.
Talia Cotton provided help in many ways, including testing the very early versions of the library.