> [!tldr] Making a very neat thing with very few characters of code.
Essentially [[Index Cards Index|Index Card]]-sized little applications. Often as [[Single HTML File App|Single File Web Apps]].
This is where you measure code in terms of *characters* not in terms of *lines*.
[[Other Bloggers|Frank Force]] does really cool stuff in this space.
# JS1K
JS1K is a competition for building self-contained demos using web technologies that fit in 1024 bytes.
> [!quote]
> The competition started as a gag in 2010 but quickly turned into a real competition. It runs yearly, usually in or around February / March. The core rule is no externals. You must submit a self-contained demo in 1024 bytes of pure JS, which in turn may use various web technologies.
## Examples
### Solar System Game
![[Pasted image 20260808093709.png]]
A functioning [solar system game](https://js1k.com/2017-magic/demo/2679) in 1016 bytes.
```javascript
function S(p,k){function t(f,e){f&&e&&(f.x+=e.x,f.y+=e.y)}function x(f,e){var g=f.x-e.x,b=f.y-e.y;n=Math.sqrt(g*g+b*b)}function u(f,e,g,b,d,h){return{x:f,y:e,r:g,m:b,s:d||g/5,c:h||"#08b"}}function y(f){q=f.pageX;r=f.pageY}var v=p.width,w=p.height,l=[u(v/2,w/2,20,0,200,"#fc3"),u(v/2,w/2+200,8,{x:1,y:0})],m,q,r,n;p.onclick=function(f){y(f);m?(m.m={x:(q-m.x)/99,y:(r-m.y)/99},l.push(m),m=0):m=u(q,r,5*Math.random()+5)};p.onmousemove=y;setInterval(function(){var f=l.length,e,g,b,d,h;for(e=f;e--;)for(b=
l[e],g=f;g--;)d=l[g],b.r&&d.r&&e-g&&(x(d,b),h=b.s*d.s/(n*n),t(b.m,{x:(d.x-b.x)/n*h,y:(d.y-b.y)/n*h}));for(e=f;e--;)t(l[e],l[e].m);for(e=f;e--;)for(b=l[e],g=f;g-- >e+1;)d=l[g],x(d,b),b.r&&d.r&&n<b.r+d.r&&(h=b.s<d.s?b:d,d=h==b?d:b,d.r+=h.r/2,d.s+=h.s/2,t(d.m,h.m),d.m&&(d.m.x/=2,d.m.y/=2),h.r=0);k.fillStyle="#222";k.fillRect(0,0,v,w);for(e=f+1;e--;)(b=l[e]||m)&&b.r&&(k.beginPath(),k.fillStyle=b.c,k.arc(b.x,b.y,b.r,0,7),k.fill(),b==m&&(k.strokeStyle=b.c,k.moveTo(b.x,b.y),k.lineTo(q,r),k.stroke()))},10)}
S(a,c);
```
That requires a canvas and context to work. So... as an actual workable bit of HTML:
```html
<html>
<head>
<style>
html, body { margin: 0; padding: 0; overflow: hidden; background: #222; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
function S(p,k){function t(f,e){f&&e&&(f.x+=e.x,f.y+=e.y)}function x(f,e){var g=f.x-e.x,b=f.y-e.y;n=Math.sqrt(g*g+b*b)}function u(f,e,g,b,d,h){return{x:f,y:e,r:g,m:b,s:d||g/5,c:h||"#08b"}}function y(f){q=f.pageX;r=f.pageY}var v=p.width,w=p.height,l=[u(v/2,w/2,20,0,200,"#fc3"),u(v/2,w/2+200,8,{x:1,y:0})],m,q,r,n;p.onclick=function(f){y(f);m?(m.m={x:(q-m.x)/99,y:(r-m.y)/99},l.push(m),m=0):m=u(q,r,5*Math.random()+5)};p.onmousemove=y;setInterval(function(){var f=l.length,e,g,b,d,h;for(e=f;e--;)for(b=l[e],g=f;g--;)d=l[g],b.r&&d.r&&e-g&&(x(d,b),h=b.s*d.s/(n*n),t(b.m,{x:(d.x-b.x)/n*h,y:(d.y-b.y)/n*h}));for(e=f;e--;)t(l[e],l[e].m);for(e=f;e--;)for(b=l[e],g=f;g-- >e+1;)d=l[g],x(d,b),b.r&&d.r&&n<b.r+d.r&&(h=b.s<d.s?b:d,d=h==b?d:b,d.r+=h.r/2,d.s+=h.s/2,t(d.m,h.m),d.m&&(d.m.x/=2,d.m.y/=2),h.r=0);k.fillStyle="#222";k.fillRect(0,0,v,w);for(e=f+1;e--;)(b=l[e]||m)&&b.r&&(k.beginPath(),k.fillStyle=b.c,k.arc(b.x,b.y,b.r,0,7),k.fill(),b==m&&(k.strokeStyle=b.c,k.moveTo(b.x,b.y),k.lineTo(q,r),k.stroke()))},10)}
var a = document.getElementById ('c');
a.width = window.innerWidth;
a.height = window.innerHeight;
var c = a.getContext ('2d');
S (a, c);
</script>
</body>
</html>
```
[[solar-system-game.html|Click this bad boy to see it in action]].
****
# More
## Source
- https://frankforce.com/2019-year-in-review-adventures-in-tiny-coding/
- https://js1k.com/about