String Art

• javascript
• svg
• svelte
• programming
• art
• drag
• curve
• bezier

Here we go, after thow blog posts about computer graphic basic, linear interpolation and bezier curves let’s do some Art.

How come»

Back in the autumn school break the boys and I were with the grandparents and unfortunately it was raining all the time. We just sat inside and spent a lot of time in front of the computer, tablet or mobile phone. That’s when we got the idea to tinker something and at first we were more involved with folding paper. But it was a bit of fun.

So after the holidays I remembered something that I had tinkered with my sister and mother when I was young. I’m sure we didn’t know the term for it back then, but it was String Art.

My mother had a whole box full of colored threads. We took a folded card made of thin cardboard and poked holes in it. Then we pulled the threads through and a triangular net was stretched out, which decorated the front of the card. It was fascinating that one side of the triangle formed a curve. Today I know, it was a quadratic bezier curve.

If you read at Wikipedia or somewhere else about the Origins of String Art, you might think it was Mary Everest Boole who invented bezier curves, and it’s probably true.

String art or pin and thread art, is characterized by an arrangement of colored thread strung between points to form geometric patterns or representational designs. (Wikipedia)

Mesh Star»

So I went to the big drugstore that also sells office and sewing supplies. I bought some needles, thread, and thin cardboard. And off we went. The boys actually enjoyed it and in the meantime their works are framed and will soon be hanging on the wall in the children’s room.

My first pattern I call a Mesh Star, because it’s just four triangles forming a star. All you have to do is draw a coordinate system and make a hole every 0.5 centimeters with a thick needle. And then you pull the thread through the holes and move one hole further at a time. Do you remember my post about lerp() and linear interpolation?

I don’t know what you expect from this post, but it won’t suddenly turn into a handicraft guide, at least not just that. I write what drives and fascinates me on the blog and that mostly has to do with code. Therefore it was only logical to recreate that Mesh Star in SVG and to partly make it a bit interactive using Svelte.

I would need a new piece of cardboard every time to try something new. It’s easier to do this with code, of course. I can simply turn a few parameters to change, e.g. the number of holes, triangles or the angle.

It might look completely different, like a snowflake or a corner of a 3D body or go back to the initial situation. Try yourself using the sliders.

Circle of Shapes»

We made other motifs as well. An image search for “Stringart” gives a lot of inspiration.

Often a wooden board is used and then the thread is stretched between a number of nails, and in a large number of times the nails are driven in along a circle which also works with my thin cardboard and holes.

If I make 16 holes and then keep skipping three with the thread, I get squares. Different settings result in other shapes that constantly repeat themselves within the circle. That’s why I call it Circle of Shapes.

The possible shapes start with a few triangles, as with e.g. two triangle in the David Star.

The more copies of the shape there are, the clearer the inner circle becomes.

And reset.

Recursive polygon spiral»

Now a string art pattern that I already know from computer generated art.

A new, smaller square is embroidered in a square. It arises by advancing a certain amount, say 10%, on each side. This process then is repeated in the newly created square.

As a side effect of this, curves appear along the corners of the squares.

This time my demo does not replicate the String Art, but is more oriented towards the original source of inspiration which was this demo of the library pts.js by William Ngan (@williamngan).

But with this demo he is in good company. I came across this type of pattern or animation several times within a short time, namely on the Twitter accounts of two professors.

Here’s the tweet of Craig S. Kaplan (@cs_kaplan), Computer Science professor in Waterloo, Ontario, Canada.

And there is the other tweet from Clayton Shonkwiler (@shonk), Professor of Mathematics, Colorado State University. He also links to a nerdy forum which names the curves inside this pattern a whirl.

There’s a bot @concinnus at twitter, who links a lot of inspirational demos. And again I found this one, a repost from @zoombeani if you like colors.

And just recently the bot did a repost of a string art like demo from @shonk again.

More»

So, that it’s for now!

If you have read this far, you are now either ready to take your needle and thread and start to make digs for your first string art, or you are programming a generated art demo today.

In any case, a tweet or a message to me would be great.