Punchcards, computers and looms

Most people know that punchcards were used for the early computers, but did you know that the punch cards are much older than computers?

Long before that they were used to create patterns using Jacquard looms that were controlled by long strips of punched cards. Each card decided which threads should be raised or lowered for a row (or weft) in the weave

Between 2020-2021 I attended the folk high school “Bäckedal” in Sweden, where I was taught different textile crafts, like weaving and sewing. To design the weaves, we used an application named Weavepoint, that was expensive, looked old, and lacked a native Linux version.

In addition, the program was very slow. If you created a pattern, zoomed out and then scrolled, you had to wait for it render each cell while the UI was frozen.

It sounded like an interesting techical challenge to make my own program.

Technical decisions

Like i described above Weavepoint was very slow drawing the weave, even on my gaming computer that managed to render complicated 3d-environments 60 times per seconds without problems. I wanted to at least solve that problem in my program.

I started by selecting a webb framework. To me, it is important to question how much Javascript you need, or if it is neccessary at all. In this case, I would create a complicated interactive editor, so using a client-side renderered JS framework felt appropriate.

I choose Svelte since it seemed trendy at the time, and this project was the perfect opportunity to learn something new.

When it came to rendering the weave I wanted to avoid the problems Weavepoint had, so I decided to use the fastest (and maybe the most complicated) solution: WebGL.

WebGL is most often used to render games or 3D environments, but there is nothing preventing if from rendering “boring” 2d images.

How do you represent a weave as data? Here I also saw similarities between computers and weaving. A thread can go through the eye of one heddle. A treadle can be pushed down or not. The treadles are bound to heddles, or they are not.

So much of the data can be represented as binary numbers

How to develop an intuitive user interface?

One of my idols in development is Hakim El Hattab (@hakimel). He is the developer os slid.es, a web app for creating presentations. It is noticeable how he strives to make the UI beautiful and user friend, both in the large but also in the details.

To create a UI is about communication. When I create functionality, I know how it is used, but how to communicate that to a user withouth forcing them to go through a tutorial?

The difficult part isn’t to come up with functionality, but to expose it to the user in an intuitive way. There is no point in making something if no one understands how to use it. This project has given me a lot more respect for technical writing

It is also important to consider the target audience. In the field of weaving, I cannot assume that everyone is used to computers, to it becomes extra important to make it intuitive.

Summary

The weaving application is my main hobby project right now. It does not have many users yet, since I haven’t focused on advertising it

The combination of Svelte and WebGL was successful. The app has no issues rendering a weave regardless of size of level of zoom. Thanks to Svelte’s small size, the client code is only 54 kb big. Compare to React where an hello world app is ~46kb.

The future plans of the app is to give better support when planning and setting up a weave, like calculating yarn amount for example. Further out I want to create a backend so that users can store diagrams and share them with eachothers easier.