Skip to content
Permalink
master
Switch branches/tags

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 file
 
 
Cannot retrieve contributors at this time
119 lines (95 sloc) 3.58 KB
Raw Blame
Open in GitHub Desktop
<!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;
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;
}
vec2 fwdMobius(vec2 _a, vec2 _b, vec2 _c, vec2 _d, vec2 z){
vec2 num;
num.x = (_a.x*z.x - _a.y*z.y)+_b.x;
num.y = (_a.x*z.y - _a.y*z.x)+_b.y;
vec2 den;
den.x = (z.x*z.x - _c.y*z.y) + _d.x;
den.y = (_c.x*z.y + _c.y*z.x) + _d.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;
}
vec3 hsb2rgb( in vec3 c ){
vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
6.0)-3.0)-1.0,
0.0,
1.0 );
rgb = rgb*rgb*(3.0-2.0*rgb);
return c.z * mix( vec3(1.0), rgb, c.y);
}
vec4 mainImage( vec2 fragCoord )
{
vec2 uv = fragCoord.xy / vec2(500,500);
uv = uv- vec2(0.5,0.5);
uv = uv*vec2(3.0,-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.yx);
/*return (abs(mod(transCoord.x*10.0,1.0))>0.93 ||
abs(mod(transCoord.y*10.0,1.0))>0.93) && max(abs(transCoord.x),abs(transCoord.y))<5.0
?vec4(0,0,0,1):vec4(hsb2rgb(vec3(transCoord.x+transCoord.y,1,1)),1);*/
// return vec4(transCoord.x,transCoord.y,c.x,1);
}
void main(){
vec4 outcolor = vec4(0.0);
for (float i = 0.0; i < 4.0; i++) {
for (float j = 0.0; j < 4.0; j++) {
outcolor += mainImage(gl_FragCoord.yx+vec2(i/4.0,j/4.0));
}
}
gl_FragColor = outcolor/16.0;
}
// ]]> </script>
<p>Mobius Tranformations are the projective transformations of the complex projective line, the subset of complex number pairs. <br>The Riemann Sphere is used as a model for the complex plane, including a point for infinity. <br>The plane is a stereographic projection
onto the Riemann sphere, tranformed using the rational function, then projected back onto the plane.</p>
</body>
</html>