diff --git a/js/fragshader.glsl b/js/fragshader.glsl new file mode 100644 index 0000000..41bb128 --- /dev/null +++ b/js/fragshader.glsl @@ -0,0 +1,32 @@ + +vec2 invMobius(vec2 a, vec2 b, vec2 c, vec2 d, vec2 z){ + vec2 num = vec2(0,0); + num.x = (d.x*z.x - d.y*z.y)-b.x; + num.y = (d.x*z.y - d.y*z.x)-b.y; + + vec2 den; + den.x = (c.x*z.x - c.y*z.y) + a.x; + den.y = -(c.x*z.y + c.y*z.x) + a.y; + + den= den/(den.x*den.x + den.y*den.y); + + vec2 result; + result.x = num.x*den.x - num.y*den.y; + result.y = num.x*den.y + num.y*den.x; + return result; + +} + + +void mainImage( out vec4 fragColor, in vec2 fragCoord ) +{ + vec2 uv = fragCoord.xy / iResolution.xy; + uv = uv- vec2(0.5,0.5); + uv = uv*3.0; + vec2 a = vec2(1,1); + vec2 b = vec2(0,1); + vec2 c = vec2(0,1); + vec2 d = vec2(1,0); + vec2 transCoord = invMobius(a,b,c,d,uv); + fragColor = length(transCoord)>1.0?vec4(1,1,1,1):texture(iChannel0,transCoord); +} diff --git a/js/ui.js b/js/ui.js new file mode 100644 index 0000000..8c6769f --- /dev/null +++ b/js/ui.js @@ -0,0 +1,21 @@ +function add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) { + var container = document.createElement('div'); //Create the slider container + container.className ="slider-container"; + parent.append(container); + + var slider = document.createElement('div'); //Create the actual slider handle + slider.className = "sliderHandle"; + $(slider).draggable({ + containment: "parent", //Constrain its motion to the parent + drag: function(event, ui){ //When it's dragged, call this function + variable.setVals(remap(ui.position.left,0,80,min_x,max_x),remap(ui.position.top,0,80,min_y,max_y)); + //Add drawing update function here when added + } + }); + container.append(slider); + + var caption = document.createElement('p'); + caption.className = "slider-caption"; + $(caption).text(label); + container.append(caption); +} \ No newline at end of file