Difference between revisions of "JavaScript"
From SizeCoding
(→Video display) |
|||
| Line 8: | Line 8: | ||
== Video display == | == 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: | ||
| − | |||
| − | |||
| − | |||
<syntaxhighlight lang="js"> | <syntaxhighlight lang="js"> | ||
<canvas id=c style=width:99% onclick=setInterval('',t=9)> | <canvas id=c style=width:99% onclick=setInterval('',t=9)> | ||
| − | |||
| − | |||
| − | |||
| − | |||
</syntaxhighlight> | </syntaxhighlight> | ||
| Line 27: | Line 22: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | Or without fullscreen scaling: | + | Or these slightly shorter setups without fullscreen scaling: |
| + | <syntaxhighlight lang="js"> | ||
| + | <canvas id=c onclick=setInterval('',t=9)> | ||
| + | </syntaxhighlight> | ||
<syntaxhighlight lang="js"> | <syntaxhighlight lang="js"> | ||
<canvas id=c><svg onload=setInterval('',t=9)> | <canvas id=c><svg onload=setInterval('',t=9)> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | + | ==== A minimal 2D Canvas Example ==== | |
Here would be an example of a simple 128 byte setup of a scrolling XOR-pattern using grayscale. | Here would be an example of a simple 128 byte setup of a scrolling XOR-pattern using grayscale. | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
Revision as of 16:12, 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
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:
More information to follow
Compression
No information yet
PNGcrush
Brotli
Additional Resources
Links
Tutorials / Postmortems
More to follow
