15 de Diciembre del 2010
JS1k is a really nice contest for coding tiny 1 kb Javascript programs and try to do something nice in that few available space. In its second edition, all the entries must be Christmas themed.
My contribution to the contest has been a 3D Christmas tree (note it doesn’t work in IE, and works slow in any current browser except in Chrome). I’m really lazy to write articles explaining how I do my visual effects, but in this case a lot of people are asking me to do it, so let’s try it in a visual way:
Finally, some size optimization tricks
I used several tricks to make the code fit in 1 kb. The most of them are the usual tricks for reducing Javascript code size, like renaming variables to single character names, removing white spaces, unnecesary semi-colons and so on.
It is also very common to assign functions you use more than one time to variables to avoid the repetition. For example, if I do r=Math.random;, I can call r() each time I need a random number.
I used some few math tricks, like using cos(angle+11) to approximate sin(angle) and modular arithmetic.
Finally, I’ve used some other tricks like reusing functions. A function does different things depending on if it received parameters or not. This saves some few bytes from writing again “function”.
Writing code for limited size competitions is mostly like a puzzle or logical game. In the most of the cases there is not a common rule to do it, but just thinking and trying different ways to achieve the same goal in less space. It is usually possible to fit 5 or 6 kb of normal code in 1 kb if you try it and don’t give up.
javascript
神奇3D圣诞树祝广大技术人员圣诞快乐！
2010-12-24 14:28 | 52452次阅读 | 来源：CSDN 【已有97条评论】发表评论
| 作者：陈丽辉 | 收藏这篇资讯
下面的3D圣诞树神奇效果是西班牙程序员Roman Cortes的js1k编程比赛参赛作品。需要注意，它也是对浏览器JavaScript引擎能力的很好检验。只有现代浏览器（程序员同学，你们懂的）才能正常查看。经测试，Chrome非常流畅，Opera 11也没有问题，Firefox较慢，IE各版本包括IE 9 beta都不支持。（更正：IE 9 beta可以查看，但非常慢，以至于测试的时候心急的编辑没有看到动画效果。感谢@kaverjody指出。）
这个比赛要求用1024字节以内的JavaScript代码实现一个效果。第一届的众多参赛作品充分展示了JavaScript语言的强大和无限潜力。精彩作品包括：
冠军作品用1023字节实现了超级马里奥游戏。
亚军则是带人工智能的国际象棋（水平不错，反正我下输了一盘）。
季军是带音乐的俄罗斯方块。
第二届则要求大家围绕圣诞主题展示身手。这里有更多奇思妙想，你也可以参加！3D圣诞树的代码如下：
M=Math;Q=M.random;J=[];U=16;T=M.sin;E=M.sqrt;for(O=k=0;x=z=j=i=k<200;)with(M[k]=k?c.cloneNode(0):c){width=height=k?32:W=446;with(getContext('2d'))if(k>10|!k)for(font='60px Impact',V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)':V+(147+I)+','+(k%2?128+I:0)+','+I+',.5)':'#cca',i<7;)beginPath(fill(arc(U-i/3,24-i/2,k==13?4-(i++)/2:8-i++,0,M.PI*2,1)));else for(;x=T(i),y=Q()*2-1,D=x*x+y*y,B=E(D-x/.9-1.5*y+1),R=67*(B+1)*(L=k/9+.8)>>1,i++<W;)if(D<1)beginPath(strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'),moveTo(U+x*8,U+y*8),lineTo(U+x*U,U+y*U),stroke();for(y=H=k+E(k++)*25,R=Q()*W;P=3,j<H;)J[O++]=[x+=T(R)*P+Q()*6-3,y+=Q()*U-8,z+=T(R-11)*P+Q()*6-3,j/H*20+((j+=U)>H&Q()>.8?Q(P=9)*4:0)>>1]}setInterval(function G(m,l){A=T(D-11);if(l)return(m[2]-l[2])*A+(l[0]-m[0])*T(D);a.clearRect(0,0,W,W);J.sort(G);for(i=0;L=J[i++];a.drawImage(M[L[3]+1],207+L[0]*A+L[2]*T(D)>>0,L[1]>>1)){if(i==2e3)a.fillText('Merry Christmas!',U,345);if(!(i%7))a.drawImage(M[13],((157*(i*i)+T(D*5+i*i)*5)%W)>>0,((113*i+(D*i)/60)%(290+i/99))>>0);}D+=.02},1)
实现原理可以参考作者的博客。
更新：刚才发现作者原来还实现过之前也在社区里引起热议的多个作品：
Enjoy！
神奇3D圣诞树祝广大技术人员圣诞快乐！
2010-12-24 14:28 | 52452次阅读 | 来源：CSDN 【已有97条评论】发表评论
| 作者：陈丽辉 | 收藏这篇资讯
下面的3D圣诞树神奇效果是西班牙程序员Roman Cortes的js1k编程比赛参赛作品。需要注意，它也是对浏览器JavaScript引擎能力的很好检验。只有现代浏览器（程序员同学，你们懂的）才能正常查看。经测试，Chrome非常流畅，Opera 11也没有问题，Firefox较慢，IE各版本包括IE 9 beta都不支持。（更正：IE 9 beta可以查看，但非常慢，以至于测试的时候心急的编辑没有看到动画效果。感谢@kaverjody指出。）
这个比赛要求用1024字节以内的JavaScript代码实现一个效果。第一届的众多参赛作品充分展示了JavaScript语言的强大和无限潜力。精彩作品包括：
冠军作品用1023字节实现了超级马里奥游戏。
亚军则是带人工智能的国际象棋（水平不错，反正我下输了一盘）。
季军是带音乐的俄罗斯方块。
第二届则要求大家围绕圣诞主题展示身手。这里有更多奇思妙想，你也可以参加！3D圣诞树的代码如下：
M=Math;Q=M.random;J=[];U=16;T=M.sin;E=M.sqrt;for(O=k=0;x=z=j=i=k<200;)with(M[k]=k?c.cloneNode(0):c){width=height=k?32:W=446;with(getContext('2d'))if(k>10|!k)for(font='60px Impact',V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)':V+(147+I)+','+(k%2?128+I:0)+','+I+',.5)':'#cca',i<7;)beginPath(fill(arc(U-i/3,24-i/2,k==13?4-(i++)/2:8-i++,0,M.PI*2,1)));else for(;x=T(i),y=Q()*2-1,D=x*x+y*y,B=E(D-x/.9-1.5*y+1),R=67*(B+1)*(L=k/9+.8)>>1,i++<W;)if(D<1)beginPath(strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'),moveTo(U+x*8,U+y*8),lineTo(U+x*U,U+y*U),stroke();for(y=H=k+E(k++)*25,R=Q()*W;P=3,j<H;)J[O++]=[x+=T(R)*P+Q()*6-3,y+=Q()*U-8,z+=T(R-11)*P+Q()*6-3,j/H*20+((j+=U)>H&Q()>.8?Q(P=9)*4:0)>>1]}setInterval(function G(m,l){A=T(D-11);if(l)return(m[2]-l[2])*A+(l[0]-m[0])*T(D);a.clearRect(0,0,W,W);J.sort(G);for(i=0;L=J[i++];a.drawImage(M[L[3]+1],207+L[0]*A+L[2]*T(D)>>0,L[1]>>1)){if(i==2e3)a.fillText('Merry Christmas!',U,345);if(!(i%7))a.drawImage(M[13],((157*(i*i)+T(D*5+i*i)*5)%W)>>0,((113*i+(D*i)/60)%(290+i/99))>>0);}D+=.02},1)
实现原理可以参考作者的博客。
更新：刚才发现作者原来还实现过之前也在社区里引起热议的多个作品：
Enjoy！
扫一扫
5799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
