Lissajous Webs

More JavaScript!

I’ve actually started delving into Android, but I’m still tinkering with JS too. I’ve been fleshing out the Verlet System I created last month. Added some cool stuff to it. I’ll be doing a future post on that when I get a few more things added. But just recently I started redoing some stuff I did in Flash over at ArtFromCode.

First of all, I started with a Lissajous Curve, which is really easy to create. Do a sine wave on x and another sine wave on y and connect the dots.

To that I added a web system. This is similar to what I created on Day 26 last month. Each new point checks the distance to every other existing point and if close enough, draws a line. This gives you images like this:

You can see it in action and find the code here: http://www.bit-101.com/jscanvas/webs_01.html

Simply refresh to start a new sketch. This is what I did back two and a half years ago in Flash: http://www.artfromcode.com/?p=657

Now, you take that and add some randomness into the mix. You don’t randomize the position of the points, just the speed at which the curve is moving on both axes. This gives you these beautiful, organic structures like this:

I created these on ArtFromCode around the same time: here and some huge renders here. These were probably the most popular images on the site, and continue to be.

You can see these in action below. Click to start and stop the render.

http://www.bit-101.com/jscanvas/webs_02.html

Of course, now that I’ve given away my uber-secret algorithms, you’ll be seeing Random Lissajous Webs everywhere! But that’s OK.

Note – I only tested these in Chrome and Firefox on Ubuntu. One thing I noticed in Chrome is that where it should go completely black in the corners, it winds up a muddy gray. It’s kind of a neat texture actually. While in Firefox, you get complete black. I imagine that’d drive me freaking crazy if I were some kind of pretentious artist whose creations had to be rendered just so. 🙂