diff options
| author | ubq323 <ubq323@ubq323.website> | 2022-12-27 01:20:58 +0000 |
|---|---|---|
| committer | ubq323 <ubq323@ubq323.website> | 2022-12-27 01:20:58 +0000 |
| commit | b66a5abb3a8dce90b7aee1add23d8bcc9240420e (patch) | |
| tree | 47014c6dd429bf3f14942a29f7b0473868a66173 | |
| parent | acea95639d00d9ddf2e5d87fc93fc61698350e1c (diff) | |
4d
| -rw-r--r-- | 4d.html | 175 | ||||
| -rwxr-xr-x | build.sh | 12 |
2 files changed, 187 insertions, 0 deletions
@@ -0,0 +1,175 @@ +<!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 @@ -14,17 +14,29 @@ src=${2:-.} echo "building at $(date)" +# build page bp() { echo "${src}/$1 ==> ${dst}/$2" lua "${src}/$1" >"${dst}/$2" } +# build page with extensions automatically bpn() { bp ${1}.lua ${1}.html; } +# copy file (or dir) cf() { echo "${src}/$1 -> ${dst}/$1" cp -r "${src}/$1" "${dst}/$1" } +# mkdir +md () { + mkdir -p "${dst}/$1" +} bpn index #cf icons cf bg.png cf me.png + +md blog/ +bpn blog/first_post + +cf 4d.html |