Hypersphere

diff --git a/hypersphere.html b/hypersphere.html new file mode 100644 index 0000000..c88138b --- /dev/null +++ b/hypersphere.html @@ -0,0 +1,28 @@ + + + Hypersphere + + + + + + + +

+ + +

Hypersphere

+ Use the arrow keys and the mouse to change the orientation. +

+ Quality + + +

+ + + +

+ + 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 @@

Mathematical Demonstrations

Hypersphere

+ Shows a projection of a hypersphere 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. + +

diff --git a/screenshots/hypersphere.png b/screenshots/hypersphere.png new file mode 100644 index 0000000..0747ab0 Binary files /dev/null and b/screenshots/hypersphere.png differ -- cgit v1.2.3