diff options
| author | ubq323 <ubq323@ubq323.website> | 2023-08-02 01:15:24 +0100 |
|---|---|---|
| committer | ubq323 <ubq323@ubq323.website> | 2023-08-02 01:15:24 +0100 |
| commit | 3c72d87d8e944786e9157070cee08792f7ff7a84 (patch) | |
| tree | 08aa36b5af530a24b9db336e71e858950ef4940c | |
| parent | 7c752b33ec1e7be5030056c87e2060d03f54aaeb (diff) | |
remove 4d
| -rw-r--r-- | 4d.html | 175 |
1 files changed, 0 insertions, 175 deletions
diff --git a/4d.html b/4d.html deleted file mode 100644 index c66b89a..0000000 --- a/4d.html +++ /dev/null @@ -1,175 +0,0 @@ -<!DOCTYPE html> -<html> -<head> -<title>bald four dimensional thing</title> -<style> -canvas { border: 1px solid black; border-radius:5px } -body {background: url(https://upload.wikimedia.org/wikipedia/en/2/27/Bliss_%28Windows_XP%29.png) no-repeat center center fixed;background-size:cover;} -body {color:black; font-family:sans-serif; text-shadow: 10px 10px red;} -</style> - -</head> -<body> -<h1>maths</h1> -<canvas width=500 height=500 id=canvas></canvas><br> -<input type="range" id="zx" min="-5" max="5" step="0.05" value="1.15"><span id=zxd>1.15</span><br> -<input type="range" id="zy" min="-5" max="5" step="0.05" value="-1.05"><span id=zyd>-1.05</span><br> -<input type="range" id="wx" min="-5" max="5" step="0.05" value="0.3"><span id=wxd>0.3</span><br> -<input type="range" id="wy" min="-5" max="5" step="0.05" value="0.95"><span id=wyd>0.95</span><br> -<input type="checkbox" checked id="spin"><label for=spin>spin</label><br> -<input type="checkbox" id="wiggle"><label for=wiggle>wiggle</label> -<script> -var zx = 1.15; -var zy = -1.05; -var wx = 0.3; -var wy = 0.95; - -document.getElementById("zx").addEventListener("input", function(e) { - var val = this.value; - zx = val; - document.getElementById("zxd").innerHTML = val.toString(); - go(); -}); -document.getElementById("zy").addEventListener("input", function(e) { - var val = this.value; - zy = val; - document.getElementById("zyd").innerHTML = val.toString(); - go(); -}); -document.getElementById("wx").addEventListener("input", function(e) { - var val = this.value; - wx = val; - document.getElementById("wxd").innerHTML = val.toString(); - go(); -}); -document.getElementById("wy").addEventListener("input", function(e) { - var val = this.value; - wy = val; - document.getElementById("wyd").innerHTML = val.toString(); - go(); -}); - -var canvas = document.getElementById("canvas"); -var ctx = canvas.getContext("2d"); - -function rotVert1(v,th) { - var c = Math.cos(th); - var s = Math.sin(th); - - return [c*v[0] + s*v[2], v[1], -s*v[0] + c*v[2], v[3]]; -} -function rotVert2(v,th) { - th /=1.11245; - var c = Math.cos(th); - var s = Math.sin(th); - return [c*v[0] + s*v[3], v[1], v[2], -s*v[0] + c*v[3],]; -} -function rotVert(v,th) { - return rotVert1(rotVert2(v, th), th); -} -function projVert(v) { - return [v[0] + zx*v[2] + wx*v[3], v[1] + zy*v[2] + wy*v[3]]; -} - -function niceVert(v) { - return [60*v[0]+250, 60*v[1]+250] -} - -var vertices = [ - [-1,-1,-1, 1], - [-1,-1, 1, 1], - [-1, 1,-1, 1], - [-1, 1, 1, 1], - [ 1,-1,-1, 1], - [ 1,-1, 1, 1], - [ 1, 1,-1, 1], - [ 1, 1, 1, 1], - [-1,-1,-1,-1], - [-1,-1, 1,-1], - [-1, 1,-1,-1], - [-1, 1, 1,-1], - [ 1,-1,-1,-1], - [ 1,-1, 1,-1], - [ 1, 1,-1,-1], - [ 1, 1, 1,-1] -]; - -var edges = []; -for (var i = 0; i < 16; i++) { - for (var j = 0; j < 16; j++) { - var v1 = vertices[i]; - var v2 = vertices[j]; - var d = 0; - for (var p = 0; p < 4; p++) { - if (v1[p] != v2[p]) { - d += 1; - } - } - if (d==1) { - edges.push([i,j]); - } - } - -} -ctx.fillStyle = "red"; -ctx.strokeStyle = "white"; - -var angle = 0; -var frame = 0; - -var gradient = ctx.createLinearGradient(0,0,500,0); -gradient.addColorStop("0","hotpink"); -gradient.addColorStop("0.5","orange"); -gradient.addColorStop("1.0","lightsteelblue"); - -function go() { - ctx.fillStyle="purple"; - ctx.fillRect(0,0,500,500); - ctx.fillStyle=gradient; - for (var i = 0; i < 16; i++) { - var v = vertices[i]; - var p = niceVert(projVert(rotVert(v,angle))); - ctx.fillRect(p[0]-10,p[1]-10,20,20); - } - - for (var x = 0; x < edges.length; x++) { - var e = edges[x]; - var v1 = vertices[e[0]]; - var v2 = vertices[e[1]]; - var p1 = niceVert(projVert(rotVert(v1,angle))); - var p2 = niceVert(projVert(rotVert(v2,angle))); - ctx.beginPath(); - ctx.moveTo(p1[0],p1[1]); - ctx.lineTo(p2[0],p2[1]); - ctx.stroke(); - } - -} - -function wiggle() { - for (var x = 0; x < 16; x++) { - for (var v = 0; v < 4; v++) { - if (Math.random() > 0.6) { - vertices[x][v] += (Math.random() - 0.5)/10; - } - } - } -} - -function step() { - go(); - if (document.getElementById("spin").checked) { - angle += 0.05; - } - if (document.getElementById("wiggle").checked) { - wiggle(); - } - frame += 1; - requestAnimationFrame(step); -} -step(); - - -</script> -</body> -</html>
\ No newline at end of file |