Archive for the 'actionscript' Category

More Microscopy

Friday, October 3rd, 2008

A few posts back I showed a sketch of some glowing animated horns… at the end of the post I talked about speeding it up using my fast drawing library. A few days later I altered the code…. and here is the result:




Click above image to view flash version

I also added the emboss technique previously mentioned in this post.

The horns themselves are each made up of 100 circles… there are 10 horns so thats 1000 circles altogether….

Procedural 3D (5,000 pixel sphere)

Thursday, October 2nd, 2008

Just playing with some procedural 3D stuff…. I was actually working in Papervision today and that inspired me to dig up my old 3d functions and start playing…

Read the rest of this entry »

Eyes & Code Drawing

Tuesday, September 30th, 2008

It's odd, every time I start messing with recursive functions for drawing plants and trees I always end up getting sidetracked.... This time around, after getting some pretty nice looking trees (will post about them sometime soon) I stumbled upon an interesting (and simple) way to get programmatic lines and curves to look a bit more hand drawn... After isolating the technique and ripping it out of my tree generating program I created these generative eyes:







Click any of the above images to view the flash version

I rendered out a few larger images and put them up on flickr here

This isn't the first time I've coded eyes... or at least, not the first time I've code an eye. A few years back I programmed an eye in processing... you can see it here. I was never totally satisfied with the processing eye... I sort of gave up on it... I wanted to make it more photorealistic somehow, but never got around to it...

DRAWING + PROGRAMMING

There are certain things that people just automatically draw without thinking about it... for me these are:
1) bald old man heads
2) ears
3) hands
4) eyes
5) teeth
possible a few more, but the above 5 are the main ones...

Drawing these things for me is pretty much automatic - and I never get tired of it. For a long time I wasn't able to combine programming and drawing, but after I created the daily log - I was occasionally able to combine drawings and programming - One of these programs was my first real OpenGL C++ program the combination project. Lately, with vCanvas and the technique I used for the above eyes - the combination of drawing and programming has been much more organic...

ROUGH CIRCLE

The eyes are built with the use of one function:

Actionscript:
  1. this.graphics.lineStyle(0,0);
  2.  
  3. // graphics, x position, y position, detaill, xRadiusMax, yRadiusMax, xRadiusMin, yRadiusMin, smoothness
  4.  
  5. roughCircle(this.graphics, 200,200, 180, 100, 100, 50,50);
  6.  
  7. function roughCircle(g:Graphics, xx:Number, yy:Number, detail:int, r1:Number, r2:Number, r3:Number, r4:Number, smooth:Number=15):void {
  8.     var xp:Number, yp:Number;
  9.     var rx:Number=r3 + Math.random()*(r1-r3);
  10.     var ry:Number=r4 + Math.random()*(r2-r4);
  11.  
  12.     var theta:Number = Math.random()*6.28;
  13.     var inc:Number = Math.PI * 2 / detail;
  14.  
  15.     for (var i:int = 0; i<detail; i++) {
  16.  
  17.         rx += ( (r3 + Math.random() * (r1-r3)) - rx) / smooth;
  18.         ry += ( (r4 + Math.random() * (r2-r4)) - ry) / smooth;
  19.         theta += inc;
  20.         xp = xx + rx * Math.cos(theta);
  21.         yp = yy + ry * Math.sin(theta);
  22.         if ( i == 0) {
  23.             g.moveTo(xp, yp);
  24.         } else {
  25.             g.lineTo(xp, yp);
  26.         }
  27.     }
  28. }

If you run that in your timeline you'll get one roughly drawn circle... Not all that interesting, but the potential begins to become obvious if you just play with it for a few minutes:

The above image was generated with the roughCircle() function and this extra messy code:

Actionscript:
  1. this.graphics.lineStyle(0,0,.5);
  2. var inc:int= 20;
  3. for (var i:int = 0; i<4; i++) {
  4.     for (var j:int = 0; j<5; j++) {
  5.         roughCircle(this.graphics, 50 + j * 100,50 + i* 100, 180, 50, 50, 25,25, inc);
  6.         inc--;
  7.     }
  8. }
  9.  
  10. for (i = 0; i<100; i++) {
  11.     this.graphics.lineStyle(0,0, (1 - (i / 100)/2) - .5);
  12.     var r = 150 - i;
  13.     roughCircle(this.graphics, 150+i/2,550+i/2, 180, r,r, r-30,r-30);
  14. }
  15.  
  16. for (i = 0; i<50; i++) {
  17.     this.graphics.lineStyle(0,0, 1 - (i / 100)-.4);
  18.     r = 100 - i*2;
  19.     roughCircle(this.graphics, 400,500+i*3, 180, r,r/4, r-30,r-30);
  20. }

The messiness of this code is actually important... when I'm "drawing" or "sketching" with code I'm not thinking about putting i/2 into a variable for readability and speed reasons... I'm thinking... "oh, the circles should be offset on the x a little less than i every iteration." Same with weird things like this.. 1 - (i / 100)-.4 ... just achieved quickly through trial and error... heh, this is worse (1 - (i / 100)/2) - .5...