diff --git a/docs/chapters/circles_cubic/circle.js b/docs/chapters/circles_cubic/circle.js index 32dc4ce3..d18cb30f 100644 --- a/docs/chapters/circles_cubic/circle.js +++ b/docs/chapters/circles_cubic/circle.js @@ -1,11 +1,11 @@ -let curve, r; +let curve, r, kappa = 0.5519768352769461; setup() { r = 100; curve = new Bezier(this, [ { x: r, y: 0 }, - { x: r, y: 0.55228 * r }, - { x: 0.55228 * r, y: r}, + { x: r, y: kappa * r }, + { x: kappa * r, y: r}, { x: 0, y: r } ]); } @@ -38,12 +38,12 @@ draw() { curve.drawCurve(`#CC00CC40`); setColor(`#CC00CC`); - line(r, 0, r, -0.55228 * r); - circle(r, -0.55228 * r, 2); - text(`reflected`, r + 7, -0.55228 * r + 3, LEFT); + line(r, 0, r, -kappa * r); + circle(r, -kappa * r, 2); + text(`reflected`, r + 7, -kappa * r + 3, LEFT); setColor(`#CC00CC40`); - line(0, -r, 0.55228 * r, -r); + line(0, -r, kappa * r, -r); curve.points.forEach(p => { p.x = -p.x; @@ -52,12 +52,12 @@ draw() { curve.drawCurve(`#0000CC40`); setColor(`#0000CC`); - line(0, r, -0.55228 * r, r); - circle(-0.55228 * r, r, 2); - text(`reflected`, -0.55228 * r - 5, r + 3, RIGHT); + line(0, r, -kappa * r, r); + circle(-kappa * r, r, 2); + text(`reflected`, -kappa * r - 5, r + 3, RIGHT); setColor(`#0000CC40`); - line(-r, 0, -r, 0.55228 * r); + line(-r, 0, -r, kappa * r); curve.points.forEach(p => p.y = -p.y); curve.drawCurve(`#00000040`); diff --git a/docs/chapters/circles_cubic/content.en-GB.md b/docs/chapters/circles_cubic/content.en-GB.md index 4d6af720..de372d2f 100644 --- a/docs/chapters/circles_cubic/content.en-GB.md +++ b/docs/chapters/circles_cubic/content.en-GB.md @@ -47,13 +47,13 @@ But we now need to find two control points, rather than one. If we want the deri C_1 = S + a \cdot \begin{pmatrix} 0 \\ 1 \end{pmatrix} \] -where "a" is some scaling factor, and: +where "a" is some scaling factor we'll need to find the expression for, and: \[ - C_2 = E + b \cdot \begin{pmatrix} -sin(φ) \\ cos(φ) \end{pmatrix} + C_2 = E + a \cdot \begin{pmatrix} sin(φ) \\ cos(φ) \end{pmatrix} \] -where "b" is also some scaling factor. +using the same scaling factor, because circular arcs are symmetrical, so our approximation will need to be symmetrical, too. Starting with this information, we slowly maths our way to success, but I won't lie: the maths for this is pretty trig-heavy, and it's easy to get lost if you remember (or know!) some of the core trigonometric identities, so if you just want to see the final result just skip past the next section! @@ -121,7 +121,10 @@ And after this tedious detour to find the coordinate for C1, we can f \[ \begin{array}{l} - E'_x = -sin(φ) \ , \ E'_y = cos(φ) \ , \ ||E'|| = \sqrt{ (-sin(φ))^2 + cos^2(φ)} = 1 \ , \\ + E'_x = -sin(φ) \ ,\\ + E'_y = cos(φ) \ , \\ + ||E'|| = \sqrt{ (-sin(φ))^2 + cos^2(φ)} = 1 \ , \\ + \\ \left\{\begin{array}{l} C_2x = E_x - C_{1y} \cdot \frac{E_x'}{||E'||} = cos(φ) + C_{1y} \cdot sin(φ) diff --git a/docs/images/chapters/circles_cubic/0364731626a530c8a9b30f424ada53c5.svg b/docs/images/chapters/circles_cubic/0364731626a530c8a9b30f424ada53c5.svg index 08f5460d..dfb2ece0 100644 --- a/docs/images/chapters/circles_cubic/0364731626a530c8a9b30f424ada53c5.svg +++ b/docs/images/chapters/circles_cubic/0364731626a530c8a9b30f424ada53c5.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/images/chapters/circles_cubic/05d36e051a38905dcb81e65db8261f24.svg b/docs/images/chapters/circles_cubic/05d36e051a38905dcb81e65db8261f24.svg index 6c0e7823..6d2d3b15 100644 --- a/docs/images/chapters/circles_cubic/05d36e051a38905dcb81e65db8261f24.svg +++ b/docs/images/chapters/circles_cubic/05d36e051a38905dcb81e65db8261f24.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/images/chapters/circles_cubic/14c238eb17045cda3205c6ce9944004c.svg b/docs/images/chapters/circles_cubic/14c238eb17045cda3205c6ce9944004c.svg new file mode 100644 index 00000000..fd34be51 --- /dev/null +++ b/docs/images/chapters/circles_cubic/14c238eb17045cda3205c6ce9944004c.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/images/chapters/circles_cubic/178a838274748439778e2a29f5a27d0b.svg b/docs/images/chapters/circles_cubic/178a838274748439778e2a29f5a27d0b.svg index 7de57979..3eadf6f1 100644 --- a/docs/images/chapters/circles_cubic/178a838274748439778e2a29f5a27d0b.svg +++ b/docs/images/chapters/circles_cubic/178a838274748439778e2a29f5a27d0b.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/images/chapters/circles_cubic/195790bae7de813aec342ea82b5d8781.svg b/docs/images/chapters/circles_cubic/195790bae7de813aec342ea82b5d8781.svg index a4cb1fd1..4a9ef33b 100644 --- a/docs/images/chapters/circles_cubic/195790bae7de813aec342ea82b5d8781.svg +++ b/docs/images/chapters/circles_cubic/195790bae7de813aec342ea82b5d8781.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/images/chapters/circles_cubic/1ab9827727b8f7fe466a124b0e1867ce.svg b/docs/images/chapters/circles_cubic/1ab9827727b8f7fe466a124b0e1867ce.svg new file mode 100644 index 00000000..3d4afb89 --- /dev/null +++ b/docs/images/chapters/circles_cubic/1ab9827727b8f7fe466a124b0e1867ce.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/images/chapters/circles_cubic/3189cac1ddac07c1487e1e51740ecc88.svg b/docs/images/chapters/circles_cubic/3189cac1ddac07c1487e1e51740ecc88.svg index 8ebfa042..50162924 100644 --- a/docs/images/chapters/circles_cubic/3189cac1ddac07c1487e1e51740ecc88.svg +++ b/docs/images/chapters/circles_cubic/3189cac1ddac07c1487e1e51740ecc88.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/images/chapters/circles_cubic/49dbf244d50c787a4ab18694488d9b69.svg b/docs/images/chapters/circles_cubic/49dbf244d50c787a4ab18694488d9b69.svg deleted file mode 100644 index 84fc71e6..00000000 --- a/docs/images/chapters/circles_cubic/49dbf244d50c787a4ab18694488d9b69.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/images/chapters/circles_cubic/63f35fb58d3571200ac6ccea0384b9d7.png b/docs/images/chapters/circles_cubic/63f35fb58d3571200ac6ccea0384b9d7.png new file mode 100644 index 00000000..b2f6adb9 Binary files /dev/null and b/docs/images/chapters/circles_cubic/63f35fb58d3571200ac6ccea0384b9d7.png differ diff --git a/docs/images/chapters/circles_cubic/8676cce0d4394ae095c7e50be1238aa0.png b/docs/images/chapters/circles_cubic/8676cce0d4394ae095c7e50be1238aa0.png deleted file mode 100644 index e50b011d..00000000 Binary files a/docs/images/chapters/circles_cubic/8676cce0d4394ae095c7e50be1238aa0.png and /dev/null differ diff --git a/docs/images/chapters/circles_cubic/877f9c217c51c0087be751a7580ed459.svg b/docs/images/chapters/circles_cubic/877f9c217c51c0087be751a7580ed459.svg index b5d632c4..6baa4661 100644 --- a/docs/images/chapters/circles_cubic/877f9c217c51c0087be751a7580ed459.svg +++ b/docs/images/chapters/circles_cubic/877f9c217c51c0087be751a7580ed459.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/images/chapters/circles_cubic/a4f0dafbfe80c88723c3cc22277a9682.svg b/docs/images/chapters/circles_cubic/a4f0dafbfe80c88723c3cc22277a9682.svg index a5458b6c..3730c296 100644 --- a/docs/images/chapters/circles_cubic/a4f0dafbfe80c88723c3cc22277a9682.svg +++ b/docs/images/chapters/circles_cubic/a4f0dafbfe80c88723c3cc22277a9682.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/images/chapters/circles_cubic/acbc5efb06bc34571ccc0322376e0b9b.svg b/docs/images/chapters/circles_cubic/acbc5efb06bc34571ccc0322376e0b9b.svg index 7b252622..bb89e7c5 100644 --- a/docs/images/chapters/circles_cubic/acbc5efb06bc34571ccc0322376e0b9b.svg +++ b/docs/images/chapters/circles_cubic/acbc5efb06bc34571ccc0322376e0b9b.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/images/chapters/circles_cubic/dfb83eec053c30e0a41b0a52aba24cd4.svg b/docs/images/chapters/circles_cubic/dfb83eec053c30e0a41b0a52aba24cd4.svg index 9299a7ca..c26acc14 100644 --- a/docs/images/chapters/circles_cubic/dfb83eec053c30e0a41b0a52aba24cd4.svg +++ b/docs/images/chapters/circles_cubic/dfb83eec053c30e0a41b0a52aba24cd4.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/images/chapters/circles_cubic/e2258660a796dcd6189a6f5e14326dad.svg b/docs/images/chapters/circles_cubic/e2258660a796dcd6189a6f5e14326dad.svg index 12aa5b8a..6c823fc5 100644 --- a/docs/images/chapters/circles_cubic/e2258660a796dcd6189a6f5e14326dad.svg +++ b/docs/images/chapters/circles_cubic/e2258660a796dcd6189a6f5e14326dad.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/images/chapters/circles_cubic/e75a848f5f8aead495e35175e2955e06.svg b/docs/images/chapters/circles_cubic/e75a848f5f8aead495e35175e2955e06.svg deleted file mode 100644 index 3f8655ad..00000000 --- a/docs/images/chapters/circles_cubic/e75a848f5f8aead495e35175e2955e06.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/images/chapters/circles_cubic/ee08d86b7497c7ab042ee899bf15d453.svg b/docs/images/chapters/circles_cubic/ee08d86b7497c7ab042ee899bf15d453.svg index 426522ad..7cd57442 100644 --- a/docs/images/chapters/circles_cubic/ee08d86b7497c7ab042ee899bf15d453.svg +++ b/docs/images/chapters/circles_cubic/ee08d86b7497c7ab042ee899bf15d453.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/images/chapters/circles_cubic/fe32474b4616ee9478e1308308f1b6bf.svg b/docs/images/chapters/circles_cubic/fe32474b4616ee9478e1308308f1b6bf.svg index dea287d7..a3533922 100644 --- a/docs/images/chapters/circles_cubic/fe32474b4616ee9478e1308308f1b6bf.svg +++ b/docs/images/chapters/circles_cubic/fe32474b4616ee9478e1308308f1b6bf.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index cf0a30ac..bdc3d6a0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -59,7 +59,7 @@ - + @@ -5344,7 +5344,7 @@ for p = 1 to points.length-3 (inclusive): @@ -5356,19 +5356,19 @@ for p = 1 to points.length-3 (inclusive): -

where "a" is some scaling factor, and:

+

where "a" is some scaling factor we'll need to find the expression for, and:

-

where "b" is also some scaling factor.

+

using the same scaling factor, because circular arcs are symmetrical, so our approximation will need to be symmetrical, too.

Starting with this information, we slowly maths our way to success, but I won't lie: the maths for this is pretty trig-heavy, and it's easy to get lost if you remember (or know!) some of the core trigonometric identities, so if you just want to see the final result just @@ -5401,8 +5401,8 @@ for p = 1 to points.length-3 (inclusive):

@@ -5413,8 +5413,8 @@ for p = 1 to points.length-3 (inclusive):

@@ -5424,8 +5424,8 @@ for p = 1 to points.length-3 (inclusive):

@@ -5435,15 +5435,15 @@ for p = 1 to points.length-3 (inclusive):

@@ -5453,8 +5453,8 @@ for p = 1 to points.length-3 (inclusive):

@@ -5463,9 +5463,9 @@ for p = 1 to points.length-3 (inclusive):

And that's it, we have all four points now for an approximation of an arbitrary circular arc with angle φ.

@@ -5475,7 +5475,7 @@ for p = 1 to points.length-3 (inclusive): @@ -5483,7 +5483,7 @@ for p = 1 to points.length-3 (inclusive): @@ -5494,15 +5494,15 @@ for p = 1 to points.length-3 (inclusive):

Which, in decimal values, rounded to six significant digits, is:

@@ -5513,7 +5513,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + diff --git a/docs/ja-JP/index.html b/docs/ja-JP/index.html index a38eb186..40399b7a 100644 --- a/docs/ja-JP/index.html +++ b/docs/ja-JP/index.html @@ -60,7 +60,7 @@ - + @@ -5179,7 +5179,7 @@ for p = 1 to points.length-3 (inclusive): @@ -5191,19 +5191,19 @@ for p = 1 to points.length-3 (inclusive): -

where "a" is some scaling factor, and:

+

where "a" is some scaling factor we'll need to find the expression for, and:

-

where "b" is also some scaling factor.

+

using the same scaling factor, because circular arcs are symmetrical, so our approximation will need to be symmetrical, too.

Starting with this information, we slowly maths our way to success, but I won't lie: the maths for this is pretty trig-heavy, and it's easy to get lost if you remember (or know!) some of the core trigonometric identities, so if you just want to see the final result just @@ -5236,8 +5236,8 @@ for p = 1 to points.length-3 (inclusive):

@@ -5248,8 +5248,8 @@ for p = 1 to points.length-3 (inclusive):

@@ -5259,8 +5259,8 @@ for p = 1 to points.length-3 (inclusive):

@@ -5270,15 +5270,15 @@ for p = 1 to points.length-3 (inclusive):

@@ -5288,8 +5288,8 @@ for p = 1 to points.length-3 (inclusive):

@@ -5298,9 +5298,9 @@ for p = 1 to points.length-3 (inclusive):

And that's it, we have all four points now for an approximation of an arbitrary circular arc with angle φ.

@@ -5310,7 +5310,7 @@ for p = 1 to points.length-3 (inclusive): @@ -5318,7 +5318,7 @@ for p = 1 to points.length-3 (inclusive): @@ -5329,15 +5329,15 @@ for p = 1 to points.length-3 (inclusive):

Which, in decimal values, rounded to six significant digits, is:

@@ -5348,7 +5348,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + diff --git a/docs/js/site/better-lazy-loading.js b/docs/js/site/better-lazy-loading.js new file mode 100644 index 00000000..9c0897ee --- /dev/null +++ b/docs/js/site/better-lazy-loading.js @@ -0,0 +1,38 @@ +/** + * This file takes any with loading="lazy" and rewrites it + * so that it starts to load much earlier than browsers would load + * them, so that they're already done by the time the user gets to + * them. This (mostly) prevents the whole "you can see the image + * loading in", which is super shitty UX. + */ + +const images = Array.from( + document.querySelectorAll(`img.LaTeX.SVG[loading=lazy]`) +); + +// Deactivate the images +images.forEach((img) => { + img.dataset.src = img.src; + img.src = ``; + img.removeAttribute(`loading`); +}); + +// Then make their activation conditional on whether +// they're close to being on-screen or not. +let observer = new IntersectionObserver( + function (entries) { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const img = entry.target; + img.src = img.dataset.src; + const pos = images.indexOf(img); + images.splice(pos, 1); + } + }); + }, + { rootMargin: `100%` } +); + +images.forEach((image) => { + observer.observe(image); +}); diff --git a/docs/js/site/disqus.js b/docs/js/site/disqus.js index 7e4fac84..b60a028d 100644 --- a/docs/js/site/disqus.js +++ b/docs/js/site/disqus.js @@ -1,17 +1,13 @@ -const comments = document.getElementById(`disqus_thread`); - -document.addEventListener("scroll", scrollHandler, { passive: true }); - -function scrollHandler() { - var bbox = comments.getBoundingClientRect(); - var top = bbox.top; - var limit = window.innerHeight; - if (top < limit) { - loadDisqus(); - } -} +new IntersectionObserver(function (entries) { + entries.forEach((entry) => { + if (entry.isIntersecting) { + loadDisqus(); + } + }); +}).observe(document.getElementById(`disqus_thread`)); let loadDisqus = () => { + loadDisqus = () => {}; console.log(`loading Disqus comments`); globalThis.disqus_config = function () { @@ -24,9 +20,4 @@ let loadDisqus = () => { script.async = true; script.setAttribute("data-timestamp", Date.now()); document.head.appendChild(script); - - loadDisqus = () => {}; - document.removeEventListener("scroll", scrollHandler); }; - -scrollHandler(); diff --git a/docs/js/site/faster-lazy-loading.js b/docs/js/site/faster-lazy-loading.js deleted file mode 100644 index 476bda0e..00000000 --- a/docs/js/site/faster-lazy-loading.js +++ /dev/null @@ -1,77 +0,0 @@ -/** - * This file takes any with loading="lazy" and rewrites it - * so that it starts to load much earlier than browsers would load - * them, so that they're already done by the time the user gets to - * them. This prevents the ridiculous "don't start loading the img - * until we're already looking at the empty bounding box". - */ - -const images = Array.from( - document.querySelectorAll(`img.LaTeX.SVG[loading=lazy]`) -); - -// First, make images inert. As this happens before the document -// becomes active, this prevents images from loading anything. -// -// Also, by having JS deactivate the images, anyone running with -// JS disabled will still see images load in properly. In fact, -// the "lazy" attribute gets ignored when JS is disabled and all -// images will just load in immediately. - -images.forEach((img) => { - // non-negotiable order of operations: - img.dataset.src = img.src; - img.src = ``; - img.removeAttribute(`loading`); -}); - -// Then tack on the functionality that reactivates them based on viewport distance. - -let lock = false; -let retry = false; - -/** - * Test all images during scroll, in a way that doesn't hang the browser. - */ -function testImages() { - if (lock) { - if (retry) retry = clearTimeout(retry); - retry = setTimeout(testImages, 200); - } - - lock = true; - - let height = document.documentElement.clientHeight; - - for (let pos = images.length - 1; pos >= 0; pos--) { - test(images[pos], pos, height); - } - - if (images.length === 0) { - window.removeEventListener("scroll", testImages); - if (retry) clearTimeout(retry); - } - - lock = false; -} - -/** - * Test individual images for whether or not they should load. - */ -function test(img, pos, height) { - let top = img.getBoundingClientRect().top; - top = top < height; - - let bottom = img.getBoundingClientRect().bottom; - bottom = bottom > -height; - - if (top || bottom) { - img.src = img.dataset.src; - images.splice(pos, 1); - } -} - -/** - * Remember to listen for scroll passively. If you don't, bad things happen. - */ -window.addEventListener("scroll", testImages, { passive: true }); diff --git a/docs/zh-CN/index.html b/docs/zh-CN/index.html index fcd57e40..a38a9fc1 100644 --- a/docs/zh-CN/index.html +++ b/docs/zh-CN/index.html @@ -60,7 +60,7 @@ - + @@ -5151,7 +5151,7 @@ for p = 1 to points.length-3 (inclusive): @@ -5163,19 +5163,19 @@ for p = 1 to points.length-3 (inclusive): -

where "a" is some scaling factor, and:

+

where "a" is some scaling factor we'll need to find the expression for, and:

-

where "b" is also some scaling factor.

+

using the same scaling factor, because circular arcs are symmetrical, so our approximation will need to be symmetrical, too.

Starting with this information, we slowly maths our way to success, but I won't lie: the maths for this is pretty trig-heavy, and it's easy to get lost if you remember (or know!) some of the core trigonometric identities, so if you just want to see the final result just @@ -5208,8 +5208,8 @@ for p = 1 to points.length-3 (inclusive):

@@ -5220,8 +5220,8 @@ for p = 1 to points.length-3 (inclusive):

@@ -5231,8 +5231,8 @@ for p = 1 to points.length-3 (inclusive):

@@ -5242,15 +5242,15 @@ for p = 1 to points.length-3 (inclusive):

@@ -5260,8 +5260,8 @@ for p = 1 to points.length-3 (inclusive):

@@ -5270,9 +5270,9 @@ for p = 1 to points.length-3 (inclusive):

And that's it, we have all four points now for an approximation of an arbitrary circular arc with angle φ.

@@ -5282,7 +5282,7 @@ for p = 1 to points.length-3 (inclusive): @@ -5290,7 +5290,7 @@ for p = 1 to points.length-3 (inclusive): @@ -5301,15 +5301,15 @@ for p = 1 to points.length-3 (inclusive):

Which, in decimal values, rounded to six significant digits, is:

@@ -5320,7 +5320,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + diff --git a/src/index.template.html b/src/index.template.html index 5e0722e3..a857bdf1 100644 --- a/src/index.template.html +++ b/src/index.template.html @@ -50,7 +50,7 @@ - +