A few months ago, I started having this little fascination with spider webs. I was just wondering how they work and how they were built. At the same time, I befriended a little spider that made its home on the driver’s side mirror on my car, called Charlie. Charlie was great and he hung around for a few weeks and taught me a good bit about spider webs. For one thing, they’re very strong. Each strand that’s created is reinforced by the next strand. Sometimes strands double up. Sometimes he even misses a connection. Sometimes he creates this y-shaped connection. Unfortunately Charlie is dead. Or he ran away.

To show what I learned, I started this little processing sketch to just see if I could make a simple spider web. The math for making some sort of simple perfect spider web isn’t hard, but it’s also not that interesting to look at either. As perfect as some spiderwebs look, there is a actually a lot of variation to them. They are an example of what a lot of generative artists always look to replicate from nature, the balance between the predictable and the random.

Once I got the web working in processing, I had an idea to use my webs in the context of an html site, which meant I would have to move it to Javascript. I’ve kind of avoided javascript for a while, but more recently wanted to explore it a bit, so this served as the perfect first javascript project. I originally started by just exporting the processing sketch as a processing js sketch. It didn’t wuite work since I was using the toxiclibs library for the physics environment. Even if it did work as I thought it should, I feel like it would have been cheating. So instead, I went through some javascript canvas tutorials by Keith Peters and restructured the project as pure javascript. I still ended up using processing js for the canvas drawing and I also ended up finding a version toxiclibs that was ported to javascript. The major difference with that was that I had to target the specific toxi namepsace when using any part of the toxiclibs library. No biggie.

Go here and play with it a bit. It’s not perfect, but I’ve got some other things I want to explore and need to move on. I don’t plan on abandoning it altogether though. I’d like to go in and add some dimension to it and bring it into the more efficient 3d environment of webgl. Also, I’d like to explore and push the webs farther in a more interesting direction visually. It’s also begging to have some more interactivity brought to it. Hopefully this will end up making it into some other project in the future.

As a disclaimer, I’m not much of a web front end kind of guy. I’ve from the world of flash and just like to make pretty looking stuff. From what I’ve found, this is slow as hell in firefox, but plays reasonably well in chrome. Let me know if you have any comments on how to improve this. All comments are welcome. I think.

About Greg Kepler

Greg Kepler is an interactive developer at the Barbarian Group. He started as a design student graduating from RIT with a degree in New Media Design and Imaging in 2004 and fell in love with Flash. He worked for 4 years as a designer, developer, and interactive studio manager at Iomedia and moved on to the Barbarian Group in 2010 as an interactive developer where he tries to get his hands dirty with whatever technologies he can.