Suggestion: have the editor display a non-square image as the preview.
When calculating angles, most of the examples divide the point xy by the resolution xy. This creates a nice point in the 0..1 range. When calculating angles from that, things will look good if the image is square, but once you have a rectangle, things look weird since you'll have an ellipse rather than a circle.
I was trying to make one of my transitions properly calculate the angle and rotate the input image, but the only way I could test if it was really working was by saving the shader and visiting /gallery to see the preview (differently from the editing preview, the gallery preview uses a rectangle).
I just learned about a company called Ludei that has a product called CocoonJS that seems to give access to the most HTML 5 features (including WebGL) as a distributable webview https://www.ludei.com/cocoonjs/. I wish they would be more transparent with the pricing of the product.
The code is written purely in GL Shading Language, not specifically WebGL. Though you are right, shaders are their own brand of voodoo in a way. I would recommend reading up on vector/matrix math and thoroughly going over every line of the shaders until you understand exactly what every line's purpose is if you really want to learn them. (I'm planning on doing that myself, knowing almost nothing about shaders myself) You'll probably come out with a decent working knowledge of how to make a shader :)
I've started doing WebGL some weeks back, and although it was complete voodoo to me at first, things "clicked" for me by simply reading up a lot about what all the terms means and how they work together.
When calculating angles, most of the examples divide the point xy by the resolution xy. This creates a nice point in the 0..1 range. When calculating angles from that, things will look good if the image is square, but once you have a rectangle, things look weird since you'll have an ellipse rather than a circle.
I was trying to make one of my transitions properly calculate the angle and rotate the input image, but the only way I could test if it was really working was by saving the shader and visiting /gallery to see the preview (differently from the editing preview, the gallery preview uses a rectangle).