JS1k: The JavaScript code golfing competition
2010 - The Original
High resolution animated 3d balls with brushed surface shading and depth-of-field effect (all fake).
- Author:
- AlteredQualia
- Twitter:
- @
- GitHub:
- Facebook:
- Google+:
- +
- Reddit:
- /r/
- Pouet:
- Website:
- alteredqualia.com
- Compo:
- classic
- Demo link:
- https://js1k.com/2010-first/demo/599
- Shortlink:
- https://js1k.com/599
- Blog post:
- please update here!
- Bytes:
- 1020
- Chars:
- 1020
- Submission
d=document;w=window;b=d.body;M=Math;C=[];U=300;N=250;i=s=t=0;function R(a){return M.round(a*M.random())}function S(a,e,j,g){a.clearRect(0,0,U,U);var f=e/2;f=a.createRadialGradient(e*.34,e*.7,e*.15,f,f,f);g/=70;f.addColorStop(0,"hsl("+j+","+(55+45*g)+"%,"+(35+15*g)+"%)");f.addColorStop(.5+.45*g,"#000");f.addColorStop(1,"rgba(0,0,0,0)");a.fillStyle=f;a.fillRect(0,0,e,e)}function A(){var a,e=w.innerWidth;for(i=0;i<N;i++){t=C[i];a=4*M.cos(M.PI*t.style.zIndex/70);t.x+=a*t.p;if(t.x>e)t.x=-200;if(t.x<-200)t.x=e;t.style.left=t.x+"px"}}function H(){s=R(360);for(i=0;i<N;i++){t=C[i];S(t.z,t.width/2,(s+160*t.y/1E3)%360,t.style.zIndex)}}for(var i=0;i<N;i++){var x=R(w.innerWidth),y=R(w.innerHeight),r=50+R(50),l=R(70),c=d.createElement("canvas"),z=c.getContext("2d"),s=c.style,h=200+160*y/1E3;c.width=c.height=2*r;s.left=x+r+"px";s.top=y+"px";s.position="absolute";b.appendChild(c);S(z,r,h,l);C[i]=c;t=C[i];t.z=z;t.x=x+r;t.y=y;t.p=1+l/80;t.style.zIndex=M.ceil(l)}document.onclick=H;b.style.overflow="hidden";setInterval(A,16)- Description
- High resolution animated 3d balls with brushed surface shading and depth-of-field effect (all fake). Click on the screen to get different colors. Works best in Chrome and Opera. Try running it full screen. This is a new demo, replacing my previous submission.
- Base64 encoded
ZD1kb2N1bWVudDt3PXdpbmRvdztiPWQuYm9keTtNPU1hdGg7Qz1bXTtVPTMwMDtOPTI1MDtpPXM9dD0wO2Z1bmN0aW9uIFIoYSl7cmV0dXJuIE0ucm91bmQoYSpNLnJhbmRvbSgpKX1mdW5jdGlvbiBTKGEsZSxqLGcpe2EuY2xlYXJSZWN0KDAsMCxVLFUpO3ZhciBmPWUvMjtmPWEuY3JlYXRlUmFkaWFsR3JhZGllbnQoZSouMzQsZSouNyxlKi4xNSxmLGYsZik7Zy89NzA7Zi5hZGRDb2xvclN0b3AoMCwiaHNsKCIraisiLCIrKDU1KzQ1KmcpKyIlLCIrKDM1KzE1KmcpKyIlKSIpO2YuYWRkQ29sb3JTdG9wKC41Ky40NSpnLCIjMDAwIik7Zi5hZGRDb2xvclN0b3AoMSwicmdiYSgwLDAsMCwwKSIpO2EuZmlsbFN0eWxlPWY7YS5maWxsUmVjdCgwLDAsZSxlKX1mdW5jdGlvbiBBKCl7dmFyIGEsZT13LmlubmVyV2lkdGg7Zm9yKGk9MDtpPE47aSsrKXt0PUNbaV07YT00Kk0uY29zKE0uUEkqdC5zdHlsZS56SW5kZXgvNzApO3QueCs9YSp0LnA7aWYodC54PmUpdC54PS0yMDA7aWYodC54PC0yMDApdC54PWU7dC5zdHlsZS5sZWZ0PXQueCsicHgifX1mdW5jdGlvbiBIKCl7cz1SKDM2MCk7Zm9yKGk9MDtpPE47aSsrKXt0PUNbaV07Uyh0LnosdC53aWR0aC8yLChzKzE2MCp0LnkvMUUzKSUzNjAsdC5zdHlsZS56SW5kZXgpfX1mb3IodmFyIGk9MDtpPE47aSsrKXt2YXIgeD1SKHcuaW5uZXJXaWR0aCkseT1SKHcuaW5uZXJIZWlnaHQpLHI9NTArUig1MCksbD1SKDcwKSxjPWQuY3JlYXRlRWxlbWVudCgiY2FudmFzIiksej1jLmdldENvbnRleHQoIjJkIikscz1jLnN0eWxlLGg9MjAwKzE2MCp5LzFFMztjLndpZHRoPWMuaGVpZ2h0PTIqcjtzLmxlZnQ9eCtyKyJweCI7cy50b3A9eSsicHgiO3MucG9zaXRpb249ImFic29sdXRlIjtiLmFwcGVuZENoaWxkKGMpO1MoeixyLGgsbCk7Q1tpXT1jO3Q9Q1tpXTt0Lno9ejt0Lng9eCtyO3QueT15O3QucD0xK2wvODA7dC5zdHlsZS56SW5kZXg9TS5jZWlsKGwpfWRvY3VtZW50Lm9uY2xpY2s9SDtiLnN0eWxlLm92ZXJmbG93PSJoaWRkZW4iO3NldEludGVydmFsKEEsMTYp- Original source
Original source not submitted