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. 1.

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

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

  4. 7.
  5. 22.
  6. 24.

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

    schematics, photos, and charts to reproduce a given item with reasonable consistency
  7. 25.
  8. 26.
  9. 30.
  10. 31.
  11. 32.
  12. 33.
  13. 34.
  14. 37.

    Other garments Any time you add people shaped things into

    your math, it needs to be more precise than just math
  15. 38.
  16. 39.
  17. 40.
  18. 41.
  19. 42.
  20. 47.
  21. 48.
  22. 54.

    let gauge = 19 let circumference = 19 let rawCastOn

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

    let gauge = 19 let circumference = 19 let rawCastOn

    = 90.25 let roundDown = 88 let roundUp = 92 let castOn =
  24. 58.

    let gauge = 6 let desiredSize = 28 let rawCastOn

    = 42 let roundDown = roundDownToFour(rawCastOn) let roundUp = roundDownToFour(rawCastOn) let castOn =
  25. 61.

    let gauge = 19 let circumference = 23.5 let rawCastOn

    = 111.6 let roundDown = roundDownTo13(rawCastOn) let roundUp = roundUpTo13(rawCastOn) let castOn =
  26. 62.

    let gauge = 19 let circumference = 23.5 let rawCastOn

    = 111.6 let roundDown = roundDownTo13(rawCastOn) let roundUp = roundUpTo13(rawCastOn) let castOn =
  27. 66.

    Imperial -> Metric Imperial numbers are larger units that translate

    awkwardly to centimeters Rounding comes back to bite you, again
  28. 68.

    Metric -> Imperial Metric units are more precise and often

    result in difficult-to-measure imperial numbers Rounding comes back to bite you, again
  29. 70.

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

    2 sets of calculations and simply choosing the best one
  30. 71.

    tl;dr An experienced designer can make a judgement call for

    which results to use JAVASCRIPT CAN’T DO THAT
  31. 73.

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

    account when scaling up or down for different sizes
  32. 74.

    JavaScript can’t even Make modifications to large stitch motifs that

    are otherwise unnoticeable but will make an awkward number work
  33. 75.

    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
  34. 77.

    If you’re thinking machine learning ok fine i get it

    you’re right i’m wrong javascript can do anything yayyyy
  35. 79.
  36. 86.

    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)