info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-30 03:30:34 +02:00
Code Issues Releases Wiki Activity

improved lazy loading

Browse Source
This commit is contained in:
Pomax
2020-09-13 13:18:15 -07:00
parent a626c2c8cb
commit c0a1207d67
27 changed files with 163 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
docs/index.html
View File

@@ -59,7 +59,7 @@
<link rel="stylesheet" href="./js/custom-element/graphics-element.css" />
<!-- make images lazy load much earlier -->
<script src="./js/site/faster-lazy-loading.js" type="module" async defer></script>
<script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
</head>
<body>
@@ -5344,7 +5344,7 @@ for p = 1 to points.length-3 (inclusive):
<img
class="LaTeX SVG"
src="./images/chapters/circles_cubic/a4f0dafbfe80c88723c3cc22277a9682.svg"
width="175px"
width="189px"
height="40px"
loading="lazy"
/>
@@ -5356,19 +5356,19 @@ for p = 1 to points.length-3 (inclusive):
<img
class="LaTeX SVG"
src="./images/chapters/circles_cubic/dfb83eec053c30e0a41b0a52aba24cd4.svg"
width="113px"
width="117px"
height="40px"
loading="lazy"
/>
<p>where "a" is some scaling factor, and:</p>
<p>where "a" is some scaling factor we'll need to find the expression for, and:</p>
<img
class="LaTeX SVG"
src="./images/chapters/circles_cubic/e75a848f5f8aead495e35175e2955e06.svg"
width="163px"
src="./images/chapters/circles_cubic/14c238eb17045cda3205c6ce9944004c.svg"
width="157px"
height="40px"
loading="lazy"
/>
<p>where "b" is also some scaling factor.</p>
<p>using the same scaling factor, because circular arcs are symmetrical, so our approximation will need to be symmetrical, too.</p>
<p>
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):
<img
class="LaTeX SVG"
src="./images/chapters/circles_cubic/3189cac1ddac07c1487e1e51740ecc88.svg"
width="397px"
height="40px"
width="408px"
height="36px"
loading="lazy"
/>
<p>
@@ -5413,8 +5413,8 @@ for p = 1 to points.length-3 (inclusive):
<img
class="LaTeX SVG"
src="./images/chapters/circles_cubic/fe32474b4616ee9478e1308308f1b6bf.svg"
width="188px"
height="32px"
width="197px"
height="31px"
loading="lazy"
/>
<p>
@@ -5424,8 +5424,8 @@ for p = 1 to points.length-3 (inclusive):
<img
class="LaTeX SVG"
src="./images/chapters/circles_cubic/0364731626a530c8a9b30f424ada53c5.svg"
width="261px"
height="67px"
width="267px"
height="59px"
loading="lazy"
/>
<p>
@@ -5435,15 +5435,15 @@ for p = 1 to points.length-3 (inclusive):
<img
class="LaTeX SVG"
src="./images/chapters/circles_cubic/ee08d86b7497c7ab042ee899bf15d453.svg"
width="397px"
height="48px"
width="403px"
height="43px"
loading="lazy"
/>
<img
class="LaTeX SVG"
src="./images/chapters/circles_cubic/195790bae7de813aec342ea82b5d8781.svg"
width="211px"
height="47px"
width="223px"
height="41px"
loading="lazy"
/>
<p>
@@ -5453,8 +5453,8 @@ for p = 1 to points.length-3 (inclusive):
<img
class="LaTeX SVG"
src="./images/chapters/circles_cubic/178a838274748439778e2a29f5a27d0b.svg"
width="252px"
height="56px"
width="259px"
height="52px"
loading="lazy"
/>
<p>
@@ -5463,9 +5463,9 @@ for p = 1 to points.length-3 (inclusive):
</p>
<img
class="LaTeX SVG"
src="./images/chapters/circles_cubic/49dbf244d50c787a4ab18694488d9b69.svg"
width="524px"
height="79px"
src="./images/chapters/circles_cubic/1ab9827727b8f7fe466a124b0e1867ce.svg"
width="547px"
height="131px"
loading="lazy"
/>
<p>And that's it, we have all four points now for an approximation of an arbitrary circular arc with angle φ.</p>
@@ -5475,7 +5475,7 @@ for p = 1 to points.length-3 (inclusive):
<img
class="LaTeX SVG"
src="./images/chapters/circles_cubic/e2258660a796dcd6189a6f5e14326dad.svg"
width="205px"
width="216px"
height="40px"
loading="lazy"
/>
@@ -5483,7 +5483,7 @@ for p = 1 to points.length-3 (inclusive):
<img
class="LaTeX SVG"
src="./images/chapters/circles_cubic/acbc5efb06bc34571ccc0322376e0b9b.svg"
width="321px"
width="339px"
height="40px"
loading="lazy"
/>
@@ -5494,15 +5494,15 @@ for p = 1 to points.length-3 (inclusive):
<img
class="LaTeX SVG"
src="./images/chapters/circles_cubic/877f9c217c51c0087be751a7580ed459.svg"
width="412px"
height="33px"
width="420px"
height="25px"
loading="lazy"
/>
<p>Which, in decimal values, rounded to six significant digits, is:</p>
<img
class="LaTeX SVG"
src="./images/chapters/circles_cubic/05d36e051a38905dcb81e65db8261f24.svg"
width="412px"
width="427px"
height="16px"
loading="lazy"
/>
@@ -5513,7 +5513,7 @@ for p = 1 to points.length-3 (inclusive):
<graphics-element title="Cubic Bézier circle approximation" width="340" height="300" src="./chapters/circles_cubic/circle.js">
<fallback-image>
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
<img width="340px" height="300px" src="images\chapters\circles_cubic\8676cce0d4394ae095c7e50be1238aa0.png" />
<img width="340px" height="300px" src="images\chapters\circles_cubic\63f35fb58d3571200ac6ccea0384b9d7.png" />
<label></label> </fallback-image
></graphics-element>
</section>