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

localization based on markdown

Browse Source
This commit is contained in:
Pomax
2017-02-13 17:27:52 -08:00
parent 59f4bea20b
commit f2eeab6a21
61 changed files with 862 additions and 27032 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/sections/introduction/content.en-GB.md Normal file
View File

@@ -0,0 +1,10 @@
# A lightning introduction
Let's start with the good stuff: when we're talking about Bézier curves, we're talking about the things that you can see in the following graphics. They run from some start point to some end point, with their curvature influenced by one or more "intermediate" control points. Now, because all the graphics on this page are interactive, go manipulate those curves a bit: click-drag the points, and see how their shape changes based on what you do.
<div className="figure">
<Graphic inline={true} title="Quadratic Bézier curves" setup={ this.drawQuadratic } draw={ this.drawCurve }/>
<Graphic inline={true} title="Cubic Bézier curves" setup={ this.drawCubic } draw={ this.drawCurve }/>
</div>
These curves are used a lot in computer aided design and computer aided manufacturing (CAD/CAM) applications, as well as in graphic design programs like Adobe Illustrator and Photoshop, Inkscape, the Gimp, etc. and in graphic technologies like scalable vector graphics (SVG) and OpenType fonts (ttf/otf). A lot of things use Bézier curves, so if you want to learn more about them... prepare to get your learn on!

29
components/sections/introduction/index.js
View File

@@ -1,11 +1,13 @@
var React = require("react");
var Graphic = require("../../Graphic.jsx");
var SectionHeader = require("../../SectionHeader.jsx");
var Locale = require("../../../lib/locale");
var locale = new Locale("en-GB");
var page = "introduction";
var Introduction = React.createClass({
getDefaultProps: function() {
return {
title: "A lightning introduction"
title: locale.getTitle(page)
};
},
@@ -27,26 +29,7 @@ var Introduction = React.createClass({
render: function() {
return (
<section>
<SectionHeader {...this.props} />
<p>Let's start with the good stuff: when we're talking about Bézier curves, we're talking about the
things that you can see in the following graphics. They run from some start point to some end point,
with their curvature influenced by one or more "intermediate" control points. Now, because all the
graphics on this page are interactive, go manipulate those curves a bit: click-drag the points,
and see how their shape changes based on what you do.</p>
<div className="figure">
<Graphic inline={true} title="Quadratic Bézier curves" setup={ this.drawQuadratic } draw={ this.drawCurve }/>
<Graphic inline={true} title="Cubic Bézier curves" setup={ this.drawCubic } draw={ this.drawCurve }/>
</div>
<p>These curves are used a lot in computer aided design and computer aided manufacturing (CAD/CAM)
applications, as well as in graphic design programs like Adobe Illustrator and Photoshop, Inkscape,
the Gimp, etc. and in graphic technologies like scalable vector graphics (SVG) and OpenType fonts
(ttf/otf). A lot of things use Bézier curves, so if you want to learn more about them... prepare
to get your learn on!</p>
</section>
<section>{ locale.getContent(page, this) }</section>
);
}
});