Before/After

A visual representation of a non-linear transformation. Each line connects a data point before the transformation has been applied to its corresponding point after the transformation has been applied. Switch to debug mode to see the untransformed and transformed points. Outline mode shows only the lines and can be used for plotting. (Plotting will likely work best on outputs where the total number of lines is low.)

The generative code is written in plain JavaScript, with the compute-intensive transformation (t-SNE) implemented in AssemblyScript and compiled to WebAssembly (WASM) for maximum performance. The final artwork is a static SVG file that can be downloaded and displayed at any resolution. No external libraries have been used.

More information about this collection is provided here: https://clauswilke.com/art/project/before-after

I would like to thank Bartholomew Littlesilver for helpful artistic feedback, Liam Egan for help with creating plottable SVGs, and BRUTALISTI and neophob for encouraging me to pursue AssemblyScript for implementing performance-critical code.

Press 'm' to cycle between normal, debug, and outline mode.

Press 's' to save as svg.

Press 'p' to save as png.

Author:
Claus O. Wilke
https://clauswilke.com/art
https://twitter.com/clauswilke