Blog

Code 39: Aahar, a website that is a floor

· coding

Aahar is a website that is a floor. One painted floor seen from above, the food laid out on it for everybody to come and eat, and everything else (the menu, the meal plan, the note about who we are) set down beside the pots like boards. The project page runs the whole kit live. This is the notebook behind it, and most of the notebook turns out to be old Processing sketches wearing an apron.

The floor

You scroll and the floor moves under you. Press a link and the camera flies to the next board. There is a lot to show, a whole kitchen's worth, and the only way I found to show a lot simply is to show less at a time.

Chalk

The writing is chalk, except it is real type. An SVG turbulence filter sits over every word and pushes its edge around by a pixel or two: a rough edge for the titles, a gentle one for the small labels, so a date still reads at the size of a date. Under the hood that filter is Perlin noise, the same weather I used to lay over a screen for particles in Code 11. Back then I carried a stranger's noise file from sketch to sketch like a spare tyre just to get a different grain. Here it only has to rough up a letter.

The two big links, try one and buy multiple, are drawn. A crayon outline sits there at rest. Hover and a floral line comes in from the left; press and the colour fills the same way, and you are already flying to the next board while both of them fade out under you.

The pile

The pots at the top of the project page are my oldest habit. In the flock that followed me home I made one dot want a place to arrive, then taught its friends to keep a little distance. It still spells my name on the homepage. The Aahar dishes are that dot with a dinner on it. Every dish wants the centre, but the title lives in the centre, so what they really want is the ring around it. They shoulder each other aside, heavy drag takes the swing out of them (the overshoot and settle I got hooked on in Things that fall), and the ring settles on its own.

Only round dishes made the cut. I measured every cut-out photo and kept the round, symmetrical ones, because a lopsided plate in a ring of circles reads as a collision bug. So it is circles again, which is what my hand does when my head is elsewhere, only now they are katoris.

Two things the book never covered. Pots never overlap: after the forces, the positions themselves get corrected, a few passes every frame. And the title is a rectangle, so a pot tests against its nearest edge rather than a circle, or it lands on the A. On the site itself I placed most of the pots by circling spots on screenshots and reading the coordinates back, which is the least Nature of Code thing I have ever done.

Every few seconds the pot nearest the left edge gets up and leaves, slow at first and gathering pace, a walk to the door. A new one comes in on the right. It used to arrive at speed and bounce off the table. Now it fades in where there is room and eases into the ring, the way you would want a plate put down.

Two alphabets, one room

Bakbak One and Manjari carry the English, and neither has a single Devanagari glyph in it, so the Hindi button swaps the whole page to Baloo 2 and Mukta. The job is to make it feel like the same room. The Hindi sits heavier and a little taller, the layout shifts to give it space, and the round button always shows the language you would switch to, never the one you are in.

When you switch, the title letters blur in one at a time. That broke the first time I tried it: split आहार by code point and the vowel sign falls off its consonant. It has to be split by grapheme. I learned to pull words apart in Letters that misbehave. Hindi taught me where the seams actually are.

Clay

Every button is one terracotta photo, scaled up so no two show the same crop, with a highlight on the top edge and a shadow tucked under. Press one and the shadow goes and the highlight turns inward. The whole kit, pressed and at rest, is on the project page.

Keto, and the structure paying off

We just added a keto menu. Every diet on the board is a reading of the same floor: the plate changes, the rows change, the floor stays where it is. So keto went in as one more reading, a word in each alphabet, and its own boxes (breakfast, lunch, snack) where the other readings keep their rotis. Adding another sub-section was the easy part, which is the only compliment a structure ever gets.

The site is aaharmeals.com. The pile, the drawn buttons and the clay are running on the project page, in both alphabets. Where most of these habits started is in Nine years of Processing, and more of the same thread sits on the Design/Dev shelf. The next kitchen site went the other way, quiet on purpose: Fit Boss.