Here, I'll show you a mind-reading trick. Think of a number between 1 and 3.

New Flash toy - Circlerama

Date/Time Permalink: 09/05/08 08:56:27 am
Category: Flash

Holy smoke - it's been four months since I put up a new SWFTools Flash example. This is inexcusable. From now on, readers, you'll have to nag me when I go that long.

This time it's a toy, as opposed to a game, because you just mouse over it and it makes pretty pictures and you click anywhere to clear it and draw some more. It's called Circlerama, follow the link or scroll down to the bottom of the blog sidebar where the Flash BlogSquares usually are, and look for a mysterious black square.

It makes images like this. screen shot 1
Or this. screen shot 2
Or even this. screen shot 3
The source code is too small to bother with a tarball, so I'll just post it here.

#
#  GNU GPL license blah blah blah
#

.flash bbox=240x240 fps=60 background=black

.action:

  function Draw_Circle(CX, CY, RAD)
  {
    this.moveTo(CX+RAD,CY);
    for(l=0;l<=100;l++)
      this.lineTo((CX+Math.cos((l/100)*2*Math.PI)*RAD),
                  (CY+Math.sin((l/100)*2*Math.PI)*RAD));
  }

  function Init()
  {
    counter=0;
    countTo=random(64)+8;
    Radius=countTo;
    colorR=random(255);
    colorG=random(255);
    colorB=random(255);
    Rfact=20-(random(40)+5);
    Gfact=20-(random(40)+5);
    Bfact=20-(random(40)+5);
  }

  Init();

  _root.onMouseMove=function()
  {
    beginFill(colorR<<16|colorG<<8|colorB<<0);
    M1X=(120-(_xmouse-120));
    M1Y=(120-(_ymouse-120));
    Draw_Circle(_xmouse,_ymouse,Radius);
    Draw_Circle(M1X,_ymouse,Radius);
    Draw_Circle(_xmouse,M1Y,Radius);
    Draw_Circle(M1X,M1Y,Radius);
    if(counter<=countTo)
    {
      counter++;
      Radius--;
      colorR=colorR-Rfact;
      colorG=colorG-Gfact;
      colorB=colorB-Bfact;
    }
    else
    {
      Init();
    }
  };

  _root.onMouseDown=function()
  {
    _root.clear();
    Init();
  };

.end
.end

Compile with:

"swfc -o Circlerama.swf ./source.sc"

...assuming you saved it as 'source.sc' of course.

Note that it's pure ActionScript through and through. And hiding within this lame little toy is the formula for two things I've never seen done in a raw-source ActionScript example on the web before - drawing a circle and automatically changing a color. Since the color has to be in hex, we adjust the variables for red, green, and blue independently, then form the color hex code inline with the bitwise formula you see as an argument to 'beginFill'.

As for the circle, we cheat by simply drawing with the built-in moveTo/drawTo commands 100 times, with our trigonometry friends 'cos' and 'sin' to bend it around the circumference. If it looks too scary, I made it compact so you can just cut 'n' paste and use its voodoo.

It's randomized, so you don't have too much control, but once it picks a new random circle and color, it shrinks it and changes the hue slightly for a few iterations each time. So you can somewhat control the outcome, yet still be surprised.

I hope it's fun for the people who don't find the code educational, and educational for the people who don't find it fun.

Follow me on Twitter for an update every time this blog gets a post.
Stumble it Reddit this share on Facebook

suddenly the moon