Posted by: pixelero | February 26, 2009

## #tweetcoding

A blogpost about my entries for #tweetcoding – a nicely challenging competition organized by Grant Skinner. What can be done with an actionscript code of 140 characters – see link for further info.

My first approach was very similar to entries on 25 lines of actionscript competition, trying to chain stuff like in ‘addChild(new Bitmap(new BitmapData(w,h)))’ – now that only takes already 40 valuable chars. For a code 140 chars isn’t much, it’s in fact almost nothing – but I do like challenges like this. On the other hand, the ‘gimme code’ already had functions like g = graphics, s = Math.sin ls =graphics.lineStyle predefined, so using these might be a better approach. PerlinNoise or drawTriangles may not be the most suitable commands for use in this context, imho. My method was first to write a code snippet of about 200 chars, then start compressing it. This minifier has also been very useful, thanks to Kelvin.
Now that I’ve five entries posted so far – and a lot ideas I’ve had to reject, because of the length>140, I though I could do a small post having a closer look on what the codes on my latest posts actually do:

TunnelOfStripes

g.clear();
a=mouseX;// a=x-coordinate,
b=mouseY; // b=y-coordinate
c =++i % 8 / 8 + 10; // c=radius, at the end of tunnel starts with a zigzag value 10=< radius <11
d = (i & 8 ) << 4; // d=color, stripes by starting with 0x00 or 0x80

for (j = 64; j–; ) {

ls( /* ls=lineStyle
* I’m not using a solid fill, it’s circle’s thickness width enough
* to cover the area
* increase the radius by factor 1.1, notice the initial value 10…11
*/

c *= 1.1,
/* color, initial value was 0x00 black or 0x80 dark blur,
* after the first subtract jumps to light yellowish values like 0xF1F180
* darkens red and green channels, blue gets cycling 00 or 0x80
*/

d-=0x50580);
g.drawCircle(
/* x and y starts from mouse’s position, and approaches the center of stage:
* x-coordinate, in the form a = (1*250+49*a)/50 it’s easier to see it approaches 250
* from 140 I had a couple of extra characters left
* so I added Math.sin(i/16), giving an extra waving effect
*/
a = 5+a – a/50+ s(i/16),
b = 5 + b – b / 50,
c)
}

Recursion – I wanted to check what could be gained by calling back the function f(e:Event) itself, actually maybe not much – a bit hard case for utilising the local and global vars in a correct way, just that I’ve always found recursive functions nicely challenging, and I later notices Grant’s first example of a 140 code was a recursion also.. This code was btw exactly 140 chars – no place for changes. And if you do something with this code, be careful, recursion’s a most powerful way to get your processor stucked, a pita too often ! Hint: the code gets the variables from mouse’s position, I think the most interesting setting are below the center point.

if(!i++){ // i is used for checking the level of iteration, if i==0, initialize some vars and setup graphics
g.clear();
g.beginFill(0);
a=b=250; // x and y for circles, y not changed
w=500; // stage width
c=mouseY; // radius for largest 1st generation sphere
d=mouseX/w // scaling between iterations, from 0 to 1
}

if(i<9){ // control over not going too deep in iterations
g.drawCircle(a,b,c); // like x,y and radius in this case
a*=d; // on a iteration, x and radius are scaled
c*=d;
f(e); // I’ve always been obsessed with playing with recursions
a=w-a; // reflects x, gives the symmetry
f(e); // only room for two f(e)’s, no sierpinski’s this time
a=(w-a)/d; // return to old value of a, warning, might cause div by zero, if mouseX=0
c/=d // in a block you can leave out the ; at end
}
i– // ; not necesserly here either

And as a bonus: an ‘untweetable’ version- with a code > 140

Bullets – one more ‘untweetable’

And don’t forget to also check Quasimondo’s or Rob Muller’s entries – among all the other impressive stuff of course.

Edit March 12, 2009 : Marvellously nice results of tweetcoding context ! Ta-daa …

## Responses

1. Those entries are absolutely amazing!!!

2. It’s cool 🙂
But I didn’t quite understood how happens the inversion of colors.

3. wicked!

Some nice Tibetan tapestries there!

4. Thanks everyone for comments !

@Roman: you mean circle’s even/odd fill ?
if you test:

graphics.beginFill(0);
graphics.drawCircle(200, 200, 100);
graphics.drawCircle(300, 200, 100);
graphics.drawCircle(250, 280, 100);

You’ll get something like this: http://www.petrileskinen.fi/Actionscript/Tweetcodes/EvenOdd.gif , areas where two circles overlap are white

on the other hand:
graphics.beginFill(0);
graphics.drawCircle(200, 200, 100);
graphics.beginFill(0);
graphics.drawCircle(300, 200, 100);
graphics.beginFill(0);
graphics.drawCircle(250, 280, 100);

draws three black circles above each other apprearing as a solid form with no winding.

5. Great stuff – thanks for explaining the code. And glad you like the minifer … I just did a blog post with my entries (and a howto for compiling tweetcodes with FDT and mxmlc) as well, check it out if you are interested: http://www.kelvinluck.com/2009/02/tweetcoding-140-characters-of-actionscript-3/

6. Fantastic!

7. WOW it’s amazing and truly inspiring!

Can you please share the bullets code or send it via email to me? I simply love the effect!!

Cheers and keep doing this!!
NFS

8. @all: thanks
@Nuno: code snippet for bullets:

g.clear();
g.beginFill(0);

if (!(i++ %60)) for(a=[],x=stage.mouseX,y=stage.mouseY,j=402;j–;)a.push(3/r(),0);
for(k=j=0;k-402;j+=0.0314)lt(s(j)*(d=25+(a[k+1]+=(a[k++]-a[k++])/8)),d*m.cos(j));

// 3.0/Math.random() ‘s the ‘magic trick’ giving the broken shape …

remember it’s a part working with the ‘gimme code’: http://gskinner.com/playpen/tweetcoding.html