Canvatorium Recap Nine
A review of 2D card windows and updates to the website. Bonus: I’m starting to build labs with Three JS in addition to Babylon JS.
New Labs
Over the last few weeks, I’ve been busy working on 2D card window labs. Check out the demo reel:
I started this small series by generating some sample data with the help of ChatGPT and DALL-E. I chose a handful of my favorite people from computing history. It wasn’t important that the data be accurate, I just needed something to show on the cards.
Check out each of the labs in the series.
Revamped Labs
I only had time to revamp one of the legacy labs, Lab 008.
Other Updates
I’ve continued to make some small changes to the website to better support the Canvatorium project.
- I created a simple prototype WordPress Block that I can use to embed the scenes for each lab. Read more about it.
- I started working with Three JS! I’ll be building labs with Three JS soon, but for now I’m focused on learning the basics. I created a new section of the project called Benches where I can explore basic 3D concepts before taking them to the Labs. I don’t know if I’ll get around to publishing many of these, as they are intended to be very simple learning tools. You can find them in the repo in the benches directory.
- I also plan to build Labs with React Three Fiber, but those will be built in a separate codebase.
- Numbering: Labs and Benches that start with a 0 (001, 002…) are built with Babylon JS. Those starting with 5 (500, 501…) are built with Three JS. I’ll have to work PlayCanvas in there somewhere (1000+?)
- I added a new About section to the Canvatorium landing page, quoted below.
Canvatorium is a long-term side project where I can explore Spatial Computing UI/UX. It’s a place where I can test ideas and build small components for my other projects, many of which I can’t talk about. Developing and learning in public is my favorite way to improve as a developer and Canvatorium is my way of doing that.
The project started in early 2022 as a Vue JS and Babylon JS project. I created around thirty labs before I got derailed with some other work. In 2023 I decided to revamp the project. I had made some mistakes in the structure of the legacy project, so I wanted a fresh start. I quickly built a simple project structure using Nuxt 3 and Babylon JS.
Instead of building a standalone website for Canvatorium Revamped, I created a way to embed each lab in a new WordPress custom post type. I can work on the Nuxt project and push new labs to a Vercel server when they are ready. Then I can publish the labs on my blog. This lets me keep the 3D scene, lab notes, images, and videos all in one place. The code for the Nuxt/Babylon project is on GitHub.
I can use this hybrid project structure to extend the project to other 3D frameworks. I have plans to start creating labs in PlayCanvas, React-Three-Fiber, and A-Frame.