diff options
| -rw-r--r-- | all.html | 15 | ||||
| -rw-r--r-- | hypersphere.html | 28 | ||||
| -rw-r--r-- | js/hypersphere.js | 131 | ||||
| -rw-r--r-- | mathematical.html | 10 | ||||
| -rw-r--r-- | screenshots/hypersphere.png | bin | 0 -> 133053 bytes |
5 files changed, 183 insertions, 1 deletions
@@ -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 Binary files differnew file mode 100644 index 0000000..0747ab0 --- /dev/null +++ b/screenshots/hypersphere.png |
