Refractor

Refractor is a multitouch interface for transforming and distorting images.

How to install

Refractor is based on web standards, so it should just run in Safari on iPad. But Apple unfortunately doesn't (yet) allow WebGL to run on iOS. Unless it's in an iAd!

Fortunately it's not too difficult to run Refractor as an iAd.

1. Download Apple's iAd Tester app. Click this link on your iPad.
2. Download this zip file to your computer.
3. Connect your iPad to your computer and open iTunes.
4. Go to Apps > File Sharing > iAd Tester. Drag the zip file into iAd Tester Documents.
5. The file should transfer, then disappear. You can now open iAd Tester and run Refractor!

Technical details

GLSL code is dynamically generated by the sequence of distortions you chain together.

The distortions themselves are just primitive GLSL functions: abs, fract, min, floor, sin.

Each distortion is sandwiched by an affine transformation first, and then its inverse transformation afterwards. In effect, this sandwiching lets us change the reference frame for the distortion.

The transformations are modeled as 3x3 matrices and sent in to the shader as uniforms. The matrices are manipulated by multi-touching the image.

Credits

By Toby Schachman for the Pixel Shaders project.

The first prototype was created during Art Hack Day NYC 2013: God Mode at 319 Scholes.

Pixel Shaders is supported by an Open(Art) Fellowship from Eyebeam and Mozilla.