JavaScript

The Javascript sizecoding community has been quite active for years now.

Setting up

Tools

• Tools: JSCrush online JSCrush cli-tool Reg Pack
• Execution environment(s): Browser, Dwitter

Video display

There are basically 2 ways to go about getting some graphics on screen: 2D Canvas or WebGL.

2D Canvas

A minimal HTML 2D Canvas setup can be achieved like this:

<canvas id=c style=width:99% onclick=setInterval('',t=9)>

Or if you would like to autostart the display, you can use:

<canvas id=c style=width:99%><svg onload=setInterval('',t=9)>

Or these slightly shorter setups without fullscreen scaling:

<canvas id=c onclick=setInterval('',t=9)>

<canvas id=c><svg onload=setInterval('',t=9)>

A minimal 2D Canvas Example

Here would be an example of a simple 128 byte setup of a scrolling XOR-pattern using grayscale.

<canvas id=c onclick=setInterval('for(c.width=w=320,++t,o=w*w;o--;c.getContext`2d`.fillRect(X=o%w,Y=o/w,1-(X+t^Y)/99,1));',t=9)>

WebGL

To be added.

Sound

Something to get your journey started:

• Generate Sounds Programmatically With Javascript

More information to follow

Compression

No information yet

Additional Resources

Links

• JS1k

Tutorials / Postmortems

• I made 7 demos in 2 weeks for js1k
• Demystifying JSCrush

More to follow