XDoG Sketch

Fast artistic rendering of photos in the browser with XDoG, React 16 & deeplearn.js. The app recreates XDoG image stylization technique as described in the Winnemoller et. al's papers XDoG: Advanced Image Stylization with eXtended Difference-of-Gaussians (DOI: 10.1145/2024676.2024700) and XDoG: An eXtended difference-of-Gaussians compendium including advanced image stylization (DOI: 10.1016/j.cag.2012.03.004). The deeplearn.js library is used to perform fast, GPU-accelerated image processing in the browser.

Usage/Installation

By far the easiest way to run & experiment with the app is to access the live version at:

https://xdog.alexpeattie.com

Alternatively, the app can be built and run locally; this requires a recent version of Node (>= 8). Dependencies can be installed with Yarn or NPM, then run the app with npm run start:

yarn install
# or
npm install

npm run start

The server will be accessible at http://localhost:3067/ by default, this can be customized by modifying the PORT variable in package.json.

Building the app

Alternatively, you can compile the app, then run it with a static server. Run:

npm run build

When the build is completed, all the compiled files will be in the build/ directory, and can be served by any static file server. One popular option is serve:

npm install -g serve
serve -s build

Dependencies

This project was greatly helped by the following 3rd-party libraries:

• basename - for filename processing
• classnames - for conditionally toggling CSS classes
• deeplearn.js - for fast, GPU-accelerated computation
• detect-browser - to show warnings for outdated browsers
• gaussian-convolution-kernel - to create a Gaussian kernel for a given window size and sigma
• get-pixels - to convert pixels in an image to an NDArray
• ndarray - an efficient data structure for storing numerical data (image pixels in this case)
• Numeral.js - for number formatting for the parameter sliders
• promise-file-reader - for reading uploaded files
• React 16 - to power the UI
• react-dropzone - to facilitate drag & drop uploads
• Redux, redux-thunk & redux-form - for front-end state management
• save-pixels - to write the resulting pixel NDArray to an image stream
• Spectre.css - a CSS library used to style the app
• stream-to-promise - to write the image stream generated by save-pixels to a buffer
• styled-components - to ease the styling of React components

License

Nitlink is released under the MIT license. (See LICENSE.md)

Author

Alex Peattie / alexpeattie.com / @alexpeattie