experimental tangents and normals

components/sections/control/content.en-GB.md

@@ -5,9 +5,9 @@ Bézier curves are (like all "splines") interpolation functions, meaning they ta
 The following graphs show the interpolation functions for quadratic and cubic curves, with "S" being the strength of a point's contribution to the total sum of the Bézier function. Click or click-drag to see the interpolation percentages for each curve-defining point at a specific <i>t</i> value.
 
 <div className="figure">
-  <Graphic inline={true} preset="simple" title="Quadratic interpolations"  draw={this.drawQuadraticLerp}/>
-  <Graphic inline={true} preset="simple" title="Cubic interpolations"      draw={this.drawCubicLerp}/>
-  <Graphic inline={true} preset="simple" title="15th order interpolations" draw={this.draw15thLerp}/>
+  <Graphic inline={true} title="Quadratic interpolations"  draw={this.drawQuadraticLerp}/>
+  <Graphic inline={true} title="Cubic interpolations"      draw={this.drawCubicLerp}/>
+  <Graphic inline={true} title="15th order interpolations" draw={this.draw15thLerp}/>
 </div>
 
 Also shown is the interpolation function for a 15<sup>th</sup> order Bézier function. As you can see, the start and end point contribute considerably more to the curve's shape than any other point in the control point set.
@@ -34,7 +34,7 @@ That looks complicated, but as it so happens, the "weights" are actually just th
 
 Which gives us the curve we saw at the top of the article:
 
-<Graphic preset="simple" title="Our cubic Bézier curve" setup={this.drawCubic} draw={this.drawCurve}/>
+<Graphic title="Our cubic Bézier curve" setup={this.drawCubic} draw={this.drawCurve}/>
 
 What else can we do with Bézier curves? Quite a lot, actually. The rest of this article covers a multitude of possible operations and algorithms that we can apply, and the tasks they achieve.
 

components/sections/control/content.ja-JP.md

@@ -5,9 +5,9 @@
 下のグラフは、2次ベジエ曲線や3次ベジエ曲線の補間関数を表しています。ここでSは、ベジエ関数全体に対しての、その点の寄与の大きさを示します。ある<i>t</i>において、ベジエ曲線を定義する各点の補間率がどのようになっているのか、クリックやドラッグをして確かめてみてください。
 
 <div className="figure">
-  <Graphic inline={true} preset="simple" title="2次の補間" draw={this.drawQuadraticLerp}/>
-  <Graphic inline={true} preset="simple" title="3次の補間" draw={this.drawCubicLerp}/>
-  <Graphic inline={true} preset="simple" title="15次の補間" draw={this.draw15thLerp}/>
+  <Graphic inline={true} title="2次の補間" draw={this.drawQuadraticLerp}/>
+  <Graphic inline={true} title="3次の補間" draw={this.drawCubicLerp}/>
+  <Graphic inline={true} title="15次の補間" draw={this.draw15thLerp}/>
 </div>
 
 あわせて、15次ベジエ関数における補間関数も示しています。始点と終点は他の制御点と比較して、曲線の形に対してかなり大きな影響を与えていることがわかります。
@@ -34,7 +34,7 @@
 
 この式からは、記事の冒頭に出てきた曲線が得られます。
 
-<Graphic preset="simple" title="あの3次ベジエ曲線" setup={this.drawCubic} draw={this.drawCurve}/>
+<Graphic title="あの3次ベジエ曲線" setup={this.drawCubic} draw={this.drawCurve}/>
 
 ベジエ曲線で、他にはどんなことができるでしょうか？実は、非常にたくさんのことが可能です。この記事の残りの部分では、実現可能な各種操作や適用可能なアルゴリズム、そしてこれによって達成できるタスクについて扱います。
 

components/sections/control/content.zh-CN.md

@@ -5,9 +5,9 @@
 下面的图形显示了二次曲线和三次曲线的差值方程，“S”代表了点对贝塞尔方程总和的贡献。点击或拖动点来看看在特定的<i>t</i>值时，每个曲线定义的点的插值百分比。
 
 <div className="figure">
-  <Graphic inline={true} preset="simple" title="二次插值"  draw={this.drawQuadraticLerp}/>
-  <Graphic inline={true} preset="simple" title="三次插值"      draw={this.drawCubicLerp}/>
-  <Graphic inline={true} preset="simple" title="15次插值" draw={this.draw15thLerp}/>
+  <Graphic inline={true} title="二次插值"  draw={this.drawQuadraticLerp}/>
+  <Graphic inline={true} title="三次插值"      draw={this.drawCubicLerp}/>
+  <Graphic inline={true} title="15次插值" draw={this.draw15thLerp}/>
 </div>
 
 上面有一张是15<sup>th</sup>阶的插值方程。如你所见，在所有控制点中，起点和终点对曲线形状的贡献比其他点更大些。
@@ -34,7 +34,7 @@
 
 这就是我们在文章开头看到的曲线：
 
-<Graphic preset="simple" title="我们的三次贝塞尔曲线" setup={this.drawCubic} draw={this.drawCurve}/>
+<Graphic title="我们的三次贝塞尔曲线" setup={this.drawCubic} draw={this.drawCurve}/>
 
 我们还能对贝塞尔曲线做些什么？实际上还有很多。文章接下来涉及到我们可能运用到的一系列操作和算法，以及它们可以完成的任务。