This was supposed to be a kind of tutorial, but I got distracted along the way and it devolved into a demo.

Dwitter 3D "engine"

Or "How to write shaded and animated 3D scenes in <140 chars of javascript"

  Our code is called 60 times per second.
  t: Elapsed time in seconds.
  S: Shorthand for Math.sin.
  C: Shorthand for Math.cos.
  T: Shorthand for Math.tan.
  R: Function that generates rgba-strings, usage ex.: R(255, 255, 255, 0.5)
  c: A 1920x1080 canvas.
  x: A 2D context for that canvas.

Here's a circle drawn with 2000 fillRect calls:

Simple shading - color determined by the angle.

Let's make it into a tube, instead of using 960 as the horizontal center we'll use i.

Not very solid. We can fix that in a few ways. Best not to draw more than 2000 rects per frame for performance though.

So, either lower resolution, bigger rects or a shorter tube.

Well, that's a start I guess. Let's center it.

And use larger rects.

Let's move it up and down...

Now - let's try attaching our up/down motion to a change in lighting. The idea is to make it look like tube is moving above and below the light source.

Yeah, ok, I can live with that. We can sort of fake specularity by raising our lighting coefficient S(i-S(t)) to an odd power.

Odd powers mean that negative numbers stay negative. Using even powers will get you highlights on the inside as well - which may or may not be a good thing.

Let's add some color.

896 is 1110000000 in binary, or 128*7, so i&896 gives us a change in hue every 128 iterations.

Too much contrast!

And let's make the whole thing rotate along with the light source.

Make it bigger by stretching the Y portion and updating the sizes in fillRect. Width will remain as is, so our circles will turn into ellipses, which will also help with the 3D feel.

Flip x and y:

Recenter and lose the motion

Extract the radius and modulate it

This messed up the lighting. Since the radius sometimes goes negative, there's no highlight on the bottom now. Simple solution - square the radius so it's always positive.

Let's lose the colors, and just keep the lightness component. Maybe add a small constant to the radius.

Change lighting to light the inner part too.

And change the light direction.

Maybe paint the thing gold?

Hey! We've got some sort of a golden chalice thing with nasty edges! Let's try lower res (-1 is invalid as a canvas width, so it gets set to the default, which is 300).

Edges still pretty nasty but we shaved off a few chars. Shave a few more.

We can fix the top of the chalice by adding i/66 as the alpha in our rgba.

And the bottom by moving it offscreen.

Now, shave off a bit more and add brightness.

Scale up

TA-DA!

Now go make some tiny 3D demos :)