Done some stuff

sphere.js

@@ -1,69 +1,63 @@
 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')
+const cvs = document.getElementById("cvs")
 const ctx = cvs.getContext('2d')
 
-const RADIUS             = 150
-const NB_SECTIONS        = 6
-const LINE_WIDTH         = 3
+const NB_SECTIONS = 6
+const SCALE = devicePixelRatio
 
-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`
+let RADIUS, width, height, LINE_WIDTH
 
-document.body.appendChild(cvs)
+const SPHERE_SIZE = 0.15 // % of viewport width
 
-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
+function resize() {
+  const vw = window.innerWidth * SPHERE_SIZE
+  RADIUS     = Math.round((vw - 20) / 2)
+  LINE_WIDTH = vw / 50  // adjust the divisor to taste
+  width  = RADIUS * 2 + 20
+  height = RADIUS * 2 + 20
+  cvs.width  = width  * SCALE
+  cvs.height = height * SCALE
+  cvs.style.width  = `${SPHERE_SIZE * 100}vw`
+  cvs.style.height = `${SPHERE_SIZE * 100}vw`
+  ctx.setTransform(SCALE, 0, 0, SCALE, 0, 0)
+  ctx.fillStyle = '#071c2dff'
+  ctx.lineCap   = 'round'
 }
 
-const X = vec(1, 0, 0)
-const Y = vec(0, 1, 0)
-const Z = vec(0, 0, 1)
+resize()
+window.addEventListener('resize', resize)
 
 // orientation of camera
 let theta, phi
 
+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 Z = vec(0, 0, 1)
+
 function project(o, {x, y, z}) {
   let ct = cos(theta), st = sin(theta)
   let cp = cos(phi),   sp = sin(phi)
-
-  // original projection
-  let a = x * ct + y * st
+  let a  = x * ct + y * st
   let px = y * ct - x * st
   let py = cp * z - sp * a
   let pz = cp * a + sp * z
-
-  // --- add subtle right tilt (KEY PART) ---
   let tilt = -0.2
   let cr = cos(tilt), sr = sin(tilt)
-
   let tx = cr * px - sr * pz
   let tz = sr * px + cr * pz
-
   return vec.set(o, tx, py, tz)
 }
 
-// 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 {x, y, z} = project(_p, n)
+  let a  = atan2(y, x)
+  let ry = sqrt(1 - o * o)
+  let rx = ry * abs(z)
   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
-
+  let sa = acos(clamp(-1, 1, o * (1 / W - W) / rx))
+  let sb = z > 0 ? 2 * PI - sa : -sa
   ctx.beginPath()
   ctx.ellipse(x * o * RADIUS, y * o * RADIUS, rx * RADIUS, ry * RADIUS, a, sa, sb, z <= 0)
   ctx.stroke()
@@ -71,67 +65,40 @@ function draw_section(n, o = 0) {
 
 const _n = vec()
 function draw_arcs() {
-  if (with_great_circles.checked)
-    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; i--;) {
+    let a = i / NB_SECTIONS * 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
+    let a = (i + 1) / NB_SECTIONS * PI
     draw_section(Z, cos(a))
-    if (with_sections.checked) {
-      draw_section(X, cos(a))
-      draw_section(Y, cos(a))
-    }
   }
 }
 
-const front_grad = ctx.createRadialGradient(0, 0, RADIUS * 2 / 3, 0, 0, RADIUS)
-const back_grad  = ctx.createRadialGradient(0, 0, RADIUS * 2 / 3, 0, 0, RADIUS)
-
-front_grad.addColorStop(0, '#8bc8feff')
-front_grad.addColorStop(1, '#8bc8feff')
-back_grad.addColorStop(1, '#8bc8feff')
-back_grad.addColorStop(0, '#8bc8feff')
-
 ctx.fillStyle = '#071c2dff'
 ctx.lineCap = 'round'
-ctx.scale(SCALE, SCALE)
 
 function render() {
   requestAnimationFrame(render)
-
   theta = performance.now() / 6000 * PI
   phi   = 1
-
-  // 1. change the basis of the canvas
   ctx.save()
-  ctx.fillRect(0, 0, width, height)
+  ctx.clearRect(0, 0, width, height)
   ctx.translate(width >> 1, height >> 1)
   ctx.scale(1, -1)
-
-  // 2. draw back arcs
-  if (with_back.checked) {
-    ctx.lineWidth = LINE_WIDTH / 2
-    ctx.strokeStyle = with_gradient.checked ? back_grad : '#8bc8feff'
-    ctx.scale(-1, -1) // the trick is to flip the canvas
-    draw_arcs()
-    ctx.scale(-1, -1)
-  }
-
-  // 3. draw sphere border
-  ctx.strokeStyle = with_gradient.checked ? '#8bc8feff' : '#8bc8feff'
+  ctx.lineWidth = LINE_WIDTH / 2
+  ctx.strokeStyle = '#8bc8feff'
+  ctx.scale(-1, -1)
+  draw_arcs()
+  ctx.scale(-1, -1)
+  ctx.strokeStyle = '#8bc8feff'
   ctx.lineWidth = LINE_WIDTH + 2
   ctx.beginPath()
-  ctx.arc(0, 0, RADIUS, 0, 2 * Math.PI)
+  ctx.arc(0, 0, RADIUS, 0, 2 * PI)
   ctx.stroke()
-
-  // 4. draw front arcs
   ctx.lineWidth = LINE_WIDTH
-  ctx.strokeStyle = with_gradient.checked ? front_grad : '#8bc8feff'
+  ctx.strokeStyle = '#8bc8feff'
   draw_arcs()
-
   ctx.restore()
 }