The application starts with default values for Number of Nodes N: 150 and Expression Node(i) = 7i+N/2. To generate the drawing press the Calc button. Try to change the number of nodes and see how the drawing changes after pressing the Calc button again.
Below is a set of expression suggestions for exploration
| Nodes N | Expression | Comment |
|---|---|---|
| 150 | 7i+N/2 | Shown as Circle, shape with 3 lines crossing in the middle |
| 300 | 7i+N/2 | Same as above with more details |
| 100 | 21i+N/2 | Circular graph with 10 lines crossing in the middle and a large inner circle emerging |
| 300 | 21i+N/2 | Same as above with a greater number of inner circles |
| 50 | 10N-10i | In the Rect mode four triangular shaped sails emerging |
| 150 | 10N-10i | Triangular shape as above with a greater number of substructures emerging |
The input fields Number of Nodes N and Expression Node(i) on the Main page set the parameters of the desired string art drawing. Drawing is initiated by the Calc button. The following is a list of the input fields and control button functionality:
| Input | Functionality |
|---|---|
| Number of Nodes N | Number of Nodes to be drawn. It should be a positive number. Best results are between 100 and 600. |
| Expressions Node(i) | Algebraic expression for nodes j that connect node i with 0 ≤ i < N. The resulting nodes j=Node(i) are mapped back to the range 0 ≤ j < N, as N is wrapped around back to 0 according to j = (j%N + N)%N. |
| Generates the nodes according to the input fields and displays the drawing. | |
| Animates the drawing by cycling through the list of lines in increasing node order and changing colors. | |
| Hides the node labels on the drawing. Repeated pressing of the button allows the selection of various display styles as shown below. | |
| Shows only the labels without the lines, useful if one wants to print out a template to draw on. | |
| Shows the list of node connections. | |
| Changes the display style back to show both strings and labels. | |
| Switches to a drawing where the nodes are aligned on parallel lines. | |
| Switches to a drawing style where the nodes are aligned on perpendicular axis. | |
| Switches to a drawing style where nodes are alligned on the perimeter of a circle. | |
This application is purely for informational, entertainment and educational purposes only. It does not make any guarantees and promises regarding its accuracy and reliability.
| Resource | Usage |
|---|---|
| JQuery | Library used for binding Javascript to the static html document, for example to bind buttons to click events |
| underscorejs | Library that extends Javascripts functional programming capabilities |
| Bootstrap | Framework used for styling in particular buttons and tables |
| d3.js | Library to create responsive graphics, used to create string drawings and animations. |
| cloudflare | CDN host with https support used to retrieve and load resources into the application. |
| firebase | Firebase is used as a static https web server and for possible future use as a database backend. |
| repl.it | This app was developed entirely online on repl.it without the need to set up a local development environment. |
The geometric structures that emerge from connecting lines between a set of nodes is generally referred to as string art. The parabolic curves that emerge from the crossing points of lines are widely used in computer graphic and animation.
The mapping function from one to the next node involves the modulo operation, commonly expressed by the symbol %. It computes the remainder of a division and helps to wrap around the range of nodes. For example, assume we have N=12 nodes like the hours of a clock, labeled from 0 to 11. The operation 15 % 12 = 3 maps the 15th hour back to 3 o'clock. To get the desired behavior for negative numbers we apply the % operator twice, so that for example three hours before midnight maps to nine o'clock as in ((-3)%12+12)%12 = 9.
Made by Andreas. Please feel free to reach out via linked-in for any comments any suggestions regarding this application and to discuss potential engagements.