“Spiderweb (on the Fly)” is a real-time software simulation of an orb-weaver (garden spider) web being built. Each web created is unique, just like those of spiders!
- https://ashmystic.github.io/spiderweb-on-the-fly
- Click on the double arrow ">>" button in the top-right to expand to fullscreen mode. This button also restarts the animation.
Below is an overview of the steps involved in creating the web. These correspond to the stages displayed in the top-left corner of the simulation.
- Creating radii
The spider lays out the radii lines or "spokes" that will support the web. The number of lines differs depending on the environment and available connection points.
In the simulation a random number is picked between 6 and 9 to determine the number of radii lines. These are then placed at random angles around the cwentral "hub".
- Creating spiral
The spider starts in the center of the web at the hub and lays out a spiraling strand that is used as a guide for the finished web.
The simulation keeps track of the current radii line, as well as the last point connected to on each radii line. This is how the simulated spider knows where to go next!
- Creating sticky web
The spider starts on the outside of the web and works its way in, laying a strand of sticky web that is able to ensnare insects. This is in contrast to the non-sticky structural web used for building the radii lines and spiral.
The simulation creates the sticky net in a similar fasion to how it creates the spiral, just in reverse and with a few differing constants.
- Awaiting prey
The spider returns to the hub, where it is roughly equidistant to all points on the web and can easily detect vibrations. It rests and waits here until it detects an insect.
In the simulation a little fly wanders into the scene and stops at a random point on the web. Fun fact: the fly's path follows a sine wave!
- Wrapping prey
With the insect stuck, the spider quickly scurries over and wraps it in more silk to ensure it stays trapped.
- Digesting
If the web is still intact, the spider will return to the hub and wait for more insects.
After this the simulation resets so that you can watch another unique web construction!
The simulation is written in front-end JavaScript and utilizes the Paper.js vector graphics scripting framework.
The code starts in main.js where the window.onload function is defined. In this function the Spiderweb_Manager class (spiderweb_manager.js) is instantiated and initialized.
Spiderweb_Manager is where most of the simulation logic is. It is a wrapper for the Finite State Machine (FSM) that determines what part of the simulation is running. The FSM is a simple set of 5 boolean variables (areRadiiDrawn, isSpiralDrawn, isNetDrawn, isFlyCaught, isFlyWrapped) that correspond to the 6 steps in the section above. Spiderweb_Manager also creates and manages a Spider (spider.js) and Fly (fly.js) object.
The most complex part of the simulation is the vector geometry calculations (figuring out where the next points and lines will go). Paper.js has vector geometry built-in, and their website has a helpful article on learning how to use it here. You may notice that I made my own Vector_Helper class for vector operations. This is because the built-in "automatisms" like point1 + point2 don't work when using JavaScript directly rather than the default PaperScript (see this article).
So now, what is this project about? I was inspired to make Spiderweb (on the fly) one day after watching an orb weaver build its web in front of my house. I stood there mesmerized for about half an hour. I’m often drawn to elegant geometric and mathematical patterns and felt excited to piece together the building blocks of how a spiderweb is made. The simulation I created is quite simplified compared to real spiderweb construction, but I aimed to capture the fundamental steps fairly accurately.
For reference I used this scientific study on the building habits of orb weavers, written by Samuel ZSCHOKKE of the Department of Zoology at Oxford, UK and the Zoological Institute at the University of Basel, Switzerland. Special thanks goes to that team for the helpful information!
So finally, what is the deeper meaning of this project? Spiderweb (on the fly) is my attempt to capture the ephemeral nature of spiderwebs. The spider spins an infinitely many number of unique intricate webs, one after another, each one erased before the next one begins. The spider keeps marching on building, but if you’re not there to witness it, then you’ll miss it! Like the proverbial tree falling in the woods, does a spiderweb grace the world with beauty even if no one is there to see it?
And if you are present to see the web built, are you patient enough to wait for its completion and really appreciate it?