Complete list of #JS1k tweet-sized entries


The #JS1k contest ended last night. It challenged web coders to write some interesting JavaScript in 1 kilobyte (1024 bytes) or less. That script is put into a basic html page which includes a canvas element and not much else. It’s a pretty crazy challenge – 1k is not a lot of code – and there are some really clever micro-optimisations going on in some of the entries.

But the homepage also states “Bonus points if your submission fits in one tweet ;)“. Now that’s a whole other level of madness. Useful code in 140 bytes? You’ve barely enough room to find the canvas element, let alone do anything with it!

So I decided to make an (unofficial) list of all the entries that are or claim to be tweet-sized. The current js1k homepage doesn’t offer a way to filter entries by size (hint, hint!), so I think this is pretty useful. I listed my own tweetable entries in an earlier post.

Also, I’m giving a copy of Douglas Crockford’s “Javascript: The Good Parts” as a prize for entry that the judges deem is the best of the tweetable ones. I think it’s a fitting prize, packing a whole lot of awesome into a thin package ;)

Tweetable #js1k entries:

vladmanea (134b)

@vladmanea

students.info.uaic.ro/~vlad.manea
Enhanced spiral, highly customizable (see full
source for details). Has approx. 5 chars left for you to use for
customizing the values :) The values of 1 and the red color yield to a
rose. Other values may yield other shapes.

demo

source

original

demo thumb
Tom Hargreaves (142b)
Draws a sunflower head, in a tweet-sized 140 characters (142 bytes)
demo

source

original

demo thumb
Pogocsan Florin (139b)
Alternate squares, fits in a tweet :)
demo

source

original

demo thumb
Eleasar (139b)
Morse code in a tweet ;)

Enter your message at the prompt, an alert-Box shows the message
combined with it’s morse code representation.

Only ASCII letters a..z/A..Z and german umlauts äöü/ÄÖÜ are supported,
other characters ignored (resulting in an additional space in the
output).

Update of #533: shorter algorithm, so room left to support upper case,
prevent “undefined” prompt message, include umlauts.

demo

source

original

demo thumb
AlteredQualia (140b)

@alteredq

http://alteredqualia.com/
Hypnotunnel in a tweet.

Playing with transparency, modulo and blowing over max lightness.

For slightly different speed and direction change 84 to 63, 67, 96.

Warning: there is some serious flickering, don’t watch this demo if you are prone to seizures.

demo

source

original

demo thumb
Mathieu ‘p01′ Henri (139b)

@p01

www.p01.org
tweet-sized entry: Embossed Mandelbrot Fractal rendered onto an HTML5 Canvas element

demo
updated

source

original

demo thumb
Howard Yeend (134b)

@user24

puremango.co.uk
cave updated again to fix reported firefox hang with setInterval(foo(),1);

Also includes the globalAlpha fix as chrome won’t allow <0.01 and Opera won’t allow <0.1 :(

demo

source

original

demo thumb
Pinhas (140b)
Cesar cipher (http://en.wikipedia.org/wiki/Caesar_cipher) encryption and decryption.

Handles lower case letters a..z only. Any other character will be replaced by a space.

For decryption enter the key as a negative number.

Based on Eleasar’s morse encoder (http://js1k.com/demos#id533)

demo

source

original

demo thumb
Pa7 (140b)
This app encrypts a text (userinput) into a
picture containing just alpha values which represent single characters.
Decrypt by reading pixelwise and creating strings from charactercodes.
E.g. you could encrypt code into an image, decrypt it in your frontend
and eval the decrypted code.
-
The last improvement of this demo:
now it has 140 chars instead of 141
demo

source

original

demo thumb
Alex Kloss (138b)
Rohrschach – a sort of reduced spirograph in 138
bytes

move the mouse slowly over the canvas to see the effect If you fold over
the 45° diagonal, you can reduce the source to only 129 bytes:

document.body.children[0].onmousemove=function(e){(C=this.getContext(’2d’))[r='fillRect'](x=e.pageX,y=e.pageY,2,2);C[r](y,x,2,2)}

demo

source

original

demo thumb
Howard Yeend (140b)

@puremango

www.puremango.co.uk
Another tweetable entry! This one really is stained glass :)

demo
updated

source

original

Howard Yeend (138b)

@puremango

www.puremango.co.uk
Rot13 in a tweet – now shorter, and with more functionality!

demo
updated

source

original

Howard Yeend (140b)

@puremango

puremango.co.uk
Tweet-sized blocks of colour. Colour choosing technique lifted from http://js1k.com/demo/230 ;)

140 bytes including #js1k hashtag! woop woop!

demo
updated

source

original

Stefan Schneider-Kennedy (140b)

my.opera.com/splondike
Generates interesting JS1K logos (in a tweet!).
Updated with a more interesting shape, and decoupled the position from
the shape (I could spare the bytes).

Other interesting variations can be generated by changing the rotate
parameter, or the number of rotations. The following rotate arguments
make nice shapes: 33,34.2,37,37,45,49,54,55,57,59,66 or 67.

demo

source

original

demo thumb
Eleasar (140b)
Morse code in a tweet ;)

Enter your message at the prompt, an alert-Box shows the message
combined with it’s morse code representation.

Only characters a..z (lowercase ASCII letters) are allowed, other
characters ignored (resulting in an additional space in the output).

demo
updated

source

original

demo thumb
nic (140b)

@nicrizzo

www.nicolarizzo.com
My old broken TV, grayscale again, in a tweet :)

demo

source

original

demo thumb
bradleymeck (139b)
Click on the @ to make it change speeds!

new: Lower the speed max by 1/2, chrome url compatible (cut an paste
source to address bar of Chrome), wont overflow anymore (at cost of
being 64% screen width), 1 char less!

demo

source

original

demo thumb
Michal Hantl (140b)

@michal_hantl

twitter.com/michal_hantl
It’s raining cash

demo

source

original

demo thumb
Otto Bibartiu (133b)
Ambient background color changer (tweetable).
Move your mouse over the page and the background changes smoothly from green to blue.
You can easily customize the colors by editing the last part of to code…
demo

source

original

demo thumb
ryan (140b)

@mistabell

shiing.com
twitter-friendly sunburst

*ff-friendly version (fixed-size width & height)

demo

source

original

demo thumb
Anthony Bowyer-Lowe (130b)

@yoknapatawpha

lowbroweye.com
Tweetable (130 bytes) approximate calculation of
Pi with random numbers.

Essentially, darts are thrown randomly at a 1 unit size square . The
proportion of them which within an inscribed 1 unit radius circle
(distance calculated with Pythagora’s theorem) versus the total thrown
converges on pi given a long enough run-time.

This implementation only uses a single quadrant of the square/circle to
save bytes.

demo

source

original

demo thumb
Chris Francis (140b)

@chrisfrancis27

chrisfrancis27.tumblr.com
A simple ever-changing, multi-coloured fence disappearing into the distance. Fits in a tweet, complete with #JS1K hashtag!

demo
updated

source

original

demo thumb
Hans Schmucker (140b)

@Schmucker

www.tapper-ware.net
Update: Adds Opera compatibility by replacing
location.search parsing with parent.variable for counting. See previous
entry for description.

demo
updated

source

original

demo thumb
Matthias Reuter (120b)

@gweax

united-coders.com
In a tweet: Randomly colorizes the elements of a
page. Unfortunately, the demo page only has three visible elements.
Ver.2, down to 120b)

demo

source

original

demo thumb
Karsithe (140b)

@karsithe

hazelmckendrick.com
The script renders a 2d image of a road running through a desert. It’s dumb, but it does fit in a tweet…

demo

source

original

demo thumb
Alexey Malyshev (140b)

@alexeym

malyshev.info
True binary clock. Shows number of milliseconds since Jan 01 1970. Fits in a tweet.

demo

source

original

demo thumb
Hans Schmucker (146b)

@Schmucker

www.tapper-ware.net
A little romantic waterfall in a nostalgic color
palette. In other words: Random ASCII blocks scrolling down. Not exactly
140 bytes in utf-8, but still 140 characters (Twitter accepts it).

demo
updated

source

original

demo thumb
Hans Schmucker (140b)

@Schmucker

www.tapper-ware.net
A strangely growing mountain in Twitter-friendly 140 characters.

demo
updated

source

original

demo thumb
Christian Neukirchen (139b)

@chneukirchen

chneukirchen.org
Munching squares in twitterable size

A classic display hack (http://en.wikipedia.org/wiki/Munching_square), in under 140 chars.

demo

source

original

demo thumb
Charleston Waltnikki (140b)

trotspot.appspot.com
Computes pi in a non-optimal fashion.

demo

source

original

demo thumb
Thomas Fuchs (94b)

@thomasfuchs

mir.aculo.us
A tweet-length JavaScript quine (a program that outputs it source). As I’m a juror, this is for the showcase. :)

demo

source

original

demo thumb
Mathias (81b)

@mathias

mathiasbynens.be
Let’s just say I called it “ἐπιληψία”.

demo
updated

source

original

demo thumb
Christopher Otto (141b)

@crassauto

timeascolor.com
Time As Color shows the current time as color by
setting red to the hour, green to the minute, and blue to the second. I
originally created it in 2000 and it was shown at Gasworks London,
Boston University, and the Bergen Kunsthalle. Last year I recreated it
as an iPhone app. For this version I decided to take up the challenge of
making it work in a tweet and got it to work at exactly 140 characters.

demo

source

original

demo thumb
Amrish Kapoor (137b)

@amrishk

github.com/amrishk
Tweetable test for a web page’s accessibility. It
finds all the images with a missing ‘alt’ attribute and highlights each
one of them with a thick red border.

demo

source

original

demo thumb


Related Posts:

, , , ,

  1. #1 by Crookes on September 30, 2010 - 11:17 am

    Love that you included all the tweetable ones – a bit annoying you couldn’t on the site itself I thought!

  2. #2 by lekzaha on December 1, 2010 - 12:18 am

    download System – BigoCaptcha ตรงไหนหรองับ

Comments are closed.