Difference between revisions of "JavaScript"
From SizeCoding
Line 9: | Line 9: | ||
== Video display == | == Video display == | ||
No information yet | No information yet | ||
+ | |||
+ | |||
==== Canvas ==== | ==== Canvas ==== | ||
− | + | A minimal HTML canvas setup can be achieved like this: | |
+ | |||
+ | <syntaxhighlight> | ||
+ | <canvas id=c onclick=setInterval('',t=9)> | ||
+ | <canvas id=c><svg onload=setInterval('',t=9)> | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | Here would be an example of a simple scrolling XOR-pattern using grayscale. | ||
+ | |||
+ | <syntaxhighlight> | ||
+ | <canvas id=c onclick=setInterval('for(c.width=w=320,++t,i=w*w;i--;c.getContext`2d`.fillRect(X=i%w,Y=i/w,1-(X+t^Y)/99,1));',t=9)> | ||
+ | </syntaxhighlight> | ||
==== WebGL ==== | ==== WebGL ==== |
Revision as of 15:00, 2 July 2024
The Javascript sizecoding community has been quite active for years now.
Contents
Setting up
Tools
- Tools: JSCrush online JSCrush cli-tool Reg Pack
- Execution environment(s): Browser, Dwitter
Video display
No information yet
Canvas
A minimal HTML canvas setup can be achieved like this:
<canvas id=c onclick=setInterval('',t=9)>
<canvas id=c><svg onload=setInterval('',t=9)>
Here would be an example of a simple scrolling XOR-pattern using grayscale.
<canvas id=c onclick=setInterval('for(c.width=w=320,++t,i=w*w;i--;c.getContext`2d`.fillRect(X=i%w,Y=i/w,1-(X+t^Y)/99,1));',t=9)>
WebGL
To be added.
Sound
Something to get your journey started:
More information to follow
Compression
No information yet
PNGcrush
Brotli
Additional Resources
Links
Tutorials / Postmortems
More to follow