JS1k 2013 - 1507 - Details - A sunny JavaScript golfing competition

_='dgX=R=r2;Y=.6;JL=l=0&[TN,5,Z=9,h=8];(D9>l;){i=p*oO;dh/;(++l]i)(j=p;jv=	N@iP|0jP|0],w=i*p+j,l][w&&(i%2?*2++p]+/4:(v+	+oP:+	P:vh@Y-&6>]?6:;o=i=pir/}g;setInterval(m=-Zw=-KZz=Yx=KYb=J;J%290*Tg=[],); (j=1e4;jtw,k=@R-2*ri=l,lL/r+.5|0,p=h,hL/r%1,F=h>p,F=N*i+l]+(C(!Cv=F-X*z-3,Um,f=z*v+(I=m*U+w*t)*x,v=(v*x-z*I^H+H,I=(w*U-m*t^W+W,f<p=v*2*W+I]p&f,p=],F-=t+(p-h*]-(1-h)**52,Style="hsla("+[p?25Q+bQ*4:7pA*3Q:FG(u=F-bA:5.2<FA*t/5:6.05<pAQ*2:6<pA:1.6+*.8b*l*i/47*f/3J/13)*17G.6]+")",$I,v,t=u/50+3-T,t)));++J},16)down=0}up}moveZ*X/W,Y=Y/H)}NnX+=f.dE|-f.DE}$0,0,W=c.wV#WVO8,H=c.hB#HB-21W/function(f){Math.;onmousecos(+orandom()=[];	lO][u]-*F-F@d[wa.fill25@6<=2),--;wheelLO1-X*f.client)+for||(d[u=T/87)g[+1])j%2?(v#=inner$Rect(&]=@*(A?tBeightCF?p:hEeltaYG"%",Ksin(L=kN=oO-1P/2Q/pVidth^)/f*';for(Y in $='^VQPONLKGECBA@&$#	')with(_.split($[Y]))_=join(pop());eval(_)

Description

Pointillist representation of an animated landscape: watch Spring comes and passes, and moving shadows casted by clouds. ===Controls=== - Move the mouse to fly around. - Drag (keep left click down and move) to fly around, observing a lighter version of the landscape - Use the wheel while dragging to draw near or observe from afar. - F5 / Actualize the page to generate a different landscape. - Change the ratio of the window if you find the relief too flat or too steep (it should look fine with a landscape ratio, but you can have different tastes...) If you let go the click while moving too fast,you will probably get some glitches: wait a tenth of second after dragging to prevent it. ;-) Also, if you keep zooming, you will eventually reach a negative distance, inverting the controls. The canvas is regularly reset (~40s), to prevent the page to crash because of the growing memory size of the more and more detailed display. ===Description=== This time I use the same landscape generation method than in my previous demo, but with a totally different rendering algo, inspired by @romancortes 2012 demo (romancortes.com/blog/1k-rose/). This "pointillist" method gives a result a bit less "clean" than with the Painter's algo, but is much lighter, in terms of processing time and bytes. And that's how I've been able to add some animations... This demo features: - A detailed, kinda-realistic, random landscape (moutains, islands, beaches, etc) - Lightning (fixed sun - no shadows or reflects) - Vegetation (sun-bathed hills, forests in the coombs, alpines above, etc - imagination can be required) - Snow, found on the peaks or in the shady coombs, covering most of the landscape when Winter reigns and melting away with the coming of Spring (so influenced by altitude, lighting and time) - Shadows casted by (unseen) moving clouds on the landscape - Some pseudo-random effects to try to make the water texture less uniform - Controls ===Thanks=== - @aivopaas for JSCrusher - @romancortes for the inspiration and nice articles - @njbenji & jonasbru for their remarks - @kuvos for this challenge

Base64 encoded

Xz0nZAhnCFg9Uj1yEDI7WT0uNjscSkw9bD0wJltUThAsNSxaPTksaD04XTsXKEQIOT5sOyl7aT1wECpvTztkCGgvEDsXKBwrK2xdCGkSKRcoaj1wO2oSdj0JTkBpUHwwFmpQfDBdLHc9aSpwK2osHGxdW3cmDCYoaSUyPx8qMisMK3BdKwwdHi80Oih2Kwkrbx5QOh8rCR0eUDp2FmhAWS0HEQwmNj4MXT82OgweO289aT1wEmkSci8QfWcIATtzZXRJbnRlcnZhbCgCbT0tBVoRdz0tS1oRej0FWRF4PUtZEWI9BUobO0olMjkwKlQYZz1bXSwBKTsXIChqPTFlNDtqEnQUdyxrPQdAUi0yKnIRaT1sLGxML3IrLjV8MCxwPWgsaEwvciUxLEY9aD5wLEY9GU4qaStsXSsoGQtDFigGHQshQxF2PUYtWCp6LTMsVRRtLGY9eip2KyhJPW0qVSt3KnQpKngsdj0odip4LXoqSV5IK0gsST0odypVLW0qdF5XK1csZh08HHA9dioyKlcrSV0YHHAmZixwPQYdXSxGLT10ECsocC1oKhldLSgxLWgpKgYeKjUyLA5TdHlsZT0iaHNsYSgiK1sPcD8yNVErYlEqNDo3EQ9wQSozUTpGRyh1PQ9GLWJBOjUuMjxGQSp0LzU6Ni4wNTxwQVEqMjo2PHBBOjEuNisHKi44FmIqBWwbKgVpLzQ3KgVmLzMWSi8xMykqMTdHLjZdKyIpIiwkSSx2LHQ9dS81MCszLVQsdCkpKTsrK0p9LDE2KQRkb3duGj0wfQR1cBoQfQRtb3ZlGhhaECoVWC9XLFk9FVkvSCl9BBNObhMaGFgrPWYuZEV8LWYuE0RFG30BJDAsMCxXPWMud1YjV1ZPOCxIPWMuaEIjSEItMjERVy8QAmZ1bmN0aW9uKGYpewNNYXRoLgQ7b25tb3VzZQUDY29zKAYZK28HA3JhbmRvbSgpCD1bXTsJHGxPXVt1C10tBipGHS1GHkAMZFt3DmEuZmlsbA8yNUA2PBA9MhEpLBItLTsTd2hlZWwUTE8xLVgqFWYuY2xpZW50FikrF2Zvchh8fCgZZFt1Gj0CVBsvODcpHGdbHSsxHl0pH2olMj8odiM9aW5uZXIkDlJlY3QoJl09QCooQT90QmVpZ2h0Q0Y/cDpoRWVsdGFZRxYiJSIsSwNzaW4oTD1rTj1vTy0xUC8yUS9wVmlkdGheKS9mKic7Zm9yKFkgaW4gJD0nXlZRUE9OTEtHRUNCQUAmJCMfHh0cGxoZGBcWFRQTEhEQDw4MCwkIBwYFBAMCAScpd2l0aChfLnNwbGl0KCRbWV0pKV89am9pbihwb3AoKSk7ZXZhbChfKQ==

Original source

// Sorry, I had no more time to do a "beautified" version of my code. But I will try to post an article on my website in the coming days to describe it.
// For now, here is the original source, before giving it to JSCrush:
d=[];g=[];X=R=r=22;Y=.6;g[J=k=l=0]=[T=o=2,5,Z=9,h=8];for(D=[];9>l;){i=p=2*o-1;d=[];h/=2;for(g[++l]=[];i--;)for(j=p;j--;v=g[l-1][u=o*(i/2|0)+j/2|0],w=i*p+j,g[l][w]=d[w]=(i%2?j%2?(v*2+d[w+p]+d[w+1])/4:(v+g[l-1][u+o])/2:j%2?(v+g[l-1][u+1])/2:v)+h*(Y-Math.random()),d[w]=6>d[w]?6:d[w]);o=i=p--;i--;r/=2}g=[];a.fillRect(0,0,W=c.width=innerWidth-18,H=c.height=innerHeight-21),W/=2;setInterval(function(f){m=-Math.cos(Z),w=-Math.sin(Z),z=Math.cos(Y),x=Math.sin(Y),b=Math.cos(J/87);J%200*T||(g=[],a.fillRect(0,0,W=c.width=innerWidth-18,H=c.height=innerHeight-21),W/=2);for (j=1e4;j--;t=k-11-X*w,k=Math.random()*(R-2*r),i=l,l=k/r+.5|0,p=h,h=k/r%1,F=h>p,F=d[u=o*i+l]+(d[u]-d[u+o*F+1-F])*(F?p:h)+(d[u+o+1]-d[u+o*F+1-F])*(!F?p:h),v=F-X*z-3,U=k-11-X*m,f=z*v+(I=m*U+w*t)*x,v=(v*x-z*I)/f*H+H,I=(w*U-m*t)/f*W+W,f+1<g[p=v*2*W+I]||(g[p]=f,p=d[u+o+1],F-=t=2+(p-h*d[u]-(1-h)*d[u+o])*52,a.fillStyle="hsla("+[25*(6<p?25/p+b/p*4:7),25*(6<p?t*3/p:F)+"%",(u=25*(6<F-b?t:5.2<F?t*t/5:6.05<p?t/p*2:6<p?t:1.6+Math.random()*.8)+b*Math.cos(l/87)*Math.cos(i/47*Math.cos(f/3)+J/13)*17)+"%",.6]+")",a.fillRect(I,v,t=u/50+3-T,t)));++J},16);onmousedown=function(f){T=0};onmouseup=function(f){T=2};onmousemove=function(f){T||(Z=2*f.clientX/W,Y=f.clientY/H)};onmousewheel=onwheel=function(f){T||(X+=f.deltaY|-f.wheelDeltaY/87)}

JS1k: The JavaScript code golfing competition

2013 - Spring!

Pointillism