1k javascript demos

If you don't know about it - you may find it intriguing.

http://js1k.com/home

Quite unbelievable.

Check out all the demos here:

everything from a racer to chess to tetris in under 1k

Documented source included.

 

Check out this 2 player pong.

in under 1k lol

(a,z player 1
mouse player 2)

 

Now let's build the smallest Unity standalone you can make!

 

Drifting slightly off-topic since these aren't javascript, but in terms of impact per kb, for me nothing has yet beaten Omniscient (A descent like flythrough in 4k. With sound).

If you want something much larger, the .kkrieger guys at www.theprodukkt.com have a much prettier 3D level using much more space. It weighs in at a hefty 96kb.

Waiting to see what Allegorithmic's technology allows in U3.1...

 

Ok.

Have a look - this one is Wipeout style 1k demo. http://js1k.com/demo/763

 

Here's the code:

Code (csharp):

1. /* Wipeout 1k */
2.  
3. var M = Math;
4. var sin = M.sin;
5. var cos = M.cos;
6.  
7. var d = document;
8. var canvas = d.getElementById("c");
9. var ctx = canvas.getContext("2d");
10. d.body.style.margin = 0;
11. d.body.style.overflow = "hidden";
12. var width = canvas.width = innerWidth;
13. var height = canvas.height = innerHeight;
14.  
15. var left = -width/2;
16. var ttop = -height/2;
17.  
18. ctx.translate(-left,-ttop);
19.  
20. var scale = height/4;
21.  
22. // inefficient, I know, but hey we have the bytes :-)
23. var text =  ["1111   111",
24.              "   1  1",
25.              "   1   11",
26.              "   1     1",
27.              "1  1     1",
28.              " 11   111",
29.              0,
30.              "  1   1  1",
31.              " 11   1 1",
32.              "  1   11",
33.              "  1   11",
34.              "  1   1 1",
35.              " 111  1  1"];
36. var textscroll = -20;        
37. var textoffset = 3;        
38. var rings = 32;
39. var ringsize = 30;
40.  
41. var zmax = 3;
42. var zstep = 2*zmax / rings;
43. var tstep = 2*M.PI/ringsize;
44.  
45. var zshift = zstep;
46.  
47. function rgb(r,g,b) { return "rgb("+ ~~r +","+ ~~g +","+ ~~b +")" }
48.  
49. setInterval(function() {
50.  
51.   ctx.fillStyle = "black";
52.   ctx.fillRect(left,ttop,width,height);
53.   var date = +new Date;
54.  
55.   zshift-=zstep/3;
56.   if (zshift < 0)
57.   {
58.     zshift += zstep;
59.     textscroll++;
60.   };
61.  
62.   var ringb = 0;
63.  
64.   var zr=rings-1;
65.   while ( zr--)
66.   {
67.     var z = zr * zstep + zshift;
68.    
69.     var color = 200-200/(zmax+zshift) * z;
70.     var color2 = color/2;
71.  
72.     ctx.strokeStyle = rgb(color2,color2,color2)
73.    
74.     var posx = sin(z+date/1700) * 70;
75.     var posy = cos(z+date/1100) * 70;
76.          
77.     var ringf = []
78.     for (var r=0 ; r<ringsize*4 ; r+=4)
79.     {
80.       var column = r/4;
81.       var t = column*tstep + M.PI + sin(date/3700); // includes roll
82.      
83.       var multiplier = scale / z;
84.       ringf[r] = posx + cos(t) * multiplier;
85.       ringf[r+1] = posy + sin(t) * multiplier;
86.       ringf[r+2] = posx + cos(t+tstep) * multiplier;
87.       ringf[r+3] = posy + sin(t+tstep) * multiplier;
88.      
89.       var textindex = (textscroll + zr) % (40);
90.       var textcolor1 = text[textindex] ? text[textindex][column-textoffset] : 0;
91.      
92.       var dark = color/4;
93.      
94.       ctx.fillStyle= rgb(
95.         +textcolor1                                 ? M.max(150 +~~(105*sin(date/100)), dark) : color2/4,
96.         column % 16 == 0  (zr + textscroll) % 12  ? 255 : dark,
97.         dark);  
98.        
99.       if (ringb)
100.       {
101.         ctx.beginPath();
102.         ctx.moveTo(ringf[r], ringf[r+1]);
103.         ctx.lineTo(ringf[r+2], ringf[r+3]);        
104.         ctx.lineTo(ringb[r+2], ringb[r+3]);
105.         ctx.lineTo(ringb[r], ringb[r+1]);
106.         ctx.fill();
107.         ctx.stroke();
108.       }
109.     }
110.     ringb = ringf;
111.   }
112. }, 50);

 

Over time, I have noticed quite a few requests and questions regarding something similar to this.

I was wondering, how difficult would it be to implement this technique (the 1 js demo) in Unity (Hopefully with free version).

Would we go about it by creating a new mesh - continually creating the new bits in front and deleting the vertexes that have passed the player?

Maybe this could be a community effort - posted to the Wiki.