Playing around with Maths and pixels ...
Sub-repo containing some experiments. Those I'm pleased enough with can be seen there: http://aldream.net/demo.
Spring is coming, The mountains take off their white mantle, Random mesh of life and ice, lakes and rocks.
See it here
- Move the mouse to fly around.
- Use the wheel to draw near or observe from afar.
- Click to enjoy the view (may take ~1-3s to display) or resume your journey.
- 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...).
Final JS1K entry for the Spring'13 edition. Size: 1023 bytes.
This demo 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. ;-)
"They said I could be anything..." - 3D Mesh
See it here
- 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...).
First JS1K entry for the Spring'13 edition. Size: 1020 bytes.
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.
Intoxicated Bézier curves tracer
See it here
- Click to give it some life, click again to get some peace.
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.
See it here
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...
See it here
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?)