A Foolish Quest: Auto-Generating Knitting Patterns with JavaScript

3d65a0bc911de24fde5e58d84b0276af?s=47 Liz
June 20, 2016

A Foolish Quest: Auto-Generating Knitting Patterns with JavaScript

Taking something real-world and math-based, like knitting, and turning into a program is actually super easy (no one is surprised here). But! What happens when you combine that with best practices and expected conventions, along with industry-wide standards for design and presentation? Things get a lot more complicated than just crunching numbers, especially when your output will result in lots of manual hours creating a real object. This is the story of how I built a customizable knitting pattern generator in JavaScript (after I built it in Ruby first, of course), and the lessons learned when you try and do math for more than just math's sake.

3d65a0bc911de24fde5e58d84b0276af?s=128

Liz

June 20, 2016
Tweet

Transcript

  1. LIZ ABINANTE PRESENTS her foolish quest to auto-generate knitting patterns

    using JavaScript. @feministy • me@liz.codes Senior Software Engineer, New Relic
  2. None
  3. BAAAAAAH!

  4. This is my yak.

  5. Knitting + JavaScript What could possibly go wrong?

  6. A LOT.

  7. Alternative titles for this talk…

  8. Knitting + JavaScript Everything possible went wrong!

  9. Knitting + JavaScript math

  10. Knitting + JavaScript WHY

  11. Knitting + JavaScript Actual objects programming

  12. Knitting + JavaScript Harder than you’d think, but worth the

    effort.
  13. Everything you need to know about knitting patterns… in 2

    minutes.* * ish
  14. Important terms Gauge Number of stitches and number of rows

    per <MEASUREMENT>
  15. Important terms Cast On The number of stitches to start

    with
  16. Fun quirks Knitting patterns usually come in both imperial and

    metric measurements
  17. Fun quirks Every garment type has multiple points of measurement

    for fit
  18. Fun quirks …that are often distilled down to one measurement

    for instructions & size selection
  19. Fun quirks There are 5,000 different ways to do everything

  20. Fun quirks Customer service sucks

  21. Orders of magnitude Even the simplest problem is incredibly difficult

    to solve and they don’t get any easier
  22. What does it mean to “generate a knitting pattern”?

  23. What even is a knitting pattern? A set of instructions,

    schematics, photos, and charts to reproduce a given item with reasonable consistency
  24. None
  25. None
  26. don’t convert this! metric only

  27. don’t convert this! imperial only

  28. because 1 in/2.54 cm is confusing

  29. None
  30. None
  31. None
  32. None
  33. None
  34. But Liz, that seems easy Well, you’re wrong.

  35. Math for math's sake

  36. Other garments Any time you add people shaped things into

    your math, it needs to be more precise than just math
  37. None
  38. None
  39. None
  40. None
  41. The idea

  42. CUSTOM HAT PATTERN APP

  43. Acceptance criteria Users can provide the following: gauge, desired size

  44. Acceptance criteria Users will receive: customized pattern instructions with yardage

    estimates
  45. two little things gauge + size

  46. None
  47. None
  48. ∞ problems

  49. 3 problems

  50. 1 Rounding

  51. let castOn =

  52. let castOn = (gauge / 4) * desiredSize

  53. let gauge = 19 let circumference = 19 let rawCastOn

    = (gauge / 4) * circumference let roundDown = roundDownToFour(rawCastOn) let roundUp = roundUpToFour(rawCastOn) let castOn =
  54. let gauge = 19 let circumference = 19 let rawCastOn

    = 90.25 let roundDown = 88 let roundUp = 92 let castOn =
  55. 18.5” 1/2” too small 19.3” 1/3” too big 88 ||

    92 ||
  56. Problems of scale The larger your stitches, the less precise

    you can be
  57. let gauge = 6 let desiredSize = 28 let rawCastOn

    = 42 let roundDown = roundDownToFour(rawCastOn) let roundUp = roundDownToFour(rawCastOn) let castOn =
  58. 26.6” 2.3” too small 29.3” 1.3” too big 40 ||

    44 ||
  59. Problems of complexity The more complex your garment or motif,

    the harder calculations become
  60. let gauge = 19 let circumference = 23.5 let rawCastOn

    = 111.6 let roundDown = roundDownTo13(rawCastOn) let roundUp = roundUpTo13(rawCastOn) let castOn =
  61. let gauge = 19 let circumference = 23.5 let rawCastOn

    = 111.6 let roundDown = roundDownTo13(rawCastOn) let roundUp = roundUpTo13(rawCastOn) let castOn =
  62. 22.7” 1.25” too small 24.6” 1.1” too big 108 ||

    117 ||
  63. 2 (aka 1, again/still) Unit conversions

  64. Imperial -> Metric

  65. Imperial -> Metric Imperial numbers are larger units that translate

    awkwardly to centimeters Rounding comes back to bite you, again
  66. Metric -> Imperial

  67. Metric -> Imperial Metric units are more precise and often

    result in difficult-to-measure imperial numbers Rounding comes back to bite you, again
  68. tl;dr Unit conversions compound problems with rounding

  69. tl;dr Solve all of your unit conversion problems by doing

    2 sets of calculations and simply choosing the best one
  70. tl;dr An experienced designer can make a judgement call for

    which results to use JAVASCRIPT CAN’T DO THAT
  71. 3 Domain knowledge

  72. JavaScript can’t even Take the integrity of a design into

    account when scaling up or down for different sizes
  73. JavaScript can’t even Make modifications to large stitch motifs that

    are otherwise unnoticeable but will make an awkward number work
  74. JavaScript can’t even Make a decision about when to break

    from an algorithm and do something different to make a size or design work
  75. JavaScript can’t even Tell you if this is a bad

    idea (or can it?)
  76. If you’re thinking machine learning ok fine i get it

    you’re right i’m wrong javascript can do anything yayyyy
  77. What actually went wrong?

  78. A LOT.

  79. Users are the worst

  80. Every person is an edge case

  81. It wasn’t actually small

  82. A beautiful idea, executed terribly

  83. A beautiful idea, executed terribly DECENT MARGINALLY WELL

  84. @feministy • me@liz.codes Senior Software Engineer, New Relic slides ->

    tinylinx.biz/nodepdx
  85. Image credits Knit hat: https://unsplash.com/photos/hAobD5OjoHE Fire: https://www.pexels.com/photo/wood-explosion-fire-hot-8504/ Math equation: https://unsplash.com/photos/5mZ_M06Fc9g

    Stack of knit hats: http://www.purlsoho.com/create/2014/10/22/ classic-cuffed-hat/ All other images are mine (insert evil laughter here)