Aldream

Articles

Pointillism, depicted

To conclude my series of articles describing the tricks I learned and used for the JS1K Spring-2013 challenge, I will now explain how « Pointillism » (js1k / local) was done, since it received such nice reviews.

I will thus cover the lightweight procedural method used to generate the landscape, and the pointillist-like rendering.

I will assume you've already read my previous articles (Mesh Breeding and especially Painter's Algorithm), since they already deal with the basic notions of 3D generation and rendering.

See the whole article.

Mesh Breeding

Morphose was the first demo I posted for the JS1K Spring-2013 challenge. The idea came when I was trying to apply my simple 3D renderer to different kind of scenes, while my head was buzzing with a resurgent interest in the demoscene. Morphose just sprouted out of this context, almost by accident.
I was trying to tesselate a planet, discovered cube-mapping, and the next moment I was observing the strange offspring a cube and a sphere can generate when mixed. Some tweakings later, I had a new demo for js1k...

Now in this article, I will try to formalize the whole process, covering the meshes generation, the tweening, the tweaking, etc. This demo is quite simple, but I found some results interesting, and I hope you will.

See the whole article.

Pointillism

Pointillism - Demo, Pointillist Spring Landscape

I've updated my portefolio with the last versions of my js1k demos.

I've been able to slightly improve the colors and controls of Loom, while implementing another landscape demo, Pointillism, using almost the same procedural method but a totally different rendering step.

Its visual aspect may not seem as clean as for the Painter's algorithm-based demos, but it gave me the possibility to add more dynamism to the composition.

See the updated portefolio

The Painter's Algorithm

This article is the first of a series aimed to describe and formalize the different methods and tricks used in my demos for the JS1K Spring-2013 challenge. I had much fun participating, and learnt a lot, so I will try to spread my enthousiasm.
The main topics will therefore be 3D procedural generation, rendering, and how to get all this fit in 1024 bytes.

Today, we will deal with « how to easily render a 3D scene in a 2D canvas », presenting one of the simplest method for that: the Painter's Algorithm.

Through a mix of maths and code, we should end with a simple example.

See the whole article.

Morphose

Morphose - Demo, Mesh Tweening

I had so much fun implementing my minimalist 3D renderer, that I wanted to try to apply it to something else than landscapes.

So I started writing small functions to build various geometries ans then display them, until it came to me that I could make an old-school demo out of that.

Here is the result: the Painter's algo, a cube, a sphere, and a chaotic tweening between both geometries to generate pseudo-random shapes, in 1020 bytes.

To get some feedback, I submitted it on JS1K (actually, I posted it before Loom, as only the last entry per author will compete. And I still have a preference for my landscape demo, which also fits the competition's theme...).

See the demo

Loom

Loom - Demo, Landscape generator

A year ago, I translated and personalized a Matlab school-project, about procedural generation and 3D rendering, into a JS demo. It was quite heavy (I was for instance using sylvester.js to handle matrices and vectors), slow and somehow buggy, but at that time I was satisfied with all I learned from doing it, and had other projects to take care of.

Then I discovered the JS1K challenge, and decided that if a new edition should come, I would try to optimize my "landscaper" to submit it.

The new edition finally came. It was a real challenge for me to crush my old and immature demo into 1024 bytes (1023B in fact). In the process, I learnt many mathematical or programming tricks, making it totally worth the efforts.
Moreover, I ended up with a demo not only lighter, but faster and more detailed than the original one! Feedback is most welcome!

See the demo

404-Windy & 404-Acid

Today's demos are actually more experiments gone wrong than real displays, but... well, it was fun to make, and the occasion to apply some of my readings about DOM manipulation or CSS animations / 3D transforms.

See the DOM demo or the CSS one

Beziering

Beziering - Demo, Bézier tracer

So let's inaugurate the demo section with a small canvas application I made some time ago, after reading some interesting slides made by Steven Wittens, aka Acko.
I just tried to illustrate my own way the graphic method to draw Bézier curves.

See the demo

Let's start again

After forsaking my previous website for such a long time, I decided to shut it down, and build a new one from its ashes. I will do my best to add new entries as regularly as I can, by sharing and describing the experiments I do on my spare time.

While designing this website, I tried to apply some new technologies, playing with CSS3 and HTML5. I'm not quite satisfied with the current result yet, and I'm still working on some improvements, so the experience may change in the coming weeks... Wait & See.

In the same time, I will start pushing online some demos I worked on those past weeks. Articles about the interesting notions I faced while implementing them (3D rendering, procedural generation, Bézier curves, JS minification, DOM traversal, etc) should follow soon.