Awesome
XDoG Sketch
<p align="center"> <a href='https://xdog.alexpeattie.com'><img width='600' src='https://user-images.githubusercontent.com/636814/34941979-d423738c-f9ed-11e7-9cb8-3561a88d638d.gif'></a> </p>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:
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