Difference between revisions of "JavaScript"

Revision as of 08:11, 4 July 2024

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 a ways to go about getting some graphics on screen: Minimal 2D Canvas, WebGL and WebAssembly.

Minimal 2D Canvas

Here a a couple of minimal HTML 2D Canvas setups for animation:

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

And here are a few for static content:

<canvas id=c><svg onload=''><br/>
<svg onload=''><br/>

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.

WebAssembly

It is also possible to bootstrap a base64 binary of WebAssembly directly into HTML. There is a toolchain called wasmer ( https://github.com/Kaproncai/wasmer ) that helps you do this. Now you can write WASM code that writes pixeldata to memory and bootstrap that to HTML.

Sound

Here are a few methods to get sound for your tiny intro. Note that all of these methods will need a user-click to active the browser and start the intro.

Audio Buffer Source

// Audio element + Wave PCM
h=d='data:audio/wav;base64,'+'UklGRiQAAABXQVZFZm10...';
for(t=0;t++<8e5;) d+=String.fromCharCode(/*ByteBeat*/);
Z=new Audio(h+btoa(d));z.play();

Audio Buffer Source

// Audio element + buffer
A=new AudioContext;B=A.createBuffer(1, 8e5, freq);d=B.getChannelData(0);
for(t=0;t<8e5;t++) d[t]= /* FloatBeat */;
S=A.createBufferSource();S.buffer=B;
S.connect(A.destination);S.start();

Other Methods

Audio worklets, Nodes, WebGL, Speechsynth

More information

• Generate Sounds Programmatically With Javascript

Compression

When it comes to compressing your code, there are several options you can consider:

regPack / jscrush

The default packer that helps to rename and shuffle variables and code contructs to pack Javascript code. No additional bootstrapping overhead needed.

Bootstrapping PNG

It is possible to bootstrap ZLIB compressed code by encoding your code inside a (usually single line) PNG file and bootstrap that from HTML. For example the pnginator tool helps you create such a PNG file. Overhead size for bootstrapping the PNG is about 160 bytes so it is mostly viable for 1K and bigger sized intros.

Bootstrapping WEBP

The same technique is also possible for WEBP files, which use a LZ type of compression which tends to work a little less efficient. on compressing code.

Bootstrapping Brotli

It is also possible to bootstap Brotli compressed code to a WOFF2 font as described here:

• https://gist.github.com/lifthrasiir/1c7f9c5a421ad39c1af19a9c4f060743

Which can then be bootsrapped using the tool above and accessed from HTML with the following (256 character) code:

<body[ARBITRARY_BYTES_HERE] onload="new FontFace('x','url(#').load(C=$.getContext`2d`).then(A=>{document.fonts.add(A);C.font='1pc x';K=String.fromCharCode;for(A=I='';I<[NUM_GLYPHS];A+=K(W>>8,W&255))W=C.measureText(K(2e4+I++)).width;eval(A)})"><canvas id=$>

Or alternatively, if you are lucky maybe some parties will accept brotli code directly when you provide your own server:

require("http").createServer((req, res) => {
  const path = (req.url || "/").slice(1);
  if (path === "") {
    const buffer = require("fs").readFileSync("intro.htm.br");
    res.setHeader("Content-Type", "text/html");
    res.setHeader("Content-Encoding", "br");
    res.setHeader("Content-Length", buffer.byteLength);
    res.write(buffer);
  }
  res.end();
}).listen(1337);
console.log(`
Open http://localhost:1337 to watch intro.
This mini http server is only here to pass the Content-Encoding we are missing on file:// compared to the normal environment of a web page
`);

Additional Resources

Seminars

• Javascript and demoscene sizecoding, by p01
• JavaScript Haikus: My adventures in Tiny Coding by Frank Force

Tutorials / Postmortems

• Various writeups by Mathieu 'p01' Henri
• Various writeups by Frank Force aka KilledByAPixel
• Demystifying JSCrush

Tools

• regPack
• jscrush
• pnginator PNG bootstrapper
• Brotli WOFF2 font bootstrap
• Wasmer: WASM to HTML bootstrapper

Browser Intros

• 1024 byte intros
• 512 byte intros
• 256 byte intros
• 128 byte intros
• 64 byte intros

Other Links

• JS1k