boostworthyisryantaylor

Lissajous Curves

This post goes in conjunction with my latest design piece, ‘Maybe It’s A Sine’. The foundation for that piece was created using a script in Flash which generated a Lissajous curve. By definition, a Lissajous curve is the graph of the system of parametric equations which describes complex harmonic motion. Don’t be intimidated; the math is actually fairly simple.

[AS]
// Where cx and cy are the coordinates for the center of the stage.
var x:Number = A * Math.sin(a * nTime + (Math.PI / 2)) + cx;
var y:Number = B * Math.sin(b * nTime) + cy;
[/AS]

Given those two formulas, all you need now is an enter frame or timer event to increment the time and usage of the Flash drawing API to actually draw the whole thing out. I tweaked the formulas quite a bit and experimented with different variations to see what would happen. Below are some of my favorite results.

Lissajous Curve #1

Lissajous Curve #2

Lissajous Curve #3

Lissajous Curve #4

Lissajous Curve #5

Lissajous Curve #6

Lissajous Curve #7

It’s amazing what some simple math and code can create.

8 comments

8 Comments so far

  1. [...] I was experimenting in Flash with some Lissajous curves and decided to use one as the foundation for a new design. The sine waves that are all over the place were the only things generated in Flash, the rest was done in Photoshop. [...]

  2. Attila October 2nd, 2007 6:58 pm

    Hi…

    I have got hooked on this too a while ago…
    If you take a look you can see.
    http://attilahorvath.free.fr/Lissajouissimo/

    Then I got other things…

    Accidentally find your page, and started wondering…
    What chance do I have to get a copy of your Flash project?
    I used Flash long ago, and forgot most of it.
    To sart from scratch again… difficult.
    But I would like to fiddle with a “ready” made thing, even if it is not really a final product…

    In exchange, I only can offer to share the result once I managed to get something meaningful out of it…

    Anyway… It is nice to see that others have the same “twist” on their mind.

    Regards

    Attila

  3. Brian October 22nd, 2007 11:57 am

    Great stuff. Any chance you could post some of the code used for the API drawing. I’ve never done any, and would love to have a jumping off point.

    Thanks

  4. Ryan Taylor October 24th, 2007 12:16 am

    Sorry for the delayed response. I have a lot going on right now, but I’ll see if I can dig up those experiments and post the code sometime in the near future.

  5. collin January 14th, 2008 1:08 am

    I assume he’s drawing these shapes with a bitmap object, I think that’s the only practical way to get those results without the flash player running out of memory, it could be done with something as simple as a 1×1 pixel square moving along the path determined by those equations, and being saved to the bitmap after each iteration.

    I’ll try to post an example if my job schedule allows.

  6. Ryan Taylor January 14th, 2008 1:36 am

    Hey Collin,

    Actually, those were all accomplished using the Flash drawing API; more specifically, the ‘curveTo’ method. You could certainly cook up something using BitmapData objects that outperforms the drawing API, but I didn’t go that route with these experiments.

  7. Enivaldo Bonelli September 26th, 2009 7:13 pm

    Hi,
    Nice figures!
    I some Lissajous figures – actually they are generated randomly. They are i Java and are in 3D, meaning you can see the outside the screen, if you use those plastic 3D (blue-red) glasses. Please visit http://java.ponta-negra.com and choose the link with ‘lissajous’ in it. The other examples are also interesting.
    -bonelli

  8. [...] del disegno, sappia che ci sono anche veri e propri fans dell’argomento, ad esempio questo: http://www.boostworthy.com/blog/?p=92 dove potete vedere alcuni esempi di curve di Lissajous (e affini) dotate di notevole [...]

Leave a reply

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image