formulanimations :: the principles of painting with maths

// introduction / tutorial to pixel shader live coding


Refractor is a multitouch interface for transforming and distorting images.

I created it for Art Hack Day 2013: God Mode at 319 Scholes. The goal was to create an experience like live-coding pixel shaders, but without the code, just multitouch. It was installed as an iPad app that was also projected onto a big screen in the room, giving the interaction a performative quality.

- Toby Schachman

This is slightly more interesting, because in this case, the shader is interpolating the per-pixel color data in a different way. The method of interpolation is different because the shader is sampling from a 3D texture…

In the previous image, each time the pixel shader is called, it sees only the three colors at the vertices of a triangle. So any pixel in the interior of that triangle is interpolated from those three colors. However, in the image above, a 3D texture is used, and a sampler state is created to fetch the appropriate color from the texture. In this case, for any given pixel, the shader “sees” several adjacent pixels, probably at least six, and it interpolates a color based on all of those values. The process is determined by a setting called the “texture filtering” mode. Some useful background about this can be found here: