Spider Webs

This is an exploration on how spider webs are formed. It's not exactly the same, but watching how spiders form their web was the inspiraton.

It starts by first finding anchors that will create the basic shape of the web using a base radius. The points are somewhat randomly placed with that radius in as the starting point and deviates from tehre. It then finds the real anchors that it will be attached to along the sides of the frame.

Once the free anchor points are determined, it finds the center of it all based on those anchor poisitions. Then strands (or rays as I've been calling them) are created between adjacent anchor points. Well really, it's the angles that are determined. The spacing is a base number, but then randomly deviates a bit from there. Then the bars between the ray angles are determined starting from the center point and moving outwards. The spacing between bars is based on perlin noise and the amount of bars that we want total. Each time a bar is created, it can do one og 3 things. It can create a standard strand, create a y-shaped strand (as I've noticed a lot in real spiderwebs), or do nothing at all which creates an organic looking space in the end. Along the way, it's also possible that it creates an extra strand that may be close or far from the root point. Spiders tend to do this to reinforce a weak spot in the web. For each string that's created, it's really just creating a spring between 2 points. Each frame/interval, a line along a strand is drawn.

I also have a variable that will allow multiple points to be drawn between 2 strokes, called strandResolution. The lower the number, the more points and more elasticy the web.

Tools used: processing js (pure javascript) for canvas drawing, toxiclibs js for the physics, dat gui for the gui controls