« Ink Cam
Video Feedback Texture »

Polar Coordinates, Sine, Cosine…

October 13th, 2008

One of my many favorite equations is the conversion from polar coordinates to cartesian... in actionscript it looks like this:

PLAIN TEXT
Actionscript:
  1. x = radius * Math.cos(theta);
  2. y = radius * Math.sin(theta);

I was teaching the ins and outs of polar coordinates to my students yesterday and thought of a good assignment for them... "Use Graphics or BitmapData to create an interactive sketch involving the polar to cartesian conversion." Now, when I first encounted this equation, I didn't really know what it was or why it worked... I used it for circular motion in Director... I also tried randomly tweaking it to see what kind of results I could get.... things like this:

PLAIN TEXT
Actionscript:
  1. // sort of like a figure 8
  2. x = radius * Math.cos(theta);
  3. y = radius * Math.sin(theta/2);
  4.  
  5. // an oval
  6. x = radius/2 * Math.cos(theta);
  7. y = radius * Math.sin(theta);
  8.  
  9. // etc...
  10. x = radius * Math.cos(theta);
  11. y = radius * Math.sin(theta) + radius * Math.cos(theta * 2);

I advocate this kind of random experimentation when I teach game design or talk to students interested in generative visuals. Playing with the numbers just improves understanding... even if you don't know what your playing with at first...

When I got home yesterday I created this small sketch:


To see the flash version continue reading this post....

Move your mouse to change wave formation

This movie requires Flash Player 9

Here's all the code:

PLAIN TEXT
Actionscript:
  1. stage.frameRate = 31;
  2.  
  3. var b:Shape = new Shape();
  4. b.graphics.beginFill(0xffffff, .1);
  5. b.graphics.drawCircle(5,5,2);
  6. var brush:BitmapData = new BitmapData(6,6,true,0x00000000);
  7. brush.draw(b);
  8.  
  9. var canvas:BitmapData = new BitmapData(600, 600, true, 0xFF000000);
  10. addChild(new Bitmap(canvas, "auto", true));
  11.  
  12.  
  13.  
  14. var theta:Number = 0;
  15. var p:Point = new Point();
  16. var rad:Number = 0;
  17. var msx:Number = 0;
  18. var msy:Number = 0;
  19. addEventListener(Event.ENTER_FRAME, onLoop);
  20. function onLoop(evt:Event):void {
  21.        canvas.fillRect(canvas.rect, 0xFF000000);
  22.        rad = 0;
  23.        theta = 0;
  24.        msx +=(mouseX/200 - msx)/12
  25.        msy += (mouseY/200 - msy)/12
  26.        for (var j:int = 0; j<1500; j++) {
  27.                rad += .1;
  28.                for (var i:int = 0; i<10; i++) {
  29.  
  30.                        theta +=.01
  31.                        p.x = 300 + rad * Math.cos(theta/msx)
  32.                        p.y = 300 + rad * Math.sin(theta/msy) + rad * Math.cos(theta);
  33.                        canvas.copyPixels(brush, brush.rect, p, null, null, true);
  34.                }
  35.        }
  36. }

There's lots of fun to be had with this...

This entry was posted on Monday, October 13th, 2008 at 12:47 pm and is filed under actionscript, assignments, code snippets, experiments, sketches, textures.

7 Responses to “Polar Coordinates, Sine, Cosine…”

  1. Dimitris Says:
    October 15th, 2008 at 2:50 pm

    This is fabulous! Especially if it s gonna be combined with the new Sound Features of Astro. Thanks for inspiration.

  2. zevan Says:
    October 16th, 2008 at 8:36 am

    Thanks Dimitris. Combining it with dynamic sound generation is a great idea. Although I have yet to mess with the dynamic sound creation features (or popfordge for flash 9) I’m pretty sure you can just feed in the p.x and p.y values from the above code snippet and hear what they sound like…. :)

  3. Mark Weaver Says:
    October 21st, 2008 at 10:31 am

    Wow! I have been playing with this for a half hour…

  4. Agus Says:
    April 5th, 2010 at 3:32 pm

    Hi I’m an architecture student and I’m playing along with polar coordinates to generate forms aswell! it might be really handy to have more info on how to get random polar coordinates. I know nothing about programming but I think this kind of project is really similar to my needs. I will try to use some random image from your programming to define some chapes, but could I get further information regarding this? thanks

  5. zevan Says:
    April 5th, 2010 at 5:28 pm

    Well, if you learn a little programming using something like processing (processing.org) you could then generate 3D models from sine and cosine based 3D forms. You could also consider generating sine and cosine based 2D seamless textures and using them as a displacement map in a 3D program on a simple form like a sphere.

  6. Agus Says:
    April 6th, 2010 at 8:20 am

    ok I’ll post my achivements when I’m done. Thank you

  7. JOHNNY inside® Says:
    May 21st, 2010 at 8:25 am

    Hi… let me see if I can find my jaw. I just lost it when I saw this example. I got hypnotized of looking at this Math figure. I spent long minutes analysing how it moves by just changing some X and Y values. Thanks God I didn’t read the code, else I would try to understand it generating serious injury to my 2-neurons brain.

    I’m a (was in 2010) 34 years old Cuban who’s always dreaming beyond the impossible. He always found Math too abstract because every time I asked a teacher: How can I use that in a practical exercise in life? They never gave me a serious answer.

    Now, I’m lost an falling in love with Math and trigonometry… but that’s almost impossible when you hardly remember the result of 7×9=?.

    Anyhow, I’m always pushing myself to my limits and then I kick myself to move on… and I created a simple, lander type arcade game and I wish to thank you because without reading chapter 7 from the book “Learning Actionscript 3.0″… I’d never make it.

    Thank you, and your co-writer for this book. I wish I could become your student someday (something I hardly think I could for all the distance in miles and knowledge). That’ll be a dream come true!

    YOU ROCK!

Leave a Reply