Ben Crowder / Blog

Blog: #webgl

Some quick toolmaking updates:

  • Not very long ago I felt like Storybook was a bit cumbersome, and in a fit of consolidation glee I decided to trash it and instead use Arc for my writing. I got as far as adding wiki-style links and backlinks (still helpful additions), then realized Arc wasn’t actually a good fit after all — my brain apparently doesn’t like having the story drafts in among all the other notes. It seems to like things in separate bins.
  • So Storybook lives after all. There are, however, gobs of cruft that have built up over the years — several features I tried out and then ended up not sticking with — so I’m going to rewrite it from scratch using FastAPI and plain text storage (as mentioned before). Leaner and more focused. Looking forward to it. (On this I’ve done some preliminary planning and have written a script to export the old data in the new plain text format, but that’s it.)
  • I’ve been using Arc to plan the editing of the novel. It works, but I’ve also found myself wondering if an infinite canvas tool like Figma or Milanote might be even better, with the power to break out of the cold confines of a linear column of text. You can probably tell where this is going, can’t you. And you’re right: because it foolishly doesn’t seem like that hard of a problem, and because I want full control (ha, what an illusion) over both the experience and my data, yes, I’m making my own infinite canvas web app. It’s called Space. It’s in the early amorphous stages of planning and will likely stay that way for a while because I’m in the middle of the semester. But I’m excited about it. (And have been for a while; this project’s been on the docket for over a year.) I initially planned to use canvas, but before I settle on that I’m going to try WebGL; if it works, it would allow for much more interesting possibilities, along the lines of the spatial interface ideas I alluded to a while ago.

Reply via email or office hours

Bubble Pursuit

For my graphics class earlier this year I had to write a small game. Ended up making Bubble Pursuit:

bubble-pursuit.jpg

Super simple game, written in JavaScript using Three.js. I used Tiled for the map. A fun little project.


Reply via email or office hours

By way of the Glue chat comic (interesting ideas, by the way), I came across John Palmer’s excellent posts on spatial interfaces and spatial software. Mmm. As a productivity nerd and a hobbyist toolmaker (there are probably ten or so personal tools I’ve been using over the past several years that I’ve never blogged about, but that’ll change soon), I’m very, very interested in these kinds of ideas. Particularly in using 3D interfaces for productivity. I’ve thought a bit about doing that in VR, but I hadn’t really considered building tools in 3D even outside of VR.

No concrete ideas yet, just little threads leading off to various areas that I’m interested in exploring (todo lists, website/blog engines, writing/outlining tools, etc.).

At this point the plan is to use Three.js for prototyping some ideas to see if it’s viable. My initial sense is that for the kinds of tools I’m interested in, I’ll probably need a good way to render/edit text from within Three.js, and it looks like rendering to a canvas and then using the canvas as a texture will work. Anyway, more to come.


Reply via email or office hours

Spin

Introducing Spin, a game I threw together hastily for a little game jam I did with some friends.

Basically, you’re in a maze and have to get out before the timer runs out (ten minutes, which I display as 600 seconds because hey, I didn’t have much time) (pun not intended?). The world rotates 90° every five seconds with gravity changing as well, and the walls and obstacles hurt you if you touch them. And that’s about it. I threw most of the level together in, oh, about twenty minutes, so gameplay may end up being more frustrating than fun. But there is an exit, I promise. It may just take several rounds to find it without dying.

Technology-wise, Spin uses Box2D for the physics and THREE.js (WebGL) for rendering. I recommend playing it in Chrome, since Firefox’s WebGL wasn’t hardware accelerated (at least on my Mac) and was dog slow. (Safari works fine, but you have to enable the developer menu and then enable WebGL.)

Update: I realized this morning that it would be fairly trivial to add a first-person mode, since all I’d need to do is change the camera. So I did. It’s more boring of a game — with the gravity and world-rotation gone, it’s just maze exploration — but it’s kind of cool that WebGL makes it easy to do both kinds. The README has more info on how to activate the first-person mode.


Reply via email or office hours