aesthetic programming
This was a talk I gave at this year’s Roguelike Celebration, the annual mini-conference for roguelike games and procedural content. This year, I gave a short presentation on how to use Three.JS to create web-based CAD tools to produce 3d-printable models.
In the talk, I show my web-based greeblie modeler, then I walk through how to create a simple tool to make a box of a given size and export it as a 3d printable STL file. To see the whole talk, head here.
This was a project to create procedural flowers using pure WebGL. All of the geometry and textures are generated via code, and the only external library used is glMatrix. The flowers are also generated using a seed derived from lat-long coordinates, so specific flowers can be generated for specific locations. To see it in action, head here.
Step 1: Flat leaves
The project happened over the course of about a week and a half. I started by generating flat, 2d versions of leaves:
I started by implementing Bezier curves, then using two cubic curves to set the shape of the leaf edge and generating faces to fill in the contents. I also set up a simple shader to have the center of the leaf be a bit red, fading to green at the edges. See this version head here: http://www.adrianherbez.net/glflower/01/.
Step 2: 3d Leaves
Once I had the basic 2d leaf working, it was time to add additional cubic curves to make it bend backwards along its length as well as to curve gently away from the spine of the leaf.
To see this in action, head here: http://www.adrianherbez.net/glflower/02/.
Step 3: Adding a Stem
Once I was happy with the leaf shapes, I added in a gently curving stem, and added leaves along the length.
This also had its own shader, but with the color gradient changing along its length. See it here: http://www.adrianherbez.net/glflower/03/
Step 4: Expanding leaves to petals, normals
At this point, it was time to move onto the flower itself. I refactored the code for the leaf to be more general, making it a general class for creating geometry from sets of curves (XY, XZ, and YZ). By changing the curves, it was easy to go from pointy leaves to more bell-like petals.
I also added in proper normal calculations for the faces, which also meant writing a normal shader for easy debugging. All of the geometry is rendered double-sided, with one side rendering with the normal color and the other either red (for petals) or green (for leaves).
See this version here: http://www.adrianherbez.net/glflower/04/
Step 5: Lathed Geometry
In order to create the central part of the flower, I created a LathedGeometry class that could take a curve and spin it around the Y axis to generate a sealed piece of geometry.
See it in action here: http://www.adrianherbez.net/glflower/05/. Each refresh of the page makes a slightly different model.
Step 6: Putting it all together
Now that I had all of the parts I needed, I put it all together into a full flower, with a stem, leaves, a central element, and petals. 
The colors look a bit crazy, but that’s because I was still using the normal shader as a diagnostic. It makes a lot more sense if you see it moving- to do that, head here: http://www.adrianherbez.net/glflower/06/. Moving the mouse in the canvas will change the angle of the flower (added that in to make it easier to see what was going on).
Step 7: Colors!
With all of the geometry in, I started working on better colors for the shaders.
See it in action here: http://www.adrianherbez.net/glflower/07/.
Step 8: Lat-long based seed values
Now that the flower was close to done, I turned my attention to adding support for a lat/long-derived seed value.
Once set, the same seed is used for all the randomized generation, allowing any place in the world to have its own unique flower. At this point, the colors were still always the same though. See it here: http://www.adrianherbez.net/glflower/08/
Step 9: Finishing Touches
I was pretty happy with things at this point, but added a few things here and there to provide some polish, namely:
– randomized colors for the petals
– modification of the leaf shader to have stripes on the underside
– changed the background color to a nice medium gray
If you’ve made it this far, thanks for reading! Be sure to see the final result here: http://www.adrianherbez.net/glflower/.
Also, if you’d like to have a look at the code, it’s available on Github here: https://github.com/aherbez/glflower
Lately, I’ve been working on a system to display virtual books in a browser as fully 3d objects using Three.js. While there are still lots of things I want to add, it’s finally at the point where I feel like it’s worth sharing.
The system loads data from archive.org and uses it to create a 3d model of a book. The book can be opened, and pages can be flipped, allowing the user to read the entire contents. The current iteration is hard-coded to load just one book (The Wizard of Oz), but I’ll be expanding it to pull from the rest of the Internet Archive’s extensive collection.
All of the geometry is procedural, allowing for books of any size and proportion. The texture used for the cover is also procedural, allowing for any color of book, and for proper rendering of title and author along the spine.
I recently made a second PKP puzzle for my girlfriend’s niece. The puzzle revolves around a box that once belonged to Cora Aldencamp, a former PKP member. The box contains a series of stamps that can be used to uncover the code needed to unlock a secondary (virtual) box.
Once the correct code is entered, the user can print out a PDF that can be cut and assembled into Cora’s lost journal, which contains a further hidden message.
To see a full album of the build process, head here.
To try the web-based component (implemented in WebGL via Three.js), head here.
If you want to make your own copy of Cora’s journal, grab the PDF here.
Follow