WebGL / Touch rotate and zoom
Unlike the simpler Mandelbrot touch navigation, this example tracks the exact position of two fingers and applies rotate and zoom to the grid so your fingers stay at the same position on the grid as you move them around. In other words, it works like touch interactions for maps.
Every time you move a finger, the transformation matrix needs to be recalculated based on the previous matrix and the differences in position from the previous touch events. We don't want to recalculate this matrix for every pixel for every touch event in the shader code, so we calculate the transformation matrix in JavaScript.
Although this is designed for touchscreens, you can click and drag with a mouse/trackpad, use the scrollwheel or two-finger trackpad scroll to zoom, and hold down the ctrl or alt key while dragging to rotate.