Added hypersphere

author: pommicket <leonardomtenenbaum@gmail.com> 2016-12-10 10:11:12 -0500
committer: pommicket <leonardomtenenbaum@gmail.com> 2016-12-10 10:11:12 -0500
commit: 778dbf9dbe1eaddefa3014d34165dcb2fb0b8dc5 (patch)
tree: 5acb52a39ff45287c10511a85a8b4284afc906fd
parent: 0a76f3de3c2228e06b791d99be400b96cdde7f92 (diff)
5 files changed, 183 insertions, 1 deletions
diff --git a/all.html b/all.html
index 4b48032..f692733 100644
--- a/all.html
+++ b/all.html
@@ -24,6 +24,7 @@
 				can be found <a href="explanation.html">here</a>.
 			</div>
 		</div>
+        
 
 		<div class="row">
 			<div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project">
@@ -57,7 +58,9 @@
 				can be found <a href="explanation.html">here</a>.
 			</div>
 		</div>
-
+        
+        
+        
 		<div class="row">
 			<div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project">
 				<img src="screenshots/NameGenerator.png" width=200 height=200><br>
@@ -66,6 +69,16 @@
 				the frequencies of trigrams.
 			</div>
 		</div>
+        
+        <div class="row">
+            <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project">
+                <img src="screenshots/hypersphere.png" width=250 height=250><br>
+                <div class="project-title"><a href="hypersphere.html">Hypersphere</a></div>
+                Shows a projection of a <a href="https://en.wikipedia.org/wiki/3-sphere">hypersphere</a> onto the plane. It uses a 2x4 matrix to convert 4D points into 2D points. Use the arrow keys
+                and the mouse to rotate it in 4D.
+
+            </div>
+        </div>
 
 		<div class="row">
 			<div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project">
diff --git a/hypersphere.html b/hypersphere.html
new file mode 100644
index 0000000..c88138b
--- /dev/null
+++ b/hypersphere.html
@@ -0,0 +1,28 @@
+<html>
+<head>
+    <title>Hypersphere</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/styleNew.css">
+    <link rel="icon" href="screenshots/hypersphere.png">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+</head>
+<body>
+    <div class="container-fluid">
+        <div id="navbar"></div>
+        <script src="navbar.js"></script>
+        <h2>Hypersphere</h2>
+        Use the arrow keys and the mouse to change the orientation.
+        <div class="row container-fluid">
+            <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+                <span class="input-group-addon">Quality</span>
+                <input id="quality" class="form-control" type="number" value="5">
+                
+            </div>
+        </div>
+        <button id="chq" class="btn btn-sm btn-default">Change quality</button>
+        
+        <script src="js/hypersphere.js"></script>
+    </div>
+</body>
+</html>
diff --git a/js/hypersphere.js b/js/hypersphere.js
new file mode 100644
index 0000000..d34a74d
--- /dev/null
+++ b/js/hypersphere.js
@@ -0,0 +1,131 @@
+var WIDTH = 500;
+var HEIGHT = 500;
+
+var z_angle = 4*Math.PI/9;
+var w_angle = 2*Math.PI/3;
+var matrix = [[Math.cos(0), Math.sin(0)], [Math.cos(2*Math.PI/9), Math.sin(2*Math.PI/9)], [Math.cos(z_angle), Math.sin(z_angle)], [Math.cos(w_angle), Math.sin(w_angle)]];
+
+
+var quality = 5;
+var speed = 0.2;
+
+var coordinatesSize = 4; 
+var topLeft     = [-coordinatesSize/2, +coordinatesSize/2];
+var topRight    = [+coordinatesSize/2, +coordinatesSize/2];
+var bottomLeft  = [-coordinatesSize/2, -coordinatesSize/2];
+var bottomRight = [+coordinatesSize/2, -coordinatesSize/2];
+
+var origin;
+
+$(function()
+{
+    $("#chq").click(function()
+    {
+        quality = $("#quality").val();    
+    })
+})
+
+function convertCoordinates(coords)
+{
+    var x = map(coords[0], topLeft[0], topRight[0], 0, width);
+    var y = map(coords[1], topLeft[1], bottomLeft[1], 0, width);
+    
+    return [x, y];
+}
+
+function transform(vector)
+{
+    var ans = [];
+    for (var i = 0; i < matrix[0].length; i++)
+    {
+        ans.push(0);
+    }
+    for (var i = 0; i < matrix.length; i++)
+    {
+        for (var j = 0; j < matrix[i].length; j++)
+        {
+            ans[j] += vector[i] * matrix[i][j];
+        }
+    }
+    return convertCoordinates(ans);
+}
+
+function pointOnSphere(r,s,t)
+{
+    var x = r * Math.cos(s) * Math.sin(t);
+    var y = r * Math.sin(s) * Math.sin(t);
+    var z = r * Math.cos(t);
+    return [x,y,z];
+}
+
+function pointOnHyperSphere(r,s,t,u)
+{
+    var x = r * Math.cos(s);
+    var y = r * Math.sin(s) * Math.cos(t);
+    var z = r * Math.sin(s) * Math.sin(t) * Math.cos(u);
+    var w = r * Math.sin(s) * Math.sin(t) * Math.sin(u);
+    return [x,y,z,w];
+}
+
+function setup()
+{
+    createCanvas(500, 500);
+    origin = [width/2, height/2];
+}
+
+function draw()
+{
+    background(255);
+    ellipseMode(CENTER);
+    var xVal = map(mouseX, 0, width, 0, 2*Math.PI);
+    matrix[0] = [Math.cos(xVal), Math.sin(xVal)];
+    var yVal = map(mouseY, 0, height, 0, 2*Math.PI);
+    matrix[1] = [Math.cos(yVal), Math.sin(yVal)];
+    if (keyIsDown(LEFT_ARROW))
+    {
+        z_angle -= speed;
+    }
+    if (keyIsDown(RIGHT_ARROW))
+    {
+        z_angle += speed;
+    }
+    if (keyIsDown(DOWN_ARROW))
+    {
+        w_angle -= speed;
+    }
+    if (keyIsDown(UP_ARROW))
+    {
+        w_angle += speed;
+    }
+    
+    matrix[2] = [Math.cos(z_angle), Math.sin(z_angle)];
+    matrix[3] = [Math.cos(w_angle), Math.sin(w_angle)];
+    var i_hat = convertCoordinates(matrix[0]);
+    var j_hat = convertCoordinates(matrix[1]);
+    var k_hat = convertCoordinates(matrix[2]);
+    var l_hat = convertCoordinates(matrix[3]);
+    strokeWeight(2);
+    stroke(255, 0, 0);
+    line(origin[0], origin[1], i_hat[0], i_hat[1]);
+    stroke(0, 255, 0);
+    line(origin[0], origin[1], j_hat[0], j_hat[1]);
+    stroke(0, 0, 255);
+    line(origin[0], origin[1], k_hat[0], k_hat[1]);
+    stroke(0, 255, 255);
+    line(origin[0], origin[1], l_hat[0], l_hat[1]);
+    fill(157, 0, 255);
+    noStroke();
+    for (var s = 0; s < 2*Math.PI; s += 1/quality)
+    {
+        for (var t = 0; t < 2*Math.PI; t += 1/quality)
+        {
+            for (var u = 0; u < 2*Math.PI; u += 1/quality)
+            {
+                var transformed = transform(pointOnHyperSphere(1, s, t, u));
+                ellipse(transformed[0], transformed[1], 1, 1);
+            }
+        }
+    }
+    
+    
+}
diff --git a/mathematical.html b/mathematical.html
index a31de3e..4dde0c1 100644
--- a/mathematical.html
+++ b/mathematical.html
@@ -14,6 +14,16 @@
 		<h2>Mathematical Demonstrations</h2>
 
 		<div class="container-fluid">
+            <div class="row">
+				<div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project">
+					<img src="screenshots/hypersphere.png" width=250 height=250><br>
+					<div class="project-title"><a href="hypersphere.html">Hypersphere</a></div>
+					Shows a projection of a <a href="https://en.wikipedia.org/wiki/3-sphere">hypersphere</a> onto the plane. It uses a 2x4 matrix to convert 4D points into 2D points. Use the arrow keys
+                    and the mouse to rotate it in 4D.
+                    
+				</div>
+			</div>
+            
 			<div class="row">
 				<div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project">
 					<img src="screenshots/modularpascal.png" width=256 height=256><br>
diff --git a/screenshots/hypersphere.png b/screenshots/hypersphere.png
new file mode 100644
index 0000000..0747ab0
--- /dev/null
+++ b/screenshots/hypersphere.png
author	pommicket <leonardomtenenbaum@gmail.com>	2016-12-10 10:11:12 -0500
committer	pommicket <leonardomtenenbaum@gmail.com>	2016-12-10 10:11:12 -0500
commit	778dbf9dbe1eaddefa3014d34165dcb2fb0b8dc5 (patch)
tree	5acb52a39ff45287c10511a85a8b4284afc906fd
parent	0a76f3de3c2228e06b791d99be400b96cdde7f92 (diff)