top of page

String Art


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 such as a ship's sails, sometimes with other artist material comprising the remainder of the work.

String art has its origins in the 'curve stitch' activities invented by Mary Everest Boole at the end of the 19th century to make mathematical ideas more accessible to children. It was popularized as a decorative craft in the late 1960s through kits and books

The purpose of String Art is to provide the developer with practice creating a simple animated graphic, using geometry in the animation algorithm, and creating something that’s visually pleasant to watch.

String Art draws a single multicolored line which smoothly moves until one end touches a side of the enclosing window. At the point, it touches a “bounce” effect is applied to change its direction.

A ripple effect is created by only retaining 10–20 images of the line as it moves. Older images are progressively faded until they disappear.

Animation libraries are not allowed. Use only Vanilla HTML/CSS/JavaScript.

What kind of string is best for string art ?

You can use sewing thread for string art, but it is only advised to do so if you want a very delicate looking outcome. Other options include embroidery floss or thin yarn, which are slightly thicker than sewing thread and are easier to work with

User Stories :

  • Start by drawing a multicolored line at a random position within the boundary of it’s enclosing window

  • Each 20 ms draw a new copy of the line at a new position based on a trajectory — the incremental distance from the previous line based on the endpoints

  • When either endpoint of the line touches the boundary of the enclosing window change it’s direction and randomly alter its angle

  • Progressively fade the intensity of old lines so that only the most recent 10–20 lines are visible to create the sense of movement or “ripple”

Bonus features :

  • User can specify the length of the line and its velocity

  • User can specify the multiple lines within the window, all moving along different trajectories and velocities

16 views0 comments

Recent Posts

See All
bottom of page