1
0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-20 15:32:09 +02:00

let's unbreak interactive graphics

This commit is contained in:
Pomax
2017-04-02 22:23:59 -07:00
parent 45d80088f4
commit 37f55c0c51
10 changed files with 50582 additions and 102 deletions

View File

@@ -101,14 +101,14 @@ And the distance between these two is the standard Euclidean distance:
So, what does this distance function look like when we plot it for a number of ranges for the angle φ, such as a half circle, quarter circle and eighth circle?
<table><tbody><tr><td>
<img src="images/arc-q-pi.gif" height="190px"/>
<img src="images/arc-q-pi.gif" height="190"/>
plotted for 0 ≤ φ ≤ π:
</td><td>
<img src="images/arc-q-pi2.gif" height="187px"/>
<img src="images/arc-q-pi2.gif" height="187"/>
plotted for 0 ≤ φ ≤ ½π:
</td><td>
{ this.props.showhref ? "http://www.wolframalpha.com/input/?i=plot+sqrt%28%281%2F4+*+%28sin%28x%29+%2B+2tan%28x%2F2%29%29+-+sin%28x%2F2%29%29%5E2+%2B+%282sin%5E4%28x%2F4%29%29%5E2%29+for+0+%3C%3D+x+%3C%3D+pi%2F4" : null }
<img src="images/arc-q-pi4.gif" height="174px"/>
<img src="images/arc-q-pi4.gif" height="174"/>
plotted for 0 ≤ φ ≤ ¼π:
</td></tr></tbody></table>

View File

@@ -21,13 +21,13 @@ Unlike for the quadratic curve, we can't use <i>t=0.5</i> as our reference point
So instead of walking you through the derivation for that value, let's simply take that <i>t</i> value and see what the error is for circular arcs with an angle ranging from 0 to 2π:
<table><tbody><tr><td>
<img src="images/arc-c-2pi.gif" height="187px"/>
<img src="images/arc-c-2pi.gif" height="187"/>
plotted for 0 ≤ φ ≤ 2π:
</td><td>
<img src="images/arc-c-pi.gif" height="187px"/>
<img src="images/arc-c-pi.gif" height="187"/>
plotted for 0 ≤ φ ≤ π:
</td><td>
<img src="images/arc-c-pi2.gif" height="187px"/>
<img src="images/arc-c-pi2.gif" height="187"/>
plotted for 0 ≤ φ ≤ ½π:
</td></tr></tbody></table>

View File

@@ -21,19 +21,19 @@ Once we have all the new poly-Bézier curves, we run the first step of the desir
<table className="sketch"><tbody><tr>
<td className="labeled-image">
<img src="images/op_base.gif" height="169px"/>
<img src="images/op_base.gif" height="169"/>
Two overlapping shapes.
</td>
<td className="labeled-image">
<img src="images/op_union.gif" height="169px"/>
<img src="images/op_union.gif" height="169"/>
The unified region.
</td>
<td className="labeled-image">
<img src="images/op_intersection.gif" height="169px"/>
<img src="images/op_intersection.gif" height="169"/>
Their intersection.
</td>
<td className="labeled-image">
<img src="images/op_exclusion.gif" height="169px"/>
<img src="images/op_exclusion.gif" height="169"/>
Their exclusion regions.
</td>
</tr></tbody></table>