Archive for the 'assignments' Category

Polar Coordinates, Sine, Cosine…

Monday, October 13th, 2008

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

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:

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....

Read the rest of this entry »

Abstract Curtain

Friday, September 12th, 2008



Click the above image to view the flash version

This uses a BitmapData technique that I first encountered in Director Imaging Lingo. Try this code out:

Actionscript:
  1. stage.frameRate = 31;
  2. var canvas:BitmapData = new BitmapData(500,500, true, 0xFF000000);
  3. // transparent black overlay
  4. var overlay:BitmapData = new BitmapData(500,500,true, 0x11000000);
  5. addChild(new Bitmap(canvas));
  6.  
  7. var brush:Shape = new Shape();
  8. brush.graphics.beginFill(0xFFFFFF,0.5);
  9. brush.graphics.drawCircle(0,0,20);
  10.  
  11. addEventListener(Event.ENTER_FRAME, onLoop);
  12. function onLoop(evt:Event):void {
  13.     brush.x = mouseX;
  14.     brush.y = mouseY;
  15.     canvas.draw(brush, brush.transform.matrix);
  16.     // draw canvas to itself with offset
  17.     canvas.copyPixels(canvas, canvas.rect, new Point(0,2), null, null, true);
  18.     // draw transparent black overlay
  19.     canvas.copyPixels(overlay, canvas.rect, new Point(0,0), null, null, true);
  20. }

I'm always thinking about good assignments for an experimental visual programming class: "Create an abstract form that resembles a curtain."

Plant Assignment

Friday, September 12th, 2008

Sometimes I’ll give myself programming assignments… these are generally assignments I would give if I were teaching some kind of experimental or visual programming class…. All my classes are currently geared toward more commercial aspects of flash. Anyway, the assignment was… “Take 20 minutes to write a program that draws some kind of plant.”

I started off thinking about doing a recursive function to create branches, but settled on a random walk instead:


Click the above image to see the flash version

I’ve always liked to use sharpen on images - the only problem is that the pixelation around the edges is a little harsh - in the future I may add anti-aliasing to the edges.