VSinerva/freesewing
1
0
Fork 0
Code Activity

feat: Flat import of markdown repo

Browse source 
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 2021-08-25 16:09:31 +02:00
parent 1671a896b5
commit b34a2ee2ed
6132 changed files with 244167 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

7
markdown/dev/howtos/design/en.md Normal file
View file

@ -0,0 +1,7 @@
---
title: Common design challenges
---
Below is a list of examples of how to implement common design challenges in code:
<ReadMore list />

87
markdown/dev/howtos/design/fit-sleeve/en.md Normal file
View file

@ -0,0 +1,87 @@
---
title: Adapt the sleevecap length to fit the armhole
for: developers
about: Shows how to adapt the length of the sleevecap to fit your armhole
---
<Note>
##### See this example in our source code
- [packages/bent/src/sleeve.js](https://github.com/freesewing/freesewing/blob/develop/packages/bent/src/sleeve.js)
</Note>
Fitting the sleevecap to the armhole means that we need to make sure the length
of the seams match.
A similar challenge is to fit the collar to the neck opening and so on.
For all of these situations where you have to create curved seams with matching
length, it's impossible to get it right from the first attempt.
Instead, we try, and then course-correct until we get it right, or close enough.
This pattern is rather common, and we will unpack an example from Bent below.
Before we dive in, here's a few things to keep in mind:
- In Javascript, you can create a function within your function and call it
- Bent extends Brian which sets both the `frontArmholeLength` and `backArmholeLength` values in the store with the length of those seams
- We need to match the length of the sleevecap + sleeve cap ease to the length of the front and back armhole
Here's how you can handle this in code:
- We create a method that does teh actual drafting of our sleevecap
- We use a `tweak` value to influence the process, we start with a value of `1`
- We check the length after every attempt, and adjust the `tweak` value
```js
export default function (part) {
let { Path, paths, points, store, options } = part.shorthand()
// we'll call this function repeatedly until it gets it right
function draftSleeve(part, tweak) {
// Sleeve frame
points.top = new Point(0, 0)
// Note the use of tweak in the line above
points.boxTopRight = points.top.shift(0, (store.get('sleevecapTarget') / 5.8) * tweak)
// ... draft sleevecap here
}
// Get values from the store, and save our own
let armholeLength = store.get('frontArmholeLength') + store.get('backArmholeLength')
let sleevecapEase = armholeLength * options.sleevecapEase
store.set('sleevecapEase', sleevecapEase)
store.set('sleevecapTarget', armholeLength + sleevecapEase)
// Initialize
// delta holds by how far we're off
let delta = 0
// runs holds our number of attempts
let runs = 0 // number of attempts
// tweak holds our tweak factor
let tweak = 1 // tweak factor
// target holds our goal
let target = store.get('sleevecapTarget')
// using a do...while loop so this runs at least once
do {
// Draft our sleevecap
draftSleeve(part, tweak)
// Increate the run count
runs++
// Re-calculate by how far we're off
delta = store.get('sleevecapLength') - target
// If we overshot, decrease the tweak factor
if (delta > 0) tweak = tweak * 0.99
// If we're short, increase the tweak factor
else tweak = tweak * 1.02
} while (Math.abs(delta) > 2 && runs < 25)
// Keep doing this until we're off by less than 2mm or we tried 25 times
```
A few things that are important:
- We check to see how close we are by using `Math.abs(delta)` which gives us the absolute value of our delta
- We guard against an endless loop by keeping track of the runs and giving up after 25
- We multiply by `0.99` and `1.02` to respectively decrease and increase our `tweak` factor.
This assymetric approach avoids that we end up ping-ponging around our target value and never land somewhere in the middle

64
markdown/dev/howtos/design/seam-allowance/en.md Normal file
View file

@ -0,0 +1,64 @@
---
title: Add seam allowance and/or hem allowance
for: developers
about: Adding seam allowance or hem allowance is easy to do
---
<Note>
##### See this example in our source code
- [packages/bruce/src/inset.js](https://github.com/freesewing/freesewing/blob/develop/packages/bruce/src/inset.js#L34)
</Note>
Adding seam allowance is something that has to happen in every pattern.
We might also have a hem where we need to add more seam allowance, or hem allowance.
When doing this, it's best to split up your path so in those sections that share the same
seam allowance.
In the example below we have two such paths:
- `paths.saBase` is the path that will require regular seam allowance
- `paths.hemBase` is the path that will require more seam allowance, or hem allowance
When creating them, we disable rendering, effectively hiding them.
Then we string together our real path and our seam allowance based on them:
```js
paths.saBase = new Path()
.move(points.bottomRight)
.line(points.tip)
.curve(points.tipCpBottom, points.tipCpTop, points.topLeft)
.line(points.bottomLeft)
.setRender(false)
paths.hemBase = new Path()
.move(points.bottomLeft)
.line(points.bottomRight)
.setRender(false)
paths.seam = paths.saBase.join(paths.hemBase)
.close()
.attr('class', 'fabric')
if (complete) {
if (sa) {
paths.sa = paths.saBase.offset(sa)
.join(paths.hemBase.offset(sa * 2))
.close()
.attr('class', 'fabric sa')
}
// ...
}
```
<Tip>
##### Use a multiple of `sa` for your hem allowance
Resist the temptation to use an absolute value for any seam allowance, including at the hem.
Always use a multiple of the `sa` value.
</Tip>

46
markdown/dev/howtos/design/slash-spread/en.md Normal file
View file

@ -0,0 +1,46 @@
---
title: Slash and spread
for: developers
about: Slash and spread is easy enough on paper, here's how to do it in code
---
<Note>
##### See this example in our source code
- [packages/jaeger/src/front.js](https://github.com/freesewing/freesewing/blob/8474477911daed3c383700ab29c9565883f16d66/packages/jaeger/src/front.js#L64)
</Note>
When we _slash and spread_ a pattern, we cut out a triangle, and then rotate it
around the tip of the triangle.
And that's exactly what we do in code. We just need to know:
- What point we want to rotate around
- Which points we want to rotate
- By how much we want to rotate
```js
let rotate = [
'splitEdge',
'neckEdge',
'cfNeck',
'cfNeckCp1',
'neckCp2Front',
'neck',
'shoulder',
'shoulderCp1',
'armholePitchCp2',
'armholePitch',
'armholePitchCp1',
'armholeHollowCp2',
'armholeHollow',
'armholeHollowCp1',
'splitCp2',
'frontNeckCpEdge'
]
for (let p of rotate) {
points[p] = points[p].rotate(options.chestShapingMax * options.chestShaping * -1, points.split)
}
```

46
markdown/dev/howtos/design/sprinkle-snippets/en.md Normal file
View file

@ -0,0 +1,46 @@
---
title: Add several of the same snippets with the sprinkle macro
for: developers
about: Adding multiple snippets doesn't need to be a chore with this handy macro
---
<Note>
##### See this example in our source code
- [packages/jaeger/src/front.js](https://github.com/freesewing/freesewing/blob/8474477911daed3c383700ab29c9565883f16d66/packages/jaeger/src/front.js#L381)
</Note>
Adding multiple snippets at the same time results in a lot of repetitive code.
Better to use the `sprinkle` macro instead:
```js
macro('sprinkle', {
snippet: 'notch',
on: [
'neck',
'shoulder',
'armholePitch',
'chestPocketBottomLeft',
'chestPocketBottomRight',
'lapelBreakPoint',
'notchMax',
'notch',
'innerPocketLeft',
'innerPocketRight',
'frontPocketTopLeft',
'frontPocketBottomLeft',
'armholeHollow',
'waist'
]
})
```
<Tip>
Refer to [the sprinkle macro documentation](/reference/macros/sprinkle/) for details on how
to use this macro
</Tip>