Loading..., by Aldream

●

Pointillism

1024B landscape generator (JS1K submission)

procedural generation, stochastic interpolation, painter algorithm
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

Final entry for JS1K Spring'13 edition. (see it here)

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
Source 1024B - works with the provided shim
```
_='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(_)
```
Take a look at the comments in the running script, or at my JS1K submission, to see the beautified source and get more technical explanations.
●

Loom

1024B landscape generator (JS1K submission)

procedural generation, stochastic interpolation, painter algorithm
Spring is coming, The mountains take off their white mantle, Random mesh of life and ice, lakes and rocks.

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.

Description

Made for JS1K Spring'13 edition, this demo didn't make it to the board, being replaced by my final one.

It uses the same rendering method as my other submission (see here too), the Painter's algorithm, simplistic but quite light.

The landscape is generated using a mix between the Midpoint displacement and the Diamond-square algorithms, starting with a 2x2 matrix to get a detailed 257x257 heightmap, which is then used to build the 3D mesh.

Colors are applied taking into account the height (water < beach < vegetation < snow) and an rough estimation of the incline for the luminosity. By playing with those parameters and using the flexibility of the HSL color system, it is thus possible to create various nuances of vegetation (meadows for the sun-bathed hills, forests in the coombs, alpines above - imagination can be required here) or to simulate the effect of the sun on the snow (only found in the shadows for the lower altitudes).

By the way, don't fly to close to the surface or you might get entangled in the mesh and unravel the whole world (well, you will actually just get some threads spoiling the view)... Also, if you keep zooming, you will eventually reach a negative distance, inverting the controls. Both are harmless, but now you won't be surprised. I hadn't enough bytes left to better handle the zoom, sorry.
As for "why only stroking and not filling the faces?", the answer is simple: I couldn't afford to do both. I found the gaps left by stroking interesting, like a reminder of the "substantial" part of emptiness in the universe fabric. ;-)

Thanks
- @aivopaas for JSCrusher
- @njbenji & jonasbru for their remarks
- @kuvos for this challenge
Source 1023B - works with the provided shim
```
_='d	g	R=r2;Y=.6;=0[o,5,Z=9,T=h=8];D	8>l;){i=p*o@;d	hg[++v=CQ_)+j_Aw=i*p+j,$wQ%2?&*2++p]+]!4:(v++o`&+`v)+h*(Y#6>]?6:]o=i=pirD[)k;kDZ++[ijECi+jAQ+kO-k)z=E+k*pAQO)y=E+oAy-=x+(z-y!r,"hsla("+[z?R/z:6#F*2/y:y)+"%",y@?x/Y:6.05<F*x/7:6<F:2/3)]+"%,"]}e^BfillRect(0,0,h=c.widUKWidU@8,r=c.hGKHG-21m=-LZw=-~Zo=LYx=~Yg	hq){]	j=9;j;vo,um,tw,].push(pCv+(k=m*u+w*t)*x,(v*x-o*k!p*r+r,(w*u-m*t!p*h+h)$910]}p=-l*p/40;g.sort(return f[3]-n[3]}qg)Style=$9]+l/p+")",BbegPaU(#BmovN87215487]#Vdown5,i=sete,9)up8,eVmove^ZX/h;YY/r=on^R+=f.dJ|-f.DJ/80};eVfunction(f,n){[l][-randomV]#BlN*r@1,for(};onmouse=--j]-R*	=[];^cleari#T=MaU.l]	i)j=p;j@][ud[w32*(6<A$);--;wheel/;Interval(=f.clientinBstroke+1g[lD[T]=2]=!)/#),$g&j%2?(v@-1A],Ba.C=o*Ed[uFz?xGeightJeltaYK=nerLcos(NeTo($O)(jQ(iUthV()^=_/2|0`]!2:ql  ~s(';for(Y in $='~q`_^VUQONLKJGFECBA@&$#!	')with(_.split($[Y]))_=join(pop());eval(_)
```
Take a look at the comments in the running script to see the beautified source and get more technical explanations.
●

Morphose

1024B 3D demo (JS1K submission)

mesh generation, tweening, painter algorithm
"They said I could be anything..." - 3D Mesh

Controls
- Change the camera orientation with the mouse.
- Click to generate an impulse, briefly affecting the mesh cohesion. Click several times to stack impulses and get a kaleidoscope-like effect.
- Press any key to switch between "immaterialness" (starting mode) or "reality" (i.e. to invert the depth...).
Description

First JS1K entry for the Spring'13 edition. (see it here)

This demo uses the Painter's algorithm to render the 3D mesh: after projecting each face on the coordinate system defined by the camera, we sort them by decreasing depth to get the painting order. Simple, but quite light (and it is possible to use this painting order to apply effects such as a depth fog).

The displayed shape is the result of a chaotic tweening between two pre-generated meshes, a cube and a sphere. To get a smooth tweening for the faces, the sphere geometry is created by mapping each vertex of the cube (cube-mapping method).

To reduce the "collision" effect when the camera enters the shape and to make the whole demo looks more "unreal", I decided to invert the depth order during the rendering process. You can still observe the original order by pressing any keys.

Alas, this demo wasn't running as smoothly with Firefox and Opera as with Chrome (and I couldn't apply most of the optimization tricks because of the specificity of this scene or the lack of bytes). So I decided to add a simple browser detector, to reduce the shape details for Firefox and Opera. I'm not fond of this exception, but I found the render lags even worse (and it was interesting to search a trick to detect the browsers in a minimal number of bytes...). Now that you're aware of the difference, I just invite you to give it a try on Chrome, if you want more details.

Thanks
- @aivopaas for JSCrusher
- @njbenji & jonasbru for their remarks
- @kuvos for this challenge
Source 1020B - works with the provided shim
```
_='X=navigatK.vendK?1:2;SCTt=Z=Y=F=U=4,Vv=[eg2-4f%2)x=v[fBy$1)Bz$2)BC	x,y,zd=sqrLx*x+y!+z*zS	x/d,y/d,z/d)Of=6;fi&ij&jkQ;kS	C	E,jE+1,j+1E+k,j+^k_=d,F++;V*eR-`97*g*2^(R)},Py=abs(g-e)/g;1>"hsl("+[263i/s),"47%",F*X*X/77]+"%)",Abeg#Path(Amov@87542187](()clickT97)mousemoveZX/W,YY/HkeypressU=-UOsetInterval(M,16)function(e,g){	[Math.=V(C--fSf])+e*]Al#@fK(cos(=[	[F]),.push(+.5|0return ;F # 9]AfillOb.onQ*e.client],--;)`47s#(Astroke=+i)s/4*X-2,Z+`31*(!*y#in$=v[(f+&=16/X;>Style=@eTo(sAa.B%3EV(iG=#nerJeightKorLt(O};Q=2^1-_S`t/';for(Y in $='`_^QOLKJGEBA@>&$#!	')with(_.split($[Y]))_=join(pop());eval(_)
```
Take a look at the comments in the running script, or at my JS1K submission, to see the beautified source and get more technical explanations.
●

Beziering

Intoxicated Bezier curves

canvas, bezier
Intoxicated Bézier curves tracer

Controls
- Click to give it some life, click again to get some peace.
Description

Some time ago, I read with great interest a presentation made by Steven Wittens, aka Acko, and I like "making things with Maths" too... Following his explanations and adding a personal touch, I made my own Bézier plotter.

This is in fact a direct graphic interpretation of De Casteljau's algorithm to evaluate Bézier curves.

Given a polyline P0 made of n segments (n+1 points). Every iteration #i of our algorithm, we take, for each oriented segment, the point situated at (i / MAX_ITE)% of the segment length, and we connect these points to build a new polyline P1 of n-1 segments. We recursively repeat this operation on the polyline and its descendants (P2 with n-2 segments, P3 with n-3 segments,etc), until we get a polyline of 0 segment, ie. a single point.

If we follow the path of this point through the consecutive iterations, we get a Bézier curve of degree n (while the moving segments extremities of a polyline PX follow Bézier curves of degree X).

The specificity here is that I use close polylines: the overlapping effect (by adding a segment to close them) allows me to virtually avoid the segments decrease every iteration (it thus could be possible to iterate infinitely, until reaching the limit state.

The Kinetic.js library is used here to handle various canvas layers easily.
●

404-Windy

#404 CSS animation

css animation, css 3D

A simple experiment using CSS animations and 3D transforms.
JS is only used beforehand to randomize the animations durations.

Don't search for any meaning here, I'm not sure either what I wanted to represent...
●

404-Acid

#404 CSS animation

dom manipulation

At first I was trying to implement a function to alter the text content of a DOM tree by inserting new node inside... (It is indeed a bit more complicated than it sounds, since you can't use directly innerHTML or innerText without breaking the tree by also affecting the HTML nodes it may already contain. You have to iterate through the whole tree to find every text-node leaf.)
... and the tests I was using slowly drift toward that... (Why am I sharing this, btw?)