Background
I wanted to come with an activity to help young kids learn to use tools as that seems to be a less common among kids, a vanishing skill. I see it as a way to help build self-confidence by using workmanship provide a physical outcome rather than some virtual victory.I thought pounding nails was a good place for them to start, and the "interwebs" suggested string art as a good place to start. I love it. I want to choose a design that looks good but has fewer total nails. I didn't like most of the options I saw and want to create my own. If only there were an app where I could upload an image, place my own nails and see how it looks with all possible nails connected. I couldn't find anything, and it sounds like a fun challenge.
The Idea
Make a single-page, JavaScript-driven webpage that will let you upload an image, place the nails by clicking with the mouse, and see what it looks like when strings are connected to all possible nails. It would be nice if the image can be zoomed and panned, and if you could control shape colors and sizes.Progress
03/04/2024 - I thought it would be really fast, but there are some difficult things to manage. Should I use SVG or canvas? I decide on canvas. How do you know which nails are meant to outline the polygon? Easiest is to force them to be in order, either clockwise (CW) or counter-clockwise (CCW). How do you determine whether nails are in CW or CCW order? Turns out you can use calculus along the array of polygon coordinates. When connecting all the nail pairs, how do you identify lines that would go outside of a polygon (i.e. for a concave polygon)? I had to check multiple things: 1) strings don't cross the polygon border segments, and 2) string angle must stay between the neighboring border lines on each of the endpoint vertices. There might be more efficient ways to do the math, but this is a quick-and-dirty app for fun. It just needs to work.Step 1: Load an image.
Step 2: Click to place nails.
- Click an empty space to add a nail.
- Click on a nail to remove it.
- Click and drag a nail to move it.
- Click on a line between nails to insert a nail inbetween.
- Add nails in a clockwise or counter-clockwise direction.
- Click and drag to move the canvas.
- Scroll to zoom in and out.
