117 lines
3.1 KiB
JavaScript
117 lines
3.1 KiB
JavaScript
// thanks to https://stackoverflow.com/a/74129799
|
|
const { cos, sin, sqrt, acos, atan, atan2, abs, PI } = Math
|
|
const clamp = (a, b, x) => x < a ? a : x > b ? b : x
|
|
const cvs = document.createElement('canvas')
|
|
cvs.style.cssText = ` background: #00000000; `
|
|
const primaryCol = getComputedStyle(document.body).getPropertyValue('--secondary');
|
|
const secondCol = getComputedStyle(document.body).getPropertyValue('--accent');
|
|
const ctx = cvs.getContext('2d')
|
|
|
|
const RADIUS = 150
|
|
const NB_SECTIONS = 6
|
|
const LINE_WIDTH = 3
|
|
|
|
const SCALE = devicePixelRatio
|
|
const width = RADIUS * 2 + 20
|
|
const height = RADIUS * 2 + 20
|
|
cvs.width = width * SCALE
|
|
cvs.height = height * SCALE
|
|
cvs.style.width = `${width}px`
|
|
cvs.style.height = `${height}px`
|
|
|
|
document.getElementById("greeter-sim").appendChild(cvs)
|
|
|
|
const vec = (x = 0, y = 0, z = 0) => ({ x, y, z })
|
|
|
|
vec.set = (o, x = 0, y = 0, z = 0) => {
|
|
o.x = x
|
|
o.y = y
|
|
o.z = z
|
|
return o
|
|
}
|
|
|
|
const X = vec(1, 0, 0)
|
|
const Y = vec(0, 1, 0)
|
|
const Z = vec(0, 0, 1)
|
|
|
|
// orientation of camera
|
|
let theta, phi
|
|
|
|
// project v to the camera, output to o
|
|
function project(o, { x, y, z }) {
|
|
let ct = cos(theta), st = sin(theta)
|
|
let cp = cos(phi), sp = sin(phi)
|
|
let a = x * ct + y * st
|
|
return vec.set(o, y * ct - x * st, cp * z - sp * a, cp * a + sp * z)
|
|
}
|
|
|
|
// draw camera-facing section of sphere with normal v and offset o (-1 < o < 1)
|
|
const _p = vec()
|
|
function draw_section(n, o = 0) {
|
|
let { x, y, z } = project(_p, n) // project normal on camera
|
|
let a = atan2(y, x) // angle of projected normal -> angle of ellipse
|
|
let ry = sqrt(1 - o * o) // radius of section -> y-radius of ellipse
|
|
let rx = ry * abs(z) // x-radius of ellipse
|
|
let W = sqrt(x * x + y * y)
|
|
let sa = acos(clamp(-1, 1, o * (1 / W - W) / rx)) // ellipse start angle
|
|
let sb = z > 0 ? 2 * PI - sa : - sa // ellipse end angle
|
|
|
|
ctx.beginPath()
|
|
ctx.ellipse(x * o * RADIUS, y * o * RADIUS, rx * RADIUS, ry * RADIUS, a, sa, sb, z <= 0)
|
|
ctx.stroke()
|
|
}
|
|
|
|
const _n = vec()
|
|
function draw_arcs() {
|
|
for (let i = NB_SECTIONS; i--;) {
|
|
let a = i / NB_SECTIONS * Math.PI
|
|
draw_section(vec.set(_n, cos(a), sin(a)))
|
|
}
|
|
|
|
for (let i = NB_SECTIONS - 1; i--;) {
|
|
let a = (i + 1) / NB_SECTIONS * Math.PI
|
|
draw_section(Z, cos(a))
|
|
//draw_section(X, cos(a))
|
|
//draw_section(Y, cos(a))
|
|
}
|
|
}
|
|
|
|
|
|
ctx.lineCap = 'round'
|
|
ctx.scale(SCALE, SCALE)
|
|
|
|
function render() {
|
|
requestAnimationFrame(render)
|
|
|
|
theta = performance.now() / 24000 * PI
|
|
phi = cos(performance.now() / 12000 * PI)
|
|
|
|
// 1. change the basis of the canvas
|
|
ctx.save()
|
|
ctx.clearRect(0, 0, width, height)
|
|
ctx.translate(width >> 1, height >> 1)
|
|
ctx.scale(1, -1)
|
|
|
|
// 2. draw back arcs
|
|
ctx.lineWidth = LINE_WIDTH / 2
|
|
ctx.strokeStyle = secondCol
|
|
ctx.scale(-1, -1) // the trick is to flip the canvas
|
|
draw_arcs()
|
|
ctx.scale(-1, -1)
|
|
|
|
// 3. draw sphere border
|
|
ctx.strokeStyle = primaryCol
|
|
ctx.lineWidth = LINE_WIDTH + 2
|
|
ctx.beginPath()
|
|
ctx.arc(0, 0, RADIUS, 0, 2 * Math.PI)
|
|
ctx.stroke()
|
|
|
|
// 4. draw front arcs
|
|
ctx.lineWidth = LINE_WIDTH
|
|
ctx.strokeStyle = primaryCol
|
|
draw_arcs()
|
|
|
|
ctx.restore()
|
|
}
|
|
|
|
requestAnimationFrame(render)
|