Turing tarpit

I quickly became interested in addicted to Grant Skinner’s genius idea: tweetcoding. What is it? It’s a programming challenge where you try to develop “something cool” using Actionscript in 140 characters. The 140 chars are a hard limit as you have to submit your code via a tweet.

The “something cool” should be taken literally. In this first go-around, the judging criteria was decided after the submission deadline. This reminded me of Seth Godin’s Tribes where a tribe leader doesn’t need to have every detail ironed out. Grant just threw out the idea with some “gimme” code,  got the heck out of the way and watched wonderful things happen.

The initial rules were all we had to begin with. However, things got really interesting after Robert Cadena developed the tweetcoding integrator at http://tweetcoding.machine501.com. This page lists all the #tweetcoding tweets with the code submissions compiled into SWFs.  Now we could look at everyone’s submissions, run the apps on the browser ( as opposed to copying and pasting each into a .fla ) and learn some new tricks ( as well as some bad programming habits ).

What can you learn form 140 chars?

Quite a bit actually. When the compiler strict mode is off, some very interesting shortcuts are possible. For me, the big ideas were the most interesting as opposed to the little coding efficiencies discovered during the process. Don’t get me wrong, trying to figure out the best way to implement a loop in the smallest number of characters is a very interesting challenge. However, there was a different group learning dynamic that was more interesting.

I think we spent as much time looking at each others’ submissions and learning new ways of doing things as we did coding our own submissions. Now that submissions have closed, it was cool to take a step back and see how the applications evolved over time as folks learned new techniques from each other.

Learning happened in big leaps

When you start from the early entries at the bottom of the page and work your way up it provides an insight into the evolution of collective thought of a learning community. Learning happened, not in incremental steps, but in sudden leaps as  innovative implementations were submitted.

For example, the first few submissions were non-interactive circles and line drawings built on top of Grant’s first example. Then @mikeysee (Michael Cann) started to use the mouse coordinates. There were a couple of submissions that used mouse coordinates after that. Then there was a stage where folks started to experiment with color. And so it went, with each new innovation or technique adopted by subsequent submissions.

Some of the big learning leaps that come to mind are: Using the Flash 10 3D parameters (cheap motion), using Bitmaps to draw display objects (less code). using Fill interference (cheap visual complexity) ,  cheap particle motion,  using perlin noise, generating audio etc. When I say cheap, I mean an efficient minimalist way of doing something in as few characters as possible.

Settling into comfort zones

After a while. the episodic learning leaps were not as visible as more and more developers joined in and settled into their comfort zones. Most developers settled on an idea or technique and churned out a few submissions based on that. They then moved onto another technique.

However, there were exceptions like @quasimondo (Mario Klingemann) who churned out an incredible array of eclectic stuff in rapid sequence.

Now the community had more depth with novices and experts with good grasp of mathematics and trigonometry joining in and submitting some really fresh stuff.

My personal learning experience ( described in terms of comfort zones )

I initially started by trying to create “something cool” as that was the only critera that was out there. I remembered a screencast by Lee Brimelow on some interesting visual effects created with repeated application of  Filters to a BitmapData object. I believe he repeatedly applied the blur and scroll filters to creat an effect like fire. It was an interesting technique in that you draw something on stage and then draw what is on stage onto a transparent BitmapData object with filters and matrix transformations.

Zone 1: Make it colorful and interesting using BitmapData scrolling

During these early stages I was just trying to get my foot in the door. No great inspirational ideas, just try to make “something cool.” However much I tried, I just couldn’t keep anything that had a blur filter within 140 chars. So, it had to be something that just had scrolling and color. So that was my first comfort zone.

Line scroller

My first submission was “Line Scroller” which was very leaky.  The following bug-free version was submitted later. Something I learned in this first submission was a minimalist way to choose a random color.

if(!i++){b=new BitmapData(550,400,1,0);addChild(new Bitmap(b))};
ls(5,r()*1.67e7);lt(mouseX,mouseY);b.draw(this);b.scroll(0,-8);

Paint Spill

Paint Spill is very similar to the line scroller in that it followed the same principle of scrolling. I experimented with bit shifting to choose a random set of  colors in this submission.

!i?addChild(new Bitmap(b=new BitmapData(i=550,i))):ls(r()*9,r()*1e7<<mouseX);
mt(o.x=r()*i,0);lt(o.x,1);
b.draw(this);b.scroll(0,1);

Zone 2: Make it interactive using mouse input

I tried to have some user interaction in all my submissions. I really liked some of the self-running submissions that drew some amazing recursive shapes with 3D transformations. However, that wasn’t my comfort zone. I decided to concentrate on giving the user some control to draw “something cool.”

The mouse was the cheapest way to record user input and make things interactive. Recording mouse coordinates were very cheap as you can directly access the MouseX and MouseY globals. Intercepting mouse clicks, mouse downs and mouse up were very expensive as they require event handlers.

I was awestruck when the first submission that recorded microphone input came along. Here was another input method that we don’t usually think about.

My next submission was a painting program. The first “painting” type submission was by @scarybug. I went a little further by allowing the user to choose from a set of 10 colors by repeated mouse clicks. This includes something I learned from another submission: You can call a function by  using only its function name ( without the parentheses ) if you just want the default values for its arguments.

Circle Paint

t='mouse';l=stage.addEventListener;
l(t+'Down',function(){ls(9,1.67e7*s(m.PI/(i++%10+1)))});
g.drawCircle(mouseX,mouseY,5);l(t+'Up',ls);

I couldn’t resist including a little masterpiece drawn with a 140 char paint program.

Zone 3: Make it play worthy using casual gaming concepts

Building on my effort to make things interactive, I decided to concentrate exclusively on games. In 140 characters you can only do so much in terms of gameplay.

The first issue was what can be sacrificed without harming the overall experience. The first to go was the winning condition. I couldn’t waste precious characters in a game loop that checks to see if the player has won. Winning had to be visual and obvious to the player. For example, if you kill all the aliens, you win. If you drop the ball, you lose.

The next issue was the instructions. These had to go on a separate tweet. The other aspect was to develop 140 char backstory to develop motivation to play. If you thought coding a game in 140 chars was hard, try to write a backstory or game instructions in 140 chars.

Developing games in 140 chars is hard! The key is to figure out quickly if an idea is going to work or not. If not, go onto something else or try a variation. For example, the Juggle submission initially started out as a “Bubble Wrap” game. It then moved into a balloon popping game before finally settling into the ball juggler.

Most of the unique features were encountered by pure chance and included. For example, the ball disappearing off the top of the stage when volleyed just happened while I was balancing game parameters. I could see that it added to the gameplay by introducing an additional challenge of predicting where the ball would appear next.

My final three submissions were all games.

The Horde

Lame backstory:

Kill one and another takes its place. The only option is to give up and let em through. Or you will go insane!!!

for each(a in o)a.y+=s(a.x),a.hitTestPoint(mouseX,mouseY)?a.y=0:0;
++i<50?(o[i]=addChild(new Bitmap(new BitmapData(9,9,0,0)))).x=r()*550:0

Juggle

Instructions:

Use mouse pointer to volley the ball. How many times can you volley before it falls?

if(!i){p=u=v=a=.1;q=99;i=m.pow}
if(i(q-(m=mouseX),2)+i(p-mouseY,2)<400){v=-9;u=q-m}
v+=a;p+=v;q+=u*.25;g.clear();ls(3);g.drawCircle(q,p,20)

Guess the Number

Instructions:

Guess the number between 0 and 99 inclusive. Move to mouseY=0 (off top of stage) to guess (2nd num). > < = shows if it’s too high, low or just right!

if(!i){(addChild(t=new TextField())).y=p=99;i=int(r()*p); g=c=''}
a=int(mouseX/5);
if(!mouseY){g=a;g>i?c='>':g<i?c='<':c='='}
t.text=a+' '+g+c

Judging criteria

Grant skinner sent this tweet yesterday:

#tweetcoding will be judged on aesthetics, idea, interaction, uniqueness, & code. Should have the results early next week.

The criteria are pretty good with equal chance for interactive and non-interactive submissions to score well. What are my chances? I’ll probably score high on idea and interaction. Maybe in uniqueness as well. However, I’ve done nothing special in terms of aesthetics and code.

Overall it was a fun learning experience. Looking forward to the results.

Update: Results

http://gskinner.com/playpen/tweetcoding_0/

“Juggle” got an honorable mention. The winning entry by @tomee6 was an exceptional diagonal snake game.