Difference between revisions of "JavaScript"
(→Sound) |
|||
| Line 67: | Line 67: | ||
== Compression == | == 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. | ||
| − | ==== Brotli ==== | + | ==== 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: | It is also possible to bootstap Brotli compressed code to a WOFF2 font as described here: | ||
* https://gist.github.com/lifthrasiir/1c7f9c5a421ad39c1af19a9c4f060743 | * https://gist.github.com/lifthrasiir/1c7f9c5a421ad39c1af19a9c4f060743 | ||
| − | Which can then be | + | Which can then be bootsrapped using the tool above and accessed from HTML with the following (256 character) code: |
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| − | <body | + | <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=$> |
| − | 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=$> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | Or alternatively, if you are lucky some parties will accept brotli code directly when you provide your own server: | + | Or alternatively, if you are lucky maybe some parties will accept brotli code directly when you provide your own server: |
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
require("http").createServer((req, res) => { | require("http").createServer((req, res) => { | ||
Revision as of 07:48, 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 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
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
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:
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
Tools
