Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
MobiusTransformsVisualizer/mobius.html
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
90 lines (73 sloc)
2.54 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Mobius Transforms</title> | |
| </head> | |
| <body> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script> | |
| <script type="text/javascript" src="js/three.min.js"></script> | |
| <script type="text/javascript" src="js/mobius.js"></script> | |
| <!--script type="text/javascript" src="js/render.js"></script--> | |
| <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> | |
| <link rel="stylesheet" href="style\style.css"> | |
| <script id="2d-vertex-shader" type="x-shader/x-vertex">// <![CDATA[ | |
| attribute vec2 a_position; | |
| void main() { | |
| gl_Position = vec4(a_position, 0, 1); | |
| } | |
| // ]]></script> | |
| <script id="2d-fragment-shader" type="x-shader/x-fragment">// <![CDATA[ | |
| #ifdef GL_FRAGMENT_PRECISION_HIGH | |
| precision highp float; | |
| #else | |
| precision mediump float; | |
| #endif | |
| precision mediump int; | |
| uniform sampler2D sampler; | |
| uniform vec2 a; | |
| uniform vec2 b; | |
| uniform vec2 c; | |
| uniform vec2 d; | |
| 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; | |
| } | |
| vec4 mainImage( vec2 fragCoord ) | |
| { | |
| vec2 uv = fragCoord.xy / vec2(500,500); | |
| 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); | |
| return max(abs(transCoord.x),abs(transCoord.y))>1.0?vec4(1,1,1,1):texture2D(sampler,transCoord); | |
| // return (abs(mod(transCoord.x*10.0,1.0))>0.9 || | |
| // abs(mod(transCoord.y*10.0,1.0))>0.9) && max(abs(transCoord.x),abs(transCoord.y))<5.0 | |
| // ?vec4(0,0,0,1):vec4(1,1,1,1); | |
| // return vec4(transCoord.x,transCoord.y,c.x,1); | |
| } | |
| void main(){ | |
| vec4 outcolor = vec4(0.0); | |
| for (float i = -2.0; i < 3.0; i++) { | |
| for (float j = -2.0; j < 3.0; j++) { | |
| outcolor += mainImage(gl_FragCoord.xy+vec2(i/3.0,j/3.0)); | |
| } | |
| } | |
| gl_FragColor = outcolor/25.0; | |
| } | |
| // ]]> </script> | |
| </body> | |
| </html> |