is that working? great. hi! i'm super excitedto be here and speaking at jsconf. my name is mariko. that's my twitterhandle. i should be automatically tweeting this slide, linkedto this slide, so if you're in the back and you want to see that, you can findit there. i will be joining a company called (inaudible) next week, which-- i'm super excited about that. but today i'm not going to talk about softwareengineering. i'm going to talk about knitting. and just in case you'rewondering, like if you are at the wrong conference, i will assure youthat i will have enough math and code examples for you to be interested. justfor the guideline, i have a
visual relation down on the slide. so theblue dots are indications that the slide has some kind of math reference,computer science reference. the radius of the circle is how many scoopsof ice cream i served myself after i figured that out. the yellow dots are somerandom gif animations, because why not? so i like knitting. i'vebeen doing knitting for quite a while. i think the first time i was doingit i was seven years old. it's something i've always done. once a year, comewinter, i knit a scarf or mitten. something very simple. nothing crazylike having an etsy store or anything. so here's a few of my projects thati've done in recent years. one
winter, i think three years ago, was a veryspecial winter for me, because i learned to javascript while i wasalso working on this green scarf project. and i started to notice really interestingpower of computer programming and the process of knitting.so, for example, when you get started -- like, if you've never knitsomething, knitting might look like this. seven-year-old me was like-- i'm never going to be able to figure this out, this thing that mom and grandmais doing. so intimidating. my experiences programming, the first time,was just installing npm install on a terminal. it was so confusing. wordsflying around, and is my laptop
being hacked? and like what's going on? but we all know that once you've done it,once, and know, like, what exactly it's doing, you know, it's not soscary at all. the other thing -- computer programming is very binary. knittingis very binary. the atomic unit, the smallest unit that you can do istwo stitches, which is knit stitch and purl stitch. knit stitch is thestitch that you pull the yarn from the back of the loop, and purl stitch is theyarn -- you push the yarn in front of the loop. and those two stitchescreate two distinct faces of fabric. and the combination of those two,much like we say -- programming
is ones and zeroes -- creates a pattern inthe fabric. so the green side of the fabric, which is 2x2 ribbing, whichis commonly used for the cuff of your sweater or the neckline of your sweater,is two knit stitch, two purl stitch, alternating each other, and thengoing row by row. the other side of the pattern is the one i took frommy sweater, which is a little more intricate, making a diagonal line. butif you look closely, it's just knit and purl stitch. just one stitch by onestitch, shifting to the left to create a diagonal line. knitters havea github, actually. it's called ravelry. people log in, you can putyour patterns, sell your
patterns, star somebody's projects, and showyour photos. it's a central repository of knowledge that you do with knitting.and speaking of a central repository, code for knitting -- the knittingpattern -- looks like this. and i thought this was totally -- looked likecode. because there is, like, some letters that are kind of repeating,and maybe kind of like a variable, that's accessing the same informationagain and again. and there's more explicit loop indications. likeknit until two stitches remaining. or repeat row one to four, forten times. this brings me to -- i could pseudoknit in javascript. so i tookthis code, which was a scarf
pattern, very simple scarf pattern, put itinto 30 lines of javascript, to visualize what this would look like, virtually.and this is what i came out. you know, it is... it turned out it'sonly using a knit stitch. it's not a purl stitch. so it's okay. and it'sa knit scarf. so making a triangular shape. which is all right. i canunderstand that. so i actually knit that pattern myself, and i haveit here. but it turns out it didn't quite become triangular.instead, it became like an arc. so in my code, those yellowstripes should be straight, flat lines. but then it became an arc. andi was like... this is only 30
lines of javascript. and i write javascriptprofessionally. like, where is my bug? i can't figure that out. so i haveit here. where my four stitches started here, two inches or so, andi knit it down. and if i force the fabric to see it, you could saythis is like a straight line, but in fact, it ended up being an arc of a scarf.so why? i did a little bit of research and found out that what i was discoveringwas something called hyperbolic geometry in math. and i was like...okay. in knitting, we call it ruffles. so i didsome more research, and there were three kinds of geometry to describe,and they both use one perfectly
straight line. the one we're familiar is euclideanspace, which -- you have a baseline, and then parallel to that, you haveanother line that will never meet the baseline again. so it's very2d. the other one is spherical space, where the straight lines are on thesphere. however you place it, it will always meet each other. and the thirdone is a hyperbolic space, which -- there is a baseline, and the straight line,infinite number of straight lines, can be drawn. and it turns out thishyperbolic geometry is a hard problem to solve in computer graphics,because it's hard to model. researcher at cornell actually created a physicalmodel of hyperbolic
geometry in knitted fabric. in her case, createdin crotchet. and here's her paper about how she created the hyperbolicplane. so when i discovered this, i just stumbled upon a problem making ruffles.but when i discovered this is an actual math problem behind my ruffle, iwas like -- this is great. i want to do more of this. i want to discovermore about pattern making, and i want to do this. the problem was that knittingis a very slow process. like, this scarf -- itself, take maybe five daysof solid work. so... eight hours a day? and if you think about softwareengineer salary -- this is a very expensive piece of scarf. so i didmore research about -- how can i
test out my patterns? and stumbled upon thisthing, called a knitting machine. which i have never knew that thisexisted. but apparently it existed for home use, available to your house,since 1890. and this is the ad from that era. and furthermore,interesting, as a native japanese, was that the knitting machine wasa very popular thing to own in the household, in the '70s and '80s japan. andpeople were offering local classes, people owned a knitting machine likeyou would own a sewing machine. i found one tv commercial on youtube aboutthis knitting machine from 1979. if you can get the audio.
(song in japanese with female vocalist) (male narrator speaking japanese) (female vocalist singing in japanese) all right. so i am as confused as you areto see this tv commercial for one different reason. the song that was inthe background, the lyrics said that creating a special original pattern knitwearis like sending a secret love letter to your loved one. and i thoughtthat was kind of creepy, but apparently... things to do in the '70s! ilived in new york city when i discovered this, so i couldn't really go downto local classes. so i don't
even know if that's offered in tokyo now.but i made a short trip to ebay. spent a couple hundred dollars to buy thismachine. and i got it, i set it up, and i was like... okay. i'm goingto set this up. and create all of the patterns, and i'm going to be awesome,and create sweaters. turns out... operating the machine, even beforegoing into creating a pattern, was a lot of work. the machine was made in the '80s. it was sittingin somebody's closet for a long time. it was missing the manuals. soi ended up -- the next two months, just researching all kinds of stuff on japaneseblog posts about machine
knitting. possibly watched every single youtubevideo about machine knitting that's posted. many of them are japanese.occasional trip to a free preview version of google books, because icouldn't go to a japanese bookstore down the street from my parents'house and pick up the book. i never thanked myself enough to be able tospeak japanese. because all of the stuff, great stuff, was available in japanese.and i just get to angry, when software only offers documentation inenglish. certain things i could not understand. but in knitting, atleast i got my turn to just do things in japanese. on top of figuring outhow to operate the machine, i
actually needed to fix the machine. so i figuredout how to operate this machine. moving back and forth. but it wasn'tknitting quite right. something was missing. and basically i flippedthe carriers, looking at examining what exactly it's supposed to do,and what each path is doing. and after looking at maybe four hours of,like, mechanics of things, i found out that one piece of thing was stuckin there. and just a jiggle -- it worked perfectly! and so finally, i gotto knit a fabric out of the machine. and i was like... this is great.one thing about this machine is it's known for something called jacquard knitor fair isle knit, or pattern
knit, if you're familiar with those terms.the term jacquard comes directly from the jacquard loom, which isa different kind of machine that creates a fabric, and uses a punch cardto input the data. and this punch card system, the punch card loom, becamethe base of the modern computer. which -- i thought this was a greatdiscovery. when i did the research and learned about it, i was so excited.so... the machine is based on that. and you see on the '70s ad -- themachine actually had a punch card feeder. so you create your own punch card,and then feed it into the punch card feeder, and that will translate the patternfor you. my machine is
coming from the '80s, so it is an electroknit.it's actually the name of the model. it's called the electroknit. andwhat does that mean? it no longer has a feeder for a bunch card. butit has a mother board and chip and magnetic strip. you use an electromagnet topush and pull the needles automatically. it's a lot like dot matrix printing, if youare familiar with a dot matrix printer. one pixel becomes one stitch. soin this machine's case, i feed it a yellow and blue yarn, the needle that's pushedforward is grabbing a contrasting color, which is blue, and thenthe needle that was left behind
is grabbing a base color, which is yellow.that's how they create a pattern. so that means i can create some kind of graphic-- anything. in this case, the jsconf logo. and then put it into knittedfabric. and i was like... i found out how to operate this machine, i fixed thismachine. this shouldn't be a problem. i'm going to do this. turns outit was not that easy. not even... so there was so many things that you neededto figure out. which is indicated in that blue dot. even before you actually put the data intothe machine. so first question was like -- how do i even make bitmap image?because if you're using
photoshop, you just load the colored photoin, select grayscale, and select the bitmap method, and it will automaticallyfeed the bitmap for you. but i need to do this in code.how do i programmatically do that? let's start with just learning aboutimages, and loading the image. i used a library called graphics magic and thennpm package gm, which wraps that library. i actually started by usingphantomjs, creating a canvas in phantom, loading the image, andusing the phantom api to extract all of the data, which worked fine, but itwas very slow. and gm was suggested to me as a faster alternative. andit worked perfectly.
so when you load a file into gm as a textfile, this is what you get. xy coordinates of the pixel. rgb value of thecolor, and then also the hex value for that color. so all you do is a handy-dandyregexing, and create an array of arrays for each pixel. so now i havergb color for each pixel. let's get on it and make it grayscale? but how doi grayscale? i spent two hours just looking at a single wikipedia pageabout grayscaling, and the engineer from adobe confirmed that's okay.so i'm confident about my explanation here. you have rgb value for eachcolor. in this case, pink and green. you find the highest value foreach color. in this case, pink,
red is the highest value. green, green isthe highest value. you repeat that number, and then you get the grayscalecolor. so now you load the image in gm. you get allof the color. and you have three color -- rgb value array. you just findthe max value out of the array, and then you have an array of just the maxvalue. and you can use that to create a grayscale image. so i was like...this is black and white photography. so i can just load it in, becauseit's black and white. but the grey scale image is actually black andwhite and many shades of grey in between. and my machine only has two colors.so it has to be just two colors.
nothing in the shades of grey. so my firstupload was to split it in half. anything closer to white side gets white,and anything closer to black side gets black. and it turns out like this.something like... what came out of a fax machine. i wasn't really happywith that. so i was like... this is my favorite game when i grew up. when i was growing up. and this only used,like, black and white, and it operated beautifully in my tiny apple computer.so i literally googled cosmic osmo graphics and figured out that i neededto do something called dithering. which -- the wikipedia article said it wasan intentionally applied form
of noise. i don't really understand, but okay.gm has built-in methods for it. so i did that. it turns out better thanmy method. but still... somewhere around the area is missing a definition.and i wasn't quite happy with it. i did more research, and something-- discovered that the thing i needed to do was something called ordereddithering, or half tone screening, which is used for newspapers totranslate that picture into a newspaper, which is just one color of ink.so you have a base image. which you extracted the value for the grayscale.and then you have this noise matrix part. you laid it over. you comparethe overlapping pixels. and
if the base image has a lower value than yournoise matrix, then it gets zero. if it's over, then it gets one. andthat's how you make it into two color images. and of course, if it's like...one and two, you can put it into ones and zeroes -- matrix. here's a few examples of that noise matrix.and a lot of people explore their own matrix to create a better dithered image.i ended up using bayer, because i like the output most. so now i loadedthe jsconf logo and outputted it as ones and zero pictures. andif i replace the zero with no value and one with asterisk, you can see somethinglike this. and it's
starting to look like something on the knittedfabric. so i'm like -- great. i've got files. let's just put it intothe machine and just knit. let's make knitting pattern files. the fileformat for this is something called .dat. which i think stands for digitalaudio tape? no idea. if you open it up, you get ones and zeroes. okay.great. binary file. just replace my one and zero matrix and put it in. buti found out if the pattern is in there, it's actually hex. so i'm like... somethingneeds to be done in my one and zero matrix. into this file. what do ido? there was one guy, steve conklin, who is writingthe same kind of project in
python. so i studied his code, and discoveredthis line. and at the time, i was a newbie python developer. so i was learningpython. and i'm like... what is this? i just went through python'stutorial. nothing was mentioned about bitwise operator. how couldi not have heard of this? i just went through training. and i felt like this.i also found out that the bitwise operator existed in javascript, andread an article, and still couldn't really get what it is. so what iconcluded, after two days of, like, you know... throwing balls againstwalls, was that this is like magic. and this is my interpretationof what bitwise operator and bit
shifting is. so i'm going to give you twoexamples. two operations that i use for this machine. one is a bitwiseleft shift. left shift is a guy or fellow who pushes you to the left. andhe's a magician, because it's a bitwise operator. so he has a magic hat. soa is the small value of one. and let's bit shift forward to the left. so therepresentation of this small one is that. and this left shift guycomes in, pushes you four times to the left, and because he is a magician,he makes it to 16. like, how... what... how could that happen? okay. and the bitwise or operator -- the samething. this person favors
one over zero, and he's also a magician. solet's do bitwise or, with 1 and 5. representation of the 1 and 5 is that.first compares 1 and 1. there is only 1, so he chooses 1. there's 0 and 0.so there's no 1, so okay. 0. and next one is 1 and 0. so okay... 1. andbecause it's magic, it stays as 5, even though you just did something. but itstays as 5. so... i needed to do bitshifting, and if you're interested, i'mhappy to share the code, but my one and zero matrix shifted into one set ofthe decimal value of a, shifted again, became one number, and then turnedthat decimal number into hex, and i can finally put it into my knittingmachine. so now i have the file
prepared. and put it into the machine. andnow i want to demo the machine. okay. so i just turned it in. i pre-loadeda file this morning. i used usb to serial port cable. which the tutorial of howto make is available online. and... just select... you might not be ableto see it. but i'm selecting a custom pattern that i created. it says onetime. stitch of 90. okay. start. i changed the setting. make sure this is okay.and now... something interesting should happen. (grinding noises) see? these needles are pushed forward. thismeans that this carriage
uses magnetics to pull those needles, andnow these needles that are pushed forward are picking up this blue yarn.and... all right! now the pattern is done. i canjust discharge this. take this out. actually, just leave it there. you maynot be able to see it from the front. but it actually printed out the jsconf2015 logo. and after that, i'll finish this scarf, and i can show it to youin person, if you're interested. (applause) woo!
oh, how kind! thank you! so going into thisproject, i had no idea what i was doing. i just wanted to do knitting.and i discovered that knitting and javascript are kind of related. that turnedinto, like, finding out about this machine, and i wanted to do this.i had no reservation about trying to sound smart. this wasn't my job. so wheneveri go into a problem, i just tweet out or send emails about it, and somany people just jumped right in, sending me code samples, and giving meencouragement and all of that. so i just want to give a shout out.thank you! and most of the code will be available on electroknit repo, whichright now is empty, but i promise
i will put it up. and a subset from that project-- the part i was doing, the color math -- i was super interestedin it. and i added more features about translation between color spacesand created a small library for you to... what do you call it? explorethe color. and that's available on the color mixer repo, or npm module. sothank you!