feat: Flat import of markdown repo
This is a flat (without history) import of (some of) the content from our markdown module. We've imported this without history because the repo contains our blog posts and showcases posts content prior to porting them to strapi. Since this contains many images, it would balloon the size of this repo to import the full history. Instead, please refer to the history of the (archived) markdown repo at: https://github.com/freesewing/markdown
This commit is contained in:
Joost De Cock
parent
1671a896b5
commit
b34a2ee2ed
6132 changed files with 244167 additions and 0 deletions
|
|
@ -0,0 +1,45 @@
|
|||
---
|
||||
title: 200|Shaping the straps
|
||||
---
|
||||
|
||||
Our straps should follow the neck opening, which isn't that hard to do. We just need to keep the control points of our curves at similar proportions. Which means, halfway between the start of the curve, and the corner of our rectangle.
|
||||
|
||||
<Note>
|
||||
|
||||
For this, you'll be using a new method: `Point.shiftFractionTowards()`. We've already
|
||||
used `Point.shift()` and there's also `Point.shiftTowards()` and `Point.shiftOutwards()`.
|
||||
As always, [the API docs](/reference/api/point/) have all the details.
|
||||
|
||||
</Note>
|
||||
|
||||
```js
|
||||
points.edgeLeft = new Point(points.topLeft.x, points.left.y);
|
||||
points.edgeRight = new Point(points.topRight.x, points.right.y);
|
||||
points.edgeTop = new Point(0, points.topLeft.y);
|
||||
|
||||
points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5);
|
||||
points.edgeRightCp = points.edgeLeftCp.flipX();
|
||||
points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards(
|
||||
points.topLeft,
|
||||
0.5
|
||||
);
|
||||
points.edgeTopRightCp = points.edgeTopLeftCp.flipX();
|
||||
```
|
||||
|
||||
Now, adapt our `rect` path so it's no longer a rectangle:
|
||||
|
||||
```js
|
||||
paths.rect = new Path()
|
||||
.move(points.edgeTop)
|
||||
.curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft)
|
||||
.line(points.bottomLeft)
|
||||
.line(points.bottomRight)
|
||||
.line(points.edgeRight)
|
||||
.curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop)
|
||||
.close();
|
||||
```
|
||||
|
||||
All of a sudden, things are starting to look like a bib:
|
||||
|
||||
<Example pattern="tutorial" part="step6" caption="Pretty good, but how are we going to fit it over the baby's head?" />
|
||||
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
---
|
||||
title: Shaping the straps
|
||||
order: 200
|
||||
---
|
||||
|
||||
Our straps should follow the neck opening, which isn't that hard to do.
|
||||
We just need to keep the control points of our curves at similar proportions.
|
||||
Which means, halfway between the start of the curve, and the corner of our rectangle.
|
||||
|
||||
<Note>
|
||||
|
||||
For this, you'll be using a new method: `Point.shiftFractionTowards()`. We've already
|
||||
used `Point.shift()` and there's also `Point.shiftTowards()` and `Point.shiftOutwards()`.
|
||||
As always, [the API docs](/reference/api/point/) have all the details.
|
||||
|
||||
</Note>
|
||||
|
||||
```js
|
||||
points.edgeLeft = new Point(points.topLeft.x, points.left.y);
|
||||
points.edgeRight = new Point(points.topRight.x, points.right.y);
|
||||
points.edgeTop = new Point(0, points.topLeft.y);
|
||||
|
||||
points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5);
|
||||
points.edgeRightCp = points.edgeLeftCp.flipX();
|
||||
points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards(
|
||||
points.topLeft,
|
||||
0.5
|
||||
);
|
||||
points.edgeTopRightCp = points.edgeTopLeftCp.flipX();
|
||||
```
|
||||
|
||||
Now, adapt our `rect` path so it's no longer a rectangle:
|
||||
|
||||
```js
|
||||
paths.rect = new Path()
|
||||
.move(points.edgeTop)
|
||||
.curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft)
|
||||
.line(points.bottomLeft)
|
||||
.line(points.bottomRight)
|
||||
.line(points.edgeRight)
|
||||
.curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop)
|
||||
.close();
|
||||
```
|
||||
|
||||
All of a sudden, things are starting to look like a bib:
|
||||
|
||||
<Example pattern="tutorial" part="step6" caption="Pretty good, but how are we going to fit it over the baby's head?" />
|
||||
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
---
|
||||
title: 200|Shaping the straps
|
||||
---
|
||||
|
||||
Our straps should follow the neck opening, which isn't that hard to do. We just need to keep the control points of our curves at similar proportions. Which means, halfway between the start of the curve, and the corner of our rectangle.
|
||||
|
||||
<Note>
|
||||
|
||||
For this, you'll be using a new method: `Point.shiftFractionTowards()`. We've already
|
||||
used `Point.shift()` and there's also `Point.shiftTowards()` and `Point.shiftOutwards()`.
|
||||
As always, [the API docs](/reference/api/point/) have all the details.
|
||||
|
||||
</Note>
|
||||
|
||||
```js
|
||||
points.edgeLeft = new Point(points.topLeft.x, points.left.y);
|
||||
points.edgeRight = new Point(points.topRight.x, points.right.y);
|
||||
points.edgeTop = new Point(0, points.topLeft.y);
|
||||
|
||||
points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5);
|
||||
points.edgeRightCp = points.edgeLeftCp.flipX();
|
||||
points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards(
|
||||
points.topLeft,
|
||||
0.5
|
||||
);
|
||||
points.edgeTopRightCp = points.edgeTopLeftCp.flipX();
|
||||
```
|
||||
|
||||
Now, adapt our `rect` path so it's no longer a rectangle:
|
||||
|
||||
```js
|
||||
paths.rect = new Path()
|
||||
.move(points.edgeTop)
|
||||
.curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft)
|
||||
.line(points.bottomLeft)
|
||||
.line(points.bottomRight)
|
||||
.line(points.edgeRight)
|
||||
.curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop)
|
||||
.close();
|
||||
```
|
||||
|
||||
All of a sudden, things are starting to look like a bib:
|
||||
|
||||
<Example pattern="tutorial" part="step6" caption="Pretty good, but how are we going to fit it over the baby's head?" />
|
||||
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
---
|
||||
title: 200|Shaping the straps
|
||||
---
|
||||
|
||||
Nos attaches devraient suivre l'encolure, ce qui n'est pas difficile à faire. Il nous faut juste nous assurer que les points de contrôle de nos courbes aient des proportions similaires. Ce qui signifie, à la moitié entre le début de la courbe et le coin de notre rectangle.
|
||||
|
||||
<Note>
|
||||
|
||||
For this, you'll be using a new method: `Point.shiftFractionTowards()`. We've already
|
||||
used `Point.shift()` and there's also `Point.shiftTowards()` and `Point.shiftOutwards()`.
|
||||
As always, [the API docs](/reference/api/point/) have all the details.
|
||||
|
||||
</Note>
|
||||
|
||||
```js
|
||||
points.edgeLeft = new Point(points.topLeft.x, points.left.y);
|
||||
points.edgeRight = new Point(points.topRight.x, points.right.y);
|
||||
points.edgeTop = new Point(0, points.topLeft.y);
|
||||
|
||||
points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5);
|
||||
points.edgeRightCp = points.edgeLeftCp.flipX();
|
||||
points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards(
|
||||
points.topLeft,
|
||||
0.5
|
||||
);
|
||||
points.edgeTopRightCp = points.edgeTopLeftCp.flipX();
|
||||
```
|
||||
|
||||
Maintenant, adaptons notre chemin `rect` de façon à ce qu'il ne soit plus un rectangle :
|
||||
|
||||
```js
|
||||
paths.rect = new Path()
|
||||
.move(points.edgeTop)
|
||||
.curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft)
|
||||
.line(points.bottomLeft)
|
||||
.line(points.bottomRight)
|
||||
.line(points.edgeRight)
|
||||
.curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop)
|
||||
.close();
|
||||
```
|
||||
|
||||
Tout à coup, les choses commencent à prendre la forme d'un bavoir :
|
||||
|
||||
<Example pattern="tutorial" part="step6" caption="Pretty good, but how are we going to fit it over the baby's head?" />
|
||||
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
---
|
||||
title: 200|Shaping the straps
|
||||
---
|
||||
|
||||
De bandjes van het slabbetje moeten de halsopening volgen. Dat is niet zo moeilijk. We moeten alleen maar de controlepunten van de curves op vergelijkbare proporties behouden. Dus halverwege het begin van de curve, en aan de hoek van onze rechthoek.
|
||||
|
||||
<Note>
|
||||
|
||||
For this, you'll be using a new method: `Point.shiftFractionTowards()`. We've already
|
||||
used `Point.shift()` and there's also `Point.shiftTowards()` and `Point.shiftOutwards()`.
|
||||
As always, [the API docs](/reference/api/point/) have all the details.
|
||||
|
||||
</Note>
|
||||
|
||||
```js
|
||||
points.edgeLeft = new Point(points.topLeft.x, points.left.y);
|
||||
points.edgeRight = new Point(points.topRight.x, points.right.y);
|
||||
points.edgeTop = new Point(0, points.topLeft.y);
|
||||
|
||||
points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5);
|
||||
points.edgeRightCp = points.edgeLeftCp.flipX();
|
||||
points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards(
|
||||
points.topLeft,
|
||||
0.5
|
||||
);
|
||||
points.edgeTopRightCp = points.edgeTopLeftCp.flipX();
|
||||
```
|
||||
|
||||
Pas nu het `rect`-pad aan zodat het geen rechthoek meer is:
|
||||
|
||||
```js
|
||||
paths.rect = new Path()
|
||||
.move(points.edgeTop)
|
||||
.curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft)
|
||||
.line(points.bottomLeft)
|
||||
.line(points.bottomRight)
|
||||
.line(points.edgeRight)
|
||||
.curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop)
|
||||
.close();
|
||||
```
|
||||
|
||||
Plots begint het er echt als een slabbetje uit te zien:
|
||||
|
||||
<Example pattern="tutorial" part="step6" caption="Pretty good, but how are we going to fit it over the baby's head?" />
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue