Step 6

Hack of the «Knitout live Visualizer» tool.

Manually transcribing the knitting instructions using my own symbols allowed me to better understand how volume is formed within the knitting machine. The only downside was the legibility of these symbols. So, in an effort to improve their readability for the knitting machine, I started exploring the potential «hack» of the Knitout Live Visualizer tool. Here are some visual references I used as a basis to develop my new visualization:

Design your own patterns for hand/domestic knitting machine: https://www.stitchfiddle.com/en

knitting charts drawn without grids so you can see how the fabric flows: https://stitch-maps.com/

Computational Design and Yarn-level Simulation of Slip and Tuck Colorwork Knitting Patterns: https://knitscape.net/

Kniterate design editor, the website can be found here.

Click here to access a bigger documentation that shows you the basics stiches symbols and more for hand knitting.

This book by Vikki Haffenden, she has a verry interesting blog about knitting : https://vikkihaffenden.com/2018/06/17/translating-between-hand-and-machien-knitting/

I’d like to build on the work Vikki Haffenden shares in her book, which explores the translation between hand knitting and machine knitting. I want to develop a visualization that bridges the gap between the raw code read by the machine, traditional hand-knitting symbol charts, and the symbols used in stitch «programming.»

Let me show you step by step, how to «hack» locally the knitout live visualizer tool. First you will need to download the whole folder from Github :

☺ VIDEO PROCESS - Knitout live visualizer / Hack demo 1 ☺

↓ A short, quiet tutorial that shows you how to download locally the knitout live visualizer tool ↓

After downloading it, you’ll get a folder containing the following files:

I didn’t fully understand the exact meaning of each file and how they’re connected, but what you need to focus on is the «vector-tiles.svg» file. I found a visual way to hack the Visualizer without having to go through any coding :

☺ VIDEO PROCESS - Knitout live visualizer / Hack demo 2 ☺

↓ A short, quiet tutorial that shows you how to modify the svg file ↓

The «vector-tiles.svg» file :

The SVG file is linked to various JavaScript and Python scripts, so if it is modified, it affects the program when it runs. I observed that the different visual symbols are vectors subjected to a specific color code and are organized into specific groups called 'tiles’. Each of these groups has an identity or a label, which is essential for it to be referenced later in the other scripts.

To modify your SVG, you must pay attention to several things. First, always ensure that the vectors are in the correct group if you add any. Next, always keep the same color code as shown on the right; this is very important. Finally, regarding the gray rectangles, some color paths appear in certain places while they do not in others. You cannot change or remove any colors other than the original ones, so you must be creative in finding ways to work around potential bugs.

Visualization tests

Here are some modifications I tried, but clearly, I couldn’t go any further with hacking the Knitout Live Visualizer. Even with external help, I couldn’t find a way to make significant changes.

If you’re more comfortable with coding, I invite you to look inside the other scripts to understand in detail how the program works.