tl;dr: I made a silly 3D web page thing.
Yadda yadda:
For entirely nostalgic reasons, I’ve been buying a bunch of paperback books published by the largest Norwegian publishing house, Gyldendal, in the 60s and 70s. I guess these are the Norwegian equivalents of what Penguin was at the time: Cheap, but nice and with a nose for quality.
As a teenager (when the series had wound down), I’d use to walk around the library, looking at these artefacts and thinking “I should really read all of these”. I think one of the triggers for this weird desire is that they’re numbered, to it’s conceivable to read them all. Even in the correct order!
But the library didn’t have the oldest books in the series, so I never got started… But it’s a thought that has reoccurred to me over the years, and…
Look what happened:
I started buying them the other week. They’re still cheap: Inflation-adjusted they’re cheaper now than when they were published. Which is both nice and not-so-nice: It can be harder to find cheap books, because people don’t put them up for sale, as it’s not worth the bother. But I’ve bought 60% of them now (that’s 25% of them in the picture up there).
While doing this, I was also thinking about 3D. Perhaps because many of the covers are kinda pop-artey. And perhaps this nostalgia trip made me think about the demos I made as a teenager. And I’ve never done any 3D programming, ever, so I sat down and started typing some Clojurescript… and:
The stupid source code is here, and the live web site is here.
This is only the second Reagent thing I’ve written, and it’s… not a very Reagent-ey single page app. The main problem is that I have to do some low-level DOM fiddling, and I didn’t find a way to do that with Reagent’s “proper” way of doing things. For instance, when going from an animation to a transition, I have to stop the animation, query the 3D state of the object, copy that over to the object’s style as is, and then start the transition. Try as I might, I couldn’t figure out how to do that in Reagent without glitches, so I just resorted to altering the DOM directly (adding styles and stuff on the fly).
Working with CSS 3D, as a total novice, was pretty fun. You can play around with the 3D stuff in Emacs and see the changes immediately in the browser. Getting to grips with how to do perspective, or not, also took a few tries. For instance, when the books glide out of the library, the other faces haven’t loaded yet, so it just glides out straight towards the viewer, hiding the other faces. And then only starting to turn once the images have loaded. So that bit has a way-off perspective, while it’s more fun to have a closer perspective when the books are spinning…
Lots of trial and error. There’s 98 commits.
¯\_(ツ)_/¯
The annoying thing about CSS 3D is, of course, that there’s a number of browsers out there. The site looks somewhat choppy in Firefox, very smooth in Chrome, and there are some glitches in Safari, which seem to stem from Safari not being able to determine (fast enough?) what objects are behind what other objects when there’s a lot of them, and the Z axis different of the objects is less than a couple of pixels.
Oh, and I got to use a new tool:
To measure the spines for scanning. Fun!
The confusing title of this post is from an album by Max Tundra: